material-react-table 0.16.0 → 0.17.0

package/dist/utils.d.ts

@@ -1,4 +1,4 @@
-import { ColumnDef, ColumnOrderState, Table, Updater } from '@tanstack/react-table';
+import { ColumnDef, ColumnOrderState, Table } from '@tanstack/react-table';
 import { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_FilterFn } from '.';
 export declare const getAllLeafColumnDefs: (columns: MRT_ColumnDef[]) => MRT_ColumnDef[];
 export declare const createGroup: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterFns: {
@@ -10,7 +10,7 @@ export declare const createDataColumn: <D extends Record<string, any> = {}>(tabl
 export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "accessorFn" | "columns" | "filterFn" | "footer" | "sortingFn" | "id" | "accessorKey" | "meta" | "enableHiding" | "enablePinning" | "enableColumnFilter" | "enableGlobalFilter" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "enableGrouping" | "enableResizing" | "size" | "minSize" | "maxSize" | "AggregatedCell" | "Cell" | "Edit" | "Filter" | "Footer" | "Header" | "enableClickToCopy" | "enableColumnActions" | "enableColumnFilterChangeMode" | "enableColumnOrdering" | "enableEditing" | "enabledColumnFilterOptions" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChanged" | "onColumnFilterValueChanged" | "onColumnFilterValueChangedDebounced"> & {
     header?: string | undefined;
 }) => ColumnDef<D>;
-export declare const reorderColumn: (movingColumn: MRT_Column, receivingColumn: MRT_Column, columnOrder: ColumnOrderState, setColumnOrder: (updater: Updater<ColumnOrderState>) => void) => void;
+export declare const reorderColumn: (movingColumn: MRT_Column, receivingColumn: MRT_Column, columnOrder: ColumnOrderState) => ColumnOrderState;
 export declare const getLeadingDisplayColumnIds: (props: MaterialReactTableProps<any>) => string[];
 export declare const getTrailingDisplayColumnIds: (props: MaterialReactTableProps<any>) => (string | false | undefined)[];
 export declare const getDefaultColumnOrderIds: (props: MaterialReactTableProps<any>) => string[];

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.16.0",
+  "version": "0.17.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -30,6 +30,8 @@ import {
   Cell,
   Column,
   ColumnDef,
+  ColumnOrderState,
+  ColumnPinningState,
   FilterFn,
   FilterFnOption,
   Header,
@@ -399,7 +401,6 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     enableGlobalFilterChangeMode?: boolean;
     enableGlobalFilterRankedResults?: boolean;
     enablePagination?: boolean;
-    enablePersistentState?: boolean;
     enableRowActions?: boolean;
     enableRowNumbers?: boolean;
     enableRowVirtualization?: boolean;
@@ -646,6 +647,20 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       filterValue: any;
       instance: MRT_TableInstance<D>;
     }) => void;
+    onColumnOrderChanged?: ({
+      columnOrder,
+      instance,
+    }: {
+      columnOrder: ColumnOrderState;
+      instance: MRT_TableInstance<D>;
+    }) => void;
+    onColumnPinningChanged?: ({
+      columnPinning,
+      instance,
+    }: {
+      columnPinning: ColumnPinningState;
+      instance: MRT_TableInstance<D>;
+    }) => void;
     onColumnVisibilityChanged?: ({
       column,
       columnVisibility,
@@ -766,7 +781,6 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       instance: MRT_TableInstance<D>;
       showGlobalFilter: boolean;
     }) => void;
-    persistentStateMode?: 'localStorage' | 'sessionStorage';
     positionActionsColumn?: 'first' | 'last';
     positionGlobalFilter?: 'left' | 'right';
     positionPagination?: 'bottom' | 'top' | 'both';
@@ -829,6 +843,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
         IconButtonProps & { instance: MRT_TableInstance<D> }
       >;
     }) => ReactNode;
+    rowCount?: number;
     rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
     tableId?: string;
