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

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, {

package/src/components/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -26,7 +26,6 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
   const {
     getCoreRowModel,
     getFilteredSelectedRowModel,
-    getState,
     options: {
       enableRowSelection,
       enableSelectAll,
@@ -40,7 +39,7 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
     },
     refs: { tablePaperRef },
   } = table;
-  const { density, grouping, rowSelection, showAlertBanner } = getState();
+  const { density, grouping, rowSelection, showAlertBanner } = table.state;
 
   const alertProps = {
     ...parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
@@ -100,8 +99,8 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
           <Fragment key={`${index}-${columnId}`}>
             {index > 0 ? localization.thenBy : ''}
             <Chip
-              label={table.getColumn(columnId).columnDef.header}
-              onDelete={() => table.getColumn(columnId).toggleGrouping()}
+              label={table.getColumn(columnId)?.columnDef.header}
+              onDelete={() => table.getColumn(columnId)?.toggleGrouping()}
               {...chipProps}
             />
           </Fragment>

package/src/components/toolbar/MRT_ToolbarDropZone.test.tsx

@@ -0,0 +1,42 @@
+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' },
+  { city: 'Glasgow', name: 'Bob' },
+];
+
+const columns = (): MRT_ColumnDef<Person>[] => [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'city', header: 'City' },
+];
+
+describe('grouping drop zone', () => {
+  test('dropping a column on it groups by that column', () => {
+    const { container } = render(
+      <MaterialReactTable columns={columns()} data={data} enableGrouping />,
+    );
+
+    const handle = container.querySelector(
+      'thead button[aria-label="Move"]',
+    ) as HTMLElement;
+
+    fireEvent.dragStart(handle, {
+      dataTransfer: { setDragImage: () => {} },
+    });
+    fireEvent.dragEnter(
+      container.querySelector('[class*="ToolbarDropZone"]') as HTMLElement,
+    );
+    fireEvent.dragEnd(handle);
+
+    expect(container.textContent).toContain('Grouped by');
+  });
+});

package/src/components/toolbar/MRT_ToolbarDropZone.tsx

