@bmsuisse/datagrid 0.25.0 → 0.25.2

package/dist/index.js

@@ -1994,7 +1994,7 @@ 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 base = area === "header" ? "border-b border-border p-1 sticky top-0 z-20" : "border-b border-border p-1 sticky z-10";
     const bg = area === "header" ? "bg-muted" : "bg-background";
     const bgOdd = area === "header" ? "bg-muted" : STRUCTURAL_ZEBRA_BG_CLASS;
     return {
@@ -2031,16 +2031,24 @@ function DataGrid({
     for (const column of visibleColumns) map.set(column.id, bodyCellClassAndStyle(column));
     return map;
   }, [visibleColumns, enableColumnResizing, leftPinnedOffsets, rightPinnedOffsets, columnSizing]);
-  function headerCellClassAndStyle(column, base) {
+  function headerCellClassAndStyle(column, base, options = {}) {
     const pinnedProps = pinnedCellProps(column, "header");
     const align = alignClassName(column);
-    const className = pinnedProps.className ? `${base} ${align} ${pinnedProps.className}` : `${base} ${align}`;
+    const className = cn(
+      base,
+      align,
+      pinnedProps.className,
+      options.sticky && "sticky top-0 z-20 bg-muted"
+    );
     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"));
+      map.set(
+        column.id,
+        headerCellClassAndStyle(column, "relative border-b border-border p-2 font-medium", { sticky: true })
+      );
     }
     return map;
   }, [visibleColumns, enableColumnResizing, leftPinnedOffsets, rightPinnedOffsets, columnSizing]);
