@cdx-ui/data-grid 0.3.10 → 0.3.12

package/src/useDataGridTable.test.ts

@@ -2,10 +2,79 @@ import type { RowSelectionState } from '@tanstack/react-table';
 import type { GridRowId } from './types';
 import {
   columnFiltersToFilterModel,
+  filterModelToColumnFilters,
   rowSelectionToModel,
   selectionModelToRowSelection,
 } from './useDataGridTable';
 
+describe('filterModelToColumnFilters', () => {
+  it('keeps items without an operator as text filters and drops blank ones', () => {
+    expect(
+      filterModelToColumnFilters([
+        { field: 'name', value: 'alice' },
+        { field: 'status', value: '  ' },
+        { field: 'age' },
+      ]),
+    ).toEqual([{ id: 'name', value: 'alice' }]);
+  });
+
+  it('groups several items on one field and round-trips them', () => {
+    const model = [
+      { field: 'amount', operator: '>' as const, value: 1 },
+      { field: 'amount', operator: '<' as const, value: 9 },
+    ];
+    const state = filterModelToColumnFilters(model);
+
+    expect(state).toEqual([
+      {
+        id: 'amount',
+        value: {
+          items: [
+            { operator: '>', value: 1 },
+            { operator: '<', value: 9 },
+          ],
+        },
+      },
+    ]);
+    expect(columnFiltersToFilterModel(state)).toEqual(model);
+  });
+
+  it('carries the operator and typed operand', () => {
+    expect(filterModelToColumnFilters([{ field: 'amount', operator: '>', value: 100 }])).toEqual([
+      { id: 'amount', value: { operator: '>', value: 100 } },
+    ]);
+  });
+
+  it('keeps isEmpty and isNotEmpty without a value', () => {
+    expect(
+      filterModelToColumnFilters([
+        { field: 'a', operator: 'isEmpty' },
+        { field: 'b', operator: 'isNotEmpty', value: '' },
+      ]),
+    ).toEqual([
+      { id: 'a', value: { operator: 'isEmpty', value: undefined } },
+      { id: 'b', value: { operator: 'isNotEmpty', value: '' } },
+    ]);
+  });
+
+  it('drops value operators whose operand is blank', () => {
+    expect(
+      filterModelToColumnFilters([
+        { field: 'a', operator: '>' },
+        { field: 'b', operator: 'isAnyOf', value: [] },
+        { field: 'c', operator: 'contains', value: ' ' },
+      ]),
+    ).toEqual([]);
+  });
+});
+
+describe('columnFiltersToFilterModel with operators', () => {
+  it('round-trips operator filters', () => {
+    const model = [{ field: 'amount', operator: '<=' as const, value: 5 }];
+    expect(columnFiltersToFilterModel(filterModelToColumnFilters(model))).toEqual(model);
+  });
+});
+
 describe('columnFiltersToFilterModel', () => {
   it('keeps string filter values', () => {
     expect(columnFiltersToFilterModel([{ id: 'name', value: 'alice' }])).toEqual([

package/src/useDataGridTable.ts

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import {
   columnFilteringFeature,
+  columnPinningFeature,
   createFilteredRowModel,
   createPaginatedRowModel,
   createSortedRowModel,
@@ -14,16 +15,37 @@ import {
   tableFeatures,
   useTable,
   type ColumnFiltersState,
+  type ColumnPinningState,
   type PaginationState,
   type RowSelectionState,
   type SortingState,
 } from '@tanstack/react-table';
 import { createSelectColumn } from './adapter/selectColumn';
 import { applyUpdater, gridColDefToColumnDef } from './adapter/columns';
+import {
+  filterFn_displayText,
+  metaUsesDisplayFilter,
+  normalizeFilterQuery,
+  sortFn_boolean,
+  sortFn_datetime,
+  sortFn_number,
+  sortFn_selectLabel,
+  untypedCellIncludesQuery,
+} from './adapter/columnTypes';
+import {
+  filterOperatorNeedsValue,
+  isActiveFilterItem,
+  isBlankFilterValue,
+  isFilterValueGroup,
+  isOperatorFilterValue,
+  rowMatchesFilterItem,
+} from './adapter/filterOperators';
 import type {
   GridColDef,
   GridFeatureMode,
+  GridFilterItem,
   GridFilterModel,
+  GridLogicOperator,
   GridPaginationModel,
   GridRowId,
   GridRowSelectionModel,
@@ -33,8 +55,24 @@ import type {
 } from './types';
 import { SELECT_COLUMN_ID } from './types';
 
+function gridGlobalFilterFn(
+  row: Parameters<typeof filterFn_displayText>[0],
+  columnId: string,
+  filterValue: unknown,
+): boolean {
+  if (columnId === SELECT_COLUMN_ID) {
+    return false;
+  }
+  const meta = row.getAllCells().find((cell) => cell.column.id === columnId)?.column.columnDef.meta;
+  if (metaUsesDisplayFilter(meta)) {
+    return filterFn_displayText(row, columnId, filterValue);
+  }
+  return untypedCellIncludesQuery(row.getValue(columnId), normalizeFilterQuery(filterValue));
+}
+
 const features = tableFeatures({
   columnFilteringFeature,
+  columnPinningFeature,
   globalFilteringFeature,
   rowSortingFeature,
   rowPaginationFeature,
@@ -43,7 +81,14 @@ const features = tableFeatures({
   sortedRowModel: createSortedRowModel(),
   paginatedRowModel: createPaginatedRowModel(),
   filterFns: { includesString: filterFn_includesString },
-  sortFns: { alphanumeric: sortFn_alphanumeric, text: sortFn_text },
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+    number: sortFn_number,
+    datetime: sortFn_datetime,
+    boolean: sortFn_boolean,
+    selectLabel: sortFn_selectLabel,
+  },
 });
 
 export function sortModelToSortingState(model: GridSortModel): SortingState {
@@ -81,16 +126,55 @@ function columnFilterValueToString(value: unknown): string {
   return '';
 }
 
+/**
+ * Items without an `operator` keep today's text filter. Items with one carry the operator and
+ * typed operand into the column filter. An item whose operator needs a value but has none is
+ * dropped, so `isEmpty` / `isNotEmpty` survive a blank `value` and nothing else does.
+ */
 export function filterModelToColumnFilters(model: GridFilterModel): ColumnFiltersState {
-  return model
-    .filter((item) => item.value.trim().length > 0)
-    .map((item) => ({ id: item.field, value: item.value }));
+  const valuesByField = new Map<string, unknown[]>();
+  for (const item of model) {
+    let value: unknown;
+    if (item.operator !== undefined) {
+      if (filterOperatorNeedsValue(item.operator) && isBlankFilterValue(item.value)) {
+        continue;
+      }
+      value = { operator: item.operator, value: item.value };
+    } else {
+      const text = columnFilterValueToString(item.value);
+      if (text.trim().length === 0) {
+        continue;
+      }
+      value = text;
+    }
+    const values = valuesByField.get(item.field);
+    if (values) {
+      values.push(value);
+    } else {
+      valuesByField.set(item.field, [value]);
+    }
+  }
+  return [...valuesByField].map(([id, values]) => ({
+    id,
+    value: values.length === 1 ? values[0] : { items: values },
+  }));
+}
+
+function columnFilterValueToItem(field: string, value: unknown): GridFilterItem {
+  if (isOperatorFilterValue(value)) {
+    return { field, operator: value.operator, value: value.value };
+  }
+  return { field, value: columnFilterValueToString(value) };
 }
 
 export function columnFiltersToFilterModel(state: ColumnFiltersState): GridFilterModel {
   return state
     .filter((item) => item.id !== SELECT_COLUMN_ID)
-    .map((item) => ({ field: item.id, value: columnFilterValueToString(item.value) }));
+    .flatMap((item) =>
+      isFilterValueGroup(item.value)
+        ? item.value.items.map((value) => columnFilterValueToItem(item.id, value))
+        : [columnFilterValueToItem(item.id, item.value)],
+    );
 }
 
 function selectionIdKey(id: GridRowId): string {
@@ -185,10 +269,12 @@ interface UseDataGridTableParams<R extends GridValidRowModel> {
   onPaginationModelChange: (model: GridPaginationModel) => void;
   filterModel: GridFilterModel;
   onFilterModelChange: (model: GridFilterModel) => void;
+  filterLogicOperator: GridLogicOperator;
   quickFilter: string;
   onQuickFilterChange: (value: string) => void;
   rowSelectionModel: GridRowSelectionModel;
   onRowSelectionModelChange: (model: GridRowSelectionModel) => void;
+  columnPinning: ColumnPinningState;
 }
 
 export function useDataGridTable<R extends GridValidRowModel>({
@@ -207,12 +293,35 @@ export function useDataGridTable<R extends GridValidRowModel>({
   onPaginationModelChange,
   filterModel,
   onFilterModelChange,
+  filterLogicOperator,
   quickFilter,
   onQuickFilterChange,
   rowSelectionModel,
   onRowSelectionModelChange,
+  columnPinning,
 }: UseDataGridTableParams<R>) {
-  const data = useMemo(() => [...rows], [rows]);
+  const orFilterItems = useMemo(() => {
+    if (filterLogicOperator !== 'or' || filterMode === 'server') {
+      return undefined;
+    }
+    const active = filterModel.filter(isActiveFilterItem);
+    return active.length > 1 ? active : undefined;
+  }, [filterLogicOperator, filterMode, filterModel]);
+
+  const data = useMemo(() => {
+    if (!orFilterItems) {
+      return [...rows];
+    }
+    const filterableColumns = new Map(
+      columns.filter((col) => col.filterable !== false).map((col) => [col.field, col]),
+    );
+    return rows.filter((row) =>
+      orFilterItems.some((item) => {
+        const col = filterableColumns.get(item.field);
+        return col !== undefined && rowMatchesFilterItem(col, row, item);
+      }),
+    );
+  }, [columns, orFilterItems, rows]);
   const allIds = useMemo(() => data.map((row) => resolveRowId(row, getRowId)), [data, getRowId]);
 
   const columnDefs = useMemo(() => {
@@ -228,7 +337,10 @@ export function useDataGridTable<R extends GridValidRowModel>({
 
   const sortingState = useMemo(() => sortModelToSortingState(sortModel), [sortModel]);
   const paginationState = useMemo(() => paginationModelToState(paginationModel), [paginationModel]);
-  const columnFilterState = useMemo(() => filterModelToColumnFilters(filterModel), [filterModel]);
+  const columnFilterState = useMemo(
+    () => (orFilterItems ? [] : filterModelToColumnFilters(filterModel)),
+    [filterModel, orFilterItems],
+  );
   const rowSelectionState = useMemo(
     () => selectionModelToRowSelection(rowSelectionModel, allIds),
     [rowSelectionModel, allIds],
@@ -261,6 +373,7 @@ export function useDataGridTable<R extends GridValidRowModel>({
     getRowId: (row) => selectionIdKey(resolveRowId(row, getRowId)),
     enableMultiSort: false,
     enableMultiRowSelection: true,
+    globalFilterFn: gridGlobalFilterFn,
     manualPagination: paginationMode === 'server',
     manualSorting: sortingMode === 'server',
     manualFiltering: filterMode === 'server',
@@ -272,6 +385,7 @@ export function useDataGridTable<R extends GridValidRowModel>({
       columnFilters: columnFilterState,
       globalFilter: quickFilter,
       rowSelection: rowSelectionState,
+      columnPinning,
     },
     onSortingChange: (updater) => {
       const next = applyUpdater(updater, sortingState);
@@ -297,5 +411,10 @@ export function useDataGridTable<R extends GridValidRowModel>({
     },
   });
 
-  return { table, setQuickFilter, setColumnFilter };
+  const setFilterModel = (model: GridFilterModel) => {
+    onFilterModelChange(model);
+    resetPaginationPage();
+  };
+
+  return { table, setQuickFilter, setColumnFilter, setFilterModel };
 }