@@ -17,14 +17,13 @@ export const MRT_ToolbarDropZone = <TData extends MRT_RowData>({
   ...rest
 }: MRT_ToolbarDropZoneProps<TData>) => {
   const {
-    getState,
     options: { enableGrouping, localization },
     setHoveredColumn,
     setShowToolbarDropZone,
   } = table;
 
   const { draggingColumn, grouping, hoveredColumn, showToolbarDropZone } =
-    getState();
+    table.state;
 
   const handleDragEnter = (_event: DragEvent<HTMLDivElement>) => {
     setHoveredColumn({ id: 'drop-zone' });

package/src/components/toolbar/MRT_TopToolbar.tsx

@@ -18,7 +18,6 @@ export const MRT_TopToolbar = <TData extends MRT_RowData>({
   table,
 }: MRT_TopToolbarProps<TData>) => {
   const {
-    getState,
     options: {
       enableGlobalFilter,
       enablePagination,
@@ -33,7 +32,7 @@ export const MRT_TopToolbar = <TData extends MRT_RowData>({
     refs: { topToolbarRef },
   } = table;
 
-  const { isFullScreen, showGlobalFilter } = getState();
+  const { isFullScreen, showGlobalFilter } = table.state;
 
   const isMobile = useMediaQuery('(max-width:720px)');
   const isTablet = useMediaQuery('(max-width:1024px)');

package/src/fns/aggregationFns.test.tsx

@@ -0,0 +1,57 @@
+import { render } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+
+import { MaterialReactTable } from '../components/MaterialReactTable';
+import { type MRT_ColumnDef } from '../types';
+
+interface Sale {
+  amount: number;
+  region: string;
+}
+
+const data: Sale[] = [
+  { amount: 10, region: 'North' },
+  { amount: 30, region: 'North' },
+  { amount: 100, region: 'South' },
+];
+
+const columns = (aggregationFn: string): MRT_ColumnDef<Sale>[] => [
+  { accessorKey: 'region', header: 'Region' },
+  {
+    accessorKey: 'amount',
+    AggregatedCell: ({ cell }) => <span>agg:{String(cell.getValue())}</span>,
+    aggregationFn,
+    header: 'Amount',
+  },
+];
+
+const renderGrouped = (aggregationFn: string) =>
+  render(
+    <MaterialReactTable
+      columns={columns(aggregationFn)}
+      data={data}
+      enableExpanding
+      enableGrouping
+      initialState={{ expanded: true, grouping: ['region'] }}
+    />,
+  ).container;
+
+describe('aggregation fns', () => {
+  test.each([
+    ['sum', ['agg:40', 'agg:100']],
+    ['max', ['agg:30', 'agg:100']],
+    ['min', ['agg:10', 'agg:100']],
+    ['mean', ['agg:20', 'agg:100']],
+    ['count', ['agg:2', 'agg:1']],
+  ])('%s aggregates each group', (aggregationFn, expected) => {
+    const container = renderGrouped(aggregationFn);
+
+    const aggregated = Array.from(
+      container.querySelectorAll('tbody td'),
+    )
+      .map((td) => td.textContent)
+      .filter((text) => text?.startsWith('agg:'));
+
+    expect(aggregated).toEqual(expected);
+  });
+});

package/src/fns/filterFns.test.tsx

@@ -0,0 +1,156 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+
+import { MaterialReactTable } from '../components/MaterialReactTable';
+import { type MRT_ColumnDef } from '../types';
+
+interface Person {
+  name: string;
+}
+
+const data: Person[] = [
+  { name: 'Jonathan' },
+  { name: 'John' },
+  { name: 'Sara' },
+  { name: 'Aaron' },
+];
+
+const columns: MRT_ColumnDef<Person>[] = [
+  { accessorKey: 'name', header: 'Name' },
+];
+
+const renderedNames = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll('tbody tr')).map(
+    (row) => row.textContent,
+  );
+
+describe('fuzzy global filter', () => {
+  test('keeps rows whose value matches the term and drops the rest', () => {
+    render(
+      <MaterialReactTable
+        columns={columns}
+        data={data}
+        initialState={{ globalFilter: 'john' }}
+      />,
+    );
+
+    expect(screen.getByText('John')).toBeInTheDocument();
+    expect(screen.getByText('Jonathan')).toBeInTheDocument();
+    expect(screen.queryByText('Sara')).not.toBeInTheDocument();
+    expect(screen.queryByText('Aaron')).not.toBeInTheDocument();
+  });
+
+  test('orders matches by rank rather than by source order', () => {
+    const { container } = render(
+      <MaterialReactTable
+        columns={columns}
+        data={data}
+        initialState={{ globalFilter: 'john' }}
+      />,
+    );
+
+    expect(renderedNames(container)).toEqual(['John', 'Jonathan']);
+  });
+
+  test('falls back to source order when ranked results are disabled', () => {
+    const { container } = render(
+      <MaterialReactTable
+        columns={columns}
+        data={data}
+        enableGlobalFilterRankedResults={false}
+        initialState={{ globalFilter: 'john' }}
+      />,
+    );
+
+    expect(renderedNames(container)).toEqual(['Jonathan', 'John']);
+  });
+
+  test('drops every row when no value matches the term', () => {
+    const { container } = render(
+      <MaterialReactTable
+        columns={columns}
+        data={data}
+        initialState={{ globalFilter: 'zzz' }}
+      />,
+    );
+
+    expect(renderedNames(container)).toEqual(['No results found']);
+  });
+});
+
+interface Employee {
+  age: number;
+  name: string;
+}
+
+const employees: Employee[] = [
+  { age: 30, name: 'Alice' },
+  { age: 20, name: 'Bob' },
+  { age: 40, name: 'alice' },
+];
+
+const employeeColumns = (): MRT_ColumnDef<Employee>[] => [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'age', header: 'Age' },
+];
+
+const renderFiltered = (
+  columnId: string,
+  filterFn: string,
+  value: unknown,
+) => {
+  const { container } = render(
+    <MaterialReactTable
+      columns={employeeColumns()}
+      data={employees}
+      initialState={{
+        columnFilterFns: { [columnId]: filterFn },
+        columnFilters: [{ id: columnId, value }],
+      }}
+    />,
+  );
+  return Array.from(container.querySelectorAll('tbody tr')).map(
+    (row) => row.querySelector('td')?.textContent,
+  );
+};
+
+describe('column filter fns', () => {
+  test.each([
+    ['contains', 'ali', ['Alice', 'alice']],
+    ['startsWith', 'al', ['Alice', 'alice']],
+    ['endsWith', 'ce', ['Alice', 'alice']],
+    ['equals', 'alice', ['Alice', 'alice']],
+    ['notEquals', 'alice', ['Bob']],
+    ['fuzzy', 'bob', ['Bob']],
+    ['includesString', 'ali', ['Alice', 'alice']],
+    ['includesStringSensitive', 'ali', ['alice']],
+    ['equalsString', 'alice', ['Alice', 'alice']],
+    ['equalsStringSensitive', 'alice', ['alice']],
+  ])('%s filters the name column', (filterFn, value, expected) => {
+    expect(renderFiltered('name', filterFn, value)).toEqual(expected);
+  });
+
+  test.each([
+    ['greaterThan', 25, ['Alice', 'alice']],
+    ['greaterThanOrEqualTo', 30, ['Alice', 'alice']],
+    ['lessThan', 30, ['Bob']],
+    ['lessThanOrEqualTo', 20, ['Bob']],
+  ])('%s filters the age column', (filterFn, value, expected) => {
+    expect(renderFiltered('age', filterFn, value)).toEqual(expected);
+  });
+
+  test.each([
+    ['between', [25, 45], ['Alice', 'alice']],
+    ['betweenInclusive', [20, 30], ['Alice', 'Bob']],
+    ['inNumberRange', [20, 30], ['Alice', 'Bob']],
+  ])('%s filters the age column by range', (filterFn, value, expected) => {
+    expect(renderFiltered('age', filterFn, value)).toEqual(expected);
+  });
+
+  test.each([
+    ['empty', ['No results found']],
+    ['notEmpty', ['Alice', 'Bob', 'alice']],
+  ])('%s applies to the name column', (filterFn, expected) => {
+    expect(renderFiltered('name', filterFn, 'x')).toEqual(expected);
+  });
+});