material-react-table 2.0.2 → 2.0.4

package/dist/index.d.ts

@@ -18,6 +18,7 @@ import { LinearProgressProps } from '@mui/material/LinearProgress';
 import { PaginationProps } from '@mui/material/Pagination';
 import { PaperProps } from '@mui/material/Paper';
 import { RadioProps } from '@mui/material/Radio';
+import { SelectProps } from '@mui/material/Select';
 import { SkeletonProps } from '@mui/material/Skeleton';
 import { SliderProps } from '@mui/material/Slider';
 import { TableProps } from '@mui/material/Table';
@@ -773,10 +774,18 @@ type MRT_TableOptions<TData extends MRT_RowData> = Omit<Partial<TableOptions<TDa
     muiPaginationProps?: ((props: {
         table: MRT_TableInstance<TData>;
     }) => Partial<PaginationProps & {
-        rowsPerPageOptions?: number[];
+        SelectProps?: Partial<SelectProps>;
+        rowsPerPageOptions?: {
+            label: string;
+            value: number;
+        }[] | number[];
         showRowsPerPage?: boolean;
     }>) | Partial<PaginationProps & {
-        rowsPerPageOptions?: number[];
+        SelectProps?: Partial<SelectProps>;
+        rowsPerPageOptions?: {
+            label: string;
+            value: number;
+        }[] | number[];
         showRowsPerPage?: boolean;
     }>;
     muiRowDragHandleProps?: ((props: {
@@ -1530,7 +1539,10 @@ interface Props$5<TData extends MRT_RowData> extends LinearProgressProps {
 declare const MRT_LinearProgressBar: <TData extends MRT_RowData>({ isTopToolbar, table, ...rest }: Props$5<TData>) => react_jsx_runtime.JSX.Element;
 
 interface Props$4<TData extends MRT_RowData> extends Partial<PaginationProps & {
-    rowsPerPageOptions?: number[];
+    rowsPerPageOptions?: {
+        label: string;
+        value: number;
+    }[] | number[];
     showRowsPerPage?: boolean;
 }> {
     position?: 'bottom' | 'top';

package/dist/index.esm.js

@@ -463,11 +463,11 @@ const MRT_TableBodyCellValue = ({ cell, table, }) => {
 };
 
 const MRT_GrabHandleButton = (_a) => {
-    var _b;
+    var _b, _c;
     var { iconButtonProps, location, onDragEnd, onDragStart, table } = _a, rest = __rest(_a, ["iconButtonProps", "location", "onDragEnd", "onDragStart", "table"]);
     const { options: { icons: { DragHandleIcon }, localization, }, } = table;
     const _iconButtonProps = Object.assign(Object.assign({}, iconButtonProps), rest);
-    return (jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_b = _iconButtonProps === null || _iconButtonProps === void 0 ? void 0 : _iconButtonProps.title) !== null && _b !== void 0 ? _b : localization.move, children: jsx(IconButton, Object.assign({ disableRipple: true, draggable: "true", size: "small" }, _iconButtonProps, { onClick: (e) => {
+    return (jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_b = _iconButtonProps === null || _iconButtonProps === void 0 ? void 0 : _iconButtonProps.title) !== null && _b !== void 0 ? _b : localization.move, children: jsx(IconButton, Object.assign({ "aria-label": (_c = _iconButtonProps.title) !== null && _c !== void 0 ? _c : localization.move, disableRipple: true, draggable: "true", size: "small" }, _iconButtonProps, { onClick: (e) => {
                 var _a;
                 e.stopPropagation();
                 (_a = _iconButtonProps === null || _iconButtonProps === void 0 ? void 0 : _iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(_iconButtonProps, e);
@@ -2154,7 +2154,7 @@ const MRT_TablePagination = (_a) => {
     const showFirstLastPageButtons = numberOfPages > 2;
     const firstRowIndex = pageIndex * pageSize;
     const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
-    const _b = paginationProps !== null && paginationProps !== void 0 ? paginationProps : {}, { rowsPerPageOptions = defaultRowsPerPage, showFirstButton = showFirstLastPageButtons, showLastButton = showFirstLastPageButtons, showRowsPerPage = true } = _b, _rest = __rest(_b, ["rowsPerPageOptions", "showFirstButton", "showLastButton", "showRowsPerPage"]);
+    const _b = paginationProps !== null && paginationProps !== void 0 ? paginationProps : {}, { SelectProps, rowsPerPageOptions = defaultRowsPerPage, showFirstButton = showFirstLastPageButtons, showLastButton = showFirstLastPageButtons, showRowsPerPage = true } = _b, _rest = __rest(_b, ["SelectProps", "rowsPerPageOptions", "showFirstButton", "showLastButton", "showRowsPerPage"]);
     return (jsxs(Box, { sx: {
             alignItems: 'center',
             display: 'flex',
@@ -2171,7 +2171,12 @@ const MRT_TablePagination = (_a) => {
             px: '8px',
             py: '12px',
             zIndex: 2,
-        }, children: [showRowsPerPage && (jsxs(Box, { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsx(InputLabel, { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsx(Select, { disableUnderline: true, id: "mrt-rows-per-page", inputProps: { 'aria-label': localization.rowsPerPage }, label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard", children: rowsPerPageOptions.map((value) => (jsx(MenuItem, { sx: { m: 0 }, value: value, children: value }, value))) })] })), paginationDisplayMode === 'pages' ? (jsx(Pagination, Object.assign({ count: numberOfPages, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsx(PaginationItem, Object.assign({ slots: {
+        }, children: [showRowsPerPage && (jsxs(Box, { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsx(InputLabel, { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsx(Select, Object.assign({ disableUnderline: true, id: "mrt-rows-per-page", inputProps: { 'aria-label': localization.rowsPerPage }, label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard" }, SelectProps, { children: rowsPerPageOptions.map((option) => {
+                            var _a;
+                            const value = typeof option !== 'number' ? option.value : option;
+                            const label = typeof option !== 'number' ? option.label : `${option}`;
+                            return ((_a = SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.children) !== null && _a !== void 0 ? _a : ((SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.native) ? (jsx("option", { value: value, children: label }, value)) : (jsx(MenuItem, { sx: { m: 0 }, value: value, children: label }, value))));
+                        }) }))] })), paginationDisplayMode === 'pages' ? (jsx(Pagination, Object.assign({ count: numberOfPages, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsx(PaginationItem, Object.assign({ slots: {
                         first: FirstPageIcon,
                         last: LastPageIcon,
                         next: ChevronRightIcon,