@cdx-ui/data-grid 0.3.11 → 0.3.13

package/src/useDataGridTable.ts

@@ -1,11 +1,14 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import {
   columnFilteringFeature,
+  columnPinningFeature,
+  columnVisibilityFeature,
   createFilteredRowModel,
   createPaginatedRowModel,
   createSortedRowModel,
   filterFn_includesString,
   globalFilteringFeature,
+  rowExpandingFeature,
   rowPaginationFeature,
   rowSelectionFeature,
   rowSortingFeature,
@@ -14,28 +17,79 @@ import {
   tableFeatures,
   useTable,
   type ColumnFiltersState,
+  type ColumnPinningState,
   type PaginationState,
   type RowSelectionState,
   type SortingState,
 } from '@tanstack/react-table';
-import { createSelectColumn } from './adapter/selectColumn';
+import { createDetailPanelToggleColumn, createSelectColumn } from './adapter/selectColumn';
+import {
+  applyTreeSelection,
+  buildTreeIndex,
+  computeTreeSelection,
+  keepMatchesWithAncestors,
+  selectionScope,
+  type GridTreeRowLike,
+  type GridTreeSelectionStatus,
+} from './adapter/treeData';
 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,
+  GridColumnVisibilityModel,
   GridFeatureMode,
+  GridFilterItem,
   GridFilterModel,
+  GridLogicOperator,
   GridPaginationModel,
   GridRowId,
   GridRowSelectionModel,
+  GridRowSelectionPropagation,
   GridRowsProp,
   GridSortModel,
+  GridTreeNodeParams,
   GridValidRowModel,
 } from './types';
-import { SELECT_COLUMN_ID } from './types';
+import { DETAIL_PANEL_TOGGLE_ID, SELECT_COLUMN_ID } from './types';
+
+function gridGlobalFilterFn(
+  row: Parameters<typeof filterFn_displayText>[0],
+  columnId: string,
+  filterValue: unknown,
+): boolean {
+  if (columnId === SELECT_COLUMN_ID || columnId === DETAIL_PANEL_TOGGLE_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,
+  columnVisibilityFeature,
   globalFilteringFeature,
+  rowExpandingFeature,
   rowSortingFeature,
   rowPaginationFeature,
   rowSelectionFeature,
@@ -43,7 +97,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 +142,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,12 +285,36 @@ 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;
+  columnVisibility?: GridColumnVisibilityModel;
+  detailPanel?: boolean;
+  treeData?: boolean;
+  getTreeDataPath?: (row: R) => readonly string[];
+  defaultGroupingExpansionDepth?: number;
+  isGroupExpandedByDefault?: (node: GridTreeNodeParams<R>) => boolean;
+  rowSelectionPropagation?: GridRowSelectionPropagation;
 }
 
+export interface DataGridTreeState {
+  isRowExpanded: (key: string) => boolean;
+  toggleRowExpanded: (key: string) => void;
+  selectionStatus: (key: string) => GridTreeSelectionStatus;
+  toggleRowSelected: (row: GridTreeRowLike) => void;
+  toggleAllRowsSelected: () => void;
+  headerSelection: { checked: boolean; indeterminate: boolean };
+}
+
+const EMPTY_EXPANSION: Readonly<Record<string, boolean>> = {};
+const EMPTY_FILTER_EXPANSION: Readonly<Partial<Record<string, boolean>>> = {};
+const EMPTY_VISIBILITY: GridColumnVisibilityModel = {};
+
+let warnedMissingTreeDataPath = false;
+
 export function useDataGridTable<R extends GridValidRowModel>({
   rows,
   columns,
@@ -207,13 +331,68 @@ export function useDataGridTable<R extends GridValidRowModel>({
   onPaginationModelChange,
   filterModel,
   onFilterModelChange,
+  filterLogicOperator,
   quickFilter,
   onQuickFilterChange,
   rowSelectionModel,
   onRowSelectionModelChange,
+  columnPinning,
+  columnVisibility = EMPTY_VISIBILITY,
+  detailPanel = false,
+  treeData: treeDataProp = false,
+  getTreeDataPath,
+  defaultGroupingExpansionDepth = 0,
+  isGroupExpandedByDefault,
+  rowSelectionPropagation,
 }: UseDataGridTableParams<R>) {
-  const data = useMemo(() => [...rows], [rows]);
+  const treeData = treeDataProp && getTreeDataPath !== undefined;
+  if (__DEV__ && treeDataProp && getTreeDataPath === undefined && !warnedMissingTreeDataPath) {
+    warnedMissingTreeDataPath = true;
+    console.warn('[DataGrid] `treeData` needs `getTreeDataPath`. Rendering flat rows.');
+  }
+  const propagateDescendants = rowSelectionPropagation?.descendants ?? true;
+  const propagateParents = rowSelectionPropagation?.parents ?? true;
+
+  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 keyOf = useMemo(() => (row: R) => selectionIdKey(resolveRowId(row, getRowId)), [getRowId]);
+
+  const fullTree = useMemo(
+    () => (treeData ? buildTreeIndex(rows, getTreeDataPath, keyOf) : undefined),
+    [getTreeDataPath, keyOf, rows, treeData],
+  );
+
+  const data = useMemo(() => {
+    if (!orFilterItems) {
+      return [...rows];
+    }
+    const filterableColumns = new Map(
+      columns.filter((col) => col.filterable !== false).map((col) => [col.field, col]),
+    );
+    const matches = (row: R) =>
+      orFilterItems.some((item) => {
+        const col = filterableColumns.get(item.field);
+        return col !== undefined && rowMatchesFilterItem(col, row, item);
+      });
+    return fullTree
+      ? keepMatchesWithAncestors(rows, fullTree, keyOf, matches)
+      : rows.filter(matches);
+  }, [columns, fullTree, keyOf, orFilterItems, rows]);
   const allIds = useMemo(() => data.map((row) => resolveRowId(row, getRowId)), [data, getRowId]);
+  const allRowIds = useMemo(() => rows.map((row) => resolveRowId(row, getRowId)), [rows, getRowId]);
+
+  const tree = useMemo(() => {
+    if (!fullTree || !getTreeDataPath) {
+      return undefined;
+    }
+    return data.length === rows.length ? fullTree : buildTreeIndex(data, getTreeDataPath, keyOf);
+  }, [data, fullTree, getTreeDataPath, keyOf, rows.length]);
 
   const columnDefs = useMemo(() => {
     const mapped = columns.map((col) => {
@@ -223,17 +402,93 @@ export function useDataGridTable<R extends GridValidRowModel>({
       }
       return def;
     });
-    return checkboxSelection ? [createSelectColumn(), ...mapped] : mapped;
-  }, [checkboxSelection, columns, disableColumnSorting]);
+    return [
+      ...(checkboxSelection && !treeData ? [createSelectColumn()] : []),
+      ...(detailPanel ? [createDetailPanelToggleColumn()] : []),
+      ...mapped,
+    ];
+  }, [checkboxSelection, columns, detailPanel, disableColumnSorting, treeData]);
 
   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],
+    () => selectionModelToRowSelection(rowSelectionModel, treeData ? allRowIds : allIds),
+    [rowSelectionModel, treeData, allRowIds, allIds],
   );
 
+  const filterSignature =
+    treeData &&
+    filterMode === 'client' &&
+    (quickFilter.trim().length > 0 || filterModel.some(isActiveFilterItem))
+      ? JSON.stringify([quickFilter, filterModel, filterLogicOperator])
+      : '';
+  const [userExpanded, setUserExpanded] = useState<Partial<Record<string, boolean>>>({});
+  const [filterExpansion, setFilterExpansion] = useState<{
+    signature: string;
+    expanded: Partial<Record<string, boolean>>;
+  }>({ signature: '', expanded: {} });
+  const filterExpanded =
+    filterSignature !== '' && filterExpansion.signature === filterSignature
+      ? filterExpansion.expanded
+      : EMPTY_FILTER_EXPANSION;
+
+  const expandedState = useMemo(() => {
+    if (!tree) {
+      return EMPTY_EXPANSION;
+    }
+    const isExpanded = (key: string): boolean => {
+      if (filterSignature !== '') {
+        return filterExpanded[key] ?? true;
+      }
+      const own = userExpanded[key];
+      if (own !== undefined) {
+        return own;
+      }
+      const row = tree.rowOf.get(key);
+      const depth = fullTree?.depthOf.get(key) ?? tree.depthOf.get(key) ?? 0;
+      if (row !== undefined && isGroupExpandedByDefault) {
+        return isGroupExpandedByDefault({ id: resolveRowId(row, getRowId), row, depth });
+      }
+      return defaultGroupingExpansionDepth === -1 || depth < defaultGroupingExpansionDepth;
+    };
+    const state: Record<string, boolean> = {};
+    for (const key of tree.childKeysOf.keys()) {
+      if (isExpanded(key)) {
+        state[key] = true;
+      }
+    }
+    return state;
+  }, [
+    tree,
+    fullTree,
+    filterSignature,
+    filterExpanded,
+    userExpanded,
+    isGroupExpandedByDefault,
+    defaultGroupingExpansionDepth,
+    getRowId,
+  ]);
+  const isRowExpanded = (key: string) => key in expandedState;
+
+  const toggleRowExpanded = (key: string) => {
+    const next = !isRowExpanded(key);
+    if (filterSignature !== '') {
+      setFilterExpansion((previous) => ({
+        signature: filterSignature,
+        expanded: {
+          ...(previous.signature === filterSignature ? previous.expanded : {}),
+          [key]: next,
+        },
+      }));
+      return;
+    }
+    setUserExpanded((previous) => ({ ...previous, [key]: next }));
+  };
+
   const resetPaginationPage = () => {
     if (paginationModel.page !== 0) {
       onPaginationModelChange({ ...paginationModel, page: 0 });
@@ -257,10 +512,14 @@ export function useDataGridTable<R extends GridValidRowModel>({
   const table = useTable({
     features,
     columns: columnDefs,
-    data,
-    getRowId: (row) => selectionIdKey(resolveRowId(row, getRowId)),
+    data: tree ? tree.roots : data,
+    getRowId: (row) => keyOf(row),
+    getSubRows: tree ? (row) => tree.childrenOf.get(row) : undefined,
+    filterFromLeafRows: treeData,
+    paginateExpandedRows: false,
     enableMultiSort: false,
     enableMultiRowSelection: true,
+    globalFilterFn: gridGlobalFilterFn,
     manualPagination: paginationMode === 'server',
     manualSorting: sortingMode === 'server',
     manualFiltering: filterMode === 'server',
@@ -272,6 +531,9 @@ export function useDataGridTable<R extends GridValidRowModel>({
       columnFilters: columnFilterState,
       globalFilter: quickFilter,
       rowSelection: rowSelectionState,
+      columnPinning,
+      columnVisibility,
+      expanded: expandedState,
     },
     onSortingChange: (updater) => {
       const next = applyUpdater(updater, sortingState);
@@ -297,5 +559,64 @@ export function useDataGridTable<R extends GridValidRowModel>({
     },
   });
 
-  return { table, setQuickFilter, setColumnFilter };
+  const setFilterModel = (model: GridFilterModel) => {
+    onFilterModelChange(model);
+    resetPaginationPage();
+  };
+
+  const treeSelection = useMemo(() => {
+    if (!fullTree) {
+      return undefined;
+    }
+    const selectedKeys = new Set(Object.keys(rowSelectionState));
+    return {
+      selectedKeys,
+      statuses: computeTreeSelection(fullTree, selectedKeys, propagateParents),
+    };
+  }, [fullTree, propagateParents, rowSelectionState]);
+
+  let treeState: DataGridTreeState | undefined;
+  if (fullTree && treeSelection) {
+    const { selectedKeys, statuses } = treeSelection;
+    const selectionStatus = (key: string) => statuses.get(key) ?? 'none';
+    const commit = (scope: { targets: string[]; units: string[] }) => {
+      const value = !scope.units.every((key) => selectionStatus(key) === 'all');
+      const next = applyTreeSelection(
+        fullTree,
+        selectedKeys,
+        scope.targets,
+        value,
+        propagateParents,
+      );
+      onRowSelectionModelChange(
+        rowSelectionToModel(
+          Object.fromEntries([...next].map((key) => [key, true])),
+          rowSelectionModel,
+          allRowIds,
+        ),
+      );
+    };
+    const filtered = table.getFilteredRowModel();
+    const headerScope = propagateDescendants
+      ? selectionScope(filtered.rows, fullTree, true)
+      : selectionScope(filtered.flatRows, fullTree, false);
+    const selectedUnits = headerScope.units.filter((key) => selectionStatus(key) !== 'none');
+    const allUnitsSelected =
+      headerScope.units.length > 0 &&
+      headerScope.units.every((key) => selectionStatus(key) === 'all');
+
+    treeState = {
+      isRowExpanded,
+      toggleRowExpanded,
+      selectionStatus,
+      toggleRowSelected: (row) => commit(selectionScope([row], fullTree, propagateDescendants)),
+      toggleAllRowsSelected: () => commit(headerScope),
+      headerSelection: {
+        checked: allUnitsSelected,
+        indeterminate: !allUnitsSelected && selectedUnits.length > 0,
+      },
+    };
+  }
+
+  return { table, setQuickFilter, setColumnFilter, setFilterModel, tree: treeState };
 }