@bmsuisse/datagrid 0.32.0 → 0.32.2

package/dist/index.d.ts

@@ -1744,6 +1744,17 @@ interface TreeDataGridProps<TRow> extends TreeAccessors<TRow> {
     columns: ColumnDef<TRow>[];
     /** Root-level rows. */
     data: TRow[];
+    /**
+     * Whether the root `data` set is still being fetched. Purely cosmetic —
+     * unlike `<DataGrid>`'s `loading` (a full-overlay spinner over the whole
+     * body), `<TreeDataGrid>` has no existing rows to obscure while `data` is
+     * empty, so this only swaps the empty-state row from "No results." to a
+     * spinner + "Loading..." for as long as `data.length === 0`. Once real
+     * rows arrive, this stops mattering — a background refetch never re-shows
+     * the empty state, so there's nothing for a full overlay to add here.
+     * Defaults to `false`.
+     */
+    loading?: boolean;
     /**
      * The column whose cell gets the depth indentation + expand/collapse
      * chevron prepended. Defaults to the first column in `columns`.
@@ -1848,6 +1859,16 @@ 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;
+    /**
+     * `data-testid` for the tree's own scrollable container — the element
+     * `maxBodyHeight` actually applies to once virtualized. Omit for no
+     * attribute at all. Useful for an e2e test that needs to scroll this
+     * specific tree or assert on its scroll position; the outer
+     * `data-testid="tree-datagrid"` wrapper isn't it, and isn't unique per
+     * tree on a page with more than one — same convention as `<DataGrid>`'s
+     * own `testId`.
+     */
+    testId?: string;
     /**
      * Controlled row selection — same convention as `<DataGrid>`'s own
      * `selectedIds`/`onSelectedIdsChange`. Both must be supplied together to
@@ -1949,7 +1970,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, columnVisibility, getRowId, getChildren, hasChildren, onLoadChildren, initialExpandedLevel, expanded: controlledExpanded, onExpandedChange, childrenMap: controlledChildrenMap, onChildrenMapChange, indentSize, getRowProps, getRowTestId, rowActions, virtualizeThreshold, estimatedRowHeight, maxBodyHeight, selectedIds: controlledSelectedIds, onSelectedIdsChange, getRowSelectionState, isRowSelectionDisabled, groupBy, renderGroupHeader, defaultGroupsExpanded, expandedGroups: controlledExpandedGroups, onExpandedGroupsChange, zebra, editing, }: TreeDataGridProps<TRow>): ReactElement;
+declare function TreeDataGrid<TRow>({ columns, data, loading, treeColumnId, columnVisibility, getRowId, getChildren, hasChildren, onLoadChildren, initialExpandedLevel, expanded: controlledExpanded, onExpandedChange, childrenMap: controlledChildrenMap, onChildrenMapChange, indentSize, getRowProps, getRowTestId, rowActions, virtualizeThreshold, estimatedRowHeight, maxBodyHeight, testId, selectedIds: controlledSelectedIds, onSelectedIdsChange, getRowSelectionState, isRowSelectionDisabled, groupBy, renderGroupHeader, defaultGroupsExpanded, expandedGroups: controlledExpandedGroups, onExpandedGroupsChange, zebra, editing, }: TreeDataGridProps<TRow>): ReactElement;
 
 interface FlatTreeRow<TRow> {
     row: TRow;

package/dist/index.js

@@ -4397,6 +4397,7 @@ function TreeCell({
 function TreeDataGrid({
   columns,
   data,
+  loading = false,
   treeColumnId,
   columnVisibility,
   getRowId,
@@ -4415,6 +4416,7 @@ function TreeDataGrid({
   virtualizeThreshold = 100,
   estimatedRowHeight = 40,
   maxBodyHeight = 480,
+  testId,
   selectedIds: controlledSelectedIds,
   onSelectedIdsChange,
   getRowSelectionState,
@@ -4603,30 +4605,44 @@ function TreeDataGrid({
       "div",
       {
         ref: scrollRef,
+        "data-testid": testId,
         className: shouldVirtualize ? "overflow-y-auto" : void 0,
         style: shouldVirtualize ? { maxHeight: maxBodyHeight } : void 0,
         children: /* @__PURE__ */ jsxs21("table", { className: "w-full border-collapse text-sm", children: [
           /* @__PURE__ */ jsx34("thead", { ref: theadRef, children: /* @__PURE__ */ jsxs21("tr", { className: "divide-x divide-border", children: [
-            showSelectionColumn && /* @__PURE__ */ jsx34("th", { className: "border-b border-border p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: /* @__PURE__ */ jsx34(
-              Checkbox,
+            showSelectionColumn && /* @__PURE__ */ jsx34(
+              "th",
               {
-                "aria-label": "Select all visible rows",
-                checked: allVisibleSelected,
-                onCheckedChange: toggleAllVisibleSelected
+                className: "sticky top-0 z-20 border-b border-border bg-muted p-1",
+                style: { width: SELECTION_COLUMN_WIDTH },
+                children: /* @__PURE__ */ jsx34(
+                  Checkbox,
+                  {
+                    "aria-label": "Select all visible rows",
+                    checked: allVisibleSelected,
+                    onCheckedChange: toggleAllVisibleSelected
+                  }
+                )
               }
-            ) }),
+            ),
             visibleColumns.map((column) => /* @__PURE__ */ jsx34(
               "th",
               {
                 style: column.width ? { width: column.width } : void 0,
-                className: `border-b border-border p-2 font-medium ${alignClassName(column)}`,
+                className: cn(
+                  "sticky top-0 z-20 border-b border-border bg-muted p-2 font-medium",
+                  alignClassName(column)
+                ),
                 children: column.header
               },
               column.id
             )),
-            showRowActionsColumn && /* @__PURE__ */ jsx34("th", { className: "border-b border-border p-2", "aria-label": "Row actions" })
+            showRowActionsColumn && /* @__PURE__ */ jsx34("th", { className: "sticky top-0 z-20 border-b border-border bg-muted p-2", "aria-label": "Row actions" })
           ] }) }),
-          /* @__PURE__ */ jsx34("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsx34("tr", { children: /* @__PURE__ */ jsx34("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: "No results." }) }) : groupedBuckets ? groupedBuckets.map((bucket) => {
+          /* @__PURE__ */ jsx34("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsx34("tr", { children: /* @__PURE__ */ jsx34("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: loading ? /* @__PURE__ */ jsxs21("span", { className: "inline-flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx34(Loader22, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }),
+            "Loading..."
+          ] }) : "No results." }) }) : groupedBuckets ? groupedBuckets.map((bucket) => {
             const groupExpanded = isGroupExpanded(bucket.key);
             return /* @__PURE__ */ jsxs21(Fragment5, { children: [
               /* @__PURE__ */ jsx34("tr", { "data-testid": `group-header-${bucket.key}`, children: /* @__PURE__ */ jsx34(