material-react-table 2.0.0-alpha.3 → 2.0.0-alpha.4

package/dist/esm/types/icons.d.ts

@@ -2,6 +2,8 @@ export interface MRT_Icons {
     ArrowDownwardIcon: any;
     ArrowRightIcon: any;
     CancelIcon: any;
+    ChevronLefIcon: any;
+    ChevronRightIcon: any;
     ClearAllIcon: any;
     CloseIcon: any;
     DensityLargeIcon: any;
@@ -14,9 +16,11 @@ export interface MRT_Icons {
     FilterAltIcon: any;
     FilterListIcon: any;
     FilterListOffIcon: any;
+    FirstPageIcon?: any;
     FullscreenExitIcon: any;
     FullscreenIcon: any;
     KeyboardDoubleArrowDownIcon: any;
+    LastPageIcon?: any;
     MoreHorizIcon: any;
     MoreVertIcon: any;
     PushPinIcon: any;

package/dist/esm/types/toolbar/MRT_TablePagination.d.ts

@@ -1,7 +1,7 @@
 import { type MRT_TableInstance } from '../types';
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends Record<string, any> = {}> {
     position?: 'bottom' | 'top';
     table: MRT_TableInstance<TData>;
 }
-export declare const MRT_TablePagination: <TData extends Record<string, any>>({ position, table, }: Props<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const MRT_TablePagination: <TData extends Record<string, any> = {}>({ position, table, }: Props<TData>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/types.d.ts

@@ -1,14 +1,15 @@
 import { type Dispatch, type MutableRefObject, type ReactNode, type RefObject, type SetStateAction } from 'react';
 import { type AggregationFn, type Cell, type Column, type ColumnDef, type ColumnFiltersState, type ColumnOrderState, type ColumnPinningState, type ColumnSizingInfoState, type ColumnSizingState, type DeepKeys, type ExpandedState, type FilterFn, type GroupingState, type Header, type HeaderGroup, type OnChangeFn, type PaginationState, type Row, type RowSelectionState, type SortingFn, type SortingState, type Table, type TableOptions, type TableState, type Updater, type VisibilityState } from '@tanstack/react-table';
 import { type VirtualItem, 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';
@@ -19,7 +20,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';
@@ -675,7 +675,13 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<Partial<T
     }) => TableRowProps) | TableRowProps;
     muiTablePaginationProps?: ((props: {
         table: MRT_TableInstance<TData>;
-    }) => Partial<Omit<TablePaginationProps, 'rowsPerPage'>>) | Partial<Omit<TablePaginationProps, 'rowsPerPage'>>;
+    }) => Partial<PaginationProps & {
+        rowsPerPageOptions?: number[];
+        showRowsPerPage?: boolean;
+    }>) | Partial<PaginationProps & {
+        rowsPerPageOptions?: number[];
+        showRowsPerPage?: boolean;
+    }>;
     muiTablePaperProps?: ((props: {
         table: MRT_TableInstance<TData>;
     }) => PaperProps) | PaperProps;

package/dist/index.d.ts

