@bmsuisse/datagrid 0.24.1 → 0.25.1

package/dist/index.d.ts

@@ -793,6 +793,8 @@ interface DataGridProps<TRow> {
      */
     expandedGroups?: Record<string, boolean>;
     onExpandedGroupsChange?: (expanded: Record<string, boolean>) => void;
+    /** Alternates body row backgrounds for readability on wide/dense tables. Defaults to true. */
+    zebra?: boolean;
 }
 
 /**
@@ -803,7 +805,7 @@ interface DataGridProps<TRow> {
  * (`"server"`). Column filter UI defaults to the type-appropriate widget
  * from `src/filter` unless a column supplies its own `cell` renderer.
  */
-declare function DataGrid<TRow extends RowData>({ columns, dataSource, getRowId, rowActions, headerActions, enableMultiSort, initialState, columnVisibility, renderDetail, enableColumnResizing, columnResizeMode, columnSizing: controlledColumnSizing, onColumnSizingChange, virtualize, showPagination, getRowProps, getRowTestId, gridState, selectedIds: controlledSelectedIds, onSelectedIdsChange, testId, loading: loadingProp, groupBy, renderGroupHeader, defaultGroupsExpanded, expandedGroups: controlledExpandedGroups, onExpandedGroupsChange, }: DataGridProps<TRow>): ReactElement;
+declare function DataGrid<TRow extends RowData>({ columns, dataSource, getRowId, rowActions, headerActions, enableMultiSort, initialState, columnVisibility, renderDetail, enableColumnResizing, columnResizeMode, columnSizing: controlledColumnSizing, onColumnSizingChange, virtualize, showPagination, getRowProps, getRowTestId, gridState, selectedIds: controlledSelectedIds, onSelectedIdsChange, testId, loading: loadingProp, groupBy, renderGroupHeader, defaultGroupsExpanded, expandedGroups: controlledExpandedGroups, onExpandedGroupsChange, zebra, }: DataGridProps<TRow>): ReactElement;
 
 interface GridStateController {
     state: GridState;
@@ -933,6 +935,29 @@ interface TreeDataGridProps<TRow> extends TreeAccessors<TRow> {
     /** Controlled expanded state, keyed by node id. Omit for the grid to own this itself. */
     expanded?: Record<string, boolean>;
     onExpandedChange?: (expanded: Record<string, boolean>) => void;
+    /**
+     * Controlled lazy-children cache, keyed by node id — same
+     * controlled/uncontrolled convention as `expanded` above. Omit for the
+     * grid to own this itself (the common case, and the only way earlier
+     * versions of this component worked).
+     *
+     * Supply this when a caller needs to force a specific node's cached batch
+     * to be replaced with fresher data fetched *outside* the normal
+     * expand/collapse flow above (`onLoadChildren` only ever runs once per
+     * node id per the doc on it) — e.g. after an edit made to one of that
+     * node's children was saved, and the caller re-fetched that batch via its
+     * own `onLoadChildren` function to pick up the server's new state. Setting
+     * `childrenMap` to a new map containing that node's id (typically via
+     * `onChildrenMapChange`'s own setter, called by the caller's re-fetch
+     * logic) makes this component's flattened rows use the fresh batch on the
+     * very next render — without this, a caller's own separate copy of that
+     * data has nowhere to feed back into what actually gets rendered, no
+     * matter how it's refreshed, since only this component's internal cache
+     * (or an eager `getChildren(row)`) is ever consulted for a lazily-loaded
+     * node's children.
+     */
+    childrenMap?: ReadonlyMap<string, TRow[]>;
+    onChildrenMapChange?: (childrenMap: ReadonlyMap<string, TRow[]>) => void;
     /** Pixels of left padding added per depth level to the tree column's cell. Defaults to 20. */
     indentSize?: number;
     /**
@@ -1027,6 +1052,8 @@ interface TreeDataGridProps<TRow> extends TreeAccessors<TRow> {
     } | undefined;
     /** Disables just the checkbox for a specific row. Defaults to `() => false`. */
     isRowSelectionDisabled?: (row: TRow) => boolean;
+    /** Alternates body row backgrounds for readability on wide/dense tables. Defaults to true. */
+    zebra?: boolean;
 }
 
 /**
@@ -1043,7 +1070,7 @@ interface TreeDataGridProps<TRow> extends TreeAccessors<TRow> {
  * column's cell matches `treeColumnId` (defaults to `columns[0]`); every
  * other column renders exactly like it would in `<DataGrid>`.
  */
-declare function TreeDataGrid<TRow>({ columns, data, treeColumnId, getRowId, getChildren, hasChildren, onLoadChildren, initialExpandedLevel, expanded: controlledExpanded, onExpandedChange, indentSize, getRowProps, getRowTestId, rowActions, virtualizeThreshold, estimatedRowHeight, maxBodyHeight, selectedIds: controlledSelectedIds, onSelectedIdsChange, getRowSelectionState, isRowSelectionDisabled, }: TreeDataGridProps<TRow>): ReactElement;
+declare function TreeDataGrid<TRow>({ columns, data, treeColumnId, getRowId, getChildren, hasChildren, onLoadChildren, initialExpandedLevel, expanded: controlledExpanded, onExpandedChange, childrenMap: controlledChildrenMap, onChildrenMapChange, indentSize, getRowProps, getRowTestId, rowActions, virtualizeThreshold, estimatedRowHeight, maxBodyHeight, selectedIds: controlledSelectedIds, onSelectedIdsChange, getRowSelectionState, isRowSelectionDisabled, zebra, }: TreeDataGridProps<TRow>): ReactElement;
 
 interface FlatTreeRow<TRow> {
     row: TRow;
@@ -1081,6 +1108,8 @@ interface UseTreeStateOptions<TRow> extends TreeAccessors<TRow> {
     onLoadChildren?: (row: TRow) => Promise<TRow[]>;
     expanded?: Record<string, boolean>;
     onExpandedChange?: (expanded: Record<string, boolean>) => void;
+    childrenMap?: ReadonlyMap<string, TRow[]>;
+    onChildrenMapChange?: (childrenMap: ReadonlyMap<string, TRow[]>) => void;
 }
 /**
  * Owns everything `<TreeDataGrid>` needs beyond plain rendering: expand
@@ -1095,6 +1124,6 @@ interface UseTreeStateOptions<TRow> extends TreeAccessors<TRow> {
  * reset (e.g. switching to a different root entity entirely) should remount
  * `<TreeDataGrid>` via a `key` prop rather than rely on implicit magic here.
  */
-declare function useTreeState<TRow>({ data, getRowId, getChildren, hasChildren, onLoadChildren, expanded: controlledExpanded, onExpandedChange, }: UseTreeStateOptions<TRow>): TreeStateController<TRow>;
+declare function useTreeState<TRow>({ data, getRowId, getChildren, hasChildren, onLoadChildren, expanded: controlledExpanded, onExpandedChange, childrenMap: controlledChildrenMap, onChildrenMapChange, }: UseTreeStateOptions<TRow>): TreeStateController<TRow>;
 
 export { ActionsMenu, type BaseColumn, type BooleanColumn, BooleanFilter, type ClientProcessingResult, type ColumnAlign, type ColumnDef, type ColumnGroup, ColumnSelector, type ColumnSelectorProps, type ColumnVisibility, type CompositeFilterDescriptor, DataGrid, type DataGridProps, type DataSource, type DateColumn, DateRangeFilter, type DebouncedCallback, type EnumColumn, EnumFilter, type EnumOption, type FilterDescriptor, type FilterOperator, type FilterWidgetProps, type FlatTreeRow, type GridState, type GridStateController, type MenuItem, type MenuItemContext, type NumberColumn, NumberComparisonFilter, NumberHistogramFilter, type NumberHistogramFilterProps, NumberRangeFilter, type ResolvedMenuItem, type SortDescriptor, type StringColumn, StringFilter, type TreeAccessors, TreeDataGrid, type TreeDataGridProps, type TreeStateController, UNARY_OPERATORS, type UseTreeStateOptions, alignClassName, canHideColumn, canHideGroup, countVisible, defaultAlign, defaultFormat, evaluateFilter, facetedNumberValues, fieldKey, flattenTree, getColumnValue, groupColumns, isColumnVisible, isCompositeFilterDescriptor, isFilterDescriptor, isFilterable, isSortable, processClientData, renderDefaultFilterWidget, resolveMenuItems, storageKeyFor, useDebouncedCallback, useGridState, useTreeState };

package/dist/index.js

@@ -1869,7 +1869,8 @@ function DataGrid({
   renderGroupHeader,
   defaultGroupsExpanded = true,
   expandedGroups: controlledExpandedGroups,
-  onExpandedGroupsChange
+  onExpandedGroupsChange,
+  zebra = true
 }) {
   const { state, filtersByColumn, setColumnFilter, toggleSort, setPage } = useGridState(
     dataSource,
@@ -2081,18 +2082,19 @@ function DataGrid({
     const isExpanded = expandedIds.has(row.id);
     const rowProps = getRowProps?.(row.original);
     const rowTestId = getRowTestId?.(row.original) ?? `row-${row.id}`;
+    const isOddRow = zebra && row.index % 2 === 1;
     return /* @__PURE__ */ jsxs12("tbody", { ref: measureRef, "data-index": row.index, children: [
       /* @__PURE__ */ jsxs12(
         "tr",
         {
           ...rowProps,
           "data-testid": rowTestId,
-          className: rowProps?.className ? cn("divide-x divide-border", rowProps.className, row.index % 2 === 1 && "bg-foreground/5") : `divide-x divide-border${row.index % 2 === 1 ? " bg-foreground/5" : ""}`,
+          className: rowProps?.className ? cn("divide-x divide-border", rowProps.className, isOddRow && "bg-foreground/5") : `divide-x divide-border${isOddRow ? " bg-foreground/5" : ""}`,
           children: [
             showDetailColumn && /* @__PURE__ */ jsx19(
               "td",
               {
-                className: row.index % 2 === 1 ? detailCellProps.classNameOdd : detailCellProps.className,
+                className: isOddRow ? detailCellProps.classNameOdd : detailCellProps.className,
                 style: detailCellProps.style,
                 children: /* @__PURE__ */ jsx19(
                   Button,
@@ -2120,7 +2122,7 @@ function DataGrid({
             showSelectionColumn && /* @__PURE__ */ jsx19(
               "td",
               {
-                className: row.index % 2 === 1 ? selectionCellProps.classNameOdd : selectionCellProps.className,
+                className: isOddRow ? selectionCellProps.classNameOdd : selectionCellProps.className,
                 style: selectionCellProps.style,
                 children: /* @__PURE__ */ jsx19(
                   "input",
@@ -2141,7 +2143,7 @@ function DataGrid({
             showRowActionsColumn && rowActions && /* @__PURE__ */ jsx19(
               "td",
               {
-                className: row.index % 2 === 1 ? rowActionsCellProps.classNameOdd : rowActionsCellProps.className,
+                className: isOddRow ? rowActionsCellProps.classNameOdd : rowActionsCellProps.className,
                 style: rowActionsCellProps.style,
                 children: /* @__PURE__ */ jsx19(ActionsMenu, { items: rowActions, ctx: { row: row.original }, triggerLabel: `Row actions for ${row.id}` })
               }
@@ -2478,7 +2480,9 @@ function useTreeState({
   hasChildren,
   onLoadChildren,
   expanded: controlledExpanded,
-  onExpandedChange
+  onExpandedChange,
+  childrenMap: controlledChildrenMap,
+  onChildrenMapChange
 }) {
   const [internalExpanded, setInternalExpanded] = useState7({});
   const expanded = controlledExpanded ?? internalExpanded;
@@ -2492,7 +2496,18 @@ function useTreeState({
     },
     [controlledExpanded, onExpandedChange]
   );
-  const [childrenMap, setChildrenMap] = useState7(/* @__PURE__ */ new Map());
+  const [internalChildrenMap, setInternalChildrenMap] = useState7(/* @__PURE__ */ new Map());
+  const childrenMap = controlledChildrenMap ?? internalChildrenMap;
+  const setChildrenMap = useCallback3(
+    (updater) => {
+      if (controlledChildrenMap) {
+        onChildrenMapChange?.(updater(controlledChildrenMap));
+      } else {
+        setInternalChildrenMap((prev) => new Map(updater(prev)));
+      }
+    },
+    [controlledChildrenMap, onChildrenMapChange]
+  );
   const [loadingIds, setLoadingIds] = useState7(/* @__PURE__ */ new Set());
   const [errorIds, setErrorIds] = useState7(/* @__PURE__ */ new Map());
   const resolveHasChildren = useMemo7(
@@ -2530,7 +2545,7 @@ function useTreeState({
         });
       }
     },
-    [childrenMap, getChildren, getRowId, onLoadChildren]
+    [childrenMap, getChildren, getRowId, onLoadChildren, setChildrenMap]
   );
   const toggleExpand = useCallback3(
     (row) => {
@@ -2625,6 +2640,8 @@ function TreeDataGrid({
   initialExpandedLevel = 0,
   expanded: controlledExpanded,
   onExpandedChange,
+  childrenMap: controlledChildrenMap,
+  onChildrenMapChange,
   indentSize = 20,
   getRowProps,
   getRowTestId,
@@ -2635,7 +2652,8 @@ function TreeDataGrid({
   selectedIds: controlledSelectedIds,
   onSelectedIdsChange,
   getRowSelectionState,
-  isRowSelectionDisabled
+  isRowSelectionDisabled,
+  zebra = true
 }) {
   const accessors = useMemo8(
     () => ({ getRowId, getChildren, hasChildren }),
@@ -2648,7 +2666,9 @@ function TreeDataGrid({
     hasChildren,
     onLoadChildren,
     expanded: controlledExpanded,
-    onExpandedChange
+    onExpandedChange,
+    childrenMap: controlledChildrenMap,
+    onChildrenMapChange
   });
   const didAutoExpand = useRef6(false);
   useEffect8(() => {
@@ -2711,17 +2731,19 @@ function TreeDataGrid({
   function renderRow(flatRow, index, measureRef) {
     const rowProps = getRowProps?.(flatRow.row, flatRow.depth, index);
     const rowTestId = getRowTestId?.(flatRow.row) ?? `tree-row-${flatRow.id}`;
+    const isOddRow = zebra && index % 2 === 1;
     return /* @__PURE__ */ jsxs13(
       "tr",
       {
         ref: measureRef,
         ...rowProps,
+        "data-index": index,
         "data-testid": rowTestId,
         className: rowProps?.className ? cn(
           "border-b border-border divide-x divide-border",
           rowProps.className,
-          index % 2 === 1 && "bg-foreground/5"
-        ) : `border-b border-border divide-x divide-border${index % 2 === 1 ? " bg-foreground/5" : ""}`,
+          isOddRow && "bg-foreground/5"
+        ) : `border-b border-border divide-x divide-border${isOddRow ? " bg-foreground/5" : ""}`,
         children: [
           showSelectionColumn && /* @__PURE__ */ jsx20("td", { className: "p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: (() => {
             const state = resolveSelectionState(flatRow.row, flatRow.id);