@bmsuisse/datagrid 0.27.0 → 0.29.0

package/dist/index.js

@@ -2076,7 +2076,59 @@ import { BarsArrowDownIcon, BarsArrowUpIcon, FunnelIcon as FunnelIcon7 } from "@
 import { columnResizingFeature, columnSizingFeature, flexRender, tableFeatures, useTable } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { ChevronRight, Loader2 } from "lucide-react";
-import { Fragment as Fragment2, useEffect as useEffect9, useLayoutEffect, useMemo as useMemo6, useRef as useRef7, useState as useState8 } from "react";
+import { Fragment as Fragment2, useEffect as useEffect9, useMemo as useMemo7, useRef as useRef8, useState as useState10 } from "react";
+
+// src/hooks/useGroupExpansion.ts
+import { useCallback as useCallback2, useState as useState7 } from "react";
+function useGroupExpansion(defaultGroupsExpanded, controlledExpandedGroups, onExpandedGroupsChange) {
+  const [internalExpandedGroups, setInternalExpandedGroups] = useState7({});
+  const expandedGroups = controlledExpandedGroups ?? internalExpandedGroups;
+  const updateExpandedGroups = useCallback2(
+    (next) => {
+      setInternalExpandedGroups(next);
+      onExpandedGroupsChange?.(next);
+    },
+    [onExpandedGroupsChange]
+  );
+  const isGroupExpanded = useCallback2(
+    (key) => expandedGroups[key] ?? defaultGroupsExpanded,
+    [expandedGroups, defaultGroupsExpanded]
+  );
+  const toggleGroupExpanded = useCallback2(
+    (key) => {
+      updateExpandedGroups({ ...expandedGroups, [key]: !isGroupExpanded(key) });
+    },
+    [expandedGroups, isGroupExpanded, updateExpandedGroups]
+  );
+  return { expandedGroups, isGroupExpanded, toggleGroupExpanded };
+}
+
+// src/hooks/useStickyGroupHeaderTop.ts
+import { useLayoutEffect, useRef as useRef6, useState as useState8 } from "react";
+function useStickyGroupHeaderTop(enabled) {
+  const theadRef = useRef6(null);
+  const [groupHeaderTop, setGroupHeaderTop] = useState8(0);
+  useLayoutEffect(() => {
+    if (!enabled) return;
+    const theadEl = theadRef.current;
+    if (!theadEl) return;
+    const updateHeight = () => setGroupHeaderTop(theadEl.getBoundingClientRect().height);
+    updateHeight();
+    const observer = new ResizeObserver(updateHeight);
+    observer.observe(theadEl);
+    return () => observer.disconnect();
+  }, [enabled]);
+  return { theadRef, groupHeaderTop };
+}
+
+// src/hooks/useVisibleColumns.ts
+import { useMemo as useMemo4 } from "react";
+function useVisibleColumns(columns, columnVisibility) {
+  return useMemo4(
+    () => columnVisibility ? columns.filter((column) => isColumnVisible(columnVisibility, column.id)) : columns,
+    [columns, columnVisibility]
+  );
+}
 
 // src/lib/structuralColumns.ts
 var SELECTION_COLUMN_WIDTH = 44;
@@ -2119,20 +2171,20 @@ function processClientData(data, state) {
 }
 
 // src/grid/useGridState.ts
-import { useCallback as useCallback2, useEffect as useEffect8, useMemo as useMemo5, useState as useState7 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect8, useMemo as useMemo6, useState as useState9 } from "react";
 
 // src/hooks/useDebouncedCallback.ts
