handle TypeScript side

docs/pages/api/table-pagination.md

@@ -29,7 +29,7 @@ A `TableCell` based component for placing inside `TableFooter` for pagination.
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">TableCell</span> | The component used for the root node. Either a string to use a DOM element or a component. |
 | <span class="prop-name required">count&nbsp;*</span> | <span class="prop-type">number</span> |  | The total number of rows. |
-| <span class="prop-name">labelDisplayedRows</span> | <span class="prop-type">func</span> | <span class="prop-default">({ from, to, count }) => `${from}-${to} of ${count}`</span> | Customize the displayed rows label. |
+| <span class="prop-name">labelDisplayedRows</span> | <span class="prop-type">func</span> | <span class="prop-default">({ from, to, count }) =>`${from}-${to === -1 ? count : to} of ${count}`</span> | Customize the displayed rows label. |
 | <span class="prop-name">labelRowsPerPage</span> | <span class="prop-type">node</span> | <span class="prop-default">'Rows per page:'</span> | Customize the rows per page label. Invoked with a `{ from, to, count, page }` object. |
 | <span class="prop-name">nextIconButtonProps</span> | <span class="prop-type">object</span> |  | Props applied to the next arrow [`IconButton`](/api/icon-button/) element. |
 | <span class="prop-name required">onChangePage&nbsp;*</span> | <span class="prop-type">func</span> |  | Callback fired when the page is changed.<br><br>**Signature:**<br>`function(event: object, page: number) => void`<br>*event:* The event source of the callback.<br>*page:* The page selected. |

docs/src/pages/components/tables/CustomPaginationActionsTable.tsx

@@ -159,7 +159,7 @@ export default function CustomPaginationActionsTable() {
           <TableFooter>
             <TableRow>
               <TablePagination
-                rowsPerPageOptions={[5, 10, 25]}
+                rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
                 colSpan={3}
                 count={rows.length}
                 rowsPerPage={rowsPerPage}

docs/src/pages/components/tables/tables.md

@@ -52,13 +52,26 @@ Here is an example of customizing the component. You can learn more about this i
 
 {{"demo": "pages/components/tables/CustomizedTables.js"}}
 
-## Custom Table Pagination Action
+### Custom pagination options
 
-The `Action` property of the `TablePagination` component allows the implementation of
-custom actions.
+It's possible to customise the options shown in the "Rows per page" select using the `rowsPerPageOptions` prop.
+You should either provide an array of:
+
+- **numbers**, each number will be used for the option's label and value.
+
+  ```jsx
+  <TablePagination rowsPerPageOptions={[10, 50]} />
+  ```
+- **objects**, the `value` and `label` keys will be used respectively for the value and label of the option (useful for language strings such as 'All').
 
-Custom options in the `Rows per page:` menu can be shown by using a JS object with the `label` key denoting the display string, such as `"All"`, and the `value` key defining the number of rows to be shown. The following example demonstrates the same.
+  ```jsx
+  <TablePagination rowsPerPageOptions={[10, 50, { value: -1, label: 'All' }]} />
+  ```
 
+### Custom pagination actions
+
+The `Action` property of the `TablePagination` component allows the implementation of
+custom actions.
 
 {{"demo": "pages/components/tables/CustomPaginationActionsTable.js"}}
 

packages/material-ui/src/TablePagination/TablePagination.d.ts

@@ -26,7 +26,7 @@ export interface TablePaginationTypeMap<P, D extends React.ElementType> {
       onChangeRowsPerPage?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
       page: number;
       rowsPerPage: number;
-      rowsPerPageOptions?: number[];
+      rowsPerPageOptions?: (number | { value: number; label: string })[];
       SelectProps?: Partial<SelectProps>;
     };
   defaultComponent: D;