[Table] Support TablePagination display of all rows

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.js

@@ -152,7 +152,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/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,7 +52,23 @@ 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
+
+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').
+
+  ```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.

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?: Array<number | { value: number; label: string }>;
       SelectProps?: Partial<SelectProps>;
     };
   defaultComponent: D;

packages/material-ui/src/TablePagination/TablePagination.js

@@ -66,7 +66,8 @@ export const styles = theme => ({
   },
 });
 
-const defaultLabelDisplayedRows = ({ from, to, count }) => `${from}-${to} of ${count}`;
+const defaultLabelDisplayedRows = ({ from, to, count }) =>
+  `${from}-${to === -1 ? count : to} of ${count}`;
 const defaultRowsPerPageOptions = [10, 25, 50, 100];
 
 /**
@@ -125,9 +126,9 @@ const TablePagination = React.forwardRef(function TablePagination(props, ref) {
               <MenuItemComponent
                 className={classes.menuItem}
                 key={rowsPerPageOption}
-                value={rowsPerPageOption}
+                value={rowsPerPageOption.value ? rowsPerPageOption.value : rowsPerPageOption}
               >
-                {rowsPerPageOption}
+                {rowsPerPageOption.label ? rowsPerPageOption.label : rowsPerPageOption}
               </MenuItemComponent>
             ))}
           </Select>