@@ -5,14 +5,15 @@ import { Row, Table, TableState, ColumnDef, DeepKeys, Column, Header, HeaderGrou
 export { ColumnFiltersState as MRT_ColumnFiltersState, ColumnOrderState as MRT_ColumnOrderState, ColumnPinningState as MRT_ColumnPinningState, ColumnSizingInfoState as MRT_ColumnSizingInfoState, ColumnSizingState as MRT_ColumnSizingState, ExpandedState as MRT_ExpandedState, GroupingState as MRT_GroupingState, PaginationState as MRT_PaginationState, RowSelectionState as MRT_RowSelectionState, SortingState as MRT_SortingState, Updater as MRT_Updater, VisibilityState as MRT_VisibilityState } from '@tanstack/react-table';
 import { Virtualizer, VirtualizerOptions, VirtualItem } from '@tanstack/react-virtual';
 export { VirtualItem as MRT_VirtualItem, Virtualizer as MRT_Virtualizer, VirtualizerOptions as MRT_VirtualizerOptions } from '@tanstack/react-virtual';
-import { AutocompleteProps } from '@mui/material';
 import { AlertProps } from '@mui/material/Alert';
+import { AutocompleteProps } from '@mui/material/Autocomplete';
 import { ButtonProps } from '@mui/material/Button';
 import { CheckboxProps } from '@mui/material/Checkbox';
 import { ChipProps } from '@mui/material/Chip';
 import { DialogProps } from '@mui/material/Dialog';
 import { IconButtonProps } from '@mui/material/IconButton';
 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 { SkeletonProps } from '@mui/material/Skeleton';
@@ -23,7 +24,6 @@ import { TableCellProps } from '@mui/material/TableCell';
 import { TableContainerProps } from '@mui/material/TableContainer';
 import { TableFooterProps } from '@mui/material/TableFooter';
 import { TableHeadProps } from '@mui/material/TableHead';
-import { TablePaginationProps } from '@mui/material/TablePagination';
 import { TableRowProps } from '@mui/material/TableRow';
 import { TextFieldProps } from '@mui/material/TextField';
 import { ToolbarProps } from '@mui/material/Toolbar';
@@ -115,6 +115,8 @@ interface MRT_Icons {
     ArrowDownwardIcon: any;
     ArrowRightIcon: any;
     CancelIcon: any;
+    ChevronLefIcon: any;
+    ChevronRightIcon: any;
     ClearAllIcon: any;
     CloseIcon: any;
     DensityLargeIcon: any;
@@ -127,9 +129,11 @@ interface MRT_Icons {
     FilterAltIcon: any;
     FilterListIcon: any;
     FilterListOffIcon: any;
+    FirstPageIcon?: any;
     FullscreenExitIcon: any;
     FullscreenIcon: any;
     KeyboardDoubleArrowDownIcon: any;
+    LastPageIcon?: any;
     MoreHorizIcon: any;
     MoreVertIcon: any;
     PushPinIcon: any;
@@ -799,7 +803,13 @@ type MRT_TableOptions<TData extends Record<string, any>> = Omit<Partial<TableOpt
     }) => TableRowProps) | TableRowProps;
     muiTablePaginationProps?: ((props: {
         table: MRT_TableInstance<TData>;
-    }) => Partial<Omit<TablePaginationProps, 'rowsPerPage'>>) | Partial<Omit<TablePaginationProps, 'rowsPerPage'>>;
+    }) => Partial<PaginationProps & {
+        rowsPerPageOptions?: number[];
+        showRowsPerPage?: boolean;
+    }>) | Partial<PaginationProps & {
+        rowsPerPageOptions?: number[];
+        showRowsPerPage?: boolean;
+    }>;
     muiTablePaperProps?: ((props: {
         table: MRT_TableInstance<TData>;
     }) => PaperProps) | PaperProps;
@@ -1440,11 +1450,11 @@ interface Props$5<TData extends Record<string, any>> {
 }
 declare const MRT_LinearProgressBar: <TData extends Record<string, any>>({ isTopToolbar, table, }: Props$5<TData>) => react_jsx_runtime.JSX.Element;
 
