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

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

package/src/fns/tableFeatures.ts

@@ -0,0 +1,103 @@
+import {
+  type AggregationFnDef,
+  cellSelectionFeature,
+  cellSpanningFeature,
+  columnFacetingFeature,
+  columnFilteringFeature,
+  columnGroupingFeature,
+  columnOrderingFeature,
+  columnPinningFeature,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createExpandedRowModel,
+  createFacetedMinMaxValues,
+  createFacetedRowModel,
+  createFacetedUniqueValues,
+  createFilteredRowModel,
+  createGroupedRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  type FilterFn,
+  globalFilteringFeature,
+  rowAggregationFeature,
+  rowExpandingFeature,
+  rowPaginationFeature,
+  rowPinningFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  type SortFn,
+  type StockFeatures,
+  type TableFeature,
+  tableFeatures,
+} from '@tanstack/react-table';
+
+import { MRT_AggregationFns } from './aggregationFns';
+import { MRT_FilterFns } from './filterFns';
+import { MRT_SortingFns } from './sortingFns';
+
+const mrtFeature: TableFeature = {
+  getInitialState: (state) => ({
+    actionCell: null,
+    columnFilterFns: {},
+    creatingRow: null,
+    density: 'comfortable',
+    draggingColumn: null,
+    draggingRow: null,
+    editingCell: null,
+    editingRow: null,
+    globalFilterFn: 'fuzzy',
+    hoveredColumn: null,
+    hoveredRow: null,
+    isFullScreen: false,
+    isLoading: false,
+    isSaving: false,
+    showAlertBanner: false,
+    showColumnFilters: false,
+    showGlobalFilter: false,
+    showLoadingOverlay: false,
+    showProgressBars: false,
+    showSkeletons: false,
+    showToolbarDropZone: false,
+    ...state,
+  }),
+};
+
+export const MRT_DefaultTableFeatures = tableFeatures({
+  aggregationFns: MRT_AggregationFns,
+  cellSelectionFeature,
+  cellSpanningFeature,
+  columnFacetingFeature,
+  columnFilteringFeature,
+  columnGroupingFeature,
+  columnOrderingFeature,
+  columnPinningFeature,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  expandedRowModel: createExpandedRowModel(),
+  facetedMinMaxValues: createFacetedMinMaxValues(),
+  facetedRowModel: createFacetedRowModel(),
+  facetedUniqueValues: createFacetedUniqueValues(),
+  filteredRowModel: createFilteredRowModel(),
+  filterFns: MRT_FilterFns,
+  globalFilteringFeature,
+  groupedRowModel: createGroupedRowModel(),
+  mrtFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+  rowAggregationFeature,
+  rowExpandingFeature,
+  rowPaginationFeature,
+  rowPinningFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: MRT_SortingFns,
+});
+
+export interface MRT_TableFeatures extends StockFeatures {
+  aggregationFns: Record<string, AggregationFnDef<any, any, any, any>>;
+  filterFns: Record<string, FilterFn<any, any>>;
+  mrtFeature: TableFeature;
+  sortFns: Record<string, SortFn<any, any>>;
+}

package/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx

@@ -46,7 +46,7 @@ export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
             <MRT_ExpandButton {...expandButtonProps} />
             <Tooltip
               {...getCommonTooltipProps('right')}
-              title={table.getColumn(row.groupingColumnId).columnDef.header}
+              title={table.getColumn(row.groupingColumnId)?.columnDef.header}
             >
               <span>{row.groupingValue as ReactNode}</span>
             </Tooltip>
@@ -71,7 +71,7 @@ export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
                 grouping
                   ?.map(
                     (groupedColumnId) =>
-                      table.getColumn(groupedColumnId).columnDef.header,
+                      table.getColumn(groupedColumnId)?.columnDef.header,
                   )
                   ?.join(', ')}
             </>

package/src/hooks/useMRT_ColumnVirtualizer.ts

@@ -17,7 +17,6 @@ export const useMRT_ColumnVirtualizer = <
   table: MRT_TableInstance<TData>,
 ): MRT_ColumnVirtualizer | undefined => {
   const {
-    getState,
     options: {
       columnVirtualizerInstanceRef,
       columnVirtualizerOptions,
@@ -26,7 +25,7 @@ export const useMRT_ColumnVirtualizer = <
     },
     refs: { tableContainerRef },
   } = table;
-  const { columnPinning, columnVisibility, draggingColumn } = getState();
+  const { columnPinning, columnVisibility, draggingColumn } = table.state;
 
   if (!enableColumnVirtualization) return undefined;
 
@@ -43,9 +42,11 @@ export const useMRT_ColumnVirtualizer = <
     () =>
       enableColumnPinning
         ? [
-            table.getLeftVisibleLeafColumns().map((c) => c.getPinnedIndex()),
-            table
-              .getRightVisibleLeafColumns()
+            visibleColumns
+              .filter((c) => c.getIsPinned() === 'start')
+              .map((c) => c.getPinnedIndex()),
+            visibleColumns
+              .filter((c) => c.getIsPinned() === 'end')
               .map(
                 (column) => visibleColumns.length - column.getPinnedIndex() - 1,
               )

package/src/hooks/useMRT_Effects.ts

@@ -13,8 +13,7 @@ export const useMRT_Effects = <TData extends MRT_RowData>(
 ) => {
   const {
     getIsSomeRowsPinned,
-    getPrePaginationRowModel,
-    getState,
+    getPrePaginatedRowModel,
     options: { enablePagination, enableRowPinning, rowCount },
   } = table;
   const {
@@ -26,10 +25,10 @@ export const useMRT_Effects = <TData extends MRT_RowData>(
     pagination,
     showSkeletons,
     sorting,
-  } = getState();
+  } = table.state;
 
   const totalColumnCount = table.options.columns.length;
-  const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
+  const totalRowCount = rowCount ?? getPrePaginatedRowModel().rows.length;
 
   const rerender = useReducer(() => ({}), {})[1];
   const initialBodyHeight = useRef<string>(null);

package/src/hooks/useMRT_RowVirtualizer.ts

@@ -20,7 +20,6 @@ export const useMRT_RowVirtualizer = <
 ): MRT_RowVirtualizer<TScrollElement, TItemElement> | undefined => {
   const {
     getRowModel,
-    getState,
     options: {
       enableRowVirtualization,
       renderDetailPanel,
@@ -29,7 +28,7 @@ export const useMRT_RowVirtualizer = <
     },
     refs: { tableContainerRef },
   } = table;
-  const { density, draggingRow, expanded } = getState();
+  const { density, draggingRow, expanded } = table.state;
 
   if (!enableRowVirtualization) return undefined;
 

package/src/hooks/useMRT_Rows.ts

@@ -12,7 +12,6 @@ export const useMRT_Rows = <TData extends MRT_RowData>(
 ): MRT_Row<TData>[] => {
   const {
     getRowModel,
-    getState,
     options: { data, enableGlobalFilterRankedResults, positionCreatingRow },
   } = table;
   const {
@@ -22,7 +21,7 @@ export const useMRT_Rows = <TData extends MRT_RowData>(
     pagination,
     rowPinning,
     sorting,
-  } = getState();
+  } = table.state;
 
   const rows = useMemo(
     () => getMRT_Rows(table),