-import { useEffect as useEffect7, useMemo as useMemo4, useRef as useRef6 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo5, useRef as useRef7 } from "react";
 function useDebouncedCallback(callback, delayMs) {
-  const callbackRef = useRef6(callback);
+  const callbackRef = useRef7(callback);
   callbackRef.current = callback;
-  const timeoutRef = useRef6(void 0);
+  const timeoutRef = useRef7(void 0);
   useEffect7(() => {
     return () => {
       clearTimeout(timeoutRef.current);
     };
   }, []);
-  return useMemo4(() => {
+  return useMemo5(() => {
     return {
       run: (...args) => {
         clearTimeout(timeoutRef.current);
@@ -2157,10 +2209,10 @@ function nextSortDir(current, descFirst) {
   return void 0;
 }
 function useGridState(dataSource, initialState, externalState) {
-  const [state, setState] = useState7(
+  const [state, setState] = useState9(
     () => externalState ?? { ...DEFAULT_STATE, ...initialState }
   );
-  const notifyRaw = useCallback2(
+  const notifyRaw = useCallback3(
     (next) => {
       if (dataSource.mode === "server") dataSource.onStateChange(next);
     },
@@ -2170,7 +2222,7 @@ function useGridState(dataSource, initialState, externalState) {
     notifyRaw,
     FILTER_CHANGE_DEBOUNCE_MS
   );
-  const notifyNow = useCallback2(
+  const notifyNow = useCallback3(
     (next) => {
       cancelDebouncedNotify();
       notifyRaw(next);
@@ -2182,14 +2234,14 @@ function useGridState(dataSource, initialState, externalState) {
     cancelDebouncedNotify();
     setState(externalState);
   }, [externalState, cancelDebouncedNotify]);
-  const filtersByColumn = useMemo5(() => {
+  const filtersByColumn = useMemo6(() => {
     const map = /* @__PURE__ */ new Map();
     for (const child of state.filter?.filters ?? []) {
       if ("operator" in child) map.set(fieldKey(child.field), child);
     }
     return map;
   }, [state.filter]);
-  const setColumnFilter = useCallback2(
+  const setColumnFilter = useCallback3(
     (columnId, next) => {
       setState((prev) => {
         const remaining = (prev.filter?.filters ?? []).filter(
@@ -2207,7 +2259,7 @@ function useGridState(dataSource, initialState, externalState) {
     },
     [notifyDebounced]
   );
-  const toggleSort = useCallback2(
+  const toggleSort = useCallback3(
     (columnId, additive, descFirst = false) => {
       setState((prev) => {
         const existing = prev.sort.find((s) => s.field === columnId);
@@ -2222,7 +2274,7 @@ function useGridState(dataSource, initialState, externalState) {
     },
     [notifyNow]
   );
-  const setPage = useCallback2(
+  const setPage = useCallback3(
     (page) => {
       setState((prev) => {
         const nextState = { ...prev, page };
@@ -2232,7 +2284,7 @@ function useGridState(dataSource, initialState, externalState) {
     },
     [notifyNow]
   );
-  const setPageSize = useCallback2(
+  const setPageSize = useCallback3(
     (pageSize) => {
       setState((prev) => {
         const nextState = { ...prev, pageSize, page: 0 };
@@ -2322,19 +2374,19 @@ function DataGrid({
     initialState,
     gridState
   );
-  const [internalSelectedIds, setInternalSelectedIds] = useState8(/* @__PURE__ */ new Set());
+  const [internalSelectedIds, setInternalSelectedIds] = useState10(/* @__PURE__ */ new Set());
   const selectedIds = controlledSelectedIds ?? internalSelectedIds;
   function updateSelectedIds(next) {
     setInternalSelectedIds(next);
     onSelectedIdsChange?.(next);
   }
-  const [internalColumnSizing, setInternalColumnSizing] = useState8({});
+  const [internalColumnSizing, setInternalColumnSizing] = useState10({});
   const columnSizing = controlledColumnSizing ?? internalColumnSizing;
   function updateColumnSizing(next) {
     setInternalColumnSizing(next);
     onColumnSizingChange?.(next);
   }
-  const [expandedIds, setExpandedIds] = useState8(/* @__PURE__ */ new Set());
+  const [expandedIds, setExpandedIds] = useState10(/* @__PURE__ */ new Set());
   function toggleRowExpanded(id) {
     setExpandedIds((prev) => {
       const next = new Set(prev);
@@ -2343,32 +2395,22 @@ function DataGrid({
       return next;
     });
   }
-  const [internalExpandedGroups, setInternalExpandedGroups] = useState8({});
-  const expandedGroupsState = controlledExpandedGroups ?? internalExpandedGroups;
-  function updateExpandedGroups(next) {
-    setInternalExpandedGroups(next);
-    onExpandedGroupsChange?.(next);
-  }
-  function isGroupExpanded(key) {
-    return expandedGroupsState[key] ?? defaultGroupsExpanded;
-  }
-  function toggleGroupExpanded(key) {
-    updateExpandedGroups({ ...expandedGroupsState, [key]: !isGroupExpanded(key) });
-  }
+  const { isGroupExpanded, toggleGroupExpanded } = useGroupExpansion(
+    defaultGroupsExpanded,
+    controlledExpandedGroups,
+    onExpandedGroupsChange
+  );
   const { pendingEdits, editErrors, ctxRef: editingCtxRef, handleSaveEdits, handleDiscardEdits } = useEditingState(
     editing,
     getRowId
   );
-  const visibleColumns = useMemo6(
-    () => columnVisibility ? columns.filter((column) => isColumnVisible(columnVisibility, column.id)) : columns,
-    [columns, columnVisibility]
-  );
+  const visibleColumns = useVisibleColumns(columns, columnVisibility);
   const serverRowCount = dataSource.mode === "server" ? dataSource.rowCount : void 0;
-  const { rows, rowCount } = useMemo6(() => {
+  const { rows, rowCount } = useMemo7(() => {
     if (dataSource.mode === "client") return processClientData(dataSource.data, state);
     return { rows: dataSource.data, rowCount: serverRowCount ?? 0 };
   }, [dataSource.mode, dataSource.data, serverRowCount, state]);
-  const selectedRows = useMemo6(
+  const selectedRows = useMemo7(
     () => rows.filter((row) => selectedIds.has(getRowId(row))),
     [rows, selectedIds, getRowId]
   );
@@ -2387,8 +2429,8 @@ function DataGrid({
     }
     updateSelectedIds(next);
   }
-  const tanstackColumns = useMemo6(() => toTanstackColumns(visibleColumns, editingCtxRef), [visibleColumns]);
-  const columnById = useMemo6(() => {
+  const tanstackColumns = useMemo7(() => toTanstackColumns(visibleColumns, editingCtxRef), [visibleColumns]);
+  const columnById = useMemo7(() => {
     const map = /* @__PURE__ */ new Map();
     for (const column of visibleColumns) map.set(column.id, column);
     return map;
@@ -2413,7 +2455,7 @@ function DataGrid({
   const showDetailColumn = Boolean(renderDetail);
   const totalColumnCount = visibleColumns.length + (showDetailColumn ? 1 : 0) + (showSelectionColumn ? 1 : 0) + (showRowActionsColumn ? 1 : 0);
   const hasFilterRow = visibleColumns.some((column) => isFilterable(column) && column.filterDisplay === "row");
-  const headerRuns = useMemo6(() => computeHeaderRuns(visibleColumns), [visibleColumns]);
+  const headerRuns = useMemo7(() => computeHeaderRuns(visibleColumns), [visibleColumns]);
   const hasHeaderGroups = visibleColumns.some((column) => column.headerGroup);
   function renderFilterWidget(column) {
     const value = filtersByColumn.get(column.id);
@@ -2423,11 +2465,11 @@ function DataGrid({
   const columnSize = (columnId) => table.getColumn(columnId)?.getSize() ?? DEFAULT_COLUMN_SIZE;
   const leadingStructuralWidth = (showDetailColumn ? DETAIL_COLUMN_WIDTH : 0) + (showSelectionColumn ? SELECTION_COLUMN_WIDTH : 0);
   const trailingStructuralWidth = showRowActionsColumn ? ROW_ACTIONS_COLUMN_WIDTH : 0;
-  const leftPinnedOffsets = useMemo6(
+  const leftPinnedOffsets = useMemo7(
     () => pinnedOffsets(visibleColumns, "left", columnSize, leadingStructuralWidth),
     [visibleColumns, columnSizing, leadingStructuralWidth]
   );
-  const rightPinnedOffsets = useMemo6(
+  const rightPinnedOffsets = useMemo7(
     () => pinnedOffsets(visibleColumns, "right", columnSize, trailingStructuralWidth),
     [visibleColumns, columnSizing, trailingStructuralWidth]
   );
@@ -2475,7 +2517,7 @@ function DataGrid({
       style: pinnedProps?.style
     };
   }
-  const bodyCellPropsByColumn = useMemo6(() => {
+  const bodyCellPropsByColumn = useMemo7(() => {
     const map = /* @__PURE__ */ new Map();
     for (const column of visibleColumns) map.set(column.id, bodyCellClassAndStyle(column));
     return map;
@@ -2491,7 +2533,7 @@ function DataGrid({
     );
     return { className, style: pinnedProps.style };
   }
-  const leafHeaderCellPropsByColumn = useMemo6(() => {
+  const leafHeaderCellPropsByColumn = useMemo7(() => {
     const map = /* @__PURE__ */ new Map();
     for (const column of visibleColumns) {
       map.set(
@@ -2501,7 +2543,7 @@ function DataGrid({
     }
     return map;
   }, [visibleColumns, enableColumnResizing, leftPinnedOffsets, rightPinnedOffsets, columnSizing]);
-  const filterHeaderCellPropsByColumn = useMemo6(() => {
+  const filterHeaderCellPropsByColumn = useMemo7(() => {
     const map = /* @__PURE__ */ new Map();
     for (const column of visibleColumns) {
       map.set(column.id, headerCellClassAndStyle(column, "border-b border-border p-2 align-top font-normal"));
@@ -2509,26 +2551,28 @@ function DataGrid({
     return map;
   }, [visibleColumns, enableColumnResizing, leftPinnedOffsets, rightPinnedOffsets, columnSizing]);
   const tableRows = table.getRowModel().rows;
-  const shouldVirtualize = Boolean(virtualize) && !groupBy && tableRows.length > (virtualize?.threshold ?? 100);
-  const groupedBuckets = useMemo6(
+  const groupedBuckets = useMemo7(
     () => groupBy ? groupRows(tableRows, (row) => groupBy(row.original)) : void 0,
     [tableRows, groupBy]
   );
-  const theadRef = useRef7(null);
-  const [groupHeaderTop, setGroupHeaderTop] = useState8(0);
-  useLayoutEffect(() => {
-    if (!groupBy) return;
-    const theadEl = theadRef.current;
-    if (!theadEl) return;
-    const updateHeight = () => setGroupHeaderTop(theadEl.getBoundingClientRect().height);
-    updateHeight();
-    const observer = new ResizeObserver(updateHeight);
-    observer.observe(theadEl);
-    return () => observer.disconnect();
-  }, [groupBy]);
-  const scrollRef = useRef7(null);
+  const { theadRef, groupHeaderTop } = useStickyGroupHeaderTop(Boolean(groupBy));
+  const shouldVirtualize = Boolean(virtualize) && tableRows.length > (virtualize?.threshold ?? 100);
+  const flatItems = useMemo7(() => {
+    if (!shouldVirtualize) return [];
+    if (!groupedBuckets) return tableRows.map((row) => ({ kind: "row", row }));
+    const items = [];
+    for (const bucket of groupedBuckets) {
+      const originalRows = bucket.items.map((row) => row.original);
+      items.push({ kind: "header", key: bucket.key, rows: originalRows });
+      if (isGroupExpanded(bucket.key)) {
+        for (const row of bucket.items) items.push({ kind: "row", row });
+      }
+    }
+    return items;
+  }, [shouldVirtualize, groupedBuckets, tableRows, isGroupExpanded]);
+  const scrollRef = useRef8(null);
   const virtualizer = useVirtualizer({
-    count: tableRows.length,
+    count: flatItems.length,
     getScrollElement: () => scrollRef.current,
     estimateSize: () => virtualize?.estimatedRowHeight ?? 40,
     overscan: virtualize?.overscan ?? 10,
@@ -2538,21 +2582,21 @@ function DataGrid({
   const paddingTop = virtualItems.length > 0 ? virtualItems[0].start : 0;
   const paddingBottom = virtualItems.length > 0 ? virtualizer.getTotalSize() - virtualItems[virtualItems.length - 1].end : 0;
   const lastVisibleIndex = virtualItems.length > 0 ? virtualItems[virtualItems.length - 1].index : -1;
-  const notifiedForLengthRef = useRef7(-1);
+  const notifiedForLengthRef = useRef8(-1);
   useEffect9(() => {
     if (!virtualize?.onEndReached) return;
-    if (lastVisibleIndex < 0 || lastVisibleIndex < tableRows.length - 1) return;
+    if (lastVisibleIndex < 0 || lastVisibleIndex < flatItems.length - 1) return;
     if (virtualize.hasMore === false) return;
     if (notifiedForLengthRef.current === tableRows.length) return;
     notifiedForLengthRef.current = tableRows.length;
     virtualize.onEndReached();
-  }, [lastVisibleIndex, tableRows.length, virtualize]);
-  function renderRow(row, measureRef) {
+  }, [lastVisibleIndex, flatItems.length, tableRows.length, virtualize]);
+  function renderRow(row, measureRef, dataIndex = row.index) {
     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__ */ jsxs18("tbody", { ref: measureRef, "data-index": row.index, children: [
+    return /* @__PURE__ */ jsxs18("tbody", { ref: measureRef, "data-index": dataIndex, children: [
       /* @__PURE__ */ jsxs18(
         "tr",
         {
@@ -2623,43 +2667,48 @@ function DataGrid({
       showDetailColumn && isExpanded && renderDetail && /* @__PURE__ */ jsx28("tr", { "data-testid": `${rowTestId}-detail`, children: /* @__PURE__ */ jsx28("td", { colSpan: totalColumnCount, className: "border-b border-border p-2", children: renderDetail(row.original) }) })
     ] }, row.id);
   }
+  function renderGroupHeaderTbody(key, rows2, measureRef, dataIndex) {
+    const expanded = isGroupExpanded(key);
+    return /* @__PURE__ */ jsx28("tbody", { ref: measureRef, "data-index": dataIndex, children: /* @__PURE__ */ jsx28("tr", { "data-testid": `group-header-${key}`, children: /* @__PURE__ */ jsx28(
+      "td",
+      {
+        colSpan: totalColumnCount,
+        className: cn("sticky z-20 border-b p-2 font-medium", zebra ? "bg-muted" : "bg-background"),
+        style: { top: groupHeaderTop },
+        children: /* @__PURE__ */ jsxs18(
+          "button",
+          {
+            type: "button",
+            className: "flex w-full items-center gap-1 text-left",
+            onClick: () => toggleGroupExpanded(key),
+            "aria-expanded": expanded,
+            children: [
+              /* @__PURE__ */ jsx28(
+                ChevronRight,
+                {
+                  className: `h-4 w-4 shrink-0 transition-transform${expanded ? " rotate-90" : ""}`,
+                  "aria-hidden": true
+                }
+              ),
+              renderGroupHeader ? renderGroupHeader(key, rows2, expanded) : `${key} (${rows2.length})`
+            ]
+          }
+        )
+      }
+    ) }) }, `group-${key}`);
+  }
   function renderGroupedBucket(bucket) {
     const expanded = isGroupExpanded(bucket.key);
     const originalRows = bucket.items.map((row) => row.original);
     return /* @__PURE__ */ jsxs18(Fragment2, { children: [
-      /* @__PURE__ */ jsx28("tbody", { children: /* @__PURE__ */ jsx28("tr", { "data-testid": `group-header-${bucket.key}`, children: /* @__PURE__ */ jsx28(
-        "td",
-        {
-          colSpan: totalColumnCount,
-          className: cn(
-            "sticky z-20 border-b p-2 font-medium",
-            zebra ? "bg-muted" : "bg-background"
-          ),
-          style: { top: groupHeaderTop },
-          children: /* @__PURE__ */ jsxs18(
-            "button",
-            {
-              type: "button",
-              className: "flex w-full items-center gap-1 text-left",
-              onClick: () => toggleGroupExpanded(bucket.key),
-              "aria-expanded": expanded,
-              children: [
-                /* @__PURE__ */ jsx28(
-                  ChevronRight,
-                  {
-                    className: `h-4 w-4 shrink-0 transition-transform${expanded ? " rotate-90" : ""}`,
-                    "aria-hidden": true
-                  }
-                ),
-                renderGroupHeader ? renderGroupHeader(bucket.key, originalRows, expanded) : `${bucket.key} (${originalRows.length})`
-              ]
-            }
-          )
-        }
-      ) }) }),
+      renderGroupHeaderTbody(bucket.key, originalRows),
       expanded && bucket.items.map((row) => renderRow(row))
     ] }, `group-${bucket.key}`);
   }
+  function renderFlatItem(item, index, measureRef) {
+    if (item.kind === "header") return renderGroupHeaderTbody(item.key, item.rows, measureRef, index);
+    return renderRow(item.row, measureRef, index);
+  }
   return (
     // `h-full`/`min-h-0` here and on the two wrappers below are no-ops unless
     // a consumer itself gives <DataGrid> a bounded height (e.g. wraps it in
@@ -2881,7 +2930,11 @@ function DataGrid({
               rows.length === 0 ? /* @__PURE__ */ jsx28("tbody", { children: /* @__PURE__ */ jsx28("tr", { children: /* @__PURE__ */ jsx28("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: loading ? "Loading..." : "No results." }) }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs18(Fragment3, { children: [
                 paddingTop > 0 && /* @__PURE__ */ jsx28("tbody", { children: /* @__PURE__ */ jsx28("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx28("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }) }),
                 virtualItems.map(
-                  (virtualItem) => renderRow(tableRows[virtualItem.index], (el) => virtualizer.measureElement(el))
+                  (virtualItem) => renderFlatItem(
+                    flatItems[virtualItem.index],
+                    virtualItem.index,
+                    (el) => virtualizer.measureElement(el)
+                  )
                 ),
                 paddingBottom > 0 && /* @__PURE__ */ jsx28("tbody", { children: /* @__PURE__ */ jsx28("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx28("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingBottom } }) }) })
               ] }) : groupedBuckets ? groupedBuckets.map((bucket) => renderGroupedBucket(bucket)) : tableRows.map((row) => renderRow(row))
@@ -2931,7 +2984,7 @@ function DataGrid({
 // src/tree/TreeDataGrid.tsx
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
 import { AlertCircle, ChevronDown as ChevronDown2, ChevronRight as ChevronRight2, Loader2 as Loader22 } from "lucide-react";
-import { useEffect as useEffect10, useMemo as useMemo8, useRef as useRef8 } from "react";
+import { Fragment as Fragment4, useEffect as useEffect10, useMemo as useMemo9, useRef as useRef9 } from "react";
 
 // src/tree/flattenTree.ts
 function flattenTree(roots, accessors, expanded, childrenOverride) {
@@ -2976,7 +3029,7 @@ function computeSelectionStates(roots, accessors, childrenOverride, selectedIds)
 }
 
 // src/tree/useTreeState.ts
-import { useCallback as useCallback3, useMemo as useMemo7, useState as useState9 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo8, useState as useState11 } from "react";
 function useTreeState({
   data,
   getRowId,
@@ -2988,9 +3041,9 @@ function useTreeState({
   childrenMap: controlledChildrenMap,
   onChildrenMapChange
 }) {
-  const [internalExpanded, setInternalExpanded] = useState9({});
+  const [internalExpanded, setInternalExpanded] = useState11({});
   const expanded = controlledExpanded ?? internalExpanded;
-  const setExpanded = useCallback3(
+  const setExpanded = useCallback4(
     (updater) => {
       if (controlledExpanded) {
         onExpandedChange?.(updater(controlledExpanded));
@@ -3000,9 +3053,9 @@ function useTreeState({
     },
     [controlledExpanded, onExpandedChange]
   );
-  const [internalChildrenMap, setInternalChildrenMap] = useState9(/* @__PURE__ */ new Map());
+  const [internalChildrenMap, setInternalChildrenMap] = useState11(/* @__PURE__ */ new Map());
   const childrenMap = controlledChildrenMap ?? internalChildrenMap;
-  const setChildrenMap = useCallback3(
+  const setChildrenMap = useCallback4(
     (updater) => {
       if (controlledChildrenMap) {
         onChildrenMapChange?.(updater(controlledChildrenMap));
@@ -3012,13 +3065,13 @@ function useTreeState({
     },
     [controlledChildrenMap, onChildrenMapChange]
   );
-  const [loadingIds, setLoadingIds] = useState9(/* @__PURE__ */ new Set());
-  const [errorIds, setErrorIds] = useState9(/* @__PURE__ */ new Map());
-  const resolveHasChildren = useMemo7(
+  const [loadingIds, setLoadingIds] = useState11(/* @__PURE__ */ new Set());
+  const [errorIds, setErrorIds] = useState11(/* @__PURE__ */ new Map());
+  const resolveHasChildren = useMemo8(
     () => hasChildren ?? ((row) => (getChildren(row)?.length ?? 0) > 0),
     [hasChildren, getChildren]
   );
-  const loadChildrenFor = useCallback3(
+  const loadChildrenFor = useCallback4(
     async (row) => {
       const id = getRowId(row);
       const cached = childrenMap.get(id);
@@ -3051,7 +3104,7 @@ function useTreeState({
     },
     [childrenMap, getChildren, getRowId, onLoadChildren, setChildrenMap]
   );
-  const toggleExpand = useCallback3(
+  const toggleExpand = useCallback4(
     (row) => {
       const id = getRowId(row);
       const willExpand = !expanded[id];
@@ -3063,14 +3116,14 @@ function useTreeState({
     },
     [expanded, getRowId, loadChildrenFor, resolveHasChildren, setExpanded]
   );
-  const retry = useCallback3(
+  const retry = useCallback4(
     (row) => {
       loadChildrenFor(row).catch(() => {
       });
     },
     [loadChildrenFor]
   );
-  const expandToLevel = useCallback3(
+  const expandToLevel = useCallback4(
     async (level) => {
       const nextExpanded = { ...expanded };
       async function visit(row, depth) {
@@ -3093,7 +3146,7 @@ function useTreeState({
 }
 
 // src/tree/TreeDataGrid.tsx
-import { Fragment as Fragment4, jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 var EMPTY_SELECTED_IDS = /* @__PURE__ */ new Set();
 var UNCHECKED_STATE = { checked: false, indeterminate: false };
 function renderCell(column, row, editingCtx) {
@@ -3137,6 +3190,7 @@ function TreeDataGrid({
   columns,
   data,
   treeColumnId,
+  columnVisibility,
   getRowId,
   getChildren,
   hasChildren,
@@ -3157,10 +3211,15 @@ function TreeDataGrid({
   onSelectedIdsChange,
   getRowSelectionState,
   isRowSelectionDisabled,
+  groupBy,
+  renderGroupHeader,
+  defaultGroupsExpanded = true,
+  expandedGroups: controlledExpandedGroups,
+  onExpandedGroupsChange,
   zebra = true,
   editing
 }) {
-  const accessors = useMemo8(
+  const accessors = useMemo9(
     () => ({ getRowId, getChildren, hasChildren }),
     [getRowId, getChildren, hasChildren]
   );
@@ -3176,21 +3235,48 @@ function TreeDataGrid({
     childrenMap: controlledChildrenMap,
     onChildrenMapChange
   });
-  const didAutoExpand = useRef8(false);
+  const didAutoExpand = useRef9(false);
   useEffect10(() => {
     if (didAutoExpand.current) return;
     didAutoExpand.current = true;
     if (initialExpandedLevel > 0) void expandToLevel(initialExpandedLevel);
   }, []);
-  const flatRows = useMemo8(
-    () => flattenTree(data, accessors, expanded, childrenMap),
-    [data, accessors, expanded, childrenMap]
+  const visibleColumns = useVisibleColumns(columns, columnVisibility);
+  const { isGroupExpanded, toggleGroupExpanded } = useGroupExpansion(
+    defaultGroupsExpanded,
+    controlledExpandedGroups,
+    onExpandedGroupsChange
+  );
+  const flatRows = useMemo9(
+    () => groupBy ? [] : flattenTree(data, accessors, expanded, childrenMap),
+    [groupBy, data, accessors, expanded, childrenMap]
+  );
+  const groupedBuckets = useMemo9(
+    () => groupBy ? groupRows(data, groupBy).map((bucket) => ({
+      key: bucket.key,
+      roots: bucket.items,
+      flatRows: flattenTree(bucket.items, accessors, expanded, childrenMap)
+    })) : void 0,
+    [groupBy, data, accessors, expanded, childrenMap]
   );
+  const groupedRender = useMemo9(() => {
+    if (!groupedBuckets) return void 0;
+    const startIndexByBucket = /* @__PURE__ */ new Map();
+    const rows = [];
+    for (const bucket of groupedBuckets) {
+      if (!isGroupExpanded(bucket.key)) continue;
+      startIndexByBucket.set(bucket.key, rows.length);
+      rows.push(...bucket.flatRows);
+    }
+    return { startIndexByBucket, rows };
+  }, [groupedBuckets, isGroupExpanded]);
+  const allFlatRows = groupedRender ? groupedRender.rows : flatRows;
   const treeColId = treeColumnId ?? columns[0]?.id;
   const showRowActionsColumn = Boolean(rowActions?.length);
   const showSelectionColumn = controlledSelectedIds !== void 0;
-  const totalColumnCount = columns.length + (showRowActionsColumn ? 1 : 0) + (showSelectionColumn ? 1 : 0);
-  const selectionStates = useMemo8(
+  const totalColumnCount = visibleColumns.length + (showRowActionsColumn ? 1 : 0) + (showSelectionColumn ? 1 : 0);
+  const { theadRef, groupHeaderTop } = useStickyGroupHeaderTop(Boolean(groupBy));
+  const selectionStates = useMemo9(
     () => showSelectionColumn ? computeSelectionStates(data, accessors, childrenMap, controlledSelectedIds ?? EMPTY_SELECTED_IDS) : void 0,
     [showSelectionColumn, data, accessors, childrenMap, controlledSelectedIds]
   );
@@ -3206,9 +3292,9 @@ function TreeDataGrid({
     else next.add(id);
     onSelectedIdsChange?.(next);
   }
-  const selectableFlatRows = useMemo8(
-    () => flatRows.filter((flatRow) => !(isRowSelectionDisabled?.(flatRow.row) ?? false)),
-    [flatRows, isRowSelectionDisabled]
+  const selectableFlatRows = useMemo9(
+    () => allFlatRows.filter((flatRow) => !(isRowSelectionDisabled?.(flatRow.row) ?? false)),
+    [allFlatRows, isRowSelectionDisabled]
   );
   const allVisibleSelected = showSelectionColumn && selectableFlatRows.length > 0 && selectableFlatRows.every((flatRow) => controlledSelectedIds.has(flatRow.id));
   function toggleAllVisibleSelected() {
@@ -3220,13 +3306,13 @@ function TreeDataGrid({
     }
     onSelectedIdsChange?.(next);
   }
-  const bodyTdClassByColumn = useMemo8(() => {
+  const bodyTdClassByColumn = useMemo9(() => {
     const map = /* @__PURE__ */ new Map();
-    for (const column of columns) map.set(column.id, `p-2 ${alignClassName(column)}`);
+    for (const column of visibleColumns) map.set(column.id, `p-2 ${alignClassName(column)}`);
     return map;
-  }, [columns]);
-  const scrollRef = useRef8(null);
-  const shouldVirtualize = flatRows.length > virtualizeThreshold;
+  }, [visibleColumns]);
+  const scrollRef = useRef9(null);
+  const shouldVirtualize = !groupBy && flatRows.length > virtualizeThreshold;
   const virtualizer = useVirtualizer2({
     count: flatRows.length,
     getScrollElement: () => scrollRef.current,
@@ -3264,7 +3350,7 @@ function TreeDataGrid({
               }
             );
           })() }),
-          columns.map((column) => /* @__PURE__ */ jsx29("td", { className: bodyTdClassByColumn.get(column.id), children: column.id === treeColId ? /* @__PURE__ */ jsx29(
+          visibleColumns.map((column) => /* @__PURE__ */ jsx29("td", { className: bodyTdClassByColumn.get(column.id), children: column.id === treeColId ? /* @__PURE__ */ jsx29(
             TreeCell,
             {
               flatRow,
@@ -3312,7 +3398,7 @@ function TreeDataGrid({
         className: shouldVirtualize ? "overflow-y-auto" : void 0,
         style: shouldVirtualize ? { maxHeight: maxBodyHeight } : void 0,
         children: /* @__PURE__ */ jsxs19("table", { className: "w-full border-collapse text-sm", children: [
-          /* @__PURE__ */ jsx29("thead", { children: /* @__PURE__ */ jsxs19("tr", { className: "divide-x divide-border", children: [
+          /* @__PURE__ */ jsx29("thead", { ref: theadRef, children: /* @__PURE__ */ jsxs19("tr", { className: "divide-x divide-border", children: [
             showSelectionColumn && /* @__PURE__ */ jsx29("th", { className: "border-b border-border p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: /* @__PURE__ */ jsx29(
               Checkbox,
               {
@@ -3321,7 +3407,7 @@ function TreeDataGrid({
                 onCheckedChange: toggleAllVisibleSelected
               }
             ) }),
-            columns.map((column) => /* @__PURE__ */ jsx29(
+            visibleColumns.map((column) => /* @__PURE__ */ jsx29(
               "th",
               {
                 style: column.width ? { width: column.width } : void 0,
@@ -3332,7 +3418,45 @@ function TreeDataGrid({
             )),
             showRowActionsColumn && /* @__PURE__ */ jsx29("th", { className: "border-b border-border p-2", "aria-label": "Row actions" })
           ] }) }),
-          /* @__PURE__ */ jsx29("tbody", { children: flatRows.length === 0 ? /* @__PURE__ */ jsx29("tr", { children: /* @__PURE__ */ jsx29("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: "No results." }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs19(Fragment4, { children: [
+          /* @__PURE__ */ jsx29("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsx29("tr", { children: /* @__PURE__ */ jsx29("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: "No results." }) }) : groupedBuckets ? groupedBuckets.map((bucket) => {
+            const groupExpanded = isGroupExpanded(bucket.key);
+            return /* @__PURE__ */ jsxs19(Fragment4, { children: [
+              /* @__PURE__ */ jsx29("tr", { "data-testid": `group-header-${bucket.key}`, children: /* @__PURE__ */ jsx29(
+                "td",
+                {
+                  colSpan: totalColumnCount,
+                  className: cn(
+                    "sticky z-20 border-b p-2 font-medium",
+                    zebra ? "bg-muted" : "bg-background"
+                  ),
+                  style: { top: groupHeaderTop },
+                  children: /* @__PURE__ */ jsxs19(
+                    "button",
+                    {
+                      type: "button",
+                      className: "flex w-full items-center gap-1 text-left",
+                      onClick: () => toggleGroupExpanded(bucket.key),
+                      "aria-expanded": groupExpanded,
+                      children: [
+                        /* @__PURE__ */ jsx29(
+                          ChevronRight2,
+                          {
+                            className: `h-4 w-4 shrink-0 transition-transform${groupExpanded ? " rotate-90" : ""}`,
+                            "aria-hidden": true
+                          }
+                        ),
+                        renderGroupHeader ? renderGroupHeader(bucket.key, bucket.roots, groupExpanded) : `${bucket.key} (${bucket.roots.length})`
+                      ]
+                    }
+                  )
+                }
+              ) }),
+              groupExpanded && (() => {
+                const startIndex = groupedRender?.startIndexByBucket.get(bucket.key) ?? 0;
+                return bucket.flatRows.map((flatRow, i) => renderRow(flatRow, startIndex + i));
+              })()
+            ] }, `group-${bucket.key}`);
+          }) : shouldVirtualize ? /* @__PURE__ */ jsxs19(Fragment5, { children: [
             paddingTop > 0 && /* @__PURE__ */ jsx29("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx29("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }),
             virtualItems.map(
               (virtualItem) => renderRow(flatRows[virtualItem.index], virtualItem.index, (el) => virtualizer.measureElement(el))
@@ -3399,6 +3523,9 @@ export {
   useDebouncedCallback,
   useEditingState,
   useGridState,
-  useTreeState
+  useGroupExpansion,
+  useStickyGroupHeaderTop,
+  useTreeState,
+  useVisibleColumns
 };
 //# sourceMappingURL=index.js.map