-interface Props$4<TData extends Record<string, any>> {
+interface Props$4<TData extends Record<string, any> = {}> {
     position?: 'bottom' | 'top';
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_TablePagination: <TData extends Record<string, any>>({ position, table, }: Props$4<TData>) => react_jsx_runtime.JSX.Element;
+declare const MRT_TablePagination: <TData extends Record<string, any> = {}>({ position, table, }: Props$4<TData>) => react_jsx_runtime.JSX.Element;
 
 interface Props$3<TData extends Record<string, any>> {
     stackAlertBanner: boolean;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.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.",

package/src/hooks/useMRT_Effects.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useReducer, useRef } from 'react';
 import { getCanRankRows } from '../column.utils';
 import { type MRT_SortingState, type MRT_TableInstance } from '../types';
 
@@ -6,10 +6,12 @@ export const useMRT_Effects = <TData extends Record<string, any> = {}>(
   table: MRT_TableInstance<TData>,
 ) => {
   const {
+    getIsSomeRowsPinned,
     getState,
-    options: { enablePagination, rowCount },
+    options: { enablePagination, enableRowPinning, rowCount },
   } = table;
   const {
+    density,
     globalFilter,
     isFullScreen,
     isLoading,
@@ -18,6 +20,7 @@ export const useMRT_Effects = <TData extends Record<string, any> = {}>(
     sorting,
   } = getState();
 
+  const rerender = useReducer(() => ({}), {})[1];
   const isMounted = useRef(false);
   const initialBodyHeight = useRef<string>();
   const previousTop = useRef<number>();
@@ -74,4 +77,12 @@ export const useMRT_Effects = <TData extends Record<string, any> = {}>(
       table.setSorting(() => appliedSort.current || []);
     }
   }, [globalFilter]);
+
+  useEffect(() => {
+    if (enableRowPinning && getIsSomeRowsPinned()) {
+      setTimeout(() => {
+        rerender();
+      }, 150);
+    }
+  }, [density]);
 };

package/src/icons.ts

@@ -1,6 +1,8 @@
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
+import ChevronLefIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import CloseIcon from '@mui/icons-material/Close';
 import DensityLargeIcon from '@mui/icons-material/DensityLarge';
@@ -13,9 +15,11 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import FilterAltIcon from '@mui/icons-material/FilterAlt';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import FilterListOffIcon from '@mui/icons-material/FilterListOff';
+import FirstPageIcon from '@mui/icons-material/FirstPage';
 import FullscreenIcon from '@mui/icons-material/Fullscreen';
 import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
 import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import LastPageIcon from '@mui/icons-material/LastPage';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import PushPinIcon from '@mui/icons-material/PushPin';
@@ -31,6 +35,8 @@ export interface MRT_Icons {
   ArrowDownwardIcon: any;
   ArrowRightIcon: any;
   CancelIcon: any;
+  ChevronLefIcon: any;
+  ChevronRightIcon: any;
   ClearAllIcon: any;
   CloseIcon: any;
   DensityLargeIcon: any;
@@ -43,9 +49,11 @@ export interface MRT_Icons {
   FilterAltIcon: any;
   FilterListIcon: any;
   FilterListOffIcon: any;
+  FirstPageIcon?: any;
   FullscreenExitIcon: any;
   FullscreenIcon: any;
   KeyboardDoubleArrowDownIcon: any;
+  LastPageIcon?: any;
   MoreHorizIcon: any;
   MoreVertIcon: any;
   PushPinIcon: any;
@@ -62,6 +70,8 @@ export const MRT_Default_Icons: MRT_Icons = {
   ArrowDownwardIcon,
   ArrowRightIcon,
   CancelIcon,
+  ChevronLefIcon,
+  ChevronRightIcon,
   ClearAllIcon,
   CloseIcon,
   DensityLargeIcon,
@@ -74,9 +84,11 @@ export const MRT_Default_Icons: MRT_Icons = {
   FilterAltIcon,
   FilterListIcon,
   FilterListOffIcon,
+  FirstPageIcon,
   FullscreenExitIcon,
   FullscreenIcon,
   KeyboardDoubleArrowDownIcon,
+  LastPageIcon,
   MoreHorizIcon,
   MoreVertIcon,
   PushPinIcon,

package/src/toolbar/MRT_TablePagination.tsx

@@ -1,14 +1,22 @@
-import { type ChangeEvent } from 'react';
-import TablePagination from '@mui/material/TablePagination';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Pagination, { type PaginationProps } from '@mui/material/Pagination';
+import PaginationItem from '@mui/material/PaginationItem';
+import Select from '@mui/material/Select';
+import Typography from '@mui/material/Typography';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+const defaultPageSizeOptions = [5, 10, 15, 20, 25, 30, 50, 100];
+
+interface Props<TData extends Record<string, any> = {}> {
   position?: 'bottom' | 'top';
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TablePagination = <TData extends Record<string, any>>({
+export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
   position = 'bottom',
   table,
 }: Props<TData>) => {
@@ -17,8 +25,10 @@ export const MRT_TablePagination = <TData extends Record<string, any>>({
     getState,
     options: {
       enableToolbarInternalActions,
+      icons: { ChevronLefIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon },
       localization,
       muiTablePaginationProps,
+      paginationDisplayMode,
       rowCount,
     },
     setPageIndex,
@@ -29,80 +39,127 @@ export const MRT_TablePagination = <TData extends Record<string, any>>({
     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<HTMLInputElement>) => {
-    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 (
-    <TablePagination
-      component="div"
-      count={totalRowCount}
-      getItemAriaLabel={(type) =>
-        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',
-        },
+    <Box
+      sx={{
+        alignItems: 'center',
+        display: 'flex',
+        gap: '8px',
+        justifyContent: 'space-between',
         mt:
           position === 'top' &&
           enableToolbarInternalActions &&
           !showGlobalFilter
-            ? '3.5rem'
+            ? '3rem'
             : undefined,
         position: 'relative',
+        px: '4px',
+        py: '12px',
         zIndex: 2,
-        ...(parseFromValuesOrFunc(tablePaginationProps?.sx, theme) as any),
-      })}
-    />
+      }}
+    >
+      {paginationProps?.showRowsPerPage !== false && (
+        <Box sx={{ alignItems: 'center', display: 'flex', gap: '8px' }}>
+          <InputLabel htmlFor="mrt-rows-per-page" sx={{ mb: 0 }}>
+            {localization.rowsPerPage}
+          </InputLabel>
+          <Select
+            id="mrt-rows-per-page"
+            label={localization.rowsPerPage}
+            onChange={(event) => setPageSize(+event.target.value)}
+            sx={{ '&::before': { border: 'none' }, mb: 0 }}
+            value={pageSize}
+            variant="standard"
+          >
+            {defaultPageSizeOptions.map((value) => (
+              <MenuItem key={value} sx={{ m: 0 }} value={value}>
+                {value}
+              </MenuItem>
+            ))}
+          </Select>
+        </Box>
+      )}
+      {paginationDisplayMode === 'pages' ? (
+        <Pagination
+          count={numberOfPages}
+          onChange={(_e, newPageIndex) => setPageIndex(newPageIndex - 1)}
+          page={pageIndex + 1}
+          renderItem={(item) => (
+            <PaginationItem
+              slots={{
+                first: FirstPageIcon,
+                last: LastPageIcon,
+                next: ChevronRightIcon,
+                previous: ChevronLefIcon,
+              }}
+              {...item}
+            />
+          )}
+          showFirstButton={showFirstButton}
+          showLastButton={showLastButton}
+          {...(paginationProps as PaginationProps)}
+        />
+      ) : paginationDisplayMode === 'default' ? (
+        <>
+          <Typography mb="0" mx="8px" variant="body2">{`${
+            lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
+          }-${lastRowIndex.toLocaleString()} ${
+            localization.of
+          } ${totalRowCount.toLocaleString()}`}</Typography>
+          <Box gap="xs">
+            {showFirstButton && (
+              <IconButton
+                aria-label={localization.goToFirstPage}
+                disabled={pageIndex <= 0}
+                onClick={() => setPageIndex(0)}
+                size="small"
+              >
+                <FirstPageIcon />
+              </IconButton>
+            )}
+            <IconButton
+              aria-label={localization.goToPreviousPage}
+              disabled={pageIndex <= 0}
+              onClick={() => setPageIndex(pageIndex - 1)}
+              size="small"
+            >
+              <ChevronLefIcon />
+            </IconButton>
+            <IconButton
+              aria-label={localization.goToNextPage}
+              disabled={lastRowIndex >= totalRowCount}
+              onClick={() => setPageIndex(pageIndex + 1)}
+              size="small"
+            >
+              <ChevronRightIcon />
+            </IconButton>
+            {showLastButton && (
+              <IconButton
+                aria-label={localization.goToLastPage}
+                disabled={lastRowIndex >= totalRowCount}
+                onClick={() => setPageIndex(numberOfPages - 1)}
+                size="small"
+              >
+                <LastPageIcon />
+              </IconButton>
+            )}
+          </Box>
+        </>
+      ) : null}
+    </Box>
   );
 };

package/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<TData extends Record<string, any>> = Omit<
       }) => TableRowProps)
     | TableRowProps;
   muiTablePaginationProps?:
-    | ((props: {
-        table: MRT_TableInstance<TData>;
-      }) => Partial<Omit<TablePaginationProps, 'rowsPerPage'>>)
-    | Partial<Omit<TablePaginationProps, 'rowsPerPage'>>;
+    | ((props: { table: MRT_TableInstance<TData> }) => Partial<
+        PaginationProps & {
+          rowsPerPageOptions?: number[];
+          showRowsPerPage?: boolean;
+        }
+      >)
+    | Partial<
+        PaginationProps & {
+          rowsPerPageOptions?: number[];
+          showRowsPerPage?: boolean;
+        }
+      >;
   muiTablePaperProps?:
     | ((props: { table: MRT_TableInstance<TData> }) => PaperProps)
     | PaperProps;