@cutting/material-react-table 4.0.5 → 5.0.0-beta.1

package/src/components/inputs/MRT_EditCellTextField.test.tsx

@@ -0,0 +1,36 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test } from 'vitest';
+
+import { type MRT_ColumnDef } from '../../types';
+import { MaterialReactTable } from '../MaterialReactTable';
+
+interface Person {
+  name: string;
+}
+
+const data: Person[] = [{ name: 'Alice' }];
+
+const columns = (): MRT_ColumnDef<Person>[] => [
+  { accessorKey: 'name', header: 'Name' },
+];
+
+describe('cell editing', () => {
+  test('opens a text field in the cell that was clicked', async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <MaterialReactTable
+        columns={columns()}
+        data={data}
+        editDisplayMode="cell"
+        enableEditing
+      />,
+    );
+
+    expect(container.querySelectorAll('tbody input')).toHaveLength(0);
+
+    await user.dblClick(container.querySelector('tbody td') as HTMLElement);
+
+    expect(container.querySelectorAll('tbody input')).toHaveLength(1);
+  });
+});

package/src/components/inputs/MRT_EditCellTextField.tsx

@@ -28,7 +28,6 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
   ...rest
 }: MRT_EditCellTextFieldProps<TData>) => {
   const {
-    getState,
     options: { createDisplayMode, editDisplayMode, muiEditTextFieldProps },
     refs: { editInputRefs },
     setCreatingRow,
@@ -37,7 +36,7 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
   } = table;
   const { column, row } = cell;
   const { columnDef } = column;
-  const { creatingRow, editingRow } = getState();
+  const { creatingRow, editingRow } = table.state;
   const { editSelectOptions, editVariant } = columnDef;
 
   const isCreating = creatingRow?.id === row.id;
@@ -72,7 +71,6 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
   const isSelectEdit = editVariant === 'select' || textFieldProps?.select;
 
   const saveInputValueToRowCache = (newValue: string) => {
-    //@ts-expect-error
     row._valuesCache[column.id] = newValue;
     if (isCreating) {
       setCreatingRow(row);

package/src/components/inputs/MRT_FilterCheckbox.tsx

@@ -22,10 +22,9 @@ export const MRT_FilterCheckbox = <TData extends MRT_RowData>({
   ...rest
 }: MRT_FilterCheckboxProps<TData>) => {
   const {
-    getState,
     options: { localization, muiFilterCheckboxProps },
   } = table;
-  const { density } = getState();
+  const { density } = table.state;
   const { columnDef } = column;
 
   const checkboxProps = {

package/src/components/inputs/MRT_FilterRangeSlider.tsx

@@ -8,6 +8,7 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
+import { getColumnFilterInfo } from '../../utils/column.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
 export interface MRT_FilterRangeSliderProps<TData extends MRT_RowData>
@@ -28,7 +29,7 @@ export const MRT_FilterRangeSlider = <TData extends MRT_RowData>({
   const { column } = header;
   const { columnDef } = column;
 
-  const currentFilterOption = columnDef._filterFn;
+  const { currentFilterOption } = getColumnFilterInfo({ header, table });
 
   const showChangeModeButton =
     enableColumnFilterModes && columnDef.enableColumnFilterModes !== false;

package/src/components/inputs/MRT_FilterTextField.test.tsx

@@ -0,0 +1,75 @@
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test } from 'vitest';
+
+import { type MRT_ColumnDef } from '../../types';
+import { MaterialReactTable } from '../MaterialReactTable';
+
+interface Person {
+  city: string;
+  name: string;
+}
+
+const data: Person[] = [
+  { city: 'Glasgow', name: 'Alice' },
+  { city: 'Dundee', name: 'Bob' },
+  { city: 'Glasgow', name: 'Cara' },
+];
+
+const columns = (): MRT_ColumnDef<Person>[] => [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'city', filterVariant: 'select', header: 'City' },
+];
+
+describe('faceted select filter', () => {
+  test('offers the distinct values present in the data', async () => {
+    const user = userEvent.setup();
+    const { baseElement, container } = render(
+      <MaterialReactTable
+        columns={columns()}
+        data={data}
+        enableFacetedValues
+        initialState={{ showColumnFilters: true }}
+      />,
+    );
+
+    const selects = container.querySelectorAll<HTMLElement>(
+      'thead [role="combobox"]',
+    );
+
+    await user.click(selects[selects.length - 1]);
+
+    const options = Array.from(
+      baseElement.querySelectorAll<HTMLElement>('li[role="option"]'),
+    ).map((li) => li.textContent);
+
+    expect(options).toContain('Glasgow (2)');
+    expect(options).toContain('Dundee (1)');
+  });
+
+  test('picking an option filters the rows', async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <MaterialReactTable
+        columns={columns()}
+        data={data}
+        enableFacetedValues
+        initialState={{ showColumnFilters: true }}
+      />,
+    );
+
+    const selects = container.querySelectorAll<HTMLElement>(
+      'thead [role="combobox"]',
+    );
+
+    await user.click(selects[selects.length - 1]);
+    await user.keyboard('{ArrowDown}{Enter}');
+
+    await waitFor(() => {
+      const names = Array.from(container.querySelectorAll('tbody tr')).map(
+        (tr) => tr.querySelector('td')?.textContent,
+      );
+      expect(names).toEqual(['Alice', 'Cara']);
+    });
+  });
+});

package/src/components/inputs/MRT_GlobalFilterTextField.tsx

@@ -28,7 +28,6 @@ export const MRT_GlobalFilterTextField = <TData extends MRT_RowData>({
   ...rest
 }: MRT_GlobalFilterTextFieldProps<TData>) => {
   const {
-    getState,
     options: {
       enableGlobalFilterModes,
       icons: { CloseIcon, SearchIcon },
@@ -39,7 +38,7 @@ export const MRT_GlobalFilterTextField = <TData extends MRT_RowData>({
     refs: { searchInputRef },
     setGlobalFilter,
   } = table;
-  const { globalFilter, showGlobalFilter } = getState();
+  const { globalFilter, showGlobalFilter } = table.state;
 
   const textFieldProps = {
     ...parseFromValuesOrFunc(muiSearchTextFieldProps, {

package/src/components/inputs/MRT_SelectCheckbox.test.tsx

@@ -0,0 +1,69 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test } from 'vitest';
+
+import { type MRT_ColumnDef } from '../../types';
+import { MaterialReactTable } from '../MaterialReactTable';
+
+interface Person {
+  name: string;
+}
+
+const data: Person[] = [{ name: 'Alice' }, { name: 'Bob' }];
+
+const columns = (): MRT_ColumnDef<Person>[] => [
+  { accessorKey: 'name', header: 'Name' },
+];
+
+const selectAll = (container: HTMLElement) =>
+  container.querySelector('thead input[type="checkbox"]') as HTMLInputElement;
+
+const rowBoxes = (container: HTMLElement) =>
+  Array.from(
+    container.querySelectorAll<HTMLInputElement>(
+      'tbody input[type="checkbox"]',
+    ),
+  );
+
+const renderTable = () =>
+  render(<MaterialReactTable columns={columns()} data={data} enableRowSelection />);
+
+describe('row selection checkboxes', () => {
+  test('select all checks every row', async () => {
+    const user = userEvent.setup();
+    const { container } = renderTable();
+
+    await user.click(selectAll(container));
+
+    expect(rowBoxes(container).map((box) => box.checked)).toEqual([true, true]);
+    expect(selectAll(container).checked).toBe(true);
+  });
+
+  test('select all is indeterminate when only some rows are selected', async () => {
+    const user = userEvent.setup();
+    const { container } = renderTable();
+
+    await user.click(rowBoxes(container)[0]);
+
+    expect(selectAll(container).checked).toBe(false);
+    expect(selectAll(container).dataset.indeterminate).toBe('true');
+  });
+
+  test('select all is not indeterminate when every row is selected', async () => {
+    const user = userEvent.setup();
+    const { container } = renderTable();
+
+    await user.click(selectAll(container));
+
+    expect(selectAll(container).dataset.indeterminate).toBe('false');
+  });
+
+  test('clicking a row checkbox toggles only that row', async () => {
+    const user = userEvent.setup();
+    const { container } = renderTable();
+
+    await user.click(rowBoxes(container)[0]);
+
+    expect(rowBoxes(container).map((box) => box.checked)).toEqual([true, false]);
+  });
+});

package/src/components/inputs/MRT_SelectCheckbox.tsx

@@ -31,7 +31,6 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
   ...rest
 }: MRT_SelectCheckboxProps<TData>) => {
   const {
-    getState,
     options: {
       enableMultiRowSelection,
       localization,
@@ -40,7 +39,7 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
       selectAllMode,
     },
   } = table;
-  const { density, isLoading } = getState();
+  const { density, isLoading } = table.state;
 
   const selectAll = !row;
 

package/src/components/menus/MRT_CellActionMenu.tsx

@@ -15,7 +15,6 @@ export const MRT_CellActionMenu = <TData extends MRT_RowData>({
   ...rest
 }: MRT_CellActionMenuProps<TData>) => {
   const {
-    getState,
     options: {
       editDisplayMode,
       enableClickToCopy,
@@ -27,7 +26,7 @@ export const MRT_CellActionMenu = <TData extends MRT_RowData>({
     },
     refs: { actionCellRef },
   } = table;
-  const { actionCell, density } = getState();
+  const { actionCell, density } = table.state;
   const cell = actionCell!;
   const { row } = cell;
   const { column } = cell;

package/src/components/menus/MRT_ColumnActionMenu.tsx

@@ -6,6 +6,7 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
+import { getColumnFilterInfo } from '../../utils/column.utils';
 import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
 import { MRT_FilterOptionMenu } from './MRT_FilterOptionMenu';
 
@@ -26,10 +27,8 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
 }: MRT_ColumnActionMenuProps<TData>) => {
   const {
     getAllLeafColumns,
-    getState,
     options: {
       columnFilterDisplayMode,
-      columnFilterModeOptions,
       enableColumnFilterModes,
       enableColumnFilters,
       enableColumnPinning,
@@ -56,13 +55,13 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
     refs: { filterInputRefs },
     setColumnFilterFns,
     setColumnOrder,
-    setColumnSizingInfo,
+    setColumnResizing,
     setShowColumnFilters,
   } = table;
   const { column } = header;
   const { columnDef } = column;
   const { columnSizing, columnVisibility, density, showColumnFilters } =
-    getState();
+    table.state;
   const columnFilterValue = column.getFilterValue();
 
   const [filterMenuAnchorEl, setFilterMenuAnchorEl] =
@@ -84,7 +83,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
   };
 
   const handleResetColumnSize = () => {
-    setColumnSizingInfo((old) => ({ ...old, isResizingColumn: false }));
+    setColumnResizing((old) => ({ ...old, isResizingColumn: false }));
     column.resetSize();
     setAnchorEl(null);
   };
@@ -94,7 +93,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
     setAnchorEl(null);
   };
 
-  const handlePinColumn = (pinDirection: 'left' | 'right' | false) => {
+  const handlePinColumn = (pinDirection: 'end' | 'start' | false) => {
     column.pin(pinDirection);
     setAnchorEl(null);
   };
@@ -108,7 +107,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
   const handleClearFilter = () => {
     column.setFilterValue(undefined);
     setAnchorEl(null);
-    if (['empty', 'notEmpty'].includes(columnDef._filterFn)) {
+    if (['empty', 'notEmpty'].includes(currentFilterOption)) {
       setColumnFilterFns((prev) => ({
         ...prev,
         [header.id]: allowedColumnFilterOptions?.[0] ?? 'fuzzy',
@@ -136,8 +135,8 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
 
   const isSelectFilter = !!columnDef.filterSelectOptions;
 
-  const allowedColumnFilterOptions =
-    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
+  const { allowedColumnFilterOptions, currentFilterOption } =
+    getColumnFilterInfo({ header, table });
 
   const showFilterModeSubMenu =
     enableColumnFilterModes &&
@@ -250,19 +249,19 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
     ...(enableColumnPinning && column.getCanPin()
       ? [
           <MRT_ActionMenuItem
-            disabled={column.getIsPinned() === 'left' || !column.getCanPin()}
+            disabled={column.getIsPinned() === 'start' || !column.getCanPin()}
             icon={<PushPinIcon style={{ transform: 'rotate(90deg)' }} />}
             key={7}
             label={localization.pinToLeft}
-            onClick={() => handlePinColumn('left')}
+            onClick={() => handlePinColumn('start')}
             table={table}
           />,
           <MRT_ActionMenuItem
-            disabled={column.getIsPinned() === 'right' || !column.getCanPin()}
+            disabled={column.getIsPinned() === 'end' || !column.getCanPin()}
             icon={<PushPinIcon style={{ transform: 'rotate(-90deg)' }} />}
             key={8}
             label={localization.pinToRight}
-            onClick={() => handlePinColumn('right')}
+            onClick={() => handlePinColumn('end')}
             table={table}
           />,
           <MRT_ActionMenuItem

package/src/components/menus/MRT_FilterOptionMenu.tsx

@@ -125,7 +125,6 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
   ...rest
 }: MRT_FilterOptionMenuProps<TData>) => {
   const {
-    getState,
     options: {
       columnFilterModeOptions,
       globalFilterModeOptions,
@@ -137,7 +136,7 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
     setColumnFilterFns,
     setGlobalFilterFn,
   } = table;
-  const { density, globalFilterFn } = getState();
+  const { density, globalFilterFn } = table.state;
   const { column } = header ?? {};
   const { columnDef } = column ?? {};
   const currentFilterValue = column?.getFilterValue();

package/src/components/menus/MRT_RowActionMenu.tsx

@@ -29,7 +29,6 @@ export const MRT_RowActionMenu = <TData extends MRT_RowData>({
   ...rest
 }: MRT_RowActionMenuProps<TData>) => {
   const {
-    getState,
     options: {
       editDisplayMode,
       enableEditing,
@@ -39,7 +38,7 @@ export const MRT_RowActionMenu = <TData extends MRT_RowData>({
       renderRowActionMenuItems,
     },
   } = table;
-  const { density } = getState();
+  const { density } = table.state;
 
   const menuItems = useMemo(() => {
     const items: ReactNode[] = [];

package/src/components/menus/MRT_ShowHideColumnsMenu.tsx

@@ -36,7 +36,6 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
     getIsSomeColumnsVisible,
     getLeftLeafColumns,
     getRightLeafColumns,
-    getState,
     initialState,
     options: {
       enableColumnOrdering,
@@ -46,7 +45,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
       mrtTheme: { menuBackgroundColor },
     },
   } = table;
-  const { columnOrder, columnPinning, density } = getState();
+  const { columnOrder, columnPinning, density } = table.state;
 
   const handleToggleAllColumns = (value?: boolean) => {
     const updates =

package/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -43,7 +43,6 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
   ...rest
 }: MRT_ShowHideColumnsMenuItemsProps<TData>) => {
   const {
-    getState,
     options: {
       enableColumnOrdering,
       enableColumnPinning,
@@ -54,7 +53,7 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
     setColumnOrder,
     setColumnPinning,
   } = table;
-  const { columnOrder } = getState();
+  const { columnOrder } = table.state;
   const { columnDef } = column;
   const { columnDefType } = columnDef;
 
@@ -93,9 +92,9 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
         columnOrder,
       );
       setColumnOrder(reorderedColumns);
-      setColumnPinning(({ left = [], right = [] }) => ({
-        left: reorderedColumns.filter((header) => left.includes(header)),
-        right: reorderedColumns.filter((header) => right.includes(header)),
+      setColumnPinning(({ end = [], start = [] }) => ({
+        end: reorderedColumns.filter((header) => end.includes(header)),
+        start: reorderedColumns.filter((header) => start.includes(header)),
       }));
     }
   };

package/src/components/modals/MRT_EditRowModal.test.tsx

@@ -0,0 +1,54 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test } from 'vitest';
+
+import { type MRT_ColumnDef } from '../../types';
+import { MaterialReactTable } from '../MaterialReactTable';
+
+interface Person {
+  name: string;
+}
+
+const data: Person[] = [{ name: 'Alice' }];
+
+const columns = (): MRT_ColumnDef<Person>[] => [
+  { accessorKey: 'name', header: 'Name' },
+];
+
+describe('row editing', () => {
+  test('opens the edit modal when the edit button is clicked', async () => {
+    const user = userEvent.setup();
+    const { baseElement, container } = render(
+      <MaterialReactTable
+        columns={columns()}
+        data={data}
+        editDisplayMode="modal"
+        enableEditing
+      />,
+    );
+
+    await user.click(
+      container.querySelector('[aria-label="Edit"]') as HTMLElement,
+    );
+
+    expect(baseElement.querySelectorAll('input').length).toBeGreaterThan(0);
+  });
+
+  test('opens inline inputs when editDisplayMode is row', async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <MaterialReactTable
+        columns={columns()}
+        data={data}
+        editDisplayMode="row"
+        enableEditing
+      />,
+    );
+
+    await user.click(
+      container.querySelector('[aria-label="Edit"]') as HTMLElement,
+    );
+
+    expect(container.querySelectorAll('tbody input').length).toBeGreaterThan(0);
+  });
+});

package/src/components/modals/MRT_EditRowModal.tsx

@@ -25,7 +25,6 @@ export const MRT_EditRowModal = <TData extends MRT_RowData>({
   ...rest
 }: MRT_EditRowModalProps<TData>) => {
   const {
-    getState,
     options: {
       localization,
       muiCreateRowModalProps,
@@ -38,7 +37,7 @@ export const MRT_EditRowModal = <TData extends MRT_RowData>({
     setCreatingRow,
     setEditingRow,
   } = table;
-  const { creatingRow, editingRow } = getState();
+  const { creatingRow, editingRow } = table.state;
   const row = (creatingRow ?? editingRow) as MRT_Row<TData>;
 
   const dialogProps = {

package/src/components/table/MRT_Table.tsx

@@ -19,7 +19,6 @@ export const MRT_Table = <TData extends MRT_RowData>({
 }: MRT_TableProps<TData>) => {
   const {
     getFlatHeaders,
-    getState,
     options: {
       columns,
       enableStickyHeader,
@@ -31,8 +30,8 @@ export const MRT_Table = <TData extends MRT_RowData>({
       renderCaption,
     },
   } = table;
-  const { columnSizing, columnSizingInfo, columnVisibility, isFullScreen } =
-    getState();
+  const { columnResizing, columnSizing, columnVisibility, isFullScreen } =
+    table.state;
 
   const tableProps = {
     ...parseFromValuesOrFunc(muiTableProps, { table }),
@@ -51,7 +50,7 @@ export const MRT_Table = <TData extends MRT_RowData>({
       colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
     }
     return colSizes;
-  }, [columns, columnSizing, columnSizingInfo, columnVisibility]);
+  }, [columns, columnSizing, columnResizing, columnVisibility]);
 
   const columnVirtualizer = useMRT_ColumnVirtualizer(table);
 
@@ -74,7 +73,7 @@ export const MRT_Table = <TData extends MRT_RowData>({
     >
       {!!Caption && <caption>{Caption}</caption>}
       {enableTableHead && <MRT_TableHead {...commonTableGroupProps} />}
-      {memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (
+      {memoMode === 'table-body' || columnResizing.isResizingColumn ? (
         <Memo_MRT_TableBody {...commonTableGroupProps} />
       ) : (
         <MRT_TableBody {...commonTableGroupProps} />

package/src/components/table/MRT_TableContainer.tsx

@@ -21,7 +21,6 @@ export const MRT_TableContainer = <TData extends MRT_RowData>({
   ...rest
 }: MRT_TableContainerProps<TData>) => {
   const {
-    getState,
     options: {
       createDisplayMode,
       editDisplayMode,
@@ -38,7 +37,7 @@ export const MRT_TableContainer = <TData extends MRT_RowData>({
     isFullScreen,
     isLoading,
     showLoadingOverlay,
-  } = getState();
+  } = table.state;
 
   const loading =
     showLoadingOverlay !== false && (isLoading || showLoadingOverlay);

package/src/components/table/MRT_TablePaper.tsx

@@ -17,7 +17,6 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
   ...rest
 }: MRT_TablePaperProps<TData>) => {
   const {
-    getState,
     options: {
       enableBottomToolbar,
       enableTopToolbar,
@@ -28,7 +27,7 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
     },
     refs: { tablePaperRef },
   } = table;
-  const { isFullScreen } = getState();
+  const { isFullScreen } = table.state;
 
   const paperProps = {
     ...parseFromValuesOrFunc(muiTablePaperProps, { table }),

package/src/components/toolbar/MRT_BottomToolbar.tsx

@@ -1,4 +1,4 @@
-import { Box, useMediaQuery, type BoxProps } from '@mui/material';
+import { Box, type BoxProps, useMediaQuery } from '@mui/material';
 import { alpha } from '@mui/material/styles';
 
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
@@ -19,7 +19,6 @@ export const MRT_BottomToolbar = <TData extends MRT_RowData>({
   ...rest
 }: MRT_BottomToolbarProps<TData>) => {
   const {
-    getState,
     options: {
       enablePagination,
       muiBottomToolbarProps,
@@ -30,7 +29,7 @@ export const MRT_BottomToolbar = <TData extends MRT_RowData>({
     },
     refs: { bottomToolbarRef },
   } = table;
-  const { isFullScreen } = getState();
+  const { isFullScreen } = table.state;
 
   const isMobile = useMediaQuery('(max-width:720px)');
 

package/src/components/toolbar/MRT_LinearProgressBar.tsx

@@ -16,10 +16,9 @@ export const MRT_LinearProgressBar = <TData extends MRT_RowData>({
   ...rest
 }: MRT_LinearProgressBarProps<TData>) => {
   const {
-    getState,
     options: { muiLinearProgressProps },
   } = table;
-  const { isSaving, showProgressBars } = getState();
+  const { isSaving, showProgressBars } = table.state;
 
   const linearProgressProps = {
     ...parseFromValuesOrFunc(muiLinearProgressProps, {

package/src/components/toolbar/MRT_TablePagination.tsx

@@ -37,7 +37,6 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
   const isMobile = useMediaQuery('(max-width: 720px)');
 
   const {
-    getState,
     options: {
       enableToolbarInternalActions,
       icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon },
@@ -49,7 +48,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
   } = table;
   const {
     pagination: { pageIndex = 0, pageSize = 10 },
-  } = getState();
+  } = table.state;
 
   const paginationProps = {
     ...parseFromValuesOrFunc(muiPaginationProps, {