@bmsuisse/datagrid 0.23.4 → 0.24.0

package/dist/index.d.ts

@@ -762,6 +762,37 @@ interface DataGridProps<TRow> {
      * a page with more than one.
      */
     testId?: string;
+    /**
+     * Buckets the grid's already-filtered/sorted/paginated `rows` into groups,
+     * rendering one full-width `colSpan`'d group-header row before each
+     * bucket's own rows, in first-seen bucket order (rows are never re-sorted
+     * to cluster a group together — the caller's own sort already determines
+     * which key appears first). Single level only — no nested grouping, no
+     * aggregate/summary calculation; a caller wanting a subtotal computes it
+     * themselves in `renderGroupHeader` off that bucket's own row array.
+     * Operates on whatever `rows` already resolved to — i.e. the current page,
+     * if paginated — with no special-casing; pair with a large `pageSize`/
+     * `showPagination: false` if a group's full membership should never be
+     * split across pages. Omit entirely to disable — no grouping, no header
+     * rows, unchanged default rendering.
+     *
+     * Not supported together with `virtualize` yet — when both are set,
+     * virtualization is silently disabled and the grid renders as a plain,
+     * fully-rendered (but still grouped) `<table>` instead. See AGENTS.md's
+     * "Known limitations."
+     */
+    groupBy?: (row: TRow) => string;
+    /** Customizes a group-header row's content. Defaults to `` `${key} (${rows.length})` ``. */
+    renderGroupHeader?: (key: string, rows: TRow[], expanded: boolean) => ReactNode;
+    /** Whether a newly-seen group starts expanded. Defaults to true. */
+    defaultGroupsExpanded?: boolean;
+    /**
+     * Controlled per-group expand/collapse state, keyed by the `groupBy` key.
+     * Both must be supplied together to control it — omit both for
+     * `<DataGrid>` to own this state internally.
+     */
+    expandedGroups?: Record<string, boolean>;
+    onExpandedGroupsChange?: (expanded: Record<string, boolean>) => void;
 }
 
 /**
@@ -772,7 +803,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, }: 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, }: DataGridProps<TRow>): ReactElement;
 
 interface GridStateController {
     state: GridState;
@@ -954,6 +985,48 @@ interface TreeDataGridProps<TRow> extends TreeAccessors<TRow> {
     estimatedRowHeight?: number;
     /** Max height of the scrollable table body in pixels. Required for virtualization to have a viewport to scroll within. Defaults to 480. */
     maxBodyHeight?: number;
