@bmsuisse/datagrid 0.32.0 → 0.32.1

package/dist/index.d.ts

@@ -1848,6 +1848,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 +1959,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, 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

@@ -4415,6 +4415,7 @@ function TreeDataGrid({
   virtualizeThreshold = 100,
   estimatedRowHeight = 40,
   maxBodyHeight = 480,
+  testId,
   selectedIds: controlledSelectedIds,
   onSelectedIdsChange,
   getRowSelectionState,
@@ -4603,28 +4604,39 @@ 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) => {
             const groupExpanded = isGroupExpanded(bucket.key);