diff --git a/apps/material-react-table-docs/examples/advanced/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/advanced/sandbox/src/TS.tsx
index bc8d644f3..9961627b4 100644
--- a/apps/material-react-table-docs/examples/advanced/sandbox/src/TS.tsx
+++ b/apps/material-react-table-docs/examples/advanced/sandbox/src/TS.tsx
@@ -151,7 +151,14 @@ const Example = () => {
enableRowActions: true,
enableRowSelection: true,
initialState: { showColumnFilters: true, showGlobalFilter: true },
+ paginationDisplayMode: 'pages',
positionToolbarAlertBanner: 'bottom',
+ muiTablePaginationProps: {
+ color: 'secondary',
+ rowsPerPageOptions: [10, 20, 30],
+ shape: 'rounded',
+ variant: 'outlined'
+ },
renderDetailPanel: ({ row }) => (
> {
+const defaultPageSizeOptions = [5, 10, 15, 20, 25, 30, 50, 100];
+
+interface Props = {}> {
position?: 'bottom' | 'top';
table: MRT_TableInstance;
}
-export const MRT_TablePagination = >({
+export const MRT_TablePagination = = {}>({
position = 'bottom',
table,
}: Props) => {
@@ -17,8 +25,10 @@ export const MRT_TablePagination = >({
getState,
options: {
enableToolbarInternalActions,
+ icons: { ChevronLefIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon },
localization,
muiTablePaginationProps,
+ paginationDisplayMode,
rowCount,
},
setPageIndex,
@@ -29,80 +39,127 @@ export const MRT_TablePagination = >({
showGlobalFilter,
} = getState();
- const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
- const showFirstLastPageButtons = totalRowCount / pageSize > 2;
-
- const tablePaginationProps = parseFromValuesOrFunc(muiTablePaginationProps, {
+ const paginationProps = parseFromValuesOrFunc(muiTablePaginationProps, {
table,
});
- const handleChangeRowsPerPage = (event: ChangeEvent) => {
- setPageSize(+event.target.value);
- };
+ const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
+ const numberOfPages = Math.ceil(totalRowCount / pageSize);
+ const showFirstLastPageButtons = numberOfPages > 2;
+ const showFirstButton =
+ showFirstLastPageButtons && paginationProps?.showFirstButton !== false;
+ const showLastButton =
+ showFirstLastPageButtons && paginationProps?.showLastButton !== false;
+ const firstRowIndex = pageIndex * pageSize;
+ const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
return (
-
- type === 'first'
- ? localization.goToFirstPage
- : type === 'last'
- ? localization.goToLastPage
- : type === 'next'
- ? localization.goToNextPage
- : localization.goToPreviousPage
- }
- labelDisplayedRows={({ count, from, to }) =>
- `${from}-${to} ${localization.of} ${count}`
- }
- labelRowsPerPage={localization.rowsPerPage}
- onPageChange={(_: any, newPage: number) => setPageIndex(newPage)}
- onRowsPerPageChange={handleChangeRowsPerPage}
- page={Math.max(
- Math.min(pageIndex, Math.ceil(totalRowCount / pageSize) - 1),
- 0,
- )}
- rowsPerPage={pageSize}
- rowsPerPageOptions={[5, 10, 15, 20, 25, 30, 50, 100]}
- showFirstButton={showFirstLastPageButtons}
- showLastButton={showFirstLastPageButtons}
- {...tablePaginationProps}
- SelectProps={{
- MenuProps: { MenuListProps: { disablePadding: true }, sx: { m: 0 } },
- sx: { m: '0 1rem 0 1ch' },
- ...tablePaginationProps?.SelectProps,
- }}
- sx={(theme) => ({
- '& . MuiTablePagination-select': {
- m: '0 1px',
- },
- '& .MuiTablePagination-actions': {
- m: '0 1px',
- },
- '& .MuiTablePagination-displayedRows': {
- m: '0 1px',
- },
- '& .MuiTablePagination-selectLabel': {
- m: '0 -1px',
- },
- '& .MuiTablePagination-toolbar': {
- alignItems: 'center',
- display: 'flex',
- },
- '&. MuiInputBase-root': {
- m: '0 1px',
- },
+
+ }}
+ >
+ {paginationProps?.showRowsPerPage !== false && (
+
+
+ {localization.rowsPerPage}
+
+
+
+ )}
+ {paginationDisplayMode === 'pages' ? (
+ setPageIndex(newPageIndex - 1)}
+ page={pageIndex + 1}
+ renderItem={(item) => (
+
+ )}
+ showFirstButton={showFirstButton}
+ showLastButton={showLastButton}
+ {...(paginationProps as PaginationProps)}
+ />
+ ) : paginationDisplayMode === 'default' ? (
+ <>
+ {`${
+ lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
+ }-${lastRowIndex.toLocaleString()} ${
+ localization.of
+ } ${totalRowCount.toLocaleString()}`}
+
+ {showFirstButton && (
+ setPageIndex(0)}
+ size="small"
+ >
+
+
+ )}
+ setPageIndex(pageIndex - 1)}
+ size="small"
+ >
+
+
+ = totalRowCount}
+ onClick={() => setPageIndex(pageIndex + 1)}
+ size="small"
+ >
+
+
+ {showLastButton && (
+ = totalRowCount}
+ onClick={() => setPageIndex(numberOfPages - 1)}
+ size="small"
+ >
+
+
+ )}
+
+
+ ) : null}
+
);
};
diff --git a/packages/material-react-table/src/types.ts b/packages/material-react-table/src/types.ts
index 9c399d6c4..64cb0932c 100644
--- a/packages/material-react-table/src/types.ts
+++ b/packages/material-react-table/src/types.ts
@@ -38,14 +38,15 @@ import {
type Virtualizer,
type VirtualizerOptions,
} from '@tanstack/react-virtual';
-import { type AutocompleteProps } from '@mui/material';
import { type AlertProps } from '@mui/material/Alert';
+import { type AutocompleteProps } from '@mui/material/Autocomplete';
import { type ButtonProps } from '@mui/material/Button';
import { type CheckboxProps } from '@mui/material/Checkbox';
import { type ChipProps } from '@mui/material/Chip';
import { type DialogProps } from '@mui/material/Dialog';
import { type IconButtonProps } from '@mui/material/IconButton';
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 SkeletonProps } from '@mui/material/Skeleton';
@@ -56,7 +57,6 @@ import { type TableCellProps } from '@mui/material/TableCell';
import { type TableContainerProps } from '@mui/material/TableContainer';
import { type TableFooterProps } from '@mui/material/TableFooter';
import { type TableHeadProps } from '@mui/material/TableHead';
-import { type TablePaginationProps } from '@mui/material/TablePagination';
import { type TableRowProps } from '@mui/material/TableRow';
import { type TextFieldProps } from '@mui/material/TextField';
import { type ToolbarProps } from '@mui/material/Toolbar';
@@ -917,10 +917,18 @@ export type MRT_TableOptions> = Omit<
}) => TableRowProps)
| TableRowProps;
muiTablePaginationProps?:
- | ((props: {
- table: MRT_TableInstance;
- }) => Partial>)
- | Partial>;
+ | ((props: { table: MRT_TableInstance }) => Partial<
+ PaginationProps & {
+ rowsPerPageOptions?: number[];
+ showRowsPerPage?: boolean;
+ }
+ >)
+ | Partial<
+ PaginationProps & {
+ rowsPerPageOptions?: number[];
+ showRowsPerPage?: boolean;
+ }
+ >;
muiTablePaperProps?:
| ((props: { table: MRT_TableInstance }) => PaperProps)
| PaperProps;
diff --git a/packages/material-react-table/stories/features/Pagination.stories.tsx b/packages/material-react-table/stories/features/Pagination.stories.tsx
index 67c00d849..735e55258 100644
--- a/packages/material-react-table/stories/features/Pagination.stories.tsx
+++ b/packages/material-react-table/stories/features/Pagination.stories.tsx
@@ -37,6 +37,47 @@ export const PaginationEnabledDefault = () => (
);
+export const PaginationEnabledDefaultNoRowsPerPage = () => (
+
+);
+
+export const PaginatiosPagesDisplayMode = () => (
+
+);
+
+export const PaginatiosPagesDisplayModeNoPagesPerRow = () => (
+
+);
+
+export const CustomPaginatiosPagesDisplayMode = () => (
+
+);
+
export const PaginationDisabledOrOverriden = () => (
);
@@ -66,32 +107,32 @@ export const PaginationPositionTopAndBottomNoInternalActions = () => (
/>
);
-export const CustomizePaginationComponents = () => (
-
-);
+// export const CustomizePaginationComponents = () => (
+//
+// );
-export const RotateIcons = () => (
-
-);
+// export const RotateIcons = () => (
+//
+// );