Added: "All" option to "rows per page" in TablePagination API

[fixed] page range display for 'all' option [fixed]The page range display showed 1--1 of {totalRows} when the option to display all the rows was chosen.
mui · Oct 17, 2019 · 4bc35bf · 4bc35bf
1 parent 5d564f9
commit 4bc35bf
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/docs/src/pages/components/tables/CustomPaginationActionsTable.js b/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}

diff --git a/packages/material-ui/src/TablePagination/TablePagination.js b/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>