@@ -2180,248 +2188,262 @@ function DataGrid({
       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: [
-        selectedRows.length,
-        " selected"
+  return (
+    // `h-full`/`min-h-0` here and on the two wrappers below are no-ops unless
+    // a consumer itself gives <DataGrid> a bounded height (e.g. wraps it in
+    // its own `flex-1 min-h-0` container) -- percentage heights fall back to
+    // `auto` with no definite ancestor height, so every existing natural-
+    // height usage renders unchanged. Wrap it in a bounded container, though,
+    // and this cascades down to the actual scrolling div below instead of
+    // silently rendering at full unbounded content height, which used to
+    // force any consumer wanting a bounded, page-filling grid to add its own
+    // *second* `overflow-auto` wrapper around <DataGrid> -- two nested scroll
+    // containers (that one scrolling vertically, this component's own
+    // `overflow-x-auto` div scrolling horizontally) fighting over which one
+    // a sticky header/pinned column is actually stuck relative to.
+    /* @__PURE__ */ jsxs12("div", { className: "flex h-full min-h-0 flex-col gap-2", "data-testid": "datagrid", children: [
+      showSelectionColumn && headerActions && /* @__PURE__ */ jsxs12("div", { className: "flex shrink-0 items-center justify-between text-sm", children: [
+        /* @__PURE__ */ jsxs12("span", { children: [
+          selectedRows.length,
+          " selected"
+        ] }),
+        /* @__PURE__ */ jsx19(ActionsMenu, { items: headerActions, ctx: { selectedRows }, triggerLabel: "Bulk actions" })
       ] }),
-      /* @__PURE__ */ jsx19(ActionsMenu, { items: headerActions, ctx: { selectedRows }, triggerLabel: "Bulk actions" })
-    ] }),
-    /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
-      loading && /* @__PURE__ */ jsx19(
-        "div",
-        {
-          "data-testid": "datagrid-loading-overlay",
-          className: "absolute inset-0 z-10 flex items-center justify-center bg-background/60",
-          children: /* @__PURE__ */ jsx19(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground", "aria-hidden": true })
-        }
-      ),
-      /* @__PURE__ */ jsx19(
-        "div",
-        {
-          ref: scrollRef,
-          "data-testid": testId,
-          className: cn("overflow-x-auto rounded-md border", shouldVirtualize && "overflow-y-auto"),
-          style: shouldVirtualize ? { maxHeight: virtualize?.maxBodyHeight ?? 480 } : void 0,
-          children: /* @__PURE__ */ jsxs12("table", { className: cn("w-full border-collapse text-sm", enableColumnResizing && "table-fixed"), children: [
-            /* @__PURE__ */ jsxs12("thead", { className: "bg-muted", children: [
-              table.getHeaderGroups().map((headerGroup) => {
-                const headerById = new Map(headerGroup.headers.map((header) => [header.id, header]));
-                function renderLeafHeaderCell(column, rowSpan) {
-                  const header = headerById.get(column.id);
-                  if (!header) return null;
-                  const sortEntry = state.sort.find((s) => s.field === column.id);
-                  const sortable = isSortable(column);
-                  const filterable = isFilterable(column) && column.filterDisplay !== "row";
-                  const cellProps = leafHeaderCellPropsByColumn.get(column.id);
-                  const headerContent = column.renderHeader ? column.renderHeader(column) : column.header;
-                  return /* @__PURE__ */ jsxs12("th", { rowSpan, style: cellProps?.style, className: cellProps?.className, children: [
-                    /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1", children: [
-                      sortable ? /* @__PURE__ */ jsxs12(
-                        "button",
+      /* @__PURE__ */ jsxs12("div", { className: "relative min-h-0 flex-1", children: [
+        loading && /* @__PURE__ */ jsx19(
+          "div",
+          {
+            "data-testid": "datagrid-loading-overlay",
+            className: "absolute inset-0 z-30 flex items-center justify-center bg-background/60",
+            children: /* @__PURE__ */ jsx19(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground", "aria-hidden": true })
+          }
+        ),
+        /* @__PURE__ */ jsx19(
+          "div",
+          {
+            ref: scrollRef,
+            "data-testid": testId,
+            className: "h-full overflow-auto rounded-md border",
+            style: shouldVirtualize ? { maxHeight: virtualize?.maxBodyHeight ?? 480 } : void 0,
+            children: /* @__PURE__ */ jsxs12("table", { className: cn("w-full border-collapse text-sm", enableColumnResizing && "table-fixed"), children: [
+              /* @__PURE__ */ jsxs12("thead", { className: "bg-muted", children: [
+                table.getHeaderGroups().map((headerGroup) => {
+                  const headerById = new Map(headerGroup.headers.map((header) => [header.id, header]));
+                  function renderLeafHeaderCell(column, rowSpan) {
+                    const header = headerById.get(column.id);
+                    if (!header) return null;
+                    const sortEntry = state.sort.find((s) => s.field === column.id);
+                    const sortable = isSortable(column);
+                    const filterable = isFilterable(column) && column.filterDisplay !== "row";
+                    const cellProps = leafHeaderCellPropsByColumn.get(column.id);
+                    const headerContent = column.renderHeader ? column.renderHeader(column) : column.header;
+                    return /* @__PURE__ */ jsxs12("th", { rowSpan, style: cellProps?.style, className: cellProps?.className, children: [
+                      /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1", children: [
+                        sortable ? /* @__PURE__ */ jsxs12(
+                          "button",
+                          {
+                            type: "button",
+                            className: "flex items-center gap-1 rounded-sm px-1 hover:bg-accent hover:text-accent-foreground",
+                            onClick: (event) => toggleSort(column.id, enableMultiSort && event.shiftKey, column.sortDescFirst === true),
+                            children: [
+                              headerContent,
+                              sortEntry?.dir === "asc" && /* @__PURE__ */ jsx19(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
+                              sortEntry?.dir === "desc" && /* @__PURE__ */ jsx19(BarsArrowDownIcon, { className: "h-3 w-3", "aria-hidden": true })
+                            ]
+                          }
+                        ) : (
+                          // Not wrapped in a `<button>` (unlike the sortable branch above): a
+                          // disabled `<button>` swallows pointer events for its entire subtree,
+                          // silently breaking any interactive content a column's own `renderHeader`
+                          // embeds directly (bare filter inputs, "select/reject all" buttons) —
+                          // clicks never reach them at all, even though nothing looks wrong visually.
+                          /* @__PURE__ */ jsx19("div", { className: "flex items-center gap-1 px-1", children: headerContent })
+                        ),
+                        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: 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) })
+                        ] })
+                      ] }),
+                      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", className: "divide-x divide-border", children: [
+                      showDetailColumn && /* @__PURE__ */ jsx19(
+                        "th",
                         {
-                          type: "button",
-                          className: "flex items-center gap-1 rounded-sm px-1 hover:bg-accent hover:text-accent-foreground",
-                          onClick: (event) => toggleSort(column.id, enableMultiSort && event.shiftKey, column.sortDescFirst === true),
-                          children: [
-                            headerContent,
-                            sortEntry?.dir === "asc" && /* @__PURE__ */ jsx19(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
-                            sortEntry?.dir === "desc" && /* @__PURE__ */ jsx19(BarsArrowDownIcon, { className: "h-3 w-3", "aria-hidden": true })
-                          ]
+                          rowSpan: 2,
+                          className: detailHeaderCellProps.className,
+                          style: detailHeaderCellProps.style,
+                          "aria-hidden": true
                         }
-                      ) : (
-                        // Not wrapped in a `<button>` (unlike the sortable branch above): a
-                        // disabled `<button>` swallows pointer events for its entire subtree,
-                        // silently breaking any interactive content a column's own `renderHeader`
-                        // embeds directly (bare filter inputs, "select/reject all" buttons) —
-                        // clicks never reach them at all, even though nothing looks wrong visually.
-                        /* @__PURE__ */ jsx19("div", { className: "flex items-center gap-1 px-1", children: headerContent })
                       ),
-                      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: 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) })
-                      ] })
-                    ] }),
-                    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", className: "divide-x divide-border", children: [
-                    showDetailColumn && /* @__PURE__ */ jsx19(
-                      "th",
-                      {
-                        rowSpan: 2,
-                        className: detailHeaderCellProps.className,
-                        style: detailHeaderCellProps.style,
-                        "aria-hidden": true
-                      }
-                    ),
-                    showSelectionColumn && /* @__PURE__ */ jsx19(
-                      "th",
-                      {
-                        rowSpan: 2,
-                        className: selectionHeaderCellProps.className,
-                        style: selectionHeaderCellProps.style,
-                        children: /* @__PURE__ */ jsx19(
-                          "input",
+                      showSelectionColumn && /* @__PURE__ */ jsx19(
+                        "th",
+                        {
+                          rowSpan: 2,
+                          className: selectionHeaderCellProps.className,
+                          style: selectionHeaderCellProps.style,
+                          children: /* @__PURE__ */ jsx19(
+                            "input",
+                            {
+                              type: "checkbox",
+                              "aria-label": "Select all rows on this page",
+                              checked: allOnPageSelected,
+                              onChange: toggleAllOnPageSelected
+                            }
+                          )
+                        }
+                      ),
+                      headerRuns.map(
+                        (run) => run.kind === "single" ? renderLeafHeaderCell(run.column, 2) : /* @__PURE__ */ jsx19(
+                          "th",
                           {
-                            type: "checkbox",
-                            "aria-label": "Select all rows on this page",
-                            checked: allOnPageSelected,
-                            onChange: toggleAllOnPageSelected
-                          }
+                            colSpan: run.columns.length,
+                            className: "border-b border-border p-2 text-center font-medium",
+                            children: run.label
+                          },
+                          `group-${run.label}-${run.columns[0].id}`
                         )
-                      }
-                    ),
-                    headerRuns.map(
-                      (run) => run.kind === "single" ? renderLeafHeaderCell(run.column, 2) : /* @__PURE__ */ jsx19(
+                      ),
+                      showRowActionsColumn && /* @__PURE__ */ jsx19(
                         "th",
                         {
-                          colSpan: run.columns.length,
-                          className: "border-b border-border p-2 text-center font-medium",
-                          children: run.label
-                        },
-                        `group-${run.label}-${run.columns[0].id}`
+                          rowSpan: 2,
+                          className: rowActionsHeaderCellProps.className,
+                          style: rowActionsHeaderCellProps.style,
+                          "aria-label": "Row actions"
+                        }
                       )
-                    ),
-                    showRowActionsColumn && /* @__PURE__ */ jsx19(
-                      "th",
-                      {
-                        rowSpan: 2,
-                        className: rowActionsHeaderCellProps.className,
-                        style: rowActionsHeaderCellProps.style,
-                        "aria-label": "Row actions"
-                      }
-                    )
-                  ] }, `${headerGroup.id}-groups`),
-                  /* @__PURE__ */ jsxs12("tr", { className: "divide-x divide-border", children: [
-                    !hasHeaderGroups && showDetailColumn && /* @__PURE__ */ jsx19(
-                      "th",
-                      {
-                        className: detailHeaderCellProps.className,
-                        style: detailHeaderCellProps.style,
-                        "aria-hidden": true
-                      }
-                    ),
-                    !hasHeaderGroups && showSelectionColumn && /* @__PURE__ */ jsx19(
-                      "th",
-                      {
-                        className: selectionHeaderCellProps.className,
-                        style: selectionHeaderCellProps.style,
-                        children: /* @__PURE__ */ jsx19(
-                          "input",
-                          {
-                            type: "checkbox",
-                            "aria-label": "Select all rows on this page",
-                            checked: allOnPageSelected,
-                            onChange: toggleAllOnPageSelected
-                          }
-                        )
-                      }
-                    ),
-                    headerGroup.headers.map((header) => {
-                      const column = columnById.get(header.id);
-                      if (!column || hasHeaderGroups && !column.headerGroup) return null;
-                      return renderLeafHeaderCell(column);
-                    }),
-                    !hasHeaderGroups && showRowActionsColumn && /* @__PURE__ */ jsx19(
-                      "th",
-                      {
-                        className: rowActionsHeaderCellProps.className,
-                        style: rowActionsHeaderCellProps.style,
-                        "aria-label": "Row actions"
-                      }
-                    )
-                  ] }, headerGroup.id)
-                ] }, headerGroup.id);
-              }),
-              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: selectionHeaderCellProps.className,
-                    style: selectionHeaderCellProps.style
-                  }
-                ),
-                visibleColumns.map((column) => {
-                  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);
+                    ] }, `${headerGroup.id}-groups`),
+                    /* @__PURE__ */ jsxs12("tr", { className: "divide-x divide-border", children: [
+                      !hasHeaderGroups && showDetailColumn && /* @__PURE__ */ jsx19(
+                        "th",
+                        {
+                          className: detailHeaderCellProps.className,
+                          style: detailHeaderCellProps.style,
+                          "aria-hidden": true
+                        }
+                      ),
+                      !hasHeaderGroups && showSelectionColumn && /* @__PURE__ */ jsx19(
+                        "th",
+                        {
+                          className: selectionHeaderCellProps.className,
+                          style: selectionHeaderCellProps.style,
+                          children: /* @__PURE__ */ jsx19(
+                            "input",
+                            {
+                              type: "checkbox",
+                              "aria-label": "Select all rows on this page",
+                              checked: allOnPageSelected,
+                              onChange: toggleAllOnPageSelected
+                            }
+                          )
+                        }
+                      ),
+                      headerGroup.headers.map((header) => {
+                        const column = columnById.get(header.id);
+                        if (!column || hasHeaderGroups && !column.headerGroup) return null;
+                        return renderLeafHeaderCell(column);
+                      }),
+                      !hasHeaderGroups && showRowActionsColumn && /* @__PURE__ */ jsx19(
+                        "th",
+                        {
+                          className: rowActionsHeaderCellProps.className,
+                          style: rowActionsHeaderCellProps.style,
+                          "aria-label": "Row actions"
+                        }
+                      )
+                    ] }, headerGroup.id)
+                  ] }, headerGroup.id);
                 }),
-                showRowActionsColumn && /* @__PURE__ */ jsx19(
-                  "th",
-                  {
-                    className: rowActionsHeaderCellProps.className,
-                    style: rowActionsHeaderCellProps.style
-                  }
-                )
-              ] })
-            ] }),
-            rows.length === 0 ? /* @__PURE__ */ jsx19("tbody", { children: /* @__PURE__ */ jsx19("tr", { children: /* @__PURE__ */ jsx19("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: loading ? "Loading..." : "No results." }) }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs12(Fragment3, { children: [
-              paddingTop > 0 && /* @__PURE__ */ jsx19("tbody", { children: /* @__PURE__ */ jsx19("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx19("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }) }),
-              virtualItems.map(
-                (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 } }) }) })
-            ] }) : groupedBuckets ? groupedBuckets.map((bucket) => renderGroupedBucket(bucket)) : tableRows.map((row) => renderRow(row))
-          ] })
-        }
-      )
-    ] }),
-    showPagination && /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between text-sm", children: [
-      /* @__PURE__ */ jsxs12("span", { children: [
-        "Page ",
-        state.page + 1,
-        " of ",
-        pageCount,
-        " (",
-        rowCount,
-        " row",
-        rowCount === 1 ? "" : "s",
-        ")"
-      ] }),
-      /* @__PURE__ */ jsxs12("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx19(
-          Button,
-          {
-            variant: "outline",
-            size: "sm",
-            disabled: state.page <= 0,
-            onClick: () => setPage(state.page - 1),
-            children: "Previous"
-          }
-        ),
-        /* @__PURE__ */ jsx19(
-          Button,
-          {
-            variant: "outline",
-            size: "sm",
-            disabled: state.page >= pageCount - 1,
-            onClick: () => setPage(state.page + 1),
-            children: "Next"
+                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: selectionHeaderCellProps.className,
+                      style: selectionHeaderCellProps.style
+                    }
+                  ),
+                  visibleColumns.map((column) => {
+                    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: rowActionsHeaderCellProps.className,
+                      style: rowActionsHeaderCellProps.style
+                    }
+                  )
+                ] })
+              ] }),
+              rows.length === 0 ? /* @__PURE__ */ jsx19("tbody", { children: /* @__PURE__ */ jsx19("tr", { children: /* @__PURE__ */ jsx19("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: loading ? "Loading..." : "No results." }) }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs12(Fragment3, { children: [
+                paddingTop > 0 && /* @__PURE__ */ jsx19("tbody", { children: /* @__PURE__ */ jsx19("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx19("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }) }),
+                virtualItems.map(
+                  (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 } }) }) })
+              ] }) : groupedBuckets ? groupedBuckets.map((bucket) => renderGroupedBucket(bucket)) : tableRows.map((row) => renderRow(row))
+            ] })
           }
         )
