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

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();
 

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)),
       }));
     }
   };