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

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

package/src/fns/filterFns.ts

@@ -1,17 +1,24 @@
+import { rankings, rankItem } from '@tanstack/match-sorter-utils';
 import {
-  type RankingInfo,
-  rankings,
-  rankItem,
-} from '@tanstack/match-sorter-utils';
-import { filterFns, type Row } from '@tanstack/react-table';
+  filterFn_arrIncludes,
+  filterFn_arrIncludesAll,
+  filterFn_arrIncludesSome,
+  filterFn_equalsString,
+  filterFn_equalsStringSensitive,
+  filterFn_includesString,
+  filterFn_includesStringSensitive,
+  filterFn_inNumberRange,
+  type FilterMeta,
+  type Row,
+} from '@tanstack/react-table';
 
 import { type MRT_RowData } from '../types';
 
 const fuzzy = <TData extends MRT_RowData>(
-  row: Row<TData>,
+  row: Row<any, TData>,
   columnId: string,
   filterValue: number | string,
-  addMeta: (item: RankingInfo) => void,
+  addMeta?: (meta: FilterMeta) => void,
 ): boolean => {
   const itemRank = rankItem(
     row.getValue<null | number | string>(columnId),
@@ -20,14 +27,14 @@ const fuzzy = <TData extends MRT_RowData>(
       threshold: rankings.MATCHES,
     },
   );
-  addMeta(itemRank);
+  addMeta?.(itemRank);
   return itemRank.passed;
 };
 
 fuzzy.autoRemove = (val: any) => !val;
 
 const contains = <TData extends MRT_RowData>(
-  row: Row<TData>,
+  row: Row<any, TData>,
   id: string,
   filterValue: number | string,
 ): boolean =>
