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

package/src/components/buttons/MRT_ColumnPinningButtons.tsx

@@ -27,7 +27,7 @@ export const MRT_ColumnPinningButtons = <TData extends MRT_RowData>({
     },
   } = table;
 
-  const handlePinColumn = (pinDirection: 'left' | 'right' | false) => {
+  const handlePinColumn = (pinDirection: 'end' | 'start' | false) => {
     column.pin(pinDirection);
   };
 
@@ -49,7 +49,7 @@ export const MRT_ColumnPinningButtons = <TData extends MRT_RowData>({
       ) : (
         <>
           <Tooltip title={localization.pinToLeft}>
-            <IconButton onClick={() => handlePinColumn('left')} size="small">
+            <IconButton onClick={() => handlePinColumn('start')} size="small">
               <PushPinIcon
                 style={{
                   transform: 'rotate(90deg)',
@@ -58,7 +58,7 @@ export const MRT_ColumnPinningButtons = <TData extends MRT_RowData>({
             </IconButton>
           </Tooltip>
           <Tooltip title={localization.pinToRight}>
-            <IconButton onClick={() => handlePinColumn('right')} size="small">
+            <IconButton onClick={() => handlePinColumn('end')} size="small">
               <PushPinIcon
                 style={{
                   transform: 'rotate(-90deg)',

package/src/components/buttons/MRT_EditActionButtons.test.tsx

@@ -0,0 +1,50 @@
+import { act, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test, vi } from 'vitest';
+
+import { type MRT_ColumnDef, type MRT_TableInstance } 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('creating a row', () => {
+  test('calls onCreatingRowSave when save is clicked', async () => {
+    const user = userEvent.setup();
+    const onCreatingRowSave = vi.fn();
+    let table: MRT_TableInstance<Person> | undefined;
+
+    const { container } = render(
+      <MaterialReactTable
+        columns={columns()}
+        createDisplayMode="row"
+        data={data}
+        enableEditing
+        onCreatingRowSave={onCreatingRowSave}
+        renderTopToolbarCustomActions={({ table: t }) => {
+          table = t;
+          return null;
+        }}
+      />,
+    );
+
+    act(() => {
+      table?.setCreatingRow(true);
+    });
+
+    expect(container.querySelectorAll('tbody input').length).toBeGreaterThan(0);
+
+    await user.click(
+      container.querySelector('[aria-label="Save"]') as HTMLElement,
+    );
+
+    expect(onCreatingRowSave).toHaveBeenCalled();
+  });
+});

package/src/components/buttons/MRT_EditActionButtons.tsx

@@ -25,7 +25,6 @@ export const MRT_EditActionButtons = <TData extends MRT_RowData>({
   ...rest
 }: MRT_EditActionButtonsProps<TData>) => {
   const {
-    getState,
     options: {
       icons: { CancelIcon, SaveIcon },
       localization,
@@ -38,7 +37,7 @@ export const MRT_EditActionButtons = <TData extends MRT_RowData>({
     setCreatingRow,
     setEditingRow,
   } = table;
-  const { creatingRow, editingRow, isSaving } = getState();
+  const { creatingRow, editingRow, isSaving } = table.state;
 
   const isCreating = creatingRow?.id === row.id;
   const isEditing = editingRow?.id === row.id;
@@ -63,7 +62,6 @@ export const MRT_EditActionButtons = <TData extends MRT_RowData>({
           input.value !== undefined &&
           Object.hasOwn(row?._valuesCache as object, input.name)
         ) {
-          // @ts-expect-error
           row._valuesCache[input.name] = input.value;
         }
       });

package/src/components/buttons/MRT_ExpandAllButton.tsx

@@ -18,7 +18,6 @@ export const MRT_ExpandAllButton = <TData extends MRT_RowData>({
     getCanSomeRowsExpand,
     getIsAllRowsExpanded,
     getIsSomeRowsExpanded,
-    getState,
     options: {
       icons: { KeyboardDoubleArrowDownIcon },
       localization,
@@ -27,7 +26,7 @@ export const MRT_ExpandAllButton = <TData extends MRT_RowData>({
     },
     toggleAllRowsExpanded,
   } = table;
-  const { density, isLoading } = getState();
+  const { density, isLoading } = table.state;
 
   const iconButtonProps = {
     ...parseFromValuesOrFunc(muiExpandAllButtonProps, {

package/src/components/buttons/MRT_ExpandButton.tsx

@@ -25,7 +25,6 @@ export const MRT_ExpandButton = <TData extends MRT_RowData>({
 }: MRT_ExpandButtonProps<TData>) => {
   const theme = useTheme();
   const {
-    getState,
     options: {
       icons: { ExpandMoreIcon },
       localization,
@@ -34,7 +33,7 @@ export const MRT_ExpandButton = <TData extends MRT_RowData>({
       renderDetailPanel,
     },
   } = table;
-  const { density } = getState();
+  const { density } = table.state;
 
   const iconButtonProps = parseFromValuesOrFunc(muiExpandButtonProps, {
     row,

package/src/components/buttons/MRT_ToggleDensePaddingButton.test.tsx

@@ -0,0 +1,38 @@
+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' },
+];
+
+const bodyCellPadding = (container: HTMLElement) =>
+  getComputedStyle(
+    container.querySelector('tbody td') as HTMLElement,
+  ).getPropertyValue('padding');
+
+describe('density toggle', () => {
+  test('changes body cell padding when clicked', async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <MaterialReactTable columns={columns()} data={data} />,
+    );
+
+    const before = bodyCellPadding(container);
+
+    await user.click(
+      container.querySelector('[aria-label="Toggle density"]') as HTMLElement,
+    );
+
+    expect(bodyCellPadding(container)).not.toBe(before);
+  });
+});

package/src/components/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -13,14 +13,13 @@ export const MRT_ToggleDensePaddingButton = <TData extends MRT_RowData>({
   ...rest
 }: MRT_ToggleDensePaddingButtonProps<TData>) => {
   const {
-    getState,
     options: {
       icons: { DensityLargeIcon, DensityMediumIcon, DensitySmallIcon },
       localization,
     },
     setDensity,
   } = table;
-  const { density } = getState();
+  const { density } = table.state;
 
   const handleToggleDensePadding = () => {
     const nextDensity =

package/src/components/buttons/MRT_ToggleFiltersButton.test.tsx

@@ -0,0 +1,38 @@
+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' },
+];
+
+const filterInputCount = (container: HTMLElement) =>
+  container.querySelectorAll('thead input').length;
+
+describe('filters toggle', () => {
+  test('reveals the column filter inputs when clicked', async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <MaterialReactTable columns={columns()} data={data} />,
+    );
+
+    expect(filterInputCount(container)).toBe(0);
+
+    await user.click(
+      container.querySelector(
+        '[aria-label="Show/Hide filters"]',
+      ) as HTMLElement,
+    );
+
+    expect(filterInputCount(container)).toBeGreaterThan(0);
+  });
+});

package/src/components/buttons/MRT_ToggleFiltersButton.tsx

@@ -13,14 +13,13 @@ export const MRT_ToggleFiltersButton = <TData extends MRT_RowData>({
   ...rest
 }: MRT_ToggleFiltersButtonProps<TData>) => {
   const {
-    getState,
     options: {
       icons: { FilterListIcon, FilterListOffIcon },
       localization,
     },
     setShowColumnFilters,
   } = table;
-  const { showColumnFilters } = getState();
+  const { showColumnFilters } = table.state;
 
   const handleToggleShowFilters = () => {
     setShowColumnFilters(!showColumnFilters);

package/src/components/buttons/MRT_ToggleFullScreenButton.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('full screen toggle', () => {
+  test('fixes the table paper to the viewport when clicked', async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <MaterialReactTable columns={columns()} data={data} />,
+    );
+
+    const paper = container.firstElementChild as HTMLElement;
+    expect(getComputedStyle(paper).position).not.toBe('fixed');
+
+    await user.click(
+      container.querySelector(
+        '[aria-label="Toggle full screen"]',
+      ) as HTMLElement,
+    );
+
+    expect(getComputedStyle(paper).position).toBe('fixed');
+  });
+});

package/src/components/buttons/MRT_ToggleFullScreenButton.tsx

@@ -14,14 +14,13 @@ export const MRT_ToggleFullScreenButton = <TData extends MRT_RowData>({
   ...rest
 }: MRT_ToggleFullScreenButtonProps<TData>) => {
   const {
-    getState,
     options: {
       icons: { FullscreenExitIcon, FullscreenIcon },
       localization,
     },
     setIsFullScreen,
   } = table;
-  const { isFullScreen } = getState();
+  const { isFullScreen } = table.state;
 
   const [tooltipOpened, setTooltipOpened] = useState(false);
 

package/src/components/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -13,7 +13,6 @@ export const MRT_ToggleGlobalFilterButton = <TData extends MRT_RowData>({
   ...rest
 }: MRT_ToggleGlobalFilterButtonProps<TData>) => {
   const {
-    getState,
     options: {
       icons: { SearchIcon, SearchOffIcon },
 
@@ -22,7 +21,7 @@ export const MRT_ToggleGlobalFilterButton = <TData extends MRT_RowData>({
     refs: { searchInputRef },
     setShowGlobalFilter,
   } = table;
-  const { globalFilter, showGlobalFilter } = getState();
+  const { globalFilter, showGlobalFilter } = table.state;
 
   const handleToggleSearch = () => {
     setShowGlobalFilter(!showGlobalFilter);

package/src/components/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -40,7 +40,6 @@ export const MRT_ToggleRowActionMenuButton = <TData extends MRT_RowData>({
   ...rest
 }: MRT_ToggleRowActionMenuButtonProps<TData>) => {
   const {
-    getState,
     options: {
       createDisplayMode,
       editDisplayMode,
@@ -53,7 +52,7 @@ export const MRT_ToggleRowActionMenuButton = <TData extends MRT_RowData>({
     setEditingRow,
   } = table;
 
-  const { creatingRow, editingRow } = getState();
+  const { creatingRow, editingRow } = table.state;
 
   const isCreating = creatingRow?.id === row.id;
   const isEditing = editingRow?.id === row.id;
@@ -72,7 +71,7 @@ export const MRT_ToggleRowActionMenuButton = <TData extends MRT_RowData>({
 
   const handleStartEditMode = (event: MouseEvent) => {
     event.stopPropagation();
-    setEditingRow({ ...row });
+    setEditingRow(row);
     setAnchorEl(null);
   };
 

package/src/components/footer/MRT_TableFooter.tsx

@@ -20,11 +20,10 @@ export const MRT_TableFooter = <TData extends MRT_RowData>({
   ...rest
 }: MRT_TableFooterProps<TData>) => {
   const {
-    getState,
     options: { enableStickyFooter, layoutMode, muiTableFooterProps },
     refs: { tableFooterRef },
   } = table;
-  const { isFullScreen } = getState();
+  const { isFullScreen } = table.state;
 
   const tableFooterProps = {
     ...parseFromValuesOrFunc(muiTableFooterProps, {

package/src/components/footer/MRT_TableFooterCell.tsx

@@ -25,14 +25,13 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
 }: MRT_TableFooterCellProps<TData>) => {
   const theme = useTheme();
   const {
-    getState,
     options: {
       enableColumnPinning,
       enableKeyboardShortcuts,
       muiTableFooterCellProps,
     },
   } = table;
-  const { density } = getState();
+  const { density } = table.state;
   const { column } = footer;
   const { columnDef } = column;
   const { columnDefType } = columnDef;

package/src/components/head/MRT_TableHead.tsx

@@ -21,7 +21,6 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
   ...rest
 }: MRT_TableHeadProps<TData>) => {
   const {
-    getState,
     options: {
       enableStickyHeader,
       layoutMode,
@@ -30,7 +29,7 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
     },
     refs: { tableHeadRef },
   } = table;
-  const { isFullScreen, showAlertBanner } = getState();
+  const { isFullScreen, showAlertBanner } = table.state;
 
   const tableHeadProps = {
     ...parseFromValuesOrFunc(muiTableHeadProps, { table }),

package/src/components/head/MRT_TableHeadCell.tsx

@@ -2,7 +2,7 @@ import { Box } from '@mui/material';
 import { TableCell, type TableCellProps } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { type Theme } from '@mui/material/styles';
-import { type DragEvent, useCallback, useMemo } from 'react';
+import { type DragEvent, useCallback, useMemo, useRef } from 'react';
 
 import {
   type MRT_ColumnVirtualizer,
@@ -37,7 +37,6 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
 }: MRT_TableHeadCellProps<TData>) => {
   const theme = useTheme();
   const {
-    getState,
     options: {
       columnFilterDisplayMode,
       columnResizeDirection,
@@ -57,13 +56,13 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     setHoveredColumn,
   } = table;
   const {
-    columnSizingInfo,
+    columnResizing,
     density,
     draggingColumn,
     grouping,
     hoveredColumn,
     showColumnFilters,
-  } = getState();
+  } = table.state;
   const { column } = header;
   const { columnDef } = column;
   const { columnDefType } = columnDef;
@@ -105,7 +104,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
 
   const draggingBorders = useMemo(() => {
     const showResizeBorder =
-      columnSizingInfo.isResizingColumn === column.id &&
+      columnResizing.isResizingColumn === column.id &&
       columnResizeMode === 'onChange' &&
       !header.subHeaders.length;
 
@@ -131,7 +130,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
       : undefined;
 
     return draggingBorders;
-  }, [draggingColumn, hoveredColumn, columnSizingInfo.isResizingColumn]);
+  }, [draggingColumn, hoveredColumn, columnResizing.isResizingColumn]);
 
   const handleDragEnter = (_e: DragEvent) => {
     if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
@@ -160,8 +159,11 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     });
   };
 
+  const tableHeadCellRef = useRef<HTMLTableCellElement | null>(null);
+
   const handleRef = useCallback(
     (node: HTMLTableCellElement) => {
+      tableHeadCellRef.current = node;
       if (node) {
         if (tableHeadCellRefs.current) {
           tableHeadCellRefs.current[column.id] = node;
@@ -326,9 +328,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
                     <MRT_TableHeadCellGrabHandle
                       column={column}
                       table={table}
-                      tableHeadCellRef={{
-                        current: tableHeadCellRefs.current?.[column.id]!,
-                      }}
+                      tableHeadCellRef={tableHeadCellRef}
                     />
                   )}
                   {showColumnActions && (

package/src/components/head/MRT_TableHeadCellFilterContainer.tsx

@@ -24,10 +24,9 @@ export const MRT_TableHeadCellFilterContainer = <TData extends MRT_RowData>({
   ...rest
 }: MRT_TableHeadCellFilterContainerProps<TData>) => {
   const {
-    getState,
     options: { columnFilterDisplayMode },
   } = table;
-  const { showColumnFilters } = getState();
+  const { showColumnFilters } = table.state;
   const { column } = header;
   const { columnDef } = column;
   const { isRangeFilter } = getColumnFilterInfo({ header, table });

package/src/components/head/MRT_TableHeadCellGrabHandle.test.tsx

@@ -0,0 +1,61 @@
+import { fireEvent, render } from '@testing-library/react';
+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' }];
+
+const columns = (): MRT_ColumnDef<Person>[] => [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'city', header: 'City' },
+];
+
+const headerOrder = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll('thead th')).map((th) =>
+    th.textContent?.replace(/[^A-Za-z]/g, ''),
+  );
+
+const dragColumnOnto = (container: HTMLElement, from: string, to: string) => {
+  const handles = Array.from(
+    container.querySelectorAll<HTMLElement>('thead [aria-label="Move"]'),
+  );
+  const headerCells = Array.from(
+    container.querySelectorAll<HTMLElement>('thead th'),
+  );
+  const fromIndex = headerCells.findIndex((th) =>
+    th.textContent?.includes(from),
+  );
+  const toIndex = headerCells.findIndex((th) => th.textContent?.includes(to));
+
+  fireEvent.dragStart(handles[fromIndex], {
+    dataTransfer: { setDragImage: () => {} },
+  });
+  fireEvent.dragEnter(headerCells[toIndex]);
+  fireEvent.dragOver(headerCells[toIndex]);
+  fireEvent.drop(headerCells[toIndex]);
+  fireEvent.dragEnd(handles[fromIndex]);
+};
+
+describe('column dragging', () => {
+  test('reorders columns when one is dragged onto another', () => {
+    const { container } = render(
+      <MaterialReactTable
+        columns={columns()}
+        data={data}
+        enableColumnOrdering
+      />,
+    );
+
+    expect(headerOrder(container)).toEqual(['Name', 'City']);
+
+    dragColumnOnto(container, 'Name', 'City');
+
+    expect(headerOrder(container)).toEqual(['City', 'Name']);
+  });
+});

package/src/components/head/MRT_TableHeadCellGrabHandle.tsx

@@ -24,7 +24,6 @@ export const MRT_TableHeadCellGrabHandle = <TData extends MRT_RowData>({
   ...rest
 }: MRT_TableHeadCellGrabHandleProps<TData>) => {
   const {
-    getState,
     options: { enableColumnOrdering, muiColumnDragHandleProps },
     setColumnOrder,
     setColumnPinning,
@@ -32,7 +31,7 @@ export const MRT_TableHeadCellGrabHandle = <TData extends MRT_RowData>({
     setHoveredColumn,
   } = table;
   const { columnDef } = column;
-  const { columnOrder, draggingColumn, hoveredColumn } = getState();
+  const { columnOrder, draggingColumn, hoveredColumn } = table.state;
 
   const iconButtonProps = {
     ...parseFromValuesOrFunc(muiColumnDragHandleProps, { column, table }),
@@ -72,9 +71,9 @@ export const MRT_TableHeadCellGrabHandle = <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)),
       }));
     }
     setDraggingColumn(null);

package/src/components/head/MRT_TableHeadCellResizeHandle.test.tsx

@@ -0,0 +1,45 @@
+import { fireEvent, render } from '@testing-library/react';
+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' }];
+
+const columns = (): MRT_ColumnDef<Person>[] => [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'city', header: 'City' },
+];
+
+const nameColumnSize = (container: HTMLElement) =>
+  (container.querySelector('table') as HTMLElement).style.getPropertyValue(
+    '--header-name-size',
+  );
+
+describe('column resizing', () => {
+  test('dragging the resize handle widens the column', () => {
+    const { container } = render(
+      <MaterialReactTable
+        columns={columns()}
+        data={data}
+        enableColumnResizing
+      />,
+    );
+
+    const before = nameColumnSize(container);
+    const handle = container.querySelector(
+      'thead .Mui-TableHeadCell-ResizeHandle-Wrapper',
+    ) as HTMLElement;
+
+    fireEvent.mouseDown(handle, { clientX: 0 });
+    fireEvent.mouseMove(document, { clientX: 120 });
+    fireEvent.mouseUp(document, { clientX: 120 });
+
+    expect(nameColumnSize(container)).not.toBe(before);
+  });
+});

package/src/components/head/MRT_TableHeadCellResizeHandle.tsx

@@ -20,11 +20,10 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
   ...rest
 }: MRT_TableHeadCellResizeHandleProps<TData>) => {
   const {
-    getState,
     options: { columnResizeDirection, columnResizeMode },
-    setColumnSizingInfo,
+    setColumnResizing,
   } = table;
-  const { density } = getState();
+  const { density } = table.state;
   const { column } = header;
 
   const handler = header.getResizeHandler();
@@ -42,7 +41,7 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
     <Box
       className="Mui-TableHeadCell-ResizeHandle-Wrapper"
       onDoubleClick={() => {
-        setColumnSizingInfo((old) => ({
+        setColumnResizing((old) => ({
           ...old,
           isResizingColumn: false,
         }));
@@ -55,7 +54,7 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
           column.getIsResizing() && columnResizeMode === 'onEnd'
             ? `translateX(${
                 (columnResizeDirection === 'rtl' ? -1 : 1) *
-                (getState().columnSizingInfo.deltaOffset ?? 0)
+                (table.state.columnResizing.deltaOffset ?? 0)
               }px)`
             : undefined,
       }}

package/src/components/head/MRT_TableHeadCellSortLabel.tsx

@@ -21,7 +21,6 @@ export const MRT_TableHeadCellSortLabel = <TData extends MRT_RowData>({
   ...rest
 }: MRT_TableHeadCellSortLabelProps<TData>) => {
   const {
-    getState,
     options: {
       icons: { ArrowDownwardIcon, SyncAltIcon },
       localization,
@@ -29,7 +28,7 @@ export const MRT_TableHeadCellSortLabel = <TData extends MRT_RowData>({
   } = table;
   const { column } = header;
   const { columnDef } = column;
-  const { isLoading, showSkeletons, sorting } = getState();
+  const { isLoading, showSkeletons, sorting } = table.state;
 
   const isSorted = !!column.getIsSorted();