@bmsuisse/datagrid 0.28.0 → 0.29.0

package/dist/index.d.ts

@@ -1103,10 +1103,29 @@ interface DataGridProps<TRow> {
      * 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."
+     * Composes with `virtualize` — header rows and member rows are flattened
+     * into one virtualizable list together, so a large grouped dataset windows
+     * the same way an ungrouped one does. `virtualize.threshold` still gates
+     * on the real row count (`groupBy`'s synthetic header entries never push a
+     * grid over a threshold its actual data didn't cross), and
+     * `virtualize.onEndReached`'s own "won't fire again for the same data"
+     * dedup is keyed off that same real row count too — a pure expand/collapse
+     * click, with no new data loaded, never re-fires it.
+     *
+     * Two gaps this doesn't close, both pre-existing/out of scope for this
+     * pass rather than introduced by composing with `virtualize`: `zebra`'s
+     * odd/even striping is keyed off a row's position in the flat, ungrouped
+     * row list, not its rendered position within its own bucket, so grouped
+     * rows can stripe unevenly (`groupBy` alone already had this, virtualizing
+     * doesn't fix or worsen it); and a sticky group header stays pinned below
+     * the real `<thead>` only while its own `<tbody>` (or one of its member
+     * rows') is actually mounted in the virtualized window — scrolling deep
+     * into one bucket whose row count itself exceeds `virtualize`'s overscan
+     * will eventually unmount that bucket's header and let it scroll away
+     * rather than staying pinned, since `position: sticky` needs the element
+     * mounted to stick at all. Both are harmless for the common case (buckets
+     * no bigger than a couple dozen rows); see AGENTS.md's "Known limitations"
+     * for the full writeup.
      */
     groupBy?: (row: TRow) => string;
     /** Customizes a group-header row's content. Defaults to `` `${key} (${rows.length})` ``. */

package/dist/index.js

@@ -2551,15 +2551,28 @@ function DataGrid({
     return map;
   }, [visibleColumns, enableColumnResizing, leftPinnedOffsets, rightPinnedOffsets, columnSizing]);
   const tableRows = table.getRowModel().rows;
-  const shouldVirtualize = Boolean(virtualize) && !groupBy && tableRows.length > (virtualize?.threshold ?? 100);
   const groupedBuckets = useMemo7(
     () => groupBy ? groupRows(tableRows, (row) => groupBy(row.original)) : void 0,
     [tableRows, groupBy]
   );
   const { theadRef, groupHeaderTop } = useStickyGroupHeaderTop(Boolean(groupBy));
+  const shouldVirtualize = Boolean(virtualize) && tableRows.length > (virtualize?.threshold ?? 100);
+  const flatItems = useMemo7(() => {
+    if (!shouldVirtualize) return [];
+    if (!groupedBuckets) return tableRows.map((row) => ({ kind: "row", row }));
+    const items = [];
+    for (const bucket of groupedBuckets) {
+      const originalRows = bucket.items.map((row) => row.original);
+      items.push({ kind: "header", key: bucket.key, rows: originalRows });
+      if (isGroupExpanded(bucket.key)) {
+        for (const row of bucket.items) items.push({ kind: "row", row });
+      }
+    }
+    return items;
+  }, [shouldVirtualize, groupedBuckets, tableRows, isGroupExpanded]);
   const scrollRef = useRef8(null);
   const virtualizer = useVirtualizer({
-    count: tableRows.length,
+    count: flatItems.length,
     getScrollElement: () => scrollRef.current,
     estimateSize: () => virtualize?.estimatedRowHeight ?? 40,
     overscan: virtualize?.overscan ?? 10,
@@ -2572,18 +2585,18 @@ function DataGrid({
   const notifiedForLengthRef = useRef8(-1);
   useEffect9(() => {
     if (!virtualize?.onEndReached) return;
-    if (lastVisibleIndex < 0 || lastVisibleIndex < tableRows.length - 1) return;
+    if (lastVisibleIndex < 0 || lastVisibleIndex < flatItems.length - 1) return;
     if (virtualize.hasMore === false) return;
     if (notifiedForLengthRef.current === tableRows.length) return;
     notifiedForLengthRef.current = tableRows.length;
     virtualize.onEndReached();
-  }, [lastVisibleIndex, tableRows.length, virtualize]);
-  function renderRow(row, measureRef) {
+  }, [lastVisibleIndex, flatItems.length, tableRows.length, virtualize]);
+  function renderRow(row, measureRef, dataIndex = row.index) {
     const isExpanded = expandedIds.has(row.id);
     const rowProps = getRowProps?.(row.original);
     const rowTestId = getRowTestId?.(row.original) ?? `row-${row.id}`;
     const isOddRow = zebra && row.index % 2 === 1;
-    return /* @__PURE__ */ jsxs18("tbody", { ref: measureRef, "data-index": row.index, children: [
+    return /* @__PURE__ */ jsxs18("tbody", { ref: measureRef, "data-index": dataIndex, children: [
       /* @__PURE__ */ jsxs18(
         "tr",
         {
@@ -2654,43 +2667,48 @@ function DataGrid({
       showDetailColumn && isExpanded && renderDetail && /* @__PURE__ */ jsx28("tr", { "data-testid": `${rowTestId}-detail`, children: /* @__PURE__ */ jsx28("td", { colSpan: totalColumnCount, className: "border-b border-border p-2", children: renderDetail(row.original) }) })
     ] }, row.id);
   }
+  function renderGroupHeaderTbody(key, rows2, measureRef, dataIndex) {
+    const expanded = isGroupExpanded(key);
+    return /* @__PURE__ */ jsx28("tbody", { ref: measureRef, "data-index": dataIndex, children: /* @__PURE__ */ jsx28("tr", { "data-testid": `group-header-${key}`, children: /* @__PURE__ */ jsx28(
+      "td",
+      {
+        colSpan: totalColumnCount,
+        className: cn("sticky z-20 border-b p-2 font-medium", zebra ? "bg-muted" : "bg-background"),
+        style: { top: groupHeaderTop },
+        children: /* @__PURE__ */ jsxs18(
+          "button",
+          {
+            type: "button",
+            className: "flex w-full items-center gap-1 text-left",
+            onClick: () => toggleGroupExpanded(key),
+            "aria-expanded": expanded,
+            children: [
+              /* @__PURE__ */ jsx28(
+                ChevronRight,
+                {
+                  className: `h-4 w-4 shrink-0 transition-transform${expanded ? " rotate-90" : ""}`,
+                  "aria-hidden": true
+                }
+              ),
+              renderGroupHeader ? renderGroupHeader(key, rows2, expanded) : `${key} (${rows2.length})`
+            ]
+          }
+        )
+      }
+    ) }) }, `group-${key}`);
+  }
   function renderGroupedBucket(bucket) {
     const expanded = isGroupExpanded(bucket.key);
     const originalRows = bucket.items.map((row) => row.original);
     return /* @__PURE__ */ jsxs18(Fragment2, { children: [
-      /* @__PURE__ */ jsx28("tbody", { children: /* @__PURE__ */ jsx28("tr", { "data-testid": `group-header-${bucket.key}`, children: /* @__PURE__ */ jsx28(
-        "td",
-        {
-          colSpan: totalColumnCount,
-          className: cn(
-            "sticky z-20 border-b p-2 font-medium",
-            zebra ? "bg-muted" : "bg-background"
-          ),
-          style: { top: groupHeaderTop },
-          children: /* @__PURE__ */ jsxs18(
-            "button",
-            {
-              type: "button",
-              className: "flex w-full items-center gap-1 text-left",
-              onClick: () => toggleGroupExpanded(bucket.key),
-              "aria-expanded": expanded,
-              children: [
-                /* @__PURE__ */ jsx28(
-                  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})`
-              ]
-            }
-          )
-        }
-      ) }) }),
+      renderGroupHeaderTbody(bucket.key, originalRows),
       expanded && bucket.items.map((row) => renderRow(row))
     ] }, `group-${bucket.key}`);
   }
+  function renderFlatItem(item, index, measureRef) {
+    if (item.kind === "header") return renderGroupHeaderTbody(item.key, item.rows, measureRef, index);
+    return renderRow(item.row, measureRef, index);
+  }
   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
@@ -2912,7 +2930,11 @@ function DataGrid({
               rows.length === 0 ? /* @__PURE__ */ jsx28("tbody", { children: /* @__PURE__ */ jsx28("tr", { children: /* @__PURE__ */ jsx28("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: loading ? "Loading..." : "No results." }) }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs18(Fragment3, { children: [
                 paddingTop > 0 && /* @__PURE__ */ jsx28("tbody", { children: /* @__PURE__ */ jsx28("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx28("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }) }),
                 virtualItems.map(
-                  (virtualItem) => renderRow(tableRows[virtualItem.index], (el) => virtualizer.measureElement(el))
+                  (virtualItem) => renderFlatItem(
+                    flatItems[virtualItem.index],
+                    virtualItem.index,
+                    (el) => virtualizer.measureElement(el)
+                  )
                 ),
                 paddingBottom > 0 && /* @__PURE__ */ jsx28("tbody", { children: /* @__PURE__ */ jsx28("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx28("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingBottom } }) }) })
               ] }) : groupedBuckets ? groupedBuckets.map((bucket) => renderGroupedBucket(bucket)) : tableRows.map((row) => renderRow(row))