@@ -869,7 +884,6 @@ export default <D extends Record<string, any> = {}>({
   enableToolbarTop = true,
   icons,
   localization,
-  persistentStateMode = 'sessionStorage',
   positionActionsColumn = 'first',
   positionGlobalFilter = 'right',
   positionPagination = 'bottom',
@@ -912,7 +926,6 @@ export default <D extends Record<string, any> = {}>({
     enableToolbarTop={enableToolbarTop}
     icons={{ ...MRT_Default_Icons, ...icons }}
     localization={{ ...MRT_DefaultLocalization_EN, ...localization }}
-    persistentStateMode={persistentStateMode}
     positionActionsColumn={positionActionsColumn}
     positionGlobalFilter={positionGlobalFilter}
     positionPagination={positionPagination}

package/src/body/MRT_TableBodyCell.tsx

@@ -53,8 +53,10 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const [, dropRef] = useDrop({
     accept: 'column',
-    drop: (movingColumn: MRT_Column) =>
-      reorderColumn(movingColumn, column, columnOrder, setColumnOrder),
+    drop: (movingColumn: MRT_Column) => {
+      const newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
+      setColumnOrder(newColumnOrder);
+    },
   });
 
   const mTableCellBodyProps =

package/src/head/MRT_DraggableTableHeadCell.tsx

@@ -10,11 +10,7 @@ interface Props {
 }
 
 export const MRT_DraggableTableHeadCell: FC<Props> = ({ header, instance }) => {
-  const {
-    getState,
-    options: {},
-    setColumnOrder,
-  } = instance;
+  const { getState, setColumnOrder } = instance;
 
   const { columnOrder } = getState();
 
@@ -22,8 +18,10 @@ export const MRT_DraggableTableHeadCell: FC<Props> = ({ header, instance }) => {
 
   const [, dropRef] = useDrop({
     accept: 'column',
-    drop: (movingColumn: MRT_Column) =>
-      reorderColumn(movingColumn, column, columnOrder, setColumnOrder),
+    drop: (movingColumn: MRT_Column) => {
+      const newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
+      setColumnOrder(newColumnOrder);
+    },
   });
 
   const [{ isDragging }, dragRef, previewRef] = useDrag({

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -36,7 +36,6 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({
         touchAction: 'none',
         transition: column.getIsResizing() ? undefined : 'all 0.2s ease-in-out',
         userSelect: 'none',
-        zIndex: 2000,
         '&:active': {
           backgroundColor: theme.palette.info.main,
           opacity: 1,

package/src/inputs/MRT_FilterRangeFields.tsx

@@ -9,22 +9,9 @@ interface Props {
 }
 
 export const MRT_FilterRangeFields: FC<Props> = ({ header, instance }) => {
-  const {
-    options: { localization },
-  } = instance;
-
   return (
-    <Box sx={{ display: 'grid', gridTemplateColumns: '6fr auto 5fr' }}>
+    <Box sx={{ display: 'grid', gridTemplateColumns: '6fr 6fr', gap: '1rem' }}>
       <MRT_FilterTextField header={header} inputIndex={0} instance={instance} />
-      <Box
-        sx={{
-          width: '100%',
-          minWidth: '5ch',
-          textAlign: 'center',
-        }}
-      >
-        {localization.to}
-      </Box>
       <MRT_FilterTextField header={header} inputIndex={1} instance={instance} />
     </Box>
   );

package/src/inputs/MRT_FilterTextField.tsx

@@ -177,9 +177,13 @@ export const MRT_FilterTextField: FC<Props> = ({
   const allowedColumnFilterOptions =
     columnDef?.enabledColumnFilterOptions ?? enabledColumnFilterOptions;
 
-  const allowColumnChangeMode =
+  const showChangeModeButton =
     enableColumnFilterChangeMode &&
-    columnDef.enableColumnFilterChangeMode !== false;
+    columnDef.enableColumnFilterChangeMode !== false &&
+    !isSelectFilter &&
+    !inputIndex &&
+    (allowedColumnFilterOptions === undefined ||
+      !!allowedColumnFilterOptions?.length);
 
   return (
     <>
@@ -195,10 +199,7 @@ export const MRT_FilterTextField: FC<Props> = ({
           title: filterPlaceholder,
         }}
         helperText={
-          allowColumnChangeMode &&
-          !inputIndex &&
-          (allowedColumnFilterOptions === undefined ||
-            (allowedColumnFilterOptions?.length ?? 0) > 0) ? (
+          showChangeModeButton ? (
             <label htmlFor={filterId}>
               {filterFn instanceof Function
                 ? localization.filterMode.replace(
@@ -240,35 +241,30 @@ export const MRT_FilterTextField: FC<Props> = ({
         value={filterValue ?? ''}
         variant="standard"
         InputProps={{
-          startAdornment:
-            allowColumnChangeMode &&
-            !isSelectFilter &&
-            !inputIndex &&
-            (allowedColumnFilterOptions === undefined ||
-              !!allowedColumnFilterOptions?.length) ? (
-              <InputAdornment position="start">
-                <Tooltip arrow title={localization.changeFilterMode}>
-                  <span>
-                    <IconButton
-                      aria-label={localization.changeFilterMode}
-                      onClick={handleFilterMenuOpen}
-                      size="small"
-                      sx={{ height: '1.75rem', width: '1.75rem' }}
-                    >
-                      <FilterListIcon />
-                    </IconButton>
-                  </span>
-                </Tooltip>
-                {filterChipLabel && (
-                  <Chip
-                    onDelete={handleClearFilterChip}
-                    label={filterChipLabel}
-                  />
-                )}
-              </InputAdornment>
-            ) : (
-              <FilterListIcon />
-            ),
+          startAdornment: showChangeModeButton ? (
+            <InputAdornment position="start">
+              <Tooltip arrow title={localization.changeFilterMode}>
+                <span>
+                  <IconButton
+                    aria-label={localization.changeFilterMode}
+                    onClick={handleFilterMenuOpen}
+                    size="small"
+                    sx={{ height: '1.75rem', width: '1.75rem' }}
+                  >
+                    <FilterListIcon />
+                  </IconButton>
+                </span>
+              </Tooltip>
+              {filterChipLabel && (
+                <Chip
+                  onDelete={handleClearFilterChip}
+                  label={filterChipLabel}
+                />
+              )}
+            </InputAdornment>
+          ) : (
+            <FilterListIcon />
+          ),
           endAdornment: !filterChipLabel && (
             <InputAdornment position="end">
               <Tooltip

package/src/localization.ts

@@ -55,11 +55,11 @@ export interface MRT_Localization {
   sortedByColumnAsc: string;
   sortedByColumnDesc: string;
   thenBy: string;
-  to: string;
   toggleDensity: string;
   toggleFullScreen: string;
   toggleSelectAll: string;
   toggleSelectRow: string;
+  toggleVisibility: string;
   ungroupByColumn: string;
   unpin: string;
   unpinAll: string;
@@ -124,11 +124,11 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   sortedByColumnAsc: 'Sorted by {column} ascending',
   sortedByColumnDesc: 'Sorted by {column} descending',
   thenBy: ', then by ',
-  to: 'to',
   toggleDensity: 'Toggle density',
   toggleFullScreen: 'Toggle full screen',
   toggleSelectAll: 'Toggle select all',
   toggleSelectRow: 'Toggle select row',
+  toggleVisibility: 'Toggle visibility',
   ungroupByColumn: 'Ungroup by {column}',
   unpin: 'Unpin',
   unpinAll: 'Unpin all',

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -34,12 +34,14 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     toggleAllColumnsVisible,
     setColumnOrder,
     options: {
+      enableColumnFilterChangeMode,
       enableColumnFilters,
       enableColumnResizing,
       enableGrouping,
       enableHiding,
       enablePinning,
       enableSorting,
+      enabledColumnFilterOptions,
       icons: {
         ArrowRightIcon,
         ClearAllIcon,
@@ -144,6 +146,18 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setShowHideColumnsMenuAnchorEl(event.currentTarget);
   };
 
+  const isSelectFilter = !!columnDef.filterSelectOptions;
+
+  const allowedColumnFilterOptions =
+    columnDef?.enabledColumnFilterOptions ?? enabledColumnFilterOptions;
+
+  const showFilterModeSubMenu =
+    enableColumnFilterChangeMode &&
+    columnDef.enableColumnFilterChangeMode !== false &&
+    !isSelectFilter &&
+    (allowedColumnFilterOptions === undefined ||
+      !!allowedColumnFilterOptions?.length);
+
   return (
     <Menu
       anchorEl={anchorEl}
@@ -203,7 +217,8 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           </MenuItem>,
         ]}
       {enableColumnFilters &&
-        column.getCanFilter() && [
+        column.getCanFilter() &&
+        [
           <MenuItem
             disabled={!column.getFilterValue()}
             key={0}
@@ -232,7 +247,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
                 String(columnDef.header),
               )}
             </Box>
-            {!columnDef.filterSelectOptions && (
+            {showFilterModeSubMenu && (
               <IconButton
                 onClick={handleOpenFilterModeMenu}
                 onMouseEnter={handleOpenFilterModeMenu}
@@ -243,15 +258,17 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </IconButton>
             )}
           </MenuItem>,
-          <MRT_FilterOptionMenu
-            anchorEl={filterMenuAnchorEl}
-            header={header}
-            key={2}
-            onSelect={handleFilterByColumn}
-            setAnchorEl={setFilterMenuAnchorEl}
-            instance={instance}
-          />,
-        ]}
+          showFilterModeSubMenu && (
+            <MRT_FilterOptionMenu
+              anchorEl={filterMenuAnchorEl}
+              header={header}
+              key={2}
+              onSelect={handleFilterByColumn}
+              setAnchorEl={setFilterMenuAnchorEl}
+              instance={instance}
+            />
+          ),
+        ].filter(Boolean)}
       {enableGrouping &&
         column.getCanGroup() && [
           <MenuItem

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -1,6 +1,13 @@
 import React, { FC, Ref } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
-import { Box, FormControlLabel, MenuItem, Switch } from '@mui/material';
+import {
+  Box,
+  FormControlLabel,
+  MenuItem,
+  Switch,
+  Tooltip,
+  Typography,
+} from '@mui/material';
 import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { reorderColumn } from '../utils';
@@ -21,18 +28,25 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
 }) => {
   const {
     getState,
-    options: { enableColumnOrdering, onColumnVisibilityChanged },
+    options: {
+      enableColumnOrdering,
+      enableHiding,
+      enablePinning,
+      localization,
+    },
     setColumnOrder,
   } = instance;
 
-  const { columnOrder, columnVisibility } = getState();
+  const { columnOrder } = getState();
 
   const { columnDef, columnDefType } = column;
 
   const [, dropRef] = useDrop({
     accept: 'column',
-    drop: (movingColumn: MRT_Column) =>
-      reorderColumn(movingColumn, column, columnOrder, setColumnOrder),
+    drop: (movingColumn: MRT_Column) => {
+      const newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
+      setColumnOrder(newColumnOrder);
+    },
   });
 
   const [, dragRef, previewRef] = useDrag({
@@ -56,11 +70,6 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     } else {
       column.toggleVisibility();
     }
-    onColumnVisibilityChanged?.({
-      column,
-      columnVisibility,
-      instance,
-    });
   };
 
   return (
@@ -85,35 +94,56 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
         >
           {columnDefType !== 'group' &&
             enableColumnOrdering &&
-            columnDef.enableColumnOrdering !== false &&
-            !allColumns.some((col) => col.columnDefType === 'group') && (
+            !allColumns.some((col) => col.columnDefType === 'group') &&
+            (columnDef.enableColumnOrdering !== false ? (
               <MRT_GrabHandleButton
                 ref={dragRef as Ref<HTMLButtonElement>}
                 instance={instance}
               />
-            )}
-          {!isSubMenu && column.getCanPin() && (
-            <MRT_ColumnPinningButtons column={column} instance={instance} />
-          )}
-          <FormControlLabel
-            componentsProps={{
-              typography: {
-                sx: {
-                  mb: 0,
-                  opacity: columnDefType !== 'display' ? 1 : 0.5,
+            ) : (
+              <Box sx={{ width: '28px' }} />
+            ))}
+          {enablePinning &&
+            !isSubMenu &&
+            (column.getCanPin() ? (
+              <MRT_ColumnPinningButtons column={column} instance={instance} />
+            ) : (
+              <Box sx={{ width: '70px' }} />
+            ))}
+          {enableHiding ? (
+            <FormControlLabel
+              componentsProps={{
+                typography: {
+                  sx: {
+                    mb: 0,
+                    opacity: columnDefType !== 'display' ? 1 : 0.5,
+                  },
                 },
-              },
-            }}
-            checked={switchChecked}
-            control={<Switch />}
-            disabled={
-              (isSubMenu && switchChecked) ||
-              !column.getCanHide() ||
-              column.getIsGrouped()
-            }
-            label={columnDef.header}
-            onChange={() => handleToggleColumnHidden(column)}
-          />
+              }}
+              checked={switchChecked}
+              control={
+                <Tooltip
+                  arrow
+                  enterDelay={1000}
+                  enterNextDelay={1000}
+                  title={localization.toggleVisibility}
+                >
+                  <Switch />
+                </Tooltip>
+              }
+              disabled={
+                (isSubMenu && switchChecked) ||
+                !column.getCanHide() ||
+                column.getIsGrouped()
+              }
+              label={columnDef.header}
+              onChange={() => handleToggleColumnHidden(column)}
+            />
+          ) : (
+            <Typography sx={{ alignSelf: 'center' }}>
+              {columnDef.header}
+            </Typography>
+          )}
         </Box>
       </MenuItem>
       {column.columns?.map((c: MRT_Column, i) => (

package/src/table/MRT_TablePaper.tsx

@@ -42,6 +42,9 @@ export const MRT_TablePaper: FC<Props> = ({ instance }) => {
         sx={{
           transition: 'all 0.2s ease-in-out',
           ...tablePaperProps?.sx,
+        }}
+        style={{
+          ...tablePaperProps?.style,
           height: isFullScreen ? '100vh' : undefined,
           margin: isFullScreen ? '0' : undefined,
           maxHeight: isFullScreen ? '100vh' : undefined,

package/src/table/MRT_TableRoot.tsx

@@ -56,30 +56,6 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     const initState = props.initialState ?? {};
     initState.columnOrder =
       initState.columnOrder ?? getDefaultColumnOrderIds(props);
-
-    if (!props.enablePersistentState || !props.tableId) {
-      return initState;
-    }
-    if (typeof window === 'undefined') {
-      if (process.env.NODE_ENV !== 'production') {
-        console.error(
-          'The MRT Persistent Table State feature is not supported if using SSR, but you can wrap your <MaterialReactTable /> in a MUI <NoSsr> tags to let it work',
-        );
-      }
-      return initState;
-    }
-    const storedState =
-      props.persistentStateMode === 'localStorage'
-        ? localStorage.getItem(`mrt-${tableId}-table-state`)
-        : props.persistentStateMode === 'sessionStorage'
-        ? sessionStorage.getItem(`mrt-${tableId}-table-state`)
-        : '{}';
-    if (storedState) {
-      const parsedState = JSON.parse(storedState);
-      if (parsedState) {
-        return { ...initState, ...parsedState };
-      }
-    }
     return initState;
   }, []);
 
@@ -168,7 +144,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           id: 'mrt-expand',
           muiTableBodyCellProps: props.muiTableBodyCellProps,
           muiTableHeadCellProps: props.muiTableHeadCellProps,
-          size: 50,
+          size: 60,
         }),
       columnOrder.includes('mrt-select') &&
         createDisplayColumn(table, {
@@ -183,7 +159,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           id: 'mrt-select',
           muiTableBodyCellProps: props.muiTableBodyCellProps,
           muiTableHeadCellProps: props.muiTableHeadCellProps,
-          size: 50,
+          size: 60,
         }),
       columnOrder.includes('mrt-row-numbers') &&
         createDisplayColumn(table, {
@@ -193,7 +169,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           id: 'mrt-row-numbers',
           muiTableBodyCellProps: props.muiTableBodyCellProps,
           muiTableHeadCellProps: props.muiTableHeadCellProps,
-          size: 50,
+          size: 60,
         }),
     ].filter(Boolean) as MRT_ColumnDef<D>[];
   }, [
@@ -285,30 +261,28 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   } as MRT_TableInstance;
 
   useEffect(() => {
-    if (typeof window === 'undefined' || !props.enablePersistentState) {
-      return;
-    }
-    if (!props.tableId && process.env.NODE_ENV !== 'production') {
-      console.warn(
-        'a unique tableId prop is required for persistent table state to work',
-      );
-      return;
-    }
-    const itemArgs: [string, string] = [
-      `mrt-${tableId}-table-state`,
-      JSON.stringify(instance.getState()),
-    ];
-    if (props.persistentStateMode === 'localStorage') {
-      localStorage.setItem(...itemArgs);
-    } else if (props.persistentStateMode === 'sessionStorage') {
-      sessionStorage.setItem(...itemArgs);
-    }
-  }, [
-    props.enablePersistentState,
-    props.tableId,
-    props.persistentStateMode,
-    instance,
-  ]);
+    props?.onColumnOrderChanged?.({
+      columnOrder: instance.getState().columnOrder,
+      //@ts-ignore
+      instance,
+    });
+  }, [instance.getState().columnOrder]);
+
+  useEffect(() => {
+    props?.onColumnPinningChanged?.({
+      columnPinning: instance.getState().columnPinning,
+      //@ts-ignore
+      instance,
+    });
+  }, [instance.getState().columnPinning]);
+
+  useEffect(() => {
+    props?.onColumnVisibilityChanged?.({
+      columnPinning: instance.getState().columnVisibility,
+      //@ts-ignore
+      instance,
+    });
+  }, [instance.getState().columnVisibility]);
 
   return (
     <>

package/src/toolbar/MRT_TablePagination.tsx

@@ -13,7 +13,11 @@ export const MRT_TablePagination: FC<Props> = ({ instance, position }) => {
     getState,
     setPageIndex,
     setPageSize,
-    options: { muiTablePaginationProps, enableToolbarInternalActions },
+    options: {
+      muiTablePaginationProps,
+      enableToolbarInternalActions,
+      rowCount,
+    },
   } = instance;
 
   const {
@@ -30,8 +34,9 @@ export const MRT_TablePagination: FC<Props> = ({ instance, position }) => {
     setPageSize(+event.target.value);
   };
 
-  const showFirstLastPageButtons =
-    getPrePaginationRowModel().rows.length / pageSize > 2;
+  const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
+
+  const showFirstLastPageButtons = totalRowCount / pageSize > 2;
 
   return (
     <TablePagination
@@ -40,7 +45,7 @@ export const MRT_TablePagination: FC<Props> = ({ instance, position }) => {
         MenuProps: { MenuListProps: { disablePadding: true } },
       }}
       component="div"
-      count={getPrePaginationRowModel().rows.length}
+      count={totalRowCount}
       onPageChange={(_: any, newPage: number) => setPageIndex(newPage)}
       onRowsPerPageChange={handleChangeRowsPerPage}
       page={pageIndex}