+      ] }),
+      showPagination && /* @__PURE__ */ jsxs12("div", { className: "flex shrink-0 items-center justify-between text-sm", children: [
+        /* @__PURE__ */ jsxs12("span", { children: [
+          "Page ",
+          state.page + 1,
+          " of ",
+          pageCount,
+          " (",
+          rowCount,
+          " row",
+          rowCount === 1 ? "" : "s",
+          ")"
+        ] }),
+        /* @__PURE__ */ jsxs12("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx19(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              disabled: state.page <= 0,
+              onClick: () => setPage(state.page - 1),
+              children: "Previous"
+            }
+          ),
+          /* @__PURE__ */ jsx19(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              disabled: state.page >= pageCount - 1,
+              onClick: () => setPage(state.page + 1),
+              children: "Next"
+            }
+          )
+        ] })
       ] })
     ] })
-  ] });
+  );
 }
 
 // src/tree/TreeDataGrid.tsx
@@ -2480,7 +2502,9 @@ function useTreeState({
   hasChildren,
   onLoadChildren,
   expanded: controlledExpanded,
-  onExpandedChange
+  onExpandedChange,
+  childrenMap: controlledChildrenMap,
+  onChildrenMapChange
 }) {
   const [internalExpanded, setInternalExpanded] = useState7({});
   const expanded = controlledExpanded ?? internalExpanded;
@@ -2494,7 +2518,18 @@ function useTreeState({
     },
     [controlledExpanded, onExpandedChange]
   );
-  const [childrenMap, setChildrenMap] = useState7(/* @__PURE__ */ new Map());
+  const [internalChildrenMap, setInternalChildrenMap] = useState7(/* @__PURE__ */ new Map());
+  const childrenMap = controlledChildrenMap ?? internalChildrenMap;
+  const setChildrenMap = useCallback3(
+    (updater) => {
+      if (controlledChildrenMap) {
+        onChildrenMapChange?.(updater(controlledChildrenMap));
+      } else {
+        setInternalChildrenMap((prev) => new Map(updater(prev)));
+      }
+    },
+    [controlledChildrenMap, onChildrenMapChange]
+  );
   const [loadingIds, setLoadingIds] = useState7(/* @__PURE__ */ new Set());
   const [errorIds, setErrorIds] = useState7(/* @__PURE__ */ new Map());
   const resolveHasChildren = useMemo7(
@@ -2532,7 +2567,7 @@ function useTreeState({
         });
       }
     },
-    [childrenMap, getChildren, getRowId, onLoadChildren]
+    [childrenMap, getChildren, getRowId, onLoadChildren, setChildrenMap]
   );
   const toggleExpand = useCallback3(
     (row) => {
@@ -2627,6 +2662,8 @@ function TreeDataGrid({
   initialExpandedLevel = 0,
   expanded: controlledExpanded,
   onExpandedChange,
+  childrenMap: controlledChildrenMap,
+  onChildrenMapChange,
   indentSize = 20,
   getRowProps,
   getRowTestId,
@@ -2651,7 +2688,9 @@ function TreeDataGrid({
     hasChildren,
     onLoadChildren,
     expanded: controlledExpanded,
-    onExpandedChange
+    onExpandedChange,
+    childrenMap: controlledChildrenMap,
+    onChildrenMapChange
   });
   const didAutoExpand = useRef6(false);
   useEffect8(() => {
@@ -2720,6 +2759,7 @@ function TreeDataGrid({
       {
         ref: measureRef,
         ...rowProps,
+        "data-index": index,
         "data-testid": rowTestId,
         className: rowProps?.className ? cn(
           "border-b border-border divide-x divide-border",