+    /**
+     * Controlled row selection — same convention as `<DataGrid>`'s own
+     * `selectedIds`/`onSelectedIdsChange`. Both must be supplied together to
+     * render a checkbox column at all; there is no internal/uncontrolled
+     * fallback here, unlike `<DataGrid>` — `<TreeDataGrid>` has no
+     * `headerActions` bulk-toolbar concept that would need selection state
+     * even without external control, so there's nothing for an uncontrolled
+     * default to serve.
+     *
+     * Clicking a row's checkbox always toggles exactly that row's own id in
+     * this set — never its children or parent. Any cascade ("select whole
+     * group" / "select all descendants") is the caller's job, done by
+     * recomputing the desired final set inside `onSelectedIdsChange` before
+     * committing it to their own state.
+     */
+    selectedIds?: ReadonlySet<string>;
+    onSelectedIdsChange?: (ids: ReadonlySet<string>) => void;
+    /**
+     * Fully overrides a row's checked/indeterminate display, replacing the
+     * default derivation below. Needed for selection semantics this component
+     * won't build in — e.g. a "select whole group vs. split into individual
+     * children once loaded" cascade, where a parent should read as checked
+     * even though not every descendant id is literally in `selectedIds`.
+     * Return `undefined` for a given row to fall back to the default
+     * derivation for just that row.
+     *
+     * Omitted (the default): `checked` is exactly `selectedIds.has(getRowId(row))`
+     * — `selectedIds` always stays the single source of truth for "is this id
+     * selected." `indeterminate` is true only when the row itself isn't
+     * checked but at least one *currently loaded* descendant (recursively, via
+     * the same `getChildren`/`onLoadChildren` cache this component already
+     * maintains) is checked or itself indeterminate. A selected descendant
+     * hidden behind a node that's never been expanded (so its children were
+     * never fetched) can't be inspected — that ancestor reads as unchecked,
+     * not indeterminate, until the fetch happens.
+     */
+    getRowSelectionState?: (row: TRow) => {
+        checked: boolean;
+        indeterminate?: boolean;
+    } | undefined;
+    /** Disables just the checkbox for a specific row. Defaults to `() => false`. */
+    isRowSelectionDisabled?: (row: TRow) => boolean;
 }
 
 /**
@@ -970,7 +1043,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, }: TreeDataGridProps<TRow>): ReactElement;
+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;
 
 interface FlatTreeRow<TRow> {
     row: TRow;

package/dist/index.js

@@ -338,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 })
         ]
       }
@@ -592,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 })
         ]
       }
@@ -877,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 })
         ]
       }
@@ -971,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 })
         ]
       }
@@ -1184,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 })
         ]
       }
@@ -1300,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 })
         ]
       }
@@ -1598,6 +1634,21 @@ import { useVirtualizer } from "@tanstack/react-virtual";
 import { ChevronRight, Loader2 } from "lucide-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) {
   return (a, b) => {
@@ -1755,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;
@@ -1813,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,
@@ -1841,6 +1897,18 @@ function DataGrid({
       return next;
     });
   }
+  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]
@@ -1925,8 +1993,14 @@ function DataGrid({
     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: `border-b p-1 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(
@@ -1943,7 +2017,7 @@ function DataGrid({
     "header"
   );
   const rowActionsHeaderCellProps = structuralCellProps("right", 0, ROW_ACTIONS_COLUMN_WIDTH, "header");
-  const BODY_TD_BASE_CLASS = "border-b p-2";
+  const BODY_TD_BASE_CLASS = "border-b border-border p-2";
   function bodyCellClassAndStyle(column) {
     const pinnedProps = column.pinned || enableColumnResizing ? pinnedCellProps(column) : void 0;
     return {
@@ -1965,19 +2039,23 @@ function DataGrid({
   const leafHeaderCellPropsByColumn = useMemo6(() => {
     const map = /* @__PURE__ */ new Map();
     for (const column of visibleColumns) {
-      map.set(column.id, headerCellClassAndStyle(column, "relative border-b p-2 font-medium"));
+      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 p-2 align-top font-normal"));
+      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,
@@ -2009,50 +2087,97 @@ function DataGrid({
         {
           ...rowProps,
           "data-testid": rowTestId,
-          className: rowProps?.className ? cn(rowProps.className, row.index % 2 === 1 && "bg-foreground/5") : row.index % 2 === 1 ? "bg-foreground/5" : void 0,
+          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: 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);
-                },
+                className: row.index % 2 === 1 ? detailCellProps.classNameOdd : detailCellProps.className,
+                style: detailCellProps.style,
                 children: /* @__PURE__ */ jsx19(
-                  ChevronRight,
+                  Button,
                   {
-                    className: `h-4 w-4 transition-transform${isExpanded ? " rotate-90" : ""}`,
-                    "aria-hidden": true
+                    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: 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 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: 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: [
@@ -2108,7 +2233,16 @@ function DataGrid({
                         }
                       ),
                       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(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx19(Button, { variant: "ghost", size: "icon", "aria-label": `Filter ${column.header}`, children: /* @__PURE__ */ jsx19(
+                          FunnelIcon7,
+                          {
+                            className: cn(
+                              "h-3 w-3",
+                              filtersByColumn.get(column.id) !== void 0 ? "opacity-100 text-primary" : "opacity-40"
+                            ),
+                            "aria-hidden": true
+                          }
+                        ) }) }),
                         /* @__PURE__ */ jsx19(PopoverContent, { children: renderFilterWidget(column) })
                       ] })
                     ] }),
@@ -2124,7 +2258,7 @@ function DataGrid({
                   ] }, 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",
                       {
@@ -2156,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}`
@@ -2172,7 +2306,7 @@ function DataGrid({
                       }
                     )
                   ] }, `${headerGroup.id}-groups`),
-                  /* @__PURE__ */ jsxs12("tr", { children: [
+                  /* @__PURE__ */ jsxs12("tr", { className: "divide-x divide-border", children: [
                     !hasHeaderGroups && showDetailColumn && /* @__PURE__ */ jsx19(
                       "th",
                       {
@@ -2213,7 +2347,7 @@ function DataGrid({
                   ] }, headerGroup.id)
                 ] }, headerGroup.id);
               }),
-              hasFilterRow && /* @__PURE__ */ jsxs12("tr", { "data-testid": "filter-row", children: [
+              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",
@@ -2241,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))
           ] })
         }
       )
@@ -2306,6 +2440,31 @@ 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 useMemo7, useState as useState7 } from "react";
 function useTreeState({
@@ -2412,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);
@@ -2466,7 +2627,11 @@ function TreeDataGrid({
   rowActions,
   virtualizeThreshold = 100,
   estimatedRowHeight = 40,
-  maxBodyHeight = 480
+  maxBodyHeight = 480,
+  selectedIds: controlledSelectedIds,
+  onSelectedIdsChange,
+  getRowSelectionState,
+  isRowSelectionDisabled
 }) {
   const accessors = useMemo8(
     () => ({ getRowId, getChildren, hasChildren }),
@@ -2493,7 +2658,38 @@ function TreeDataGrid({
   );
   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)}`);
@@ -2517,8 +2713,25 @@ function TreeDataGrid({
         ref: measureRef,
         ...rowProps,
         "data-testid": rowTestId,
-        className: rowProps?.className ? cn("border-b", rowProps.className, index % 2 === 1 && "bg-foreground/5") : `border-b${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: [
+          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,
             {
@@ -2554,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: `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 } }) }),