material-react-table 2.6.1 → 2.8.0

package/src/{table → components/table}/MRT_TableLoadingOverlay.tsx

@@ -3,9 +3,9 @@ import CircularProgress, {
   type CircularProgressProps,
 } from '@mui/material/CircularProgress';
 import { alpha } from '@mui/material/styles';
-import { parseFromValuesOrFunc } from '../column.utils';
-import { getMRTTheme } from '../style.utils';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { getMRTTheme } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> extends CircularProgressProps {
   table: MRT_TableInstance<TData>;

package/src/{table → components/table}/MRT_TablePaper.tsx

@@ -1,10 +1,10 @@
 import Paper, { type PaperProps } from '@mui/material/Paper';
 import { MRT_TableContainer } from './MRT_TableContainer';
-import { parseFromValuesOrFunc } from '../column.utils';
-import { getMRTTheme } from '../style.utils';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { getMRTTheme } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
 import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends MRT_RowData> extends PaperProps {
   table: MRT_TableInstance<TData>;

package/src/{toolbar → components/toolbar}/MRT_BottomToolbar.tsx

@@ -5,9 +5,9 @@ import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone';
-import { parseFromValuesOrFunc } from '../column.utils';
-import { getCommonToolbarStyles } from '../style.utils';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { getCommonToolbarStyles } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> extends BoxProps {
   table: MRT_TableInstance<TData>;

package/src/{toolbar → components/toolbar}/MRT_LinearProgressBar.tsx

@@ -2,8 +2,8 @@ import Collapse from '@mui/material/Collapse';
 import LinearProgress, {
   type LinearProgressProps,
 } from '@mui/material/LinearProgress';
-import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> extends LinearProgressProps {
   isTopToolbar: boolean;

package/src/{toolbar → components/toolbar}/MRT_TablePagination.tsx

@@ -8,9 +8,9 @@ import Select, { type SelectProps } from '@mui/material/Select';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
-import { parseFromValuesOrFunc } from '../column.utils';
-import { flipIconStyles } from '../style.utils';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { flipIconStyles, getCommonTooltipProps } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 
 const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
 
@@ -79,6 +79,8 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
   const disableBack = pageIndex <= 0 || disabled;
   const disableNext = lastRowIndex >= totalRowCount || disabled;
 
+  const tooltipProps = getCommonTooltipProps();
+
   return (
     <Box
       className="MuiTablePagination-root"
@@ -173,7 +175,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
           } ${totalRowCount.toLocaleString()}`}</Typography>
           <Box gap="xs">
             {showFirstButton && (
-              <Tooltip enterDelay={1000} title={localization.goToFirstPage}>
+              <Tooltip {...tooltipProps} title={localization.goToFirstPage}>
                 <span>
                   <IconButton
                     aria-label={localization.goToFirstPage}
@@ -186,7 +188,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
                 </span>
               </Tooltip>
             )}
-            <Tooltip enterDelay={1000} title={localization.goToPreviousPage}>
+            <Tooltip {...tooltipProps} title={localization.goToPreviousPage}>
               <span>
                 <IconButton
                   aria-label={localization.goToPreviousPage}
@@ -198,7 +200,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
                 </IconButton>
               </span>
             </Tooltip>
-            <Tooltip enterDelay={1000} title={localization.goToNextPage}>
+            <Tooltip {...tooltipProps} title={localization.goToNextPage}>
               <span>
                 <IconButton
                   aria-label={localization.goToNextPage}
@@ -211,7 +213,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
               </span>
             </Tooltip>
             {showLastButton && (
-              <Tooltip enterDelay={1000} title={localization.goToLastPage}>
+              <Tooltip {...tooltipProps} title={localization.goToLastPage}>
                 <span>
                   <IconButton
                     aria-label={localization.goToLastPage}

package/src/{toolbar → components/toolbar}/MRT_ToolbarAlertBanner.tsx

@@ -5,9 +5,9 @@ import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import Collapse from '@mui/material/Collapse';
 import Stack from '@mui/material/Stack';
-import { parseFromValuesOrFunc } from '../column.utils';
-import { MRT_SelectCheckbox } from '../inputs';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
 
 interface Props<TData extends MRT_RowData> extends AlertProps {
   stackAlertBanner?: boolean;

package/src/{toolbar → components/toolbar}/MRT_ToolbarDropZone.tsx

@@ -3,8 +3,8 @@ import Box, { type BoxProps } from '@mui/material/Box';
 import Fade from '@mui/material/Fade';
 import Typography from '@mui/material/Typography';
 import { alpha } from '@mui/material/styles';
-import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> extends BoxProps {
   table: MRT_TableInstance<TData>;

package/src/{toolbar → components/toolbar}/MRT_ToolbarInternalButtons.tsx

@@ -1,11 +1,11 @@
 import Box, { type BoxProps } from '@mui/material/Box';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
 import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingButton';
 import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleFullScreenButton } from '../buttons/MRT_ToggleFullScreenButton';
 import { MRT_ToggleGlobalFilterButton } from '../buttons/MRT_ToggleGlobalFilterButton';
-import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends MRT_RowData> extends BoxProps {
   table: MRT_TableInstance<TData>;

package/src/{toolbar → components/toolbar}/MRT_TopToolbar.tsx

@@ -5,10 +5,10 @@ import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone';
 import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
-import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { getCommonToolbarStyles } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_GlobalFilterTextField } from '../inputs/MRT_GlobalFilterTextField';
-import { getCommonToolbarStyles } from '../style.utils';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends MRT_RowData> {
   table: MRT_TableInstance<TData>;

package/src/{filterFns.ts → fns/filterFns.ts}

@@ -4,7 +4,7 @@ import {
   rankings,
 } from '@tanstack/match-sorter-utils';
 import { type Row, filterFns } from '@tanstack/react-table';
-import { type MRT_RowData } from './types';
+import { type MRT_RowData } from '../types';
 
 const fuzzy = <TData extends MRT_RowData>(
   row: Row<TData>,

package/src/{sortingFns.ts → fns/sortingFns.ts}

@@ -1,6 +1,6 @@
 import { type RankingInfo, compareItems } from '@tanstack/match-sorter-utils';
 import { type Row, sortingFns } from '@tanstack/react-table';
-import { type MRT_Row, type MRT_RowData } from './types';
+import { type MRT_Row, type MRT_RowData } from '../types';
 
 const fuzzy = <TData extends MRT_RowData>(
   rowA: Row<TData>,

package/src/hooks/display-columns/getMRT_DisplayColumns.tsx

@@ -0,0 +1,26 @@
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import { getMRT_RowActionsColumnDef } from './getMRT_RowActionsColumnDef';
+import { getMRT_RowDragColumnDef } from './getMRT_RowDragColumnDef';
+import { getMRT_RowExpandColumnDef } from './getMRT_RowExpandColumnDef';
+import { getMRT_RowNumbersColumnDef } from './getMRT_RowNumbersColumnDef';
+import { getMRT_RowPinningColumnDef } from './getMRT_RowPinningColumnDef';
+import { getMRT_RowSelectColumnDef } from './getMRT_RowSelectColumnDef';
+import { getMRT_RowSpacerColumnDef } from './getMRT_RowSpacerColumnDef';
+
+export const getMRT_DisplayColumns = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData>[] => {
+  return [
+    getMRT_RowNumbersColumnDef(tableOptions),
+    getMRT_RowSelectColumnDef(tableOptions),
+    getMRT_RowExpandColumnDef(tableOptions),
+    getMRT_RowActionsColumnDef(tableOptions),
+    getMRT_RowDragColumnDef(tableOptions),
+    getMRT_RowPinningColumnDef(tableOptions),
+    getMRT_RowSpacerColumnDef(tableOptions),
+  ].filter(Boolean) as MRT_ColumnDef<TData>[];
+};

package/src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx

@@ -0,0 +1,34 @@
+import { MRT_ToggleRowActionMenuButton } from '../../components/buttons/MRT_ToggleRowActionMenuButton';
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import {
+  defaultDisplayColumnProps,
+  showRowActionsColumn,
+} from '../../utils/displayColumn.utils';
+
+export const getMRT_RowActionsColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> | null => {
+  if (!showRowActionsColumn(tableOptions)) {
+    return null;
+  }
+
+  return {
+    Cell: ({ cell, row, staticRowIndex, table }) => (
+      <MRT_ToggleRowActionMenuButton
+        cell={cell}
+        row={row}
+        staticRowIndex={staticRowIndex}
+        table={table}
+      />
+    ),
+    ...defaultDisplayColumnProps({
+      header: 'actions',
+      id: 'mrt-row-actions',
+      tableOptions,
+    }),
+  };
+};

package/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx

@@ -0,0 +1,35 @@
+import { type RefObject } from 'react';
+import { MRT_TableBodyRowGrabHandle } from '../../components/body/MRT_TableBodyRowGrabHandle';
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import {
+  defaultDisplayColumnProps,
+  showRowDragColumn,
+} from '../../utils/displayColumn.utils';
+
+export const getMRT_RowDragColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> | null => {
+  if (!showRowDragColumn(tableOptions)) {
+    return null;
+  }
+
+  return {
+    Cell: ({ row, rowRef, table }) => (
+      <MRT_TableBodyRowGrabHandle
+        row={row}
+        rowRef={rowRef as RefObject<HTMLTableRowElement>}
+        table={table}
+      />
+    ),
+    grow: false,
+    ...defaultDisplayColumnProps({
+      header: 'move',
+      id: 'mrt-row-drag',
+      tableOptions,
+    }),
+  };
+};

package/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx

@@ -0,0 +1,96 @@
+import { type ReactNode } from 'react';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import { MRT_ExpandAllButton } from '../../components/buttons/MRT_ExpandAllButton';
+import { MRT_ExpandButton } from '../../components/buttons/MRT_ExpandButton';
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import {
+  defaultDisplayColumnProps,
+  showRowExpandColumn,
+} from '../../utils/displayColumn.utils';
+import { getCommonTooltipProps } from '../../utils/style.utils';
+
+export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> | null => {
+  if (!showRowExpandColumn(tableOptions)) {
+    return null;
+  }
+
+  const {
+    defaultColumn,
+    enableExpandAll,
+    groupedColumnMode,
+    positionExpandColumn,
+    renderDetailPanel,
+    state: { grouping },
+  } = tableOptions;
+
+  const alignProps =
+    positionExpandColumn === 'last'
+      ? ({
+          align: 'right',
+        } as const)
+      : undefined;
+
+  return {
+    Cell: ({ cell, column, row, staticRowIndex, table }) => {
+      const expandButtonProps = { row, staticRowIndex, table };
+      const subRowsLength = row.subRows?.length;
+      if (groupedColumnMode === 'remove' && row.groupingColumnId) {
+        return (
+          <Stack alignItems="center" flexDirection="row" gap="0.25rem">
+            <MRT_ExpandButton {...expandButtonProps} />
+            <Tooltip
+              {...getCommonTooltipProps('right')}
+              title={table.getColumn(row.groupingColumnId).columnDef.header}
+            >
+              <span>{row.groupingValue as ReactNode}</span>
+            </Tooltip>
+            {!!subRowsLength && <span>({subRowsLength})</span>}
+          </Stack>
+        );
+      } else {
+        return (
+          <>
+            <MRT_ExpandButton {...expandButtonProps} />
+            {column.columnDef.GroupedCell?.({ cell, column, row, table })}
+          </>
+        );
+      }
+    },
+    Header: enableExpandAll
+      ? ({ table }) => {
+          return (
+            <>
+              <MRT_ExpandAllButton table={table} />
+              {groupedColumnMode === 'remove' &&
+                grouping
+                  ?.map(
+                    (groupedColumnId) =>
+                      table.getColumn(groupedColumnId).columnDef.header,
+                  )
+                  ?.join(', ')}
+            </>
+          );
+        }
+      : undefined,
+    muiTableBodyCellProps: alignProps,
+    muiTableHeadCellProps: alignProps,
+    ...defaultDisplayColumnProps({
+      header: 'expand',
+      id: 'mrt-row-expand',
+      size:
+        groupedColumnMode === 'remove'
+          ? defaultColumn?.size
+          : renderDetailPanel
+            ? 60
+            : 100,
+      tableOptions,
+    }),
+  };
+};

package/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx

@@ -0,0 +1,36 @@
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import {
+  defaultDisplayColumnProps,
+  showRowNumbersColumn,
+} from '../../utils/displayColumn.utils';
+
+export const getMRT_RowNumbersColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> | null => {
+  if (!showRowNumbersColumn(tableOptions)) {
+    return null;
+  }
+
+  const { localization, rowNumberDisplayMode } = tableOptions;
+  const {
+    pagination: { pageIndex, pageSize },
+  } = tableOptions.state;
+
+  return {
+    Cell: ({ row, staticRowIndex }) =>
+      ((rowNumberDisplayMode === 'static'
+        ? (staticRowIndex || 0) + (pageSize || 0) * (pageIndex || 0)
+        : row.index) ?? 0) + 1,
+    Header: () => localization.rowNumber,
+    grow: false,
+    ...defaultDisplayColumnProps({
+      header: 'rowNumbers',
+      id: 'mrt-row-numbers',
+      tableOptions,
+    }),
+  };
+};

package/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx

@@ -0,0 +1,30 @@
+import { MRT_TableBodyRowPinButton } from '../../components/body/MRT_TableBodyRowPinButton';
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import {
+  defaultDisplayColumnProps,
+  showRowPinningColumn,
+} from '../../utils/displayColumn.utils';
+
+export const getMRT_RowPinningColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> | null => {
+  if (!showRowPinningColumn(tableOptions)) {
+    return null;
+  }
+
+  return {
+    Cell: ({ row, table }) => (
+      <MRT_TableBodyRowPinButton row={row} table={table} />
+    ),
+    grow: false,
+    ...defaultDisplayColumnProps({
+      header: 'pin',
+      id: 'mrt-row-pin',
+      tableOptions,
+    }),
+  };
+};

package/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx

@@ -0,0 +1,40 @@
+import { MRT_SelectCheckbox } from '../../components/inputs/MRT_SelectCheckbox';
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import {
+  defaultDisplayColumnProps,
+  showRowSelectionColumn,
+} from '../../utils/displayColumn.utils';
+
+export const getMRT_RowSelectColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> | null => {
+  if (!showRowSelectionColumn(tableOptions)) {
+    return null;
+  }
+
+  const { enableMultiRowSelection, enableSelectAll } = tableOptions;
+
+  return {
+    Cell: ({ row, staticRowIndex, table }) => (
+      <MRT_SelectCheckbox
+        row={row}
+        staticRowIndex={staticRowIndex}
+        table={table}
+      />
+    ),
+    Header:
+      enableSelectAll && enableMultiRowSelection
+        ? ({ table }) => <MRT_SelectCheckbox selectAll table={table} />
+        : undefined,
+    grow: false,
+    ...defaultDisplayColumnProps({
+      header: 'select',
+      id: 'mrt-row-select',
+      tableOptions,
+    }),
+  };
+};

package/src/hooks/display-columns/getMRT_RowSpacerColumnDef.tsx

@@ -0,0 +1,40 @@
+import { MRT_DefaultDisplayColumn } from '../useMRT_TableOptions';
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import {
+  defaultDisplayColumnProps,
+  showRowSpacerColumn,
+} from '../../utils/displayColumn.utils';
+
+const blankColProps = {
+  children: null,
+  sx: {
+    minWidth: 0,
+    p: 0,
+    width: 0,
+  },
+};
+
+export const getMRT_RowSpacerColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> | null => {
+  if (!showRowSpacerColumn(tableOptions)) {
+    return null;
+  }
+
+  return {
+    ...defaultDisplayColumnProps({
+      id: 'mrt-row-spacer',
+      size: 0,
+      tableOptions,
+    }),
+    grow: true,
+    ...MRT_DefaultDisplayColumn,
+    muiTableBodyCellProps: blankColProps,
+    muiTableFooterCellProps: blankColProps,
+    muiTableHeadCellProps: blankColProps,
+  };
+};

package/src/hooks/useMRT_ColumnVirtualizer.ts

@@ -1,14 +1,12 @@
 import { useCallback, useMemo } from 'react';
 import { type Range, useVirtualizer } from '@tanstack/react-virtual';
-import {
-  extraIndexRangeExtractor,
-  parseFromValuesOrFunc,
-} from '../column.utils';
 import {
   type MRT_ColumnVirtualizer,
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
+import { parseFromValuesOrFunc } from '../utils/utils';
+import { extraIndexRangeExtractor } from '../utils/virtualization.utils';
 
 export const useMRT_ColumnVirtualizer = <
   TData extends MRT_RowData,

package/src/hooks/useMRT_Effects.ts

@@ -1,16 +1,17 @@
 import { useEffect, useReducer, useRef } from 'react';
-import { getCanRankRows } from '../column.utils';
 import {
   type MRT_RowData,
   type MRT_SortingState,
   type MRT_TableInstance,
 } from '../types';
+import { getCanRankRows } from '../utils/row.utils';
 
 export const useMRT_Effects = <TData extends MRT_RowData>(
   table: MRT_TableInstance<TData>,
 ) => {
   const {
     getIsSomeRowsPinned,
+    getPrePaginationRowModel,
     getState,
     options: { enablePagination, enableRowPinning, rowCount },
   } = table;
@@ -24,6 +25,8 @@ export const useMRT_Effects = <TData extends MRT_RowData>(
     sorting,
   } = getState();
 
+  const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
+
   const rerender = useReducer(() => ({}), {})[1];
   const isMounted = useRef(false);
   const initialBodyHeight = useRef<string>();
@@ -57,13 +60,11 @@ export const useMRT_Effects = <TData extends MRT_RowData>(
   useEffect(() => {
     if (!enablePagination || isLoading || showSkeletons) return;
     const { pageIndex, pageSize } = pagination;
-    const totalRowCount =
-      rowCount ?? table.getPrePaginationRowModel().rows.length;
     const firstVisibleRowIndex = pageIndex * pageSize;
-    if (firstVisibleRowIndex > totalRowCount) {
-      table.setPageIndex(Math.floor(totalRowCount / pageSize));
+    if (firstVisibleRowIndex >= totalRowCount) {
+      table.setPageIndex(Math.ceil(totalRowCount / pageSize) - 1);
     }
-  }, [rowCount, table.getPrePaginationRowModel().rows.length]);
+  }, [totalRowCount]);
 
   //turn off sort when global filter is looking for ranked results
   const appliedSort = useRef<MRT_SortingState>(sorting);

package/src/hooks/useMRT_RowVirtualizer.ts

@@ -1,15 +1,13 @@
 import { useCallback } from 'react';
 import { type Range, useVirtualizer } from '@tanstack/react-virtual';
-import {
-  extraIndexRangeExtractor,
-  parseFromValuesOrFunc,
-} from '../column.utils';
 import {
   type MRT_Row,
   type MRT_RowData,
   type MRT_RowVirtualizer,
   type MRT_TableInstance,
 } from '../types';
+import { parseFromValuesOrFunc } from '../utils/utils';
+import { extraIndexRangeExtractor } from '../utils/virtualization.utils';
 
 export const useMRT_RowVirtualizer = <
   TData extends MRT_RowData,