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

package/src/components/body/MRT_TableBodyRowGrabHandle.test.tsx

@@ -0,0 +1,42 @@
+import { fireEvent, render } from '@testing-library/react';
+import { describe, expect, test, vi } 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' },
+];
+
+describe('row ordering', () => {
+  test('dragging a row over another reports both rows to the drop handler', () => {
+    const muiRowDragHandleProps = { onDragEnd: vi.fn() };
+    const { container } = render(
+      <MaterialReactTable
+        columns={columns()}
+        data={data}
+        enableRowOrdering
+        muiRowDragHandleProps={muiRowDragHandleProps}
+      />,
+    );
+
+    const handles = container.querySelectorAll<HTMLElement>(
+      'tbody button[aria-label="Move"]',
+    );
+    const rows = container.querySelectorAll<HTMLElement>('tbody tr');
+
+    fireEvent.dragStart(handles[0], {
+      dataTransfer: { setDragImage: () => {} },
+    });
+    fireEvent.dragEnter(rows[1]);
+    fireEvent.dragEnd(handles[0]);
+
+    expect(muiRowDragHandleProps.onDragEnd).toHaveBeenCalled();
+  });
+});

package/src/components/body/MRT_TableBodyRowPinButton.tsx

@@ -21,10 +21,9 @@ export const MRT_TableBodyRowPinButton = <TData extends MRT_RowData>({
   ...rest
 }: MRT_TableBodyRowPinButtonProps<TData>) => {
   const {
-    getState,
     options: { enableRowPinning, rowPinningDisplayMode },
   } = table;
-  const { density } = getState();
+  const { density } = table.state;
 
   const canPin = parseFromValuesOrFunc(enableRowPinning, row as any);
 

package/src/components/body/MRT_TableDetailPanel.test.tsx

@@ -0,0 +1,40 @@
+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 {
+  city: string;
+  name: string;
+}
+
+const data: Person[] = [{ city: 'Glasgow', name: 'Alice' }];
+
+const columns = (): MRT_ColumnDef<Person>[] => [
+  { accessorKey: 'name', header: 'Name' },
+];
+
+describe('detail panel', () => {
+  test('reveals the panel content when the expand button is clicked', async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <MaterialReactTable
+        columns={columns()}
+        data={data}
+        renderDetailPanel={({ row }) => (
+          <span>Lives in {row.original.city}</span>
+        )}
+      />,
+    );
+
+    expect(container.textContent).not.toContain('Lives in Glasgow');
+
+    await user.click(
+      container.querySelector('tbody button[aria-label="Expand"]') as HTMLElement,
+    );
+
+    expect(container.textContent).toContain('Lives in Glasgow');
+  });
+});

package/src/components/body/MRT_TableDetailPanel.tsx

@@ -32,7 +32,6 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
   ...rest
 }: MRT_TableDetailPanelProps<TData>) => {
   const {
-    getState,
     getVisibleLeafColumns,
     options: {
       layoutMode,
@@ -42,7 +41,7 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
       renderDetailPanel,
     },
   } = table;
-  const { isLoading } = getState();
+  const { isLoading } = table.state;
 
   const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
     isDetailPanel: true,

package/src/components/buttons/MRT_ColumnPinningButtons.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 {
+  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, ''),
+  );
+
+describe('column pinning', () => {
+  test('pinning to start moves the column to the front', async () => {
+    const user = userEvent.setup();
+    const { baseElement, container } = render(
+      <MaterialReactTable
+        columns={columns()}
+        data={data}
+        enableColumnPinning
+      />,
+    );
+
+    expect(headerOrder(container)).toEqual(['Name', 'City']);
+
+    const cityHeader = Array.from(
+      container.querySelectorAll<HTMLElement>('thead th'),
+    ).find((th) => th.textContent?.includes('City'));
+
+    await user.click(
+      cityHeader?.querySelector(
+        'button[aria-label="Column Actions"]',
+      ) as HTMLElement,
+    );
+
+    await user.click(
+      Array.from(baseElement.querySelectorAll<HTMLElement>('li')).find((li) =>
+        li.textContent?.includes('Pin to left'),
+      ) as HTMLElement,
+    );
+
+    expect(headerOrder(container)).toEqual(['City', 'Name']);
+  });
+
+  test('start and end pinning both apply from initial state', () => {
+    const { container } = render(
+      <MaterialReactTable
+        columns={columns()}
+        data={data}
+        enableColumnPinning
+        initialState={{ columnPinning: { end: ['name'], start: ['city'] } }}
+      />,
+    );
+
+    expect(headerOrder(container)).toEqual(['City', 'Name']);
+  });
+});

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