@bmsuisse/datagrid 0.23.2 → 0.24.0

package/dist/index.js

@@ -192,7 +192,8 @@ var buttonVariants = cva(
 var Button = forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
+    const variantClass = buttonVariants({ variant, size });
+    return /* @__PURE__ */ jsx(Comp, { className: className ? cn(variantClass, className) : variantClass, ref, ...props });
   }
 );
 Button.displayName = "Button";
@@ -337,7 +338,13 @@ function BooleanFilter({
         "aria-label": `Filter ${column.header}`,
         "data-testid": `filter-${column.id}`,
         children: [
-          /* @__PURE__ */ jsx4(FunnelIcon, { className: "h-3.5 w-3.5 shrink-0 opacity-70", "aria-hidden": true }),
+          /* @__PURE__ */ jsx4(
+            FunnelIcon,
+            {
+              className: cn("h-3.5 w-3.5 shrink-0", isFiltered ? "opacity-100 text-primary" : "opacity-40"),
+              "aria-hidden": true
+            }
+          ),
           isFiltered && /* @__PURE__ */ jsx4("span", { className: "truncate", children: summary })
         ]
       }
@@ -591,7 +598,13 @@ function EnumFilter({
         "aria-label": `Filter ${column.header}`,
         "data-testid": `filter-${column.id}`,
         children: [
-          /* @__PURE__ */ jsx9(FunnelIcon2, { className: "h-3.5 w-3.5 shrink-0 opacity-70", "aria-hidden": true }),
+          /* @__PURE__ */ jsx9(
+            FunnelIcon2,
+            {
+              className: cn("h-3.5 w-3.5 shrink-0", isFiltered ? "opacity-100 text-primary" : "opacity-40"),
+              "aria-hidden": true
+            }
+          ),
           isFiltered && /* @__PURE__ */ jsx9("span", { className: "truncate", children: summary })
         ]
       }
@@ -648,6 +661,15 @@ function toNumber(value) {
   }
   return null;
 }
+var currencyFormatters = /* @__PURE__ */ new Map();
+function currencyFormatter(currency) {
+  let formatter = currencyFormatters.get(currency);
+  if (!formatter) {
+    formatter = new Intl.NumberFormat(void 0, { style: "currency", currency });
+    currencyFormatters.set(currency, formatter);
+  }
+  return formatter;
+}
 function defaultFormat(column, value) {
   if (value === null || value === void 0) return "";
   switch (column.type) {
@@ -660,10 +682,7 @@ function defaultFormat(column, value) {
     case "currency": {
       const num = toNumber(value);
       if (num === null) return String(value);
-      return new Intl.NumberFormat(void 0, {
-        style: "currency",
-        currency: column.currency ?? "USD"
-      }).format(num);
+      return currencyFormatter(column.currency ?? "USD").format(num);
     }
     case "date": {
       const date = toDate(value);
@@ -870,7 +889,13 @@ function NumberComparisonFilter({
         "aria-label": `Filter ${column.header}`,
         "data-testid": `filter-${column.id}`,
         children: [
-          /* @__PURE__ */ jsx10(FunnelIcon3, { className: "h-3.5 w-3.5 shrink-0 opacity-70", "aria-hidden": true }),
+          /* @__PURE__ */ jsx10(
+            FunnelIcon3,
+            {
+              className: cn("h-3.5 w-3.5 shrink-0", isFiltered ? "opacity-100 text-primary" : "opacity-40"),
+              "aria-hidden": true
+            }
+          ),
           isFiltered && /* @__PURE__ */ jsx10("span", { className: "truncate", children: summary })
         ]
       }
@@ -964,7 +989,13 @@ function NumberRangeFilter({
         "aria-label": `Filter ${column.header}`,
         "data-testid": `filter-${column.id}`,
         children: [
-          /* @__PURE__ */ jsx11(FunnelIcon4, { className: "h-3.5 w-3.5 shrink-0 opacity-70", "aria-hidden": true }),
+          /* @__PURE__ */ jsx11(
+            FunnelIcon4,
+            {
+              className: cn("h-3.5 w-3.5 shrink-0", isFiltered ? "opacity-100 text-primary" : "opacity-40"),
+              "aria-hidden": true
+            }
+          ),
           isFiltered && /* @__PURE__ */ jsx11("span", { className: "truncate", children: summary })
         ]
       }
@@ -1177,7 +1208,13 @@ function NumberHistogramFilter({
         "aria-label": `Filter ${column.header}`,
         "data-testid": `filter-${column.id}`,
         children: [
-          /* @__PURE__ */ jsx12(FunnelIcon5, { className: "h-3.5 w-3.5 shrink-0 opacity-70", "aria-hidden": true }),
+          /* @__PURE__ */ jsx12(
+            FunnelIcon5,
+            {
+              className: cn("h-3.5 w-3.5 shrink-0", isFiltered ? "opacity-100 text-primary" : "opacity-40"),
+              "aria-hidden": true
+            }
+          ),
           isFiltered && /* @__PURE__ */ jsx12("span", { className: "truncate", children: summary })
         ]
       }
@@ -1293,7 +1330,13 @@ function StringFilter({
         "aria-label": `Filter ${column.header}`,
         "data-testid": `filter-${column.id}`,
         children: [
-          /* @__PURE__ */ jsx13(FunnelIcon6, { className: "h-3.5 w-3.5 shrink-0 opacity-70", "aria-hidden": true }),
+          /* @__PURE__ */ jsx13(
+            FunnelIcon6,
+            {
+              className: cn("h-3.5 w-3.5 shrink-0", isFiltered ? "opacity-100 text-primary" : "opacity-40"),
+              "aria-hidden": true
+            }
+          ),
           isFiltered && /* @__PURE__ */ jsx13("span", { className: "truncate", children: text })
         ]
       }
@@ -1508,6 +1551,7 @@ function resolveMenuItems(items, ctx) {
 
 // src/menu/ActionsMenu.tsx
 import { MoreVertical } from "lucide-react";
+import { useMemo as useMemo3 } from "react";
 
 // src/components/ui/dropdown-menu.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
@@ -1563,7 +1607,10 @@ DropdownMenuLabel.displayName = "DropdownMenuLabel";
 // src/menu/ActionsMenu.tsx
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 function ActionsMenu({ items, ctx, triggerLabel }) {
-  const resolved = resolveMenuItems(items, ctx);
+  const resolved = useMemo3(
+    () => resolveMenuItems(items, ctx),
+    [items, ctx.row, ctx.selectedRows]
+  );
   if (resolved.length === 0) return null;
   return /* @__PURE__ */ jsxs11(DropdownMenu, { children: [
     /* @__PURE__ */ jsx18(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx18(Button, { variant: "ghost", size: "icon", "aria-label": triggerLabel, onClick: stopRowClick, children: /* @__PURE__ */ jsx18(MoreVertical, { className: "h-4 w-4", "aria-hidden": true }) }) }),
@@ -1585,7 +1632,22 @@ 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 useEffect7, useMemo as useMemo5, useRef as useRef5, useState as useState6 } from "react";
+import { Fragment as Fragment2, useEffect as useEffect7, useMemo as useMemo6, useRef as useRef5, useState as useState6 } from "react";
+
+// src/lib/structuralColumns.ts
+var SELECTION_COLUMN_WIDTH = 44;
+
+// src/grid/groupRows.ts
+function groupRows(items, groupBy) {
+  const buckets = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const key = groupBy(item);
+    const bucket = buckets.get(key);
+    if (bucket) bucket.push(item);
+    else buckets.set(key, [item]);
+  }
+  return Array.from(buckets, ([key, groupItems]) => ({ key, items: groupItems }));
+}
 
 // src/grid/processClientData.ts
 function makeComparator(sort) {
@@ -1613,10 +1675,10 @@ function processClientData(data, state) {
 }
 
 // src/grid/useGridState.ts
-import { useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo4, useState as useState5 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo5, useState as useState5 } from "react";
 
 // src/hooks/useDebouncedCallback.ts
-import { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef4 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo4, useRef as useRef4 } from "react";
 function useDebouncedCallback(callback, delayMs) {
   const callbackRef = useRef4(callback);
   callbackRef.current = callback;
@@ -1626,7 +1688,7 @@ function useDebouncedCallback(callback, delayMs) {
       clearTimeout(timeoutRef.current);
     };
   }, []);
-  return useMemo3(() => {
+  return useMemo4(() => {
     return {
       run: (...args) => {
         clearTimeout(timeoutRef.current);
@@ -1676,7 +1738,7 @@ function useGridState(dataSource, initialState, externalState) {
     cancelDebouncedNotify();
     setState(externalState);
   }, [externalState, cancelDebouncedNotify]);
-  const filtersByColumn = useMemo4(() => {
+  const filtersByColumn = useMemo5(() => {
     const map = /* @__PURE__ */ new Map();
     for (const child of state.filter?.filters ?? []) {
       if ("operator" in child) map.set(fieldKey(child.field), child);
@@ -1744,8 +1806,8 @@ import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-r
 var gridTableFeatures = tableFeatures({ columnSizingFeature, columnResizingFeature });
 var DEFAULT_COLUMN_SIZE = 150;
 var DETAIL_COLUMN_WIDTH = 44;
-var SELECTION_COLUMN_WIDTH = 44;
 var ROW_ACTIONS_COLUMN_WIDTH = 44;
+var STRUCTURAL_ZEBRA_BG_CLASS = "bg-[color-mix(in_srgb,var(--color-foreground)_5%,var(--color-background))]";
 function pinnedOffsets(visibleColumns, side, getSize, leadingOffset) {
   const offsets = /* @__PURE__ */ new Map();
   let cursor = leadingOffset;
@@ -1802,7 +1864,12 @@ function DataGrid({
   selectedIds: controlledSelectedIds,
   onSelectedIdsChange,
   testId,
-  loading: loadingProp = false
+  loading: loadingProp = false,
+  groupBy,
+  renderGroupHeader,
+  defaultGroupsExpanded = true,
+  expandedGroups: controlledExpandedGroups,
+  onExpandedGroupsChange
 }) {
   const { state, filtersByColumn, setColumnFilter, toggleSort, setPage } = useGridState(
     dataSource,
@@ -1830,16 +1897,28 @@ function DataGrid({
       return next;
     });
   }
-  const visibleColumns = useMemo5(
+  const [internalExpandedGroups, setInternalExpandedGroups] = useState6({});
+  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 visibleColumns = useMemo6(
     () => columnVisibility ? columns.filter((column) => isColumnVisible(columnVisibility, column.id)) : columns,
     [columns, columnVisibility]
   );
   const serverRowCount = dataSource.mode === "server" ? dataSource.rowCount : void 0;
-  const { rows, rowCount } = useMemo5(() => {
+  const { rows, rowCount } = useMemo6(() => {
     if (dataSource.mode === "client") return processClientData(dataSource.data, state);
     return { rows: dataSource.data, rowCount: serverRowCount ?? 0 };
   }, [dataSource.mode, dataSource.data, serverRowCount, state]);
-  const selectedRows = useMemo5(
+  const selectedRows = useMemo6(
     () => rows.filter((row) => selectedIds.has(getRowId(row))),
     [rows, selectedIds, getRowId]
   );
@@ -1858,8 +1937,8 @@ function DataGrid({
     }
     updateSelectedIds(next);
   }
-  const tanstackColumns = useMemo5(() => toTanstackColumns(visibleColumns), [visibleColumns]);
-  const columnById = useMemo5(() => {
+  const tanstackColumns = useMemo6(() => toTanstackColumns(visibleColumns), [visibleColumns]);
+  const columnById = useMemo6(() => {
     const map = /* @__PURE__ */ new Map();
     for (const column of visibleColumns) map.set(column.id, column);
     return map;
@@ -1884,7 +1963,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 = useMemo5(() => computeHeaderRuns(visibleColumns), [visibleColumns]);
+  const headerRuns = useMemo6(() => computeHeaderRuns(visibleColumns), [visibleColumns]);
   const hasHeaderGroups = visibleColumns.some((column) => column.headerGroup);
   function renderFilterWidget(column) {
     const value = filtersByColumn.get(column.id);
@@ -1894,22 +1973,34 @@ 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 = pinnedOffsets(visibleColumns, "left", columnSize, leadingStructuralWidth);
-  const rightPinnedOffsets = pinnedOffsets(visibleColumns, "right", columnSize, trailingStructuralWidth);
+  const leftPinnedOffsets = useMemo6(
+    () => pinnedOffsets(visibleColumns, "left", columnSize, leadingStructuralWidth),
+    [visibleColumns, columnSizing, leadingStructuralWidth]
+  );
+  const rightPinnedOffsets = useMemo6(
+    () => pinnedOffsets(visibleColumns, "right", columnSize, trailingStructuralWidth),
+    [visibleColumns, columnSizing, trailingStructuralWidth]
+  );
   function pinnedCellProps(column, area = "body") {
     const bg = area === "header" ? "bg-muted" : "bg-background";
     if (column.pinned === "left") {
-      return { className: cn("sticky z-10", bg), style: { left: leftPinnedOffsets.get(column.id), width: columnSize(column.id) } };
+      return { className: `sticky z-10 ${bg}`, style: { left: leftPinnedOffsets.get(column.id), width: columnSize(column.id) } };
     }
     if (column.pinned === "right") {
-      return { className: cn("sticky z-10", bg), style: { right: rightPinnedOffsets.get(column.id), width: columnSize(column.id) } };
+      return { className: `sticky z-10 ${bg}`, style: { right: rightPinnedOffsets.get(column.id), width: columnSize(column.id) } };
     }
     if (enableColumnResizing) return { style: { width: columnSize(column.id) } };
     return { style: column.width ? { width: column.width } : void 0 };
   }
   function structuralCellProps(side, offset, width, area = "body") {
+    const base = "border-b border-border p-1 sticky z-10";
     const bg = area === "header" ? "bg-muted" : "bg-background";
-    return { className: cn("sticky z-10", bg), style: { [side]: offset, width } };
+    const bgOdd = area === "header" ? "bg-muted" : STRUCTURAL_ZEBRA_BG_CLASS;
+    return {
+      className: `${base} ${bg}`,
+      classNameOdd: `${base} ${bgOdd}`,
+      style: { [side]: offset, width }
+    };
   }
   const detailCellProps = structuralCellProps("left", 0, DETAIL_COLUMN_WIDTH);
   const selectionCellProps = structuralCellProps(
@@ -1926,8 +2017,45 @@ function DataGrid({
     "header"
   );
   const rowActionsHeaderCellProps = structuralCellProps("right", 0, ROW_ACTIONS_COLUMN_WIDTH, "header");
+  const BODY_TD_BASE_CLASS = "border-b border-border p-2";
+  function bodyCellClassAndStyle(column) {
+    const pinnedProps = column.pinned || enableColumnResizing ? pinnedCellProps(column) : void 0;
+    return {
+      className: pinnedProps?.className ? `${BODY_TD_BASE_CLASS} ${pinnedProps.className}` : BODY_TD_BASE_CLASS,
+      style: pinnedProps?.style
+    };
+  }
+  const bodyCellPropsByColumn = useMemo6(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const column of visibleColumns) map.set(column.id, bodyCellClassAndStyle(column));
+    return map;
+  }, [visibleColumns, enableColumnResizing, leftPinnedOffsets, rightPinnedOffsets, columnSizing]);
+  function headerCellClassAndStyle(column, base) {
+    const pinnedProps = pinnedCellProps(column, "header");
+    const align = alignClassName(column);
+    const className = pinnedProps.className ? `${base} ${align} ${pinnedProps.className}` : `${base} ${align}`;
+    return { className, style: pinnedProps.style };
+  }
+  const leafHeaderCellPropsByColumn = useMemo6(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const column of visibleColumns) {
+      map.set(column.id, headerCellClassAndStyle(column, "relative border-b border-border p-2 font-medium"));
+    }
+    return map;
+  }, [visibleColumns, enableColumnResizing, leftPinnedOffsets, rightPinnedOffsets, columnSizing]);
+  const filterHeaderCellPropsByColumn = useMemo6(() => {
+    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"));
+    }
+    return map;
+  }, [visibleColumns, enableColumnResizing, leftPinnedOffsets, rightPinnedOffsets, columnSizing]);
   const tableRows = table.getRowModel().rows;
-  const shouldVirtualize = Boolean(virtualize) && tableRows.length > (virtualize?.threshold ?? 100);
+  const shouldVirtualize = Boolean(virtualize) && !groupBy && tableRows.length > (virtualize?.threshold ?? 100);
+  const groupedBuckets = useMemo6(
+    () => groupBy ? groupRows(tableRows, (row) => groupBy(row.original)) : void 0,
+    [tableRows, groupBy]
+  );
   const scrollRef = useRef5(null);
   const virtualizer = useVirtualizer({
     count: tableRows.length,
@@ -1959,45 +2087,97 @@ function DataGrid({
         {
           ...rowProps,
           "data-testid": rowTestId,
-          className: cn(rowProps?.className, row.index % 2 === 1 && "bg-foreground/5"),
+          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" : ""}`,
           children: [
-            showDetailColumn && /* @__PURE__ */ jsx19("td", { className: cn("border-b p-1", detailCellProps.className), style: detailCellProps.style, children: /* @__PURE__ */ jsx19(
-              Button,
+            showDetailColumn && /* @__PURE__ */ jsx19(
+              "td",
               {
-                type: "button",
-                variant: "ghost",
-                size: "icon",
-                "aria-label": `${isExpanded ? "Collapse" : "Expand"} row ${row.id}`,
-                "aria-expanded": isExpanded,
-                onClick: (event) => {
-                  stopRowClick(event);
-                  toggleRowExpanded(row.id);
-                },
-                children: /* @__PURE__ */ jsx19(ChevronRight, { className: cn("h-4 w-4 transition-transform", isExpanded && "rotate-90"), "aria-hidden": true })
+                className: row.index % 2 === 1 ? detailCellProps.classNameOdd : detailCellProps.className,
+                style: detailCellProps.style,
+                children: /* @__PURE__ */ jsx19(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "icon",
+                    "aria-label": `${isExpanded ? "Collapse" : "Expand"} row ${row.id}`,
+                    "aria-expanded": isExpanded,
+                    onClick: (event) => {
+                      stopRowClick(event);
+                      toggleRowExpanded(row.id);
+                    },
+                    children: /* @__PURE__ */ jsx19(
+                      ChevronRight,
+                      {
+                        className: `h-4 w-4 transition-transform${isExpanded ? " rotate-90" : ""}`,
+                        "aria-hidden": true
+                      }
+                    )
+                  }
+                )
               }
-            ) }),
-            showSelectionColumn && /* @__PURE__ */ jsx19("td", { className: cn("border-b p-1", selectionCellProps.className), style: selectionCellProps.style, children: /* @__PURE__ */ jsx19(
-              "input",
+            ),
+            showSelectionColumn && /* @__PURE__ */ jsx19(
+              "td",
               {
-                type: "checkbox",
-                "aria-label": `Select row ${row.id}`,
-                checked: selectedIds.has(row.id),
-                onClick: stopRowClick,
-                onChange: () => toggleRowSelected(row.id)
+                className: row.index % 2 === 1 ? selectionCellProps.classNameOdd : selectionCellProps.className,
+                style: selectionCellProps.style,
+                children: /* @__PURE__ */ jsx19(
+                  "input",
+                  {
+                    type: "checkbox",
+                    "aria-label": `Select row ${row.id}`,
+                    checked: selectedIds.has(row.id),
+                    onClick: stopRowClick,
+                    onChange: () => toggleRowSelected(row.id)
+                  }
+                )
               }
-            ) }),
+            ),
             row.getAllCells().map((cell) => {
-              const cellColumn = columnById.get(cell.column.id);
-              const pinnedProps = cellColumn && (cellColumn.pinned || enableColumnResizing) ? pinnedCellProps(cellColumn) : void 0;
-              return /* @__PURE__ */ jsx19("td", { style: pinnedProps?.style, className: cn("border-b p-2", pinnedProps?.className), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id);
+              const cellProps = bodyCellPropsByColumn.get(cell.column.id);
+              return /* @__PURE__ */ jsx19("td", { style: cellProps?.style, className: cellProps?.className ?? BODY_TD_BASE_CLASS, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id);
             }),
-            showRowActionsColumn && rowActions && /* @__PURE__ */ jsx19("td", { className: cn("border-b p-1", rowActionsCellProps.className), style: rowActionsCellProps.style, children: /* @__PURE__ */ jsx19(ActionsMenu, { items: rowActions, ctx: { row: row.original }, triggerLabel: `Row actions for ${row.id}` }) })
+            showRowActionsColumn && rowActions && /* @__PURE__ */ jsx19(
+              "td",
+              {
+                className: row.index % 2 === 1 ? rowActionsCellProps.classNameOdd : rowActionsCellProps.className,
+                style: rowActionsCellProps.style,
+                children: /* @__PURE__ */ jsx19(ActionsMenu, { items: rowActions, ctx: { row: row.original }, triggerLabel: `Row actions for ${row.id}` })
+              }
+            )
           ]
         }
       ),
-      showDetailColumn && isExpanded && renderDetail && /* @__PURE__ */ jsx19("tr", { "data-testid": `${rowTestId}-detail`, children: /* @__PURE__ */ jsx19("td", { colSpan: totalColumnCount, className: "border-b p-2", children: renderDetail(row.original) }) })
+      showDetailColumn && isExpanded && renderDetail && /* @__PURE__ */ jsx19("tr", { "data-testid": `${rowTestId}-detail`, children: /* @__PURE__ */ jsx19("td", { colSpan: totalColumnCount, className: "border-b border-border p-2", children: renderDetail(row.original) }) })
     ] }, row.id);
   }
+  function renderGroupedBucket(bucket) {
+    const expanded = isGroupExpanded(bucket.key);
+    const originalRows = bucket.items.map((row) => row.original);
+    return /* @__PURE__ */ jsxs12(Fragment2, { children: [
+      /* @__PURE__ */ jsx19("tbody", { children: /* @__PURE__ */ jsx19("tr", { "data-testid": `group-header-${bucket.key}`, children: /* @__PURE__ */ jsx19("td", { colSpan: totalColumnCount, className: "border-b bg-muted/50 p-2 font-medium", children: /* @__PURE__ */ jsxs12(
+        "button",
+        {
+          type: "button",
+          className: "flex w-full items-center gap-1 text-left",
+          onClick: () => toggleGroupExpanded(bucket.key),
+          "aria-expanded": expanded,
+          children: [
+            /* @__PURE__ */ jsx19(
+              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})`
+          ]
+        }
+      ) }) }) }),
+      expanded && bucket.items.map((row) => renderRow(row))
+    ] }, `group-${bucket.key}`);
+  }
   return /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-2", "data-testid": "datagrid", children: [
     showSelectionColumn && headerActions && /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between text-sm", children: [
       /* @__PURE__ */ jsxs12("span", { children: [
@@ -2032,58 +2212,58 @@ function DataGrid({
                   const sortEntry = state.sort.find((s) => s.field === column.id);
                   const sortable = isSortable(column);
                   const filterable = isFilterable(column) && column.filterDisplay !== "row";
-                  const pinnedProps = pinnedCellProps(column, "header");
-                  return /* @__PURE__ */ jsxs12(
-                    "th",
-                    {
-                      rowSpan,
-                      style: pinnedProps.style,
-                      className: cn("relative border-b p-2 font-medium", alignClassName(column), pinnedProps.className),
-                      children: [
-                        /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1", children: [
-                          /* @__PURE__ */ jsxs12(
-                            "button",
-                            {
-                              type: "button",
-                              className: cn(
-                                "flex items-center gap-1 rounded-sm px-1",
-                                sortable && "hover:bg-accent hover:text-accent-foreground"
-                              ),
-                              disabled: !sortable,
-                              onClick: (event) => sortable && toggleSort(column.id, enableMultiSort && event.shiftKey, column.sortDescFirst === true),
-                              children: [
-                                column.renderHeader ? column.renderHeader(column) : column.header,
-                                sortable && sortEntry?.dir === "asc" && /* @__PURE__ */ jsx19(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
-                                sortable && sortEntry?.dir === "desc" && /* @__PURE__ */ jsx19(BarsArrowDownIcon, { className: "h-3 w-3", "aria-hidden": true })
-                              ]
-                            }
+                  const cellProps = leafHeaderCellPropsByColumn.get(column.id);
+                  return /* @__PURE__ */ jsxs12("th", { rowSpan, style: cellProps?.style, className: cellProps?.className, children: [
+                    /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsxs12(
+                        "button",
+                        {
+                          type: "button",
+                          className: cn(
+                            "flex items-center gap-1 rounded-sm px-1",
+                            sortable && "hover:bg-accent hover:text-accent-foreground"
                           ),
-                          filterable && /* @__PURE__ */ jsxs12(Popover, { children: [
-                            /* @__PURE__ */ jsx19(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx19(Button, { variant: "ghost", size: "icon", "aria-label": `Filter ${column.header}`, children: /* @__PURE__ */ jsx19(FunnelIcon7, { className: "h-3 w-3", "aria-hidden": true }) }) }),
-                            /* @__PURE__ */ jsx19(PopoverContent, { children: renderFilterWidget(column) })
-                          ] })
-                        ] }),
-                        enableColumnResizing && /* @__PURE__ */ jsx19(
-                          "div",
+                          disabled: !sortable,
+                          onClick: (event) => sortable && toggleSort(column.id, enableMultiSort && event.shiftKey, column.sortDescFirst === true),
+                          children: [
+                            column.renderHeader ? column.renderHeader(column) : column.header,
+                            sortable && sortEntry?.dir === "asc" && /* @__PURE__ */ jsx19(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
+                            sortable && sortEntry?.dir === "desc" && /* @__PURE__ */ jsx19(BarsArrowDownIcon, { className: "h-3 w-3", "aria-hidden": true })
+                          ]
+                        }
+                      ),
+                      filterable && /* @__PURE__ */ jsxs12(Popover, { children: [
+                        /* @__PURE__ */ jsx19(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx19(Button, { variant: "ghost", size: "icon", "aria-label": `Filter ${column.header}`, children: /* @__PURE__ */ jsx19(
+                          FunnelIcon7,
                           {
-                            "data-testid": `resize-handle-${column.id}`,
-                            onMouseDown: header.getResizeHandler(),
-                            onTouchStart: header.getResizeHandler(),
-                            className: "absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none hover:bg-accent"
+                            className: cn(
+                              "h-3 w-3",
+                              filtersByColumn.get(column.id) !== void 0 ? "opacity-100 text-primary" : "opacity-40"
+                            ),
+                            "aria-hidden": true
                           }
-                        )
-                      ]
-                    },
-                    header.id
-                  );
+                        ) }) }),
+                        /* @__PURE__ */ jsx19(PopoverContent, { children: renderFilterWidget(column) })
+                      ] })
+                    ] }),
+                    enableColumnResizing && /* @__PURE__ */ jsx19(
+                      "div",
+                      {
+                        "data-testid": `resize-handle-${column.id}`,
+                        onMouseDown: header.getResizeHandler(),
+                        onTouchStart: header.getResizeHandler(),
+                        className: "absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none hover:bg-accent"
+                      }
+                    )
+                  ] }, header.id);
                 }
                 return /* @__PURE__ */ jsxs12(Fragment2, { children: [
-                  hasHeaderGroups && /* @__PURE__ */ jsxs12("tr", { "data-testid": "header-group-row", children: [
+                  hasHeaderGroups && /* @__PURE__ */ jsxs12("tr", { "data-testid": "header-group-row", className: "divide-x divide-border", children: [
                     showDetailColumn && /* @__PURE__ */ jsx19(
                       "th",
                       {
                         rowSpan: 2,
-                        className: cn("border-b p-1", detailHeaderCellProps.className),
+                        className: detailHeaderCellProps.className,
                         style: detailHeaderCellProps.style,
                         "aria-hidden": true
                       }
@@ -2092,7 +2272,7 @@ function DataGrid({
                       "th",
                       {
                         rowSpan: 2,
-                        className: cn("border-b p-1", selectionHeaderCellProps.className),
+                        className: selectionHeaderCellProps.className,
                         style: selectionHeaderCellProps.style,
                         children: /* @__PURE__ */ jsx19(
                           "input",
@@ -2110,7 +2290,7 @@ function DataGrid({
                         "th",
                         {
                           colSpan: run.columns.length,
-                          className: "border-b p-2 text-center font-medium",
+                          className: "border-b border-border p-2 text-center font-medium",
                           children: run.label
                         },
                         `group-${run.label}-${run.columns[0].id}`
@@ -2120,17 +2300,17 @@ function DataGrid({
                       "th",
                       {
                         rowSpan: 2,
-                        className: cn("border-b p-1", rowActionsHeaderCellProps.className),
+                        className: rowActionsHeaderCellProps.className,
                         style: rowActionsHeaderCellProps.style,
                         "aria-label": "Row actions"
                       }
                     )
                   ] }, `${headerGroup.id}-groups`),
-                  /* @__PURE__ */ jsxs12("tr", { children: [
+                  /* @__PURE__ */ jsxs12("tr", { className: "divide-x divide-border", children: [
                     !hasHeaderGroups && showDetailColumn && /* @__PURE__ */ jsx19(
                       "th",
                       {
-                        className: cn("border-b p-1", detailHeaderCellProps.className),
+                        className: detailHeaderCellProps.className,
                         style: detailHeaderCellProps.style,
                         "aria-hidden": true
                       }
@@ -2138,7 +2318,7 @@ function DataGrid({
                     !hasHeaderGroups && showSelectionColumn && /* @__PURE__ */ jsx19(
                       "th",
                       {
-                        className: cn("border-b p-1", selectionHeaderCellProps.className),
+                        className: selectionHeaderCellProps.className,
                         style: selectionHeaderCellProps.style,
                         children: /* @__PURE__ */ jsx19(
                           "input",
@@ -2159,7 +2339,7 @@ function DataGrid({
                     !hasHeaderGroups && showRowActionsColumn && /* @__PURE__ */ jsx19(
                       "th",
                       {
-                        className: cn("border-b p-1", rowActionsHeaderCellProps.className),
+                        className: rowActionsHeaderCellProps.className,
                         style: rowActionsHeaderCellProps.style,
                         "aria-label": "Row actions"
                       }
@@ -2167,31 +2347,23 @@ function DataGrid({
                   ] }, headerGroup.id)
                 ] }, headerGroup.id);
               }),
-              hasFilterRow && /* @__PURE__ */ jsxs12("tr", { "data-testid": "filter-row", children: [
-                showDetailColumn && /* @__PURE__ */ jsx19("th", { className: cn("border-b p-1", detailHeaderCellProps.className), style: detailHeaderCellProps.style }),
+              hasFilterRow && /* @__PURE__ */ jsxs12("tr", { "data-testid": "filter-row", className: "divide-x divide-border", children: [
+                showDetailColumn && /* @__PURE__ */ jsx19("th", { className: detailHeaderCellProps.className, style: detailHeaderCellProps.style }),
                 showSelectionColumn && /* @__PURE__ */ jsx19(
                   "th",
                   {
-                    className: cn("border-b p-1", selectionHeaderCellProps.className),
+                    className: selectionHeaderCellProps.className,
                     style: selectionHeaderCellProps.style
                   }
                 ),
                 visibleColumns.map((column) => {
-                  const pinnedProps = pinnedCellProps(column, "header");
-                  return /* @__PURE__ */ jsx19(
-                    "th",
-                    {
-                      style: pinnedProps.style,
-                      className: cn("border-b p-2 align-top font-normal", alignClassName(column), pinnedProps.className),
-                      children: isFilterable(column) && column.filterDisplay === "row" ? renderFilterWidget(column) : null
-                    },
-                    column.id
-                  );
+                  const cellProps = filterHeaderCellPropsByColumn.get(column.id);
+                  return /* @__PURE__ */ jsx19("th", { style: cellProps?.style, className: cellProps?.className, children: isFilterable(column) && column.filterDisplay === "row" ? renderFilterWidget(column) : null }, column.id);
                 }),
                 showRowActionsColumn && /* @__PURE__ */ jsx19(
                   "th",
                   {
-                    className: cn("border-b p-1", rowActionsHeaderCellProps.className),
+                    className: rowActionsHeaderCellProps.className,
                     style: rowActionsHeaderCellProps.style
                   }
                 )
@@ -2203,7 +2375,7 @@ function DataGrid({
                 (virtualItem) => renderRow(tableRows[virtualItem.index], (el) => virtualizer.measureElement(el))
               ),
               paddingBottom > 0 && /* @__PURE__ */ jsx19("tbody", { children: /* @__PURE__ */ jsx19("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx19("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingBottom } }) }) })
-            ] }) : tableRows.map((row) => renderRow(row))
+            ] }) : groupedBuckets ? groupedBuckets.map((bucket) => renderGroupedBucket(bucket)) : tableRows.map((row) => renderRow(row))
           ] })
         }
       )
@@ -2249,7 +2421,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 useEffect8, useMemo as useMemo7, useRef as useRef6 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo8, useRef as useRef6 } from "react";
 
 // src/tree/flattenTree.ts
 function flattenTree(roots, accessors, expanded, childrenOverride) {
@@ -2268,8 +2440,33 @@ function flattenTree(roots, accessors, expanded, childrenOverride) {
   return out;
 }
 
+// src/tree/selectionState.ts
+function computeSelectionStates(roots, accessors, childrenOverride, selectedIds) {
+  const { getRowId, getChildren } = accessors;
+  const out = /* @__PURE__ */ new Map();
+  function visit(row) {
+    const id = getRowId(row);
+    if (selectedIds.has(id)) {
+      const state2 = { checked: true, indeterminate: false };
+      out.set(id, state2);
+      return state2;
+    }
+    const children = childrenOverride.get(id) ?? getChildren(row) ?? [];
+    let anySelectedOrIndeterminate = false;
+    for (const child of children) {
+      const childState = visit(child);
+      if (childState.checked || childState.indeterminate) anySelectedOrIndeterminate = true;
+    }
+    const state = { checked: false, indeterminate: anySelectedOrIndeterminate };
+    out.set(id, state);
+    return state;
+  }
+  for (const root of roots) visit(root);
+  return out;
+}
+
 // src/tree/useTreeState.ts
-import { useCallback as useCallback3, useMemo as useMemo6, useState as useState7 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo7, useState as useState7 } from "react";
 function useTreeState({
   data,
   getRowId,
@@ -2294,7 +2491,7 @@ function useTreeState({
   const [childrenMap, setChildrenMap] = useState7(/* @__PURE__ */ new Map());
   const [loadingIds, setLoadingIds] = useState7(/* @__PURE__ */ new Set());
   const [errorIds, setErrorIds] = useState7(/* @__PURE__ */ new Map());
-  const resolveHasChildren = useMemo6(
+  const resolveHasChildren = useMemo7(
     () => hasChildren ?? ((row) => (getChildren(row)?.length ?? 0) > 0),
     [hasChildren, getChildren]
   );
@@ -2374,6 +2571,8 @@ function useTreeState({
 
 // src/tree/TreeDataGrid.tsx
 import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+var EMPTY_SELECTED_IDS = /* @__PURE__ */ new Set();
+var UNCHECKED_STATE = { checked: false, indeterminate: false };
 function renderCell(column, row) {
   const value = getColumnValue(column, row);
   return column.cell ? column.cell(value, row) : defaultFormat(column, value);
@@ -2428,9 +2627,13 @@ function TreeDataGrid({
   rowActions,
   virtualizeThreshold = 100,
   estimatedRowHeight = 40,
-  maxBodyHeight = 480
+  maxBodyHeight = 480,
+  selectedIds: controlledSelectedIds,
+  onSelectedIdsChange,
+  getRowSelectionState,
+  isRowSelectionDisabled
 }) {
-  const accessors = useMemo7(
+  const accessors = useMemo8(
     () => ({ getRowId, getChildren, hasChildren }),
     [getRowId, getChildren, hasChildren]
   );
@@ -2449,13 +2652,49 @@ function TreeDataGrid({
     didAutoExpand.current = true;
     if (initialExpandedLevel > 0) void expandToLevel(initialExpandedLevel);
   }, []);
-  const flatRows = useMemo7(
+  const flatRows = useMemo8(
     () => flattenTree(data, accessors, expanded, childrenMap),
     [data, accessors, expanded, childrenMap]
   );
   const treeColId = treeColumnId ?? columns[0]?.id;
   const showRowActionsColumn = Boolean(rowActions?.length);
-  const totalColumnCount = columns.length + (showRowActionsColumn ? 1 : 0);
+  const showSelectionColumn = controlledSelectedIds !== void 0;
+  const totalColumnCount = columns.length + (showRowActionsColumn ? 1 : 0) + (showSelectionColumn ? 1 : 0);
+  const selectionStates = useMemo8(
+    () => showSelectionColumn ? computeSelectionStates(data, accessors, childrenMap, controlledSelectedIds ?? EMPTY_SELECTED_IDS) : void 0,
+    [showSelectionColumn, data, accessors, childrenMap, controlledSelectedIds]
+  );
+  function resolveSelectionState(row, id) {
+    const override = getRowSelectionState?.(row);
+    if (override) return { checked: override.checked, indeterminate: override.indeterminate ?? false };
+    return selectionStates?.get(id) ?? UNCHECKED_STATE;
+  }
+  function toggleRowSelected(id) {
+    if (!controlledSelectedIds) return;
+    const next = new Set(controlledSelectedIds);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    onSelectedIdsChange?.(next);
+  }
+  const selectableFlatRows = useMemo8(
+    () => flatRows.filter((flatRow) => !(isRowSelectionDisabled?.(flatRow.row) ?? false)),
+    [flatRows, isRowSelectionDisabled]
+  );
+  const allVisibleSelected = showSelectionColumn && selectableFlatRows.length > 0 && selectableFlatRows.every((flatRow) => controlledSelectedIds.has(flatRow.id));
+  function toggleAllVisibleSelected() {
+    if (!controlledSelectedIds) return;
+    const next = new Set(controlledSelectedIds);
+    for (const flatRow of selectableFlatRows) {
+      if (allVisibleSelected) next.delete(flatRow.id);
+      else next.add(flatRow.id);
+    }
+    onSelectedIdsChange?.(next);
+  }
+  const bodyTdClassByColumn = useMemo8(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const column of columns) map.set(column.id, `p-2 ${alignClassName(column)}`);
+    return map;
+  }, [columns]);
   const scrollRef = useRef6(null);
   const shouldVirtualize = flatRows.length > virtualizeThreshold;
   const virtualizer = useVirtualizer2({
@@ -2474,9 +2713,26 @@ function TreeDataGrid({
         ref: measureRef,
         ...rowProps,
         "data-testid": rowTestId,
-        className: cn("border-b", rowProps?.className, index % 2 === 1 && "bg-foreground/5"),
+        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" : ""}`,
         children: [
-          columns.map((column) => /* @__PURE__ */ jsx20("td", { className: cn("p-2", alignClassName(column)), children: column.id === treeColId ? /* @__PURE__ */ jsx20(
+          showSelectionColumn && /* @__PURE__ */ jsx20("td", { className: "p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: (() => {
+            const state = resolveSelectionState(flatRow.row, flatRow.id);
+            return /* @__PURE__ */ jsx20(
+              Checkbox,
+              {
+                "aria-label": `Select row ${flatRow.id}`,
+                checked: state.indeterminate ? "indeterminate" : state.checked,
+                disabled: isRowSelectionDisabled?.(flatRow.row) ?? false,
+                onCheckedChange: () => toggleRowSelected(flatRow.id),
+                onClick: stopRowClick
+              }
+            );
+          })() }),
+          columns.map((column) => /* @__PURE__ */ jsx20("td", { className: bodyTdClassByColumn.get(column.id), children: column.id === treeColId ? /* @__PURE__ */ jsx20(
             TreeCell,
             {
               flatRow,
@@ -2511,17 +2767,25 @@ function TreeDataGrid({
       className: shouldVirtualize ? "overflow-y-auto" : void 0,
       style: shouldVirtualize ? { maxHeight: maxBodyHeight } : void 0,
       children: /* @__PURE__ */ jsxs13("table", { className: "w-full border-collapse text-sm", children: [
-        /* @__PURE__ */ jsx20("thead", { children: /* @__PURE__ */ jsxs13("tr", { children: [
+        /* @__PURE__ */ jsx20("thead", { children: /* @__PURE__ */ jsxs13("tr", { className: "divide-x divide-border", children: [
+          showSelectionColumn && /* @__PURE__ */ jsx20("th", { className: "border-b border-border p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: /* @__PURE__ */ jsx20(
+            Checkbox,
+            {
+              "aria-label": "Select all visible rows",
+              checked: allVisibleSelected,
+              onCheckedChange: toggleAllVisibleSelected
+            }
+          ) }),
           columns.map((column) => /* @__PURE__ */ jsx20(
             "th",
             {
               style: column.width ? { width: column.width } : void 0,
-              className: cn("border-b p-2 font-medium", alignClassName(column)),
+              className: `border-b border-border p-2 font-medium ${alignClassName(column)}`,
               children: column.header
             },
             column.id
           )),
-          showRowActionsColumn && /* @__PURE__ */ jsx20("th", { className: "border-b p-2", "aria-label": "Row actions" })
+          showRowActionsColumn && /* @__PURE__ */ jsx20("th", { className: "border-b border-border p-2", "aria-label": "Row actions" })
         ] }) }),
         /* @__PURE__ */ jsx20("tbody", { children: flatRows.length === 0 ? /* @__PURE__ */ jsx20("tr", { children: /* @__PURE__ */ jsx20("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: "No results." }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs13(Fragment4, { children: [
           paddingTop > 0 && /* @__PURE__ */ jsx20("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx20("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }),