release v2.0.4 - pagination rowsperpage select enhancements

Author: KevinVandy

apps/material-react-table-docs/pages/changelog.mdx

@@ -12,6 +12,11 @@ import Head from 'next/head';
 
 ### Version 2
 
+#### Version 2.0.4 - 11-09-2023
+
+- Add support for `'all'` rows pagination option
+- Added `muiPaginationProps.SelectProps` support back to allow for native select
+
 #### Version 2.0.3 - 11-06-2023
 
 - Locale updates

packages/material-react-table/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.3",
+  "version": "2.0.4",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

packages/material-react-table/src/toolbar/MRT_TablePagination.tsx

@@ -60,6 +60,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
   const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
 
   const {
+    SelectProps,
     rowsPerPageOptions = defaultRowsPerPage,
     showFirstButton = showFirstLastPageButtons,
     showLastButton = showFirstLastPageButtons,
@@ -98,22 +99,29 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
             id="mrt-rows-per-page"
             inputProps={{ 'aria-label': localization.rowsPerPage }}
             label={localization.rowsPerPage}
-            onChange={(event) => setPageSize(+event.target.value)}
+            onChange={(event) => setPageSize(+(event.target.value as any))}
             sx={{ mb: 0 }}
             value={pageSize}
             variant="standard"
+            {...SelectProps}
           >
-            {rowsPerPageOptions.map((option) =>
-              typeof option === 'number' ? (
-                <MenuItem key={option} sx={{ m: 0 }} value={option}>
-                  {option}
-                </MenuItem>
-              ) : (
-                <MenuItem key={option.value} sx={{ m: 0 }} value={option.value}>
-                  {option.label}
-                </MenuItem>
-              ),
-            )}
+            {rowsPerPageOptions.map((option) => {
+              const value = typeof option !== 'number' ? option.value : option;
+              const label =
+                typeof option !== 'number' ? option.label : `${option}`;
+              return (
+                SelectProps?.children ??
+                (SelectProps?.native ? (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                ) : (
+                  <MenuItem key={value} sx={{ m: 0 }} value={value}>
+                    {label}
+                  </MenuItem>
+                ))
+              );
+            })}
           </Select>
         </Box>
       )}

packages/material-react-table/src/types.ts

@@ -54,6 +54,7 @@ import { type LinearProgressProps } from '@mui/material/LinearProgress';
 import { type PaginationProps } from '@mui/material/Pagination';
 import { type PaperProps } from '@mui/material/Paper';
 import { type RadioProps } from '@mui/material/Radio';
+import { type SelectProps } from '@mui/material/Select';
 import { type SkeletonProps } from '@mui/material/Skeleton';
 import { type SliderProps } from '@mui/material/Slider';
 import { type TableProps } from '@mui/material/Table';
@@ -904,13 +905,15 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
   muiPaginationProps?:
     | ((props: { table: MRT_TableInstance<TData> }) => Partial<
         PaginationProps & {
-          rowsPerPageOptions?: {label: string; value: number}[] | number[];
+          SelectProps?: Partial<SelectProps>;
+          rowsPerPageOptions?: { label: string; value: number }[] | number[];
           showRowsPerPage?: boolean;
         }
       >)
     | Partial<
         PaginationProps & {
-          rowsPerPageOptions?: {label: string; value: number;}[] | number[];
+          SelectProps?: Partial<SelectProps>;
+          rowsPerPageOptions?: { label: string; value: number }[] | number[];
           showRowsPerPage?: boolean;
         }
       >;

packages/material-react-table/stories/features/Pagination.stories.tsx

@@ -88,6 +88,18 @@ export const PaginationEnabledDefaultNoRowsPerPage = () => (
   />
 );
 
+export const PaginationEnabledCustomizeRowsPerPage = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    muiPaginationProps={{
+      SelectProps: {
+        native: true,
+      },
+    }}
+  />
+);
+
 export const PaginationPagesDisplayMode = () => (
   <MaterialReactTable
     columns={columns}