@@ -41,7 +48,7 @@ const contains = <TData extends MRT_RowData>(
 contains.autoRemove = (val: any) => !val;
 
 const startsWith = <TData extends MRT_RowData>(
-  row: Row<TData>,
+  row: Row<any, TData>,
   id: string,
   filterValue: number | string,
 ): boolean =>
@@ -55,7 +62,7 @@ const startsWith = <TData extends MRT_RowData>(
 startsWith.autoRemove = (val: any) => !val;
 
 const endsWith = <TData extends MRT_RowData>(
-  row: Row<TData>,
+  row: Row<any, TData>,
   id: string,
   filterValue: number | string,
 ): boolean =>
@@ -69,7 +76,7 @@ const endsWith = <TData extends MRT_RowData>(
 endsWith.autoRemove = (val: any) => !val;
 
 const equals = <TData extends MRT_RowData>(
-  row: Row<TData>,
+  row: Row<any, TData>,
   id: string,
   filterValue: number | string,
 ): boolean =>
@@ -79,7 +86,7 @@ const equals = <TData extends MRT_RowData>(
 equals.autoRemove = (val: any) => !val;
 
 const notEquals = <TData extends MRT_RowData>(
-  row: Row<TData>,
+  row: Row<any, TData>,
   id: string,
   filterValue: number | string,
 ): boolean =>
@@ -89,7 +96,7 @@ const notEquals = <TData extends MRT_RowData>(
 notEquals.autoRemove = (val: any) => !val;
 
 const greaterThan = <TData extends MRT_RowData>(
-  row: Row<TData>,
+  row: Row<any, TData>,
   id: string,
   filterValue: number | string,
 ): boolean =>
@@ -103,7 +110,7 @@ const greaterThan = <TData extends MRT_RowData>(
 greaterThan.autoRemove = (val: any) => !val;
 
 const greaterThanOrEqualTo = <TData extends MRT_RowData>(
-  row: Row<TData>,
+  row: Row<any, TData>,
   id: string,
   filterValue: number | string,
 ): boolean => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
@@ -111,7 +118,7 @@ const greaterThanOrEqualTo = <TData extends MRT_RowData>(
 greaterThanOrEqualTo.autoRemove = (val: any) => !val;
 
 const lessThan = <TData extends MRT_RowData>(
-  row: Row<TData>,
+  row: Row<any, TData>,
   id: string,
   filterValue: number | string,
 ): boolean =>
@@ -125,7 +132,7 @@ const lessThan = <TData extends MRT_RowData>(
 lessThan.autoRemove = (val: any) => !val;
 
 const lessThanOrEqualTo = <TData extends MRT_RowData>(
-  row: Row<TData>,
+  row: Row<any, TData>,
   id: string,
   filterValue: number | string,
 ): boolean => equals(row, id, filterValue) || lessThan(row, id, filterValue);
@@ -133,7 +140,7 @@ const lessThanOrEqualTo = <TData extends MRT_RowData>(
 lessThanOrEqualTo.autoRemove = (val: any) => !val;
 
 const between = <TData extends MRT_RowData>(
-  row: Row<TData>,
+  row: Row<any, TData>,
   id: string,
   filterValues: [number | string, number | string],
 ): boolean =>
@@ -148,7 +155,7 @@ const between = <TData extends MRT_RowData>(
 between.autoRemove = (val: any) => !val;
 
 const betweenInclusive = <TData extends MRT_RowData>(
-  row: Row<TData>,
+  row: Row<any, TData>,
   id: string,
   filterValues: [number | string, number | string],
 ): boolean =>
@@ -163,7 +170,7 @@ const betweenInclusive = <TData extends MRT_RowData>(
 betweenInclusive.autoRemove = (val: any) => !val;
 
 const empty = <TData extends MRT_RowData>(
-  row: Row<TData>,
+  row: Row<any, TData>,
   id: string,
   _filterValue: number | string,
 ): boolean => !row.getValue<null | number | string>(id)?.toString().trim();
@@ -171,7 +178,7 @@ const empty = <TData extends MRT_RowData>(
 empty.autoRemove = (val: any) => !val;
 
 const notEmpty = <TData extends MRT_RowData>(
-  row: Row<TData>,
+  row: Row<any, TData>,
   id: string,
   _filterValue: number | string,
 ): boolean => !!row.getValue<null | number | string>(id)?.toString().trim();
@@ -179,16 +186,23 @@ const notEmpty = <TData extends MRT_RowData>(
 notEmpty.autoRemove = (val: any) => !val;
 
 export const MRT_FilterFns = {
-  ...filterFns,
+  arrIncludes: filterFn_arrIncludes,
+  arrIncludesAll: filterFn_arrIncludesAll,
+  arrIncludesSome: filterFn_arrIncludesSome,
   between,
   betweenInclusive,
   contains,
   empty,
   endsWith,
   equals,
+  equalsString: filterFn_equalsString,
+  equalsStringSensitive: filterFn_equalsStringSensitive,
   fuzzy,
   greaterThan,
   greaterThanOrEqualTo,
+  includesString: filterFn_includesString,
+  includesStringSensitive: filterFn_includesStringSensitive,
+  inNumberRange: filterFn_inNumberRange,
   lessThan,
   lessThanOrEqualTo,
   notEmpty,

package/src/fns/sortingFns.ts

@@ -1,11 +1,17 @@
 import { compareItems, type RankingInfo } from '@tanstack/match-sorter-utils';
-import { type Row, sortingFns } from '@tanstack/react-table';
+import {
+  sortFn_alphanumeric,
+  sortFn_basic,
+  sortFn_datetime,
+  sortFn_text,
+} from '@tanstack/react-table';
+import { type Row } from '@tanstack/react-table';
 
 import { type MRT_Row, type MRT_RowData } from '../types';
 
 const fuzzy = <TData extends MRT_RowData>(
-  rowA: Row<TData>,
-  rowB: Row<TData>,
+  rowA: Row<any, TData>,
+  rowB: Row<any, TData>,
   columnId: string,
 ) => {
   let dir = 0;
@@ -17,13 +23,16 @@ const fuzzy = <TData extends MRT_RowData>(
   }
   // Provide a fallback for when the item ranks are equal
   return dir === 0
-    ? sortingFns.alphanumeric(rowA as Row<any>, rowB as Row<any>, columnId)
+    ? sortFn_alphanumeric(rowA, rowB, columnId)
     : dir;
 };
 
 export const MRT_SortingFns = {
-  ...sortingFns,
+  alphanumeric: sortFn_alphanumeric,
+  basic: sortFn_basic,
+  datetime: sortFn_datetime,
   fuzzy,
+  text: sortFn_text,
 };
 
 export const rankGlobalFuzzy = <TData extends MRT_RowData>(

package/src/fns/tableFeatures.test.tsx

@@ -0,0 +1,106 @@
+import { render } 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: 'Aaron' },
+  { name: 'Sara' },
+];
+
+const columns: MRT_ColumnDef<Person>[] = [
+  { accessorKey: 'name', header: 'Name' },
+];
+
+const renderedNames = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll('tbody tr')).map(
+    (row) => row.textContent,
+  );
+
+describe('server-side options suppress client-side row models', () => {
+  test('manualPagination renders the whole server page, ignoring pageSize', () => {
+    const { container } = render(
+      <MaterialReactTable
+        columns={columns}
+        data={data}
+        manualPagination
+        rowCount={300}
+        state={{ pagination: { pageIndex: 0, pageSize: 2 } }}
+      />,
+    );
+
+    expect(renderedNames(container)).toEqual(['Jonathan', 'Aaron', 'Sara']);
+  });
+
+  test('manualFiltering keeps every row when a global filter is set', () => {
+    const { container } = render(
+      <MaterialReactTable
+        columns={columns}
+        data={data}
+        manualFiltering
+        state={{ globalFilter: 'zzz' }}
+      />,
+    );
+
+    expect(renderedNames(container)).toEqual(['Jonathan', 'Aaron', 'Sara']);
+  });
+
+  test('manualSorting preserves server order when a sort is set', () => {
+    const { container } = render(
+      <MaterialReactTable
+        columns={columns}
+        data={data}
+        enableSorting
+        manualSorting
+        state={{ sorting: [{ desc: false, id: 'name' }] }}
+      />,
+    );
+
+    expect(renderedNames(container)).toEqual(['Jonathan', 'Aaron', 'Sara']);
+  });
+});
+
+describe('client-side row models stay active by default', () => {
+  test('pagination slices to pageSize', () => {
+    const { container } = render(
+      <MaterialReactTable
+        columns={columns}
+        data={data}
+        state={{ pagination: { pageIndex: 0, pageSize: 2 } }}
+      />,
+    );
+
+    expect(renderedNames(container)).toEqual(['Jonathan', 'Aaron']);
+  });
+
+  test('global filter drops non-matching rows', () => {
+    const { container } = render(
+      <MaterialReactTable
+        columns={columns}
+        data={data}
+        state={{ globalFilter: 'zzz' }}
+      />,
+    );
+
+    expect(renderedNames(container)).toEqual(['No results found']);
+  });
+
+  test('sorting reorders rows', () => {
+    const { container } = render(
+      <MaterialReactTable
+        columns={columns}
+        data={data}
+        enableSorting
+        state={{ sorting: [{ desc: false, id: 'name' }] }}
+      />,
+    );
+
+    expect(renderedNames(container)).toEqual(['Aaron', 'Jonathan', 'Sara']);
+  });
+});