@bmsuisse/datagrid 0.25.2 → 0.25.3

package/dist/index.js

@@ -1632,7 +1632,7 @@ 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 useMemo6, useRef as useRef5, useState as useState6 } from "react";
+import { Fragment as Fragment2, useEffect as useEffect7, useLayoutEffect, useMemo as useMemo6, useRef as useRef5, useState as useState6 } from "react";
 
 // src/lib/structuralColumns.ts
 var SELECTION_COLUMN_WIDTH = 44;
@@ -2065,6 +2065,18 @@ function DataGrid({
     () => groupBy ? groupRows(tableRows, (row) => groupBy(row.original)) : void 0,
     [tableRows, groupBy]
   );
+  const theadRef = useRef5(null);
+  const [groupHeaderTop, setGroupHeaderTop] = useState6(0);
+  useLayoutEffect(() => {
+    if (!groupBy) return;
+    const theadEl = theadRef.current;
+    if (!theadEl) return;
+    const updateHeight = () => setGroupHeaderTop(theadEl.getBoundingClientRect().height);
+    updateHeight();
+    const observer = new ResizeObserver(updateHeight);
+    observer.observe(theadEl);
+    return () => observer.disconnect();
+  }, [groupBy]);
   const scrollRef = useRef5(null);
   const virtualizer = useVirtualizer({
     count: tableRows.length,
@@ -2166,25 +2178,36 @@ function DataGrid({
     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",
+      /* @__PURE__ */ jsx19("tbody", { children: /* @__PURE__ */ jsx19("tr", { "data-testid": `group-header-${bucket.key}`, children: /* @__PURE__ */ jsx19(
+        "td",
         {
-          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})`
-          ]
+          colSpan: totalColumnCount,
+          className: cn(
+            "sticky z-20 border-b p-2 font-medium",
+            zebra ? "bg-muted" : "bg-background"
+          ),
+          style: { top: groupHeaderTop },
+          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}`);
   }
@@ -2226,7 +2249,7 @@ function DataGrid({
             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: [
+              /* @__PURE__ */ jsxs12("thead", { ref: theadRef, className: "bg-muted", children: [
                 table.getHeaderGroups().map((headerGroup) => {
                   const headerById = new Map(headerGroup.headers.map((header) => [header.id, header]));
                   function renderLeafHeaderCell(column, rowSpan) {