@flanksource/clicky-ui 0.3.34 → 0.3.35

package/dist/data/DataTable.cjs

@@ -15,6 +15,7 @@ const filterBarUtils = require("../components/filter-bar-utils.cjs");
 const dataTableUtils = require("./data-table-utils.cjs");
 const dataTableServerFilters = require("./data-table-server-filters.cjs");
 const useInfiniteRows = require("./use-infinite-rows.cjs");
+const useDataTableVirtual = require("./use-data-table-virtual.cjs");
 const Icon = require("./Icon.cjs");
 const SortableHeader = require("./SortableHeader.cjs");
 const Timestamp = require("./cells/Timestamp.cjs");
@@ -127,7 +128,7 @@ function DataTableInner({
   loadingMessage = "Loading results…",
   loadingRowCount = 8,
   emptyMessage = "No data",
-  clientReveal,
+  virtualize,
   className,
   scrollContainerClassName,
   autoFilter = false,
@@ -727,19 +728,11 @@ function DataTableInner({
     ...(defaultSort == null ? void 0 : defaultSort.key) ? { defaultKey: defaultSort.key } : {}
   });
   const pageLocalSort = !!pagination && !onSortChange && !(isSinglePage(pagination, data.length) && !(infinite == null ? void 0 : infinite.hasMore));
-  const revealEnabled = !!clientReveal && !pagination && !infinite;
-  const revealBatchSize = (clientReveal == null ? void 0 : clientReveal.batchSize) ?? 0;
-  const [visibleCount, setVisibleCount] = react.useState(revealBatchSize);
-  const revealObserver = react.useRef(null);
-  react.useEffect(() => {
-    if (revealEnabled) setVisibleCount(revealBatchSize);
-  }, [revealEnabled, revealBatchSize, sorted]);
-  const visibleSorted = revealEnabled ? sorted.slice(0, visibleCount) : sorted;
-  const hasMoreRows = revealEnabled && visibleCount < sorted.length;
+  const visibleSorted = sorted;
   const requestMoreRows = useInfiniteRows.useInfiniteRows(infinite, data.length);
-  const infiniteEnabled = !!infinite;
-  const sentinelActive = infinite ? infinite.hasMore : hasMoreRows;
-  const sentinelLabel = !infinite || infinite.loading ? "Loading more…" : "Scroll to load more…";
+  const infiniteObserver = react.useRef(null);
+  const sentinelActive = !!infinite && infinite.hasMore;
+  const sentinelLabel = (infinite == null ? void 0 : infinite.loading) ? "Loading more…" : "Scroll to load more…";
   const selectedRowIDs = react.useMemo(
     () => new Set((rowSelection == null ? void 0 : rowSelection.selectedRowIds) ?? []),
     [rowSelection == null ? void 0 : rowSelection.selectedRowIds]
@@ -985,14 +978,104 @@ function DataTableInner({
     }
   ) : null;
   const rowStream = react.useMemo(() => {
+    const withExpansion = (record) => {
+      const row = { kind: "row", record };
+      if (detailStyle !== "row" || !renderExpandedRow || !expandedRows[record.id]) {
+        return [row];
+      }
+      const content = renderExpandedRow(record.row, {
+        columns: effectiveColumns,
+        visibleColumns,
+        filterActionsByColumn
+      });
+      return content ? [row, { kind: "expansion", record, content }] : [row];
+    };
     if (!groups) {
-      return visibleSorted.map((record) => ({ kind: "row", record }));
+      return visibleSorted.flatMap(withExpansion);
     }
     return groups.flatMap((group) => [
       { kind: "group", group },
-      ...group.collapsed ? [] : group.records.map((record) => ({ kind: "row", record }))
+      ...group.collapsed ? [] : group.records.flatMap(withExpansion)
     ]);
-  }, [groups, visibleSorted]);
+  }, [
+    groups,
+    visibleSorted,
+    detailStyle,
+    renderExpandedRow,
+    expandedRows,
+    effectiveColumns,
+    visibleColumns,
+    filterActionsByColumn
+  ]);
+  const virtualItemKey = react.useCallback(
+    (index) => {
+      const item = rowStream[index];
+      if (!item) return `row:${index}`;
+      if (item.kind === "group") return `group:${item.group.key}`;
+      if (item.kind === "expansion") return `expand:${item.record.id}`;
+      return `row:${item.record.id}`;
+    },
+    [rowStream]
+  );
+  const virtualOptions = react.useMemo(
+    () => useDataTableVirtual.resolveVirtualizeOptions(virtualize),
+    [virtualize]
+  );
+  const virtual = useDataTableVirtual.useDataTableVirtual({
+    count: rowStream.length,
+    options: virtualOptions,
+    getItemKey: virtualItemKey
+  });
+  const [pinnedColumnWidths, setPinnedColumnWidths] = react.useState({});
+  const headRowRef = react.useRef(null);
+  const visibleColumnKeysSignature = visibleColumns.map((c) => c.key).join(" ");
+  react.useEffect(() => {
+    var _a2;
+    if (!virtualOptions) {
+      setPinnedColumnWidths({});
+      return;
+    }
+    const measure = () => {
+      const headRow = headRowRef.current;
+      if (!headRow) return;
+      const offset = rowSelection ? 1 : 0;
+      const next = {};
+      visibleColumns.forEach((column, index) => {
+        const cell = headRow.cells[index + offset];
+        const width = (cell == null ? void 0 : cell.getBoundingClientRect().width) ?? 0;
+        if (width > 0) next[column.key] = width;
+      });
+      if (Object.keys(next).length > 0) setPinnedColumnWidths(next);
+    };
+    const frame = requestAnimationFrame(measure);
+    if (typeof ResizeObserver === "undefined") {
+      return () => cancelAnimationFrame(frame);
+    }
+    const observer = new ResizeObserver(measure);
+    if ((_a2 = headRowRef.current) == null ? void 0 : _a2.parentElement) {
+      observer.observe(headRowRef.current.parentElement);
+    }
+    return () => {
+      cancelAnimationFrame(frame);
+      observer.disconnect();
+    };
+  }, [virtualOptions, visibleColumnKeysSignature, rowSelection, density]);
+  const composeScrollRef = react.useCallback(
+    (node) => {
+      virtual.setScrollEl(node);
+      if (scrollContainerRef) {
+        scrollContainerRef.current = node;
+      }
+    },
+    [virtual.setScrollEl, scrollContainerRef]
+  );
+  const renderedStream = react.useMemo(
+    () => virtual.enabled ? virtual.virtualItems.flatMap((v) => {
+      const item = rowStream[v.index];
+      return item ? [{ item, index: v.index }] : [];
+    }) : rowStream.map((item, index) => ({ item, index })),
+    [virtual.enabled, virtual.virtualItems, rowStream]
+  );
   const toggleGroupSelection = react.useCallback(
     (records) => {
       if (!rowSelection || selectedScope) return;
@@ -1012,33 +1095,20 @@ function DataTableInner({
     },
     [notifySelection, rowSelection, selectedRowIDs, selectedScope]
   );
-  const revealSentinelRef = react.useCallback(
+  const infiniteSentinelRef = react.useCallback(
     (node) => {
-      if (revealObserver.current) revealObserver.current.disconnect();
+      if (infiniteObserver.current) infiniteObserver.current.disconnect();
       if (!node || !sentinelActive) return;
-      revealObserver.current = new IntersectionObserver(
+      infiniteObserver.current = new IntersectionObserver(
         (entries) => {
           var _a2;
-          if (!((_a2 = entries[0]) == null ? void 0 : _a2.isIntersecting)) return;
-          if (infiniteEnabled) {
-            requestMoreRows();
-            return;
-          }
-          setVisibleCount(
-            (current) => Math.min(current + revealBatchSize, sorted.length)
-          );
+          if ((_a2 = entries[0]) == null ? void 0 : _a2.isIntersecting) requestMoreRows();
         },
         { rootMargin: "200px" }
       );
-      revealObserver.current.observe(node);
+      infiniteObserver.current.observe(node);
     },
-    [
-      infiniteEnabled,
-      requestMoreRows,
-      revealBatchSize,
-      sentinelActive,
-      sorted.length
-    ]
+    [requestMoreRows, sentinelActive]
   );
   const startColumnResize = (event, column) => {
     event.preventDefault();
@@ -1144,380 +1214,440 @@ function DataTableInner({
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              ref: scrollContainerRef,
+              ref: composeScrollRef,
               className: utils.cn(
                 "min-h-0 max-w-full flex-1 overflow-auto overscroll-x-contain rounded-md border border-border bg-background",
                 scrollContainerClassName
               ),
               "aria-busy": loading$1 && error == null || void 0,
-              children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-max min-w-full table-auto text-left text-sm", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
-                  rowSelection && error == null ? /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-10" }) : null,
-                  visibleColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
-                    "col",
-                    {
-                      style: error == null ? columnStyle(column, columnWidths) : void 0,
-                      className: column.shrink && !column.grow && error == null ? "w-px" : void 0
-                    },
-                    column.key
-                  ))
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_var(--tw-shadow-color)] shadow-border", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b border-border text-xs text-muted-foreground", children: [
-                  rowSelection && error == null ? /* @__PURE__ */ jsxRuntime.jsx(
-                    "th",
-                    {
-                      className: utils.cn(
-                        "w-10 text-center",
-                        DATA_TABLE_HEADER_DENSITY_CLASS
-                      ),
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "input",
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "table",
+                {
+                  className: utils.cn(
+                    "w-max min-w-full text-left text-sm",
+                    // Only once the widths are pinned: switching to fixed layout
+                    // before there is anything to fix them to would collapse every
+                    // column to an equal share.
+                    Object.keys(pinnedColumnWidths).length > 0 ? "table-fixed" : "table-auto"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
+                      rowSelection && error == null ? /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-10" }) : null,
+                      visibleColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+                        "col",
                         {
-                          ref: selectAllRef,
-                          type: "checkbox",
-                          "aria-label": "Select all visible rows",
-                          checked: allVisibleSelected,
-                          disabled: !!selectedScope || selectableVisibleRows.length === 0,
-                          onChange: toggleVisibleSelection,
-                          className: "size-3.5 rounded border-border accent-primary"
-                        }
-                      )
-                    }
-                  ) : null,
-                  visibleColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsxs(
-                    "th",
-                    {
-                      className: utils.cn(
-                        "group/header relative whitespace-nowrap font-medium",
-                        DATA_TABLE_HEADER_DENSITY_CLASS,
-                        alignmentClass(column.align),
-                        resizableColumns && column.resizable !== false && "select-none",
-                        column.headerClassName
-                      ),
-                      onContextMenu: (event) => openHeaderColumnMenu(event, column),
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs(
-                          "div",
-                          {
-                            className: utils.cn(
-                              "flex min-w-0 items-center gap-1",
-                              headerAlignmentClass(column.align),
-                              resizableColumns && column.resizable !== false && "pr-2"
-                            ),
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0", children: column.sortable === false || pageLocalSort ? /* @__PURE__ */ jsxRuntime.jsx(
-                                "span",
-                                {
-                                  ...pageLocalSort && column.sortable !== false ? {
-                                    title: "Sorting is served by the query while this table is paged by the server"
-                                  } : {},
-                                  children: column.label
-                                }
-                              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                                SortableHeader.SortableHeader,
-                                {
-                                  active: (sort == null ? void 0 : sort.key) === column.key,
-                                  ...(sort == null ? void 0 : sort.key) === column.key ? { dir: sort.dir } : {},
-                                  ...column.align ? { align: column.align } : {},
-                                  onClick: () => toggle(column.key),
-                                  children: column.label
-                                }
-                              ) }),
-                              showHeaderFilterControls && (headerFilterByColumn.has(column.key) || (columnTimeRange == null ? void 0 : columnTimeRange.key) === column.key) && /* @__PURE__ */ jsxRuntime.jsx(
-                                HeaderFilterButton,
+                          style: error == null ? columnStyle(column, columnWidths, pinnedColumnWidths) : void 0,
+                          className: column.shrink && !column.grow && error == null ? "w-px" : void 0
+                        },
+                        column.key
+                      ))
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_var(--tw-shadow-color)] shadow-border", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      "tr",
+                      {
+                        ref: headRowRef,
+                        className: "border-b border-border text-xs text-muted-foreground",
+                        children: [
+                          rowSelection && error == null ? /* @__PURE__ */ jsxRuntime.jsx(
+                            "th",
+                            {
+                              className: utils.cn(
+                                "w-10 text-center",
+                                DATA_TABLE_HEADER_DENSITY_CLASS
+                              ),
+                              children: /* @__PURE__ */ jsxRuntime.jsx(
+                                "input",
                                 {
-                                  column,
-                                  active: headerFilterByColumn.has(column.key) ? filterBarUtils.isFilterBarFilterActive(
-                                    headerFilterByColumn.get(column.key)
-                                  ) : Boolean(
-                                    (columnTimeRange == null ? void 0 : columnTimeRange.range.from) || (columnTimeRange == null ? void 0 : columnTimeRange.range.to)
-                                  ),
-                                  onOpen: (event) => openHeaderFilterMenu(event, column.key)
+                                  ref: selectAllRef,
+                                  type: "checkbox",
+                                  "aria-label": "Select all visible rows",
+                                  checked: allVisibleSelected,
+                                  disabled: !!selectedScope || selectableVisibleRows.length === 0,
+                                  onChange: toggleVisibleSelection,
+                                  className: "size-3.5 rounded border-border accent-primary"
                                 }
                               )
-                            ]
-                          }
-                        ),
-                        resizableColumns && column.resizable !== false && /* @__PURE__ */ jsxRuntime.jsx(
-                          "span",
-                          {
-                            role: "separator",
-                            "aria-label": `Resize ${labelText(column)} column`,
-                            "aria-orientation": "vertical",
-                            className: "absolute right-0 top-0 hidden h-full w-3 cursor-col-resize touch-none items-center justify-center border-r border-border/70 bg-gradient-to-l from-border/30 to-transparent transition-colors hover:border-primary hover:from-primary/20 md:flex",
-                            onClick: (event) => {
-                              event.preventDefault();
-                              event.stopPropagation();
+                            }
+                          ) : null,
+                          visibleColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsxs(
+                            "th",
+                            {
+                              className: utils.cn(
+                                "group/header relative whitespace-nowrap font-medium",
+                                DATA_TABLE_HEADER_DENSITY_CLASS,
+                                alignmentClass(column.align),
+                                resizableColumns && column.resizable !== false && "select-none",
+                                column.headerClassName
+                              ),
+                              onContextMenu: (event) => openHeaderColumnMenu(event, column),
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsxs(
+                                  "div",
+                                  {
+                                    className: utils.cn(
+                                      "flex min-w-0 items-center gap-1",
+                                      headerAlignmentClass(column.align),
+                                      resizableColumns && column.resizable !== false && "pr-2"
+                                    ),
+                                    children: [
+                                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0", children: column.sortable === false || pageLocalSort ? /* @__PURE__ */ jsxRuntime.jsx(
+                                        "span",
+                                        {
+                                          ...pageLocalSort && column.sortable !== false ? {
+                                            title: "Sorting is served by the query while this table is paged by the server"
+                                          } : {},
+                                          children: column.label
+                                        }
+                                      ) : /* @__PURE__ */ jsxRuntime.jsx(
+                                        SortableHeader.SortableHeader,
+                                        {
+                                          active: (sort == null ? void 0 : sort.key) === column.key,
+                                          ...(sort == null ? void 0 : sort.key) === column.key ? { dir: sort.dir } : {},
+                                          ...column.align ? { align: column.align } : {},
+                                          onClick: () => toggle(column.key),
+                                          children: column.label
+                                        }
+                                      ) }),
+                                      showHeaderFilterControls && (headerFilterByColumn.has(column.key) || (columnTimeRange == null ? void 0 : columnTimeRange.key) === column.key) && /* @__PURE__ */ jsxRuntime.jsx(
+                                        HeaderFilterButton,
+                                        {
+                                          column,
+                                          active: headerFilterByColumn.has(column.key) ? filterBarUtils.isFilterBarFilterActive(
+                                            headerFilterByColumn.get(column.key)
+                                          ) : Boolean(
+                                            (columnTimeRange == null ? void 0 : columnTimeRange.range.from) || (columnTimeRange == null ? void 0 : columnTimeRange.range.to)
+                                          ),
+                                          onOpen: (event) => openHeaderFilterMenu(event, column.key)
+                                        }
+                                      )
+                                    ]
+                                  }
+                                ),
+                                resizableColumns && column.resizable !== false && /* @__PURE__ */ jsxRuntime.jsx(
+                                  "span",
+                                  {
+                                    role: "separator",
+                                    "aria-label": `Resize ${labelText(column)} column`,
+                                    "aria-orientation": "vertical",
+                                    className: "absolute right-0 top-0 hidden h-full w-3 cursor-col-resize touch-none items-center justify-center border-r border-border/70 bg-gradient-to-l from-border/30 to-transparent transition-colors hover:border-primary hover:from-primary/20 md:flex",
+                                    onClick: (event) => {
+                                      event.preventDefault();
+                                      event.stopPropagation();
+                                    },
+                                    onDoubleClick: (event) => autoFitColumn(event, column),
+                                    onMouseDown: (event) => startColumnResize(event, column),
+                                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                                      "span",
+                                      {
+                                        "aria-hidden": true,
+                                        className: "h-4 w-0.5 rounded-full bg-border transition-colors group-hover/header:bg-primary/70"
+                                      }
+                                    )
+                                  }
+                                )
+                              ]
                             },
-                            onDoubleClick: (event) => autoFitColumn(event, column),
-                            onMouseDown: (event) => startColumnResize(event, column),
-                            children: /* @__PURE__ */ jsxRuntime.jsx(
-                              "span",
-                              {
-                                "aria-hidden": true,
-                                className: "h-4 w-0.5 rounded-full bg-border transition-colors group-hover/header:bg-primary/70"
-                              }
-                            )
-                          }
-                        )
-                      ]
-                    },
-                    column.key
-                  ))
-                ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
-                  error != null ? /* @__PURE__ */ jsxRuntime.jsx(
-                    DataTableErrorRow,
-                    {
-                      colSpan: visibleColumns.length,
-                      error
-                    }
-                  ) : loading$1 && visibleSorted.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-                    DataTableLoadingRows,
-                    {
-                      columns: visibleColumns,
-                      rowCount: loadingRowCount,
-                      message: loadingMessage,
-                      selection: !!rowSelection
-                    }
-                  ) : filteredRows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "td",
-                    {
-                      colSpan: visibleColumns.length + (rowSelection ? 1 : 0),
-                      className: "px-4 py-10 text-center text-sm text-muted-foreground",
-                      children: emptyMessage
-                    }
-                  ) }) : rowStream.map((item) => {
-                    var _a2;
-                    if (item.kind === "group") {
-                      return /* @__PURE__ */ jsxRuntime.jsx(
-                        DataTableGroupHeaderRow,
+                            column.key
+                          ))
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("tbody", { ref: virtual.setTbodyEl, children: [
+                      error != null ? /* @__PURE__ */ jsxRuntime.jsx(
+                        DataTableErrorRow,
+                        {
+                          colSpan: visibleColumns.length,
+                          error
+                        }
+                      ) : loading$1 && visibleSorted.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                        DataTableLoadingRows,
+                        {
+                          columns: visibleColumns,
+                          rowCount: loadingRowCount,
+                          message: loadingMessage,
+                          selection: !!rowSelection
+                        }
+                      ) : filteredRows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "td",
                         {
-                          label: item.group.label,
-                          meta: item.group.meta,
-                          metaAlign: (effectiveGrouping == null ? void 0 : effectiveGrouping.metaAlign) ?? "end",
-                          ...(effectiveGrouping == null ? void 0 : effectiveGrouping.metaClassName) ? { metaClassName: effectiveGrouping.metaClassName } : {},
-                          count: item.group.records.length,
                           colSpan: visibleColumns.length + (rowSelection ? 1 : 0),
-                          collapsed: item.group.collapsed,
-                          onToggleCollapsed: () => setCollapseStateByMode((current) => {
-                            var _a3;
-                            return {
-                              ...current,
-                              [collapseStateKey]: {
-                                ...current[collapseStateKey],
-                                groups: {
-                                  ...(_a3 = current[collapseStateKey]) == null ? void 0 : _a3.groups,
-                                  [item.group.key]: !item.group.collapsed
-                                }
-                              }
-                            };
-                          }),
-                          ...rowSelection ? {
-                            selection: {
-                              selectableCount: item.group.records.filter(
-                                (record2) => {
-                                  var _a3;
-                                  return ((_a3 = rowSelection.isRowSelectable) == null ? void 0 : _a3.call(
-                                    rowSelection,
-                                    record2.row
-                                  )) ?? true;
-                                }
-                              ).length,
-                              selectedCount: selectedScope ? item.group.records.filter(
-                                (record2) => {
-                                  var _a3;
-                                  return ((_a3 = rowSelection.isRowSelectable) == null ? void 0 : _a3.call(
-                                    rowSelection,
-                                    record2.row
-                                  )) ?? true;
-                                }
-                              ).length : item.group.records.filter(
-                                (record2) => {
-                                  var _a3;
-                                  return (((_a3 = rowSelection.isRowSelectable) == null ? void 0 : _a3.call(
-                                    rowSelection,
-                                    record2.row
-                                  )) ?? true) && selectedRowIDs.has(record2.id);
-                                }
-                              ).length,
-                              disabled: !!selectedScope,
-                              onToggle: () => toggleGroupSelection(item.group.records)
+                          className: "px-4 py-10 text-center text-sm text-muted-foreground",
+                          children: emptyMessage
+                        }
+                      ) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                        virtual.enabled && virtual.spacers.top > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, "data-virtual-spacer": "top", children: /* @__PURE__ */ jsxRuntime.jsx(
+                          "td",
+                          {
+                            colSpan: visibleColumns.length + (rowSelection ? 1 : 0),
+                            style: {
+                              height: virtual.spacers.top,
+                              padding: 0,
+                              border: 0
                             }
-                          } : {}
-                        },
-                        `group:${item.group.key}`
-                      );
-                    }
-                    const record = item.record;
-                    const href = getRowHref == null ? void 0 : getRowHref(record.row);
-                    const expanded = expandedRows[record.id] ?? false;
-                    const expandedContent = (renderExpandedRow == null ? void 0 : renderExpandedRow(record.row, {
-                      columns: effectiveColumns,
-                      visibleColumns,
-                      filterActionsByColumn
-                    })) ?? null;
-                    const expandable = expandedContent !== null;
-                    const expandsInline = expandable && detailStyle === "row";
-                    const opensDialog = expandable && detailStyle === "dialog";
-                    const rowClickEnabled = (isRowClickable == null ? void 0 : isRowClickable(record.row)) ?? !!onRowClick;
-                    const rowSelectable = ((_a2 = rowSelection == null ? void 0 : rowSelection.isRowSelectable) == null ? void 0 : _a2.call(rowSelection, record.row)) ?? true;
-                    const selectionClickEnabled = !!(rowSelection == null ? void 0 : rowSelection.toggleOnRowClick) && rowSelectable && !selectedScope;
-                    const clickable = !!href || rowClickEnabled || expandable || selectionClickEnabled;
-                    const activateRow = () => {
-                      if (selectionClickEnabled) toggleRowSelection(record);
-                      if (expandsInline) {
-                        setExpandedRows((current) => ({
-                          ...current,
-                          [record.id]: !current[record.id]
-                        }));
-                      }
-                      if (opensDialog) setDetailRow(record);
-                      if (rowClickEnabled) onRowClick == null ? void 0 : onRowClick(record.row);
-                    };
-                    return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs(
-                        "tr",
-                        {
-                          className: utils.cn(
-                            "relative border-b border-border/60 align-top",
-                            clickable && "cursor-pointer hover:bg-accent/40",
-                            clickable && !href && "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-                            (selectedScope && rowSelectable || selectedRowIDs.has(record.id)) && "bg-accent/50",
-                            getRowClassName == null ? void 0 : getRowClassName(record.row)
-                          ),
-                          tabIndex: clickable && !href ? 0 : void 0,
-                          onClick: activateRow,
-                          onKeyDown: (event) => {
-                            if (href || event.target !== event.currentTarget)
-                              return;
-                            if (event.key !== "Enter" && event.key !== " ")
-                              return;
-                            event.preventDefault();
-                            activateRow();
-                          },
-                          children: [
-                            rowSelection ? /* @__PURE__ */ jsxRuntime.jsx(
-                              "td",
+                          }
+                        ) }),
+                        renderedStream.map(({ item, index }) => {
+                          var _a2;
+                          const rowHooks = virtual.enabled ? {
+                            ref: virtual.virtualizer.measureElement,
+                            "data-index": index
+                          } : {};
+                          if (item.kind === "expansion") {
+                            return /* @__PURE__ */ jsxRuntime.jsx(
+                              "tr",
                               {
-                                className: utils.cn(
-                                  // relative z-10 keeps the checkbox above the row's
-                                  // stretched-link overlay so it stays clickable.
-                                  "relative z-10 w-10 text-center",
-                                  DATA_TABLE_CELL_DENSITY_CLASS
-                                ),
-                                onClick: (event) => event.stopPropagation(),
+                                ...rowHooks,
                                 children: /* @__PURE__ */ jsxRuntime.jsx(
-                                  "input",
+                                  "td",
                                   {
-                                    type: "checkbox",
-                                    "aria-label": `Select row ${record.id}`,
-                                    checked: !!selectedScope && rowSelectable || selectedRowIDs.has(record.id),
-                                    disabled: !!selectedScope || !rowSelectable,
-                                    onChange: () => toggleRowSelection(record),
-                                    className: "size-3.5 rounded border-border accent-primary"
+                                    colSpan: visibleColumns.length + (rowSelection ? 1 : 0),
+                                    className: "bg-muted/40 p-density-3",
+                                    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-border bg-background p-density-3", children: item.content })
                                   }
                                 )
-                              }
-                            ) : null,
-                            visibleColumns.map((column, index) => {
-                              var _a3;
-                              const rawValue = dataTableUtils.resolveColumnValue(
-                                record.row,
-                                column
-                              );
-                              let content = column.render ? column.render(rawValue, record.row) : formatCell(rawValue);
-                              const serverFilterValue = resolveServerFilterValue(
-                                rawValue,
-                                record.row,
-                                column
-                              );
-                              const serverFilterDisplayValue = resolveCellFilterDisplayValue(
-                                rawValue,
-                                record.row,
-                                column
-                              );
-                              const hasCellFilterActions = !!column.filterKey && !!onCellFilterChange && serverFilterValue !== void 0;
-                              if (column.filterKey && onCellFilterChange && serverFilterValue !== void 0) {
-                                const filterKey = column.filterKey;
-                                content = /* @__PURE__ */ jsxRuntime.jsx(
-                                  CellFilterActions.CellFilterActions,
-                                  {
-                                    value: serverFilterValue,
-                                    ...serverFilterDisplayValue !== void 0 ? { displayValue: serverFilterDisplayValue } : {},
-                                    mode: (_a3 = cellFilters == null ? void 0 : cellFilters[filterKey]) == null ? void 0 : _a3[serverFilterValue],
-                                    onChange: (mode) => onCellFilterChange({
-                                      key: filterKey,
-                                      value: serverFilterValue,
-                                      mode
-                                    }),
-                                    children: content
+                              },
+                              `expand:${item.record.id}`
+                            );
+                          }
+                          if (item.kind === "group") {
+                            return /* @__PURE__ */ jsxRuntime.jsx(
+                              DataTableGroupHeaderRow,
+                              {
+                                ...virtual.enabled ? {
+                                  rowRef: virtual.virtualizer.measureElement,
+                                  dataIndex: index
+                                } : {},
+                                label: item.group.label,
+                                meta: item.group.meta,
+                                metaAlign: (effectiveGrouping == null ? void 0 : effectiveGrouping.metaAlign) ?? "end",
+                                ...(effectiveGrouping == null ? void 0 : effectiveGrouping.metaClassName) ? { metaClassName: effectiveGrouping.metaClassName } : {},
+                                count: item.group.records.length,
+                                colSpan: visibleColumns.length + (rowSelection ? 1 : 0),
+                                collapsed: item.group.collapsed,
+                                onToggleCollapsed: () => setCollapseStateByMode((current) => {
+                                  var _a3;
+                                  return {
+                                    ...current,
+                                    [collapseStateKey]: {
+                                      ...current[collapseStateKey],
+                                      groups: {
+                                        ...(_a3 = current[collapseStateKey]) == null ? void 0 : _a3.groups,
+                                        [item.group.key]: !item.group.collapsed
+                                      }
+                                    }
+                                  };
+                                }),
+                                ...rowSelection ? {
+                                  selection: {
+                                    selectableCount: item.group.records.filter(
+                                      (record2) => {
+                                        var _a3;
+                                        return ((_a3 = rowSelection.isRowSelectable) == null ? void 0 : _a3.call(
+                                          rowSelection,
+                                          record2.row
+                                        )) ?? true;
+                                      }
+                                    ).length,
+                                    selectedCount: selectedScope ? item.group.records.filter(
+                                      (record2) => {
+                                        var _a3;
+                                        return ((_a3 = rowSelection.isRowSelectable) == null ? void 0 : _a3.call(
+                                          rowSelection,
+                                          record2.row
+                                        )) ?? true;
+                                      }
+                                    ).length : item.group.records.filter(
+                                      (record2) => {
+                                        var _a3;
+                                        return (((_a3 = rowSelection.isRowSelectable) == null ? void 0 : _a3.call(
+                                          rowSelection,
+                                          record2.row
+                                        )) ?? true) && selectedRowIDs.has(record2.id);
+                                      }
+                                    ).length,
+                                    disabled: !!selectedScope,
+                                    onToggle: () => toggleGroupSelection(item.group.records)
                                   }
-                                );
-                              }
-                              if (column.kind === "tags" && filterActionsByColumn[column.key]) {
-                                content = /* @__PURE__ */ jsxRuntime.jsx(
-                                  TagList.TagActionsProvider,
+                                } : {}
+                              },
+                              `group:${item.group.key}`
+                            );
+                          }
+                          const record = item.record;
+                          const href = getRowHref == null ? void 0 : getRowHref(record.row);
+                          const expanded = expandedRows[record.id] ?? false;
+                          const expandedContent = (renderExpandedRow == null ? void 0 : renderExpandedRow(record.row, {
+                            columns: effectiveColumns,
+                            visibleColumns,
+                            filterActionsByColumn
+                          })) ?? null;
+                          const expandable = expandedContent !== null;
+                          const expandsInline = expandable && detailStyle === "row";
+                          const opensDialog = expandable && detailStyle === "dialog";
+                          const rowClickEnabled = (isRowClickable == null ? void 0 : isRowClickable(record.row)) ?? !!onRowClick;
+                          const rowSelectable = ((_a2 = rowSelection == null ? void 0 : rowSelection.isRowSelectable) == null ? void 0 : _a2.call(rowSelection, record.row)) ?? true;
+                          const selectionClickEnabled = !!(rowSelection == null ? void 0 : rowSelection.toggleOnRowClick) && rowSelectable && !selectedScope;
+                          const clickable = !!href || rowClickEnabled || expandable || selectionClickEnabled;
+                          const activateRow = () => {
+                            if (selectionClickEnabled) toggleRowSelection(record);
+                            if (expandsInline) {
+                              setExpandedRows((current) => ({
+                                ...current,
+                                [record.id]: !current[record.id]
+                              }));
+                            }
+                            if (opensDialog) setDetailRow(record);
+                            if (rowClickEnabled) onRowClick == null ? void 0 : onRowClick(record.row);
+                          };
+                          return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                            "tr",
+                            {
+                              ...rowHooks,
+                              "aria-expanded": expandsInline ? expanded : void 0,
+                              className: utils.cn(
+                                "relative border-b border-border/60 align-top",
+                                clickable && "cursor-pointer hover:bg-accent/40",
+                                clickable && !href && "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                                (selectedScope && rowSelectable || selectedRowIDs.has(record.id)) && "bg-accent/50",
+                                getRowClassName == null ? void 0 : getRowClassName(record.row)
+                              ),
+                              tabIndex: clickable && !href ? 0 : void 0,
+                              onClick: activateRow,
+                              onKeyDown: (event) => {
+                                if (href || event.target !== event.currentTarget)
+                                  return;
+                                if (event.key !== "Enter" && event.key !== " ")
+                                  return;
+                                event.preventDefault();
+                                activateRow();
+                              },
+                              children: [
+                                rowSelection ? /* @__PURE__ */ jsxRuntime.jsx(
+                                  "td",
                                   {
-                                    value: filterActionsByColumn[column.key],
-                                    children: content
+                                    className: utils.cn(
+                                      // relative z-10 keeps the checkbox above the row's
+                                      // stretched-link overlay so it stays clickable.
+                                      "relative z-10 w-10 text-center",
+                                      DATA_TABLE_CELL_DENSITY_CLASS
+                                    ),
+                                    onClick: (event) => event.stopPropagation(),
+                                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                                      "input",
+                                      {
+                                        type: "checkbox",
+                                        "aria-label": `Select row ${record.id}`,
+                                        checked: !!selectedScope && rowSelectable || selectedRowIDs.has(record.id),
+                                        disabled: !!selectedScope || !rowSelectable,
+                                        onChange: () => toggleRowSelection(record),
+                                        className: "size-3.5 rounded border-border accent-primary"
+                                      }
+                                    )
                                   }
-                                );
-                              }
-                              return /* @__PURE__ */ jsxRuntime.jsx(
-                                "td",
-                                {
-                                  className: utils.cn(
-                                    DATA_TABLE_CELL_DENSITY_CLASS,
-                                    alignmentClass(column.align),
-                                    column.cellClassName
-                                  ),
-                                  style: cellSizingStyle(
-                                    column,
-                                    columnWidths[column.key]
-                                  ),
-                                  children: /* @__PURE__ */ jsxRuntime.jsx(CellContent, { column, children: href && index === 0 ? (
-                                    // One real <a href> per row whose ::after
-                                    // overlay stretches across the whole (relative)
-                                    // row: right/middle-click give native "open in
-                                    // new tab", plain left-click routes client-side.
-                                    // The overlay paints over the cell, so a cell
-                                    // with filter actions lifts them above it —
-                                    // otherwise the link swallows the hover that
-                                    // reveals the include/exclude buttons.
-                                    renderLink({
-                                      to: href,
-                                      className: "hover:underline after:absolute after:inset-0 after:content-['']",
-                                      children: hasCellFilterActions ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 inline-flex min-w-0 items-center", children: content }) : content
-                                    })
-                                  ) : content })
-                                },
-                                column.key
-                              );
-                            })
-                          ]
-                        }
-                      ),
-                      expandsInline && expanded && expandedContent && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                                ) : null,
+                                visibleColumns.map((column, index2) => {
+                                  var _a3;
+                                  const rawValue = dataTableUtils.resolveColumnValue(
+                                    record.row,
+                                    column
+                                  );
+                                  let content = column.render ? column.render(rawValue, record.row) : formatCell(rawValue);
+                                  const serverFilterValue = resolveServerFilterValue(
+                                    rawValue,
+                                    record.row,
+                                    column
+                                  );
+                                  const serverFilterDisplayValue = resolveCellFilterDisplayValue(
+                                    rawValue,
+                                    record.row,
+                                    column
+                                  );
+                                  const hasCellFilterActions = !!column.filterKey && !!onCellFilterChange && serverFilterValue !== void 0;
+                                  if (column.filterKey && onCellFilterChange && serverFilterValue !== void 0) {
+                                    const filterKey = column.filterKey;
+                                    content = /* @__PURE__ */ jsxRuntime.jsx(
+                                      CellFilterActions.CellFilterActions,
+                                      {
+                                        value: serverFilterValue,
+                                        ...serverFilterDisplayValue !== void 0 ? { displayValue: serverFilterDisplayValue } : {},
+                                        mode: (_a3 = cellFilters == null ? void 0 : cellFilters[filterKey]) == null ? void 0 : _a3[serverFilterValue],
+                                        onChange: (mode) => onCellFilterChange({
+                                          key: filterKey,
+                                          value: serverFilterValue,
+                                          mode
+                                        }),
+                                        children: content
+                                      }
+                                    );
+                                  }
+                                  if (column.kind === "tags" && filterActionsByColumn[column.key]) {
+                                    content = /* @__PURE__ */ jsxRuntime.jsx(
+                                      TagList.TagActionsProvider,
+                                      {
+                                        value: filterActionsByColumn[column.key],
+                                        children: content
+                                      }
+                                    );
+                                  }
+                                  return /* @__PURE__ */ jsxRuntime.jsx(
+                                    "td",
+                                    {
+                                      className: utils.cn(
+                                        DATA_TABLE_CELL_DENSITY_CLASS,
+                                        alignmentClass(column.align),
+                                        column.cellClassName
+                                      ),
+                                      style: cellSizingStyle(
+                                        column,
+                                        columnWidths[column.key]
+                                      ),
+                                      children: /* @__PURE__ */ jsxRuntime.jsx(CellContent, { column, children: href && index2 === 0 ? (
+                                        // One real <a href> per row whose ::after
+                                        // overlay stretches across the whole (relative)
+                                        // row: right/middle-click give native "open in
+                                        // new tab", plain left-click routes client-side.
+                                        // The overlay paints over the cell, so a cell
+                                        // with filter actions lifts them above it —
+                                        // otherwise the link swallows the hover that
+                                        // reveals the include/exclude buttons.
+                                        renderLink({
+                                          to: href,
+                                          className: "hover:underline after:absolute after:inset-0 after:content-['']",
+                                          children: hasCellFilterActions ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 inline-flex min-w-0 items-center", children: content }) : content
+                                        })
+                                      ) : content })
+                                    },
+                                    column.key
+                                  );
+                                })
+                              ]
+                            }
+                          ) }, record.id);
+                        }),
+                        virtual.enabled && virtual.spacers.bottom > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, "data-virtual-spacer": "bottom", children: /* @__PURE__ */ jsxRuntime.jsx(
+                          "td",
+                          {
+                            colSpan: visibleColumns.length + (rowSelection ? 1 : 0),
+                            style: {
+                              height: virtual.spacers.bottom,
+                              padding: 0,
+                              border: 0
+                            }
+                          }
+                        ) })
+                      ] }),
+                      error == null && sentinelActive && /* @__PURE__ */ jsxRuntime.jsx("tr", { ref: infiniteSentinelRef, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
                         "td",
                         {
                           colSpan: visibleColumns.length + (rowSelection ? 1 : 0),
-                          className: "bg-muted/40 p-density-3",
-                          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-border bg-background p-density-3", children: expandedContent })
+                          className: "p-density-2 text-center text-xs text-muted-foreground",
+                          children: sentinelLabel
                         }
                       ) })
-                    ] }, record.id);
-                  }),
-                  error == null && sentinelActive && /* @__PURE__ */ jsxRuntime.jsx("tr", { ref: revealSentinelRef, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "td",
-                    {
-                      colSpan: visibleColumns.length + (rowSelection ? 1 : 0),
-                      className: "p-density-2 text-center text-xs text-muted-foreground",
-                      children: sentinelLabel
-                    }
-                  ) })
-                ] })
-              ] })
+                    ] })
+                  ]
+                }
+              )
             }
           )
         ] }),
@@ -1527,7 +1657,7 @@ function DataTableInner({
           {
             pagination,
             visibleRowCount: sorted.length,
-            infinite: infiniteEnabled
+            infinite: !!infinite
           }
         ) : null,
         detailStyle === "dialog" && renderExpandedRow && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1761,7 +1891,9 @@ function DataTableGroupHeaderRow({
   colSpan,
   collapsed,
   onToggleCollapsed,
-  selection
+  selection,
+  rowRef,
+  dataIndex
 }) {
   const allSelected = !!selection && selection.selectableCount > 0 && selection.selectedCount === selection.selectableCount;
   const someSelected = !!selection && selection.selectedCount > 0 && !allSelected;
@@ -1769,55 +1901,63 @@ function DataTableGroupHeaderRow({
   react.useEffect(() => {
     if (checkboxRef.current) checkboxRef.current.indeterminate = someSelected;
   }, [someSelected]);
-  return /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b border-border/60 bg-muted/40", children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, className: "px-density-2 py-density-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-    selection ? /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        ref: checkboxRef,
-        type: "checkbox",
-        "aria-label": `Select group ${typeof label === "string" ? label : count}`,
-        checked: allSelected,
-        disabled: selection.disabled || selection.selectableCount === 0,
-        onChange: selection.onToggle,
-        className: "size-3.5 rounded border-border accent-primary"
-      }
-    ) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        "aria-expanded": !collapsed,
-        onClick: onToggleCollapsed,
-        className: utils.cn(
-          "flex min-w-0 items-center gap-1.5 text-left text-sm font-semibold text-foreground hover:text-primary",
-          // `flex-1` is what pushes the meta to the trailing edge. Dropping
-          // it lets the meta sit right after the count instead.
-          metaAlign === "end" && "flex-1"
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Icon.Icon,
-            {
-              icon: collapsed ? UiChevronRight.UiChevronRight : UiChevronDown.UiChevronDown,
-              className: "shrink-0 text-muted-foreground"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 font-normal text-muted-foreground", children: count })
-        ]
-      }
-    ),
-    meta ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: utils.cn(
-          "shrink-0 text-sm text-muted-foreground",
-          metaClassName
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tr",
+    {
+      ref: rowRef,
+      "data-index": dataIndex,
+      className: "border-b border-border/60 bg-muted/40",
+      children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, className: "px-density-2 py-density-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        selection ? /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: checkboxRef,
+            type: "checkbox",
+            "aria-label": `Select group ${typeof label === "string" ? label : count}`,
+            checked: allSelected,
+            disabled: selection.disabled || selection.selectableCount === 0,
+            onChange: selection.onToggle,
+            className: "size-3.5 rounded border-border accent-primary"
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-expanded": !collapsed,
+            onClick: onToggleCollapsed,
+            className: utils.cn(
+              "flex min-w-0 items-center gap-1.5 text-left text-sm font-semibold text-foreground hover:text-primary",
+              // `flex-1` is what pushes the meta to the trailing edge. Dropping
+              // it lets the meta sit right after the count instead.
+              metaAlign === "end" && "flex-1"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Icon.Icon,
+                {
+                  icon: collapsed ? UiChevronRight.UiChevronRight : UiChevronDown.UiChevronDown,
+                  className: "shrink-0 text-muted-foreground"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 font-normal text-muted-foreground", children: count })
+            ]
+          }
         ),
-        children: meta
-      }
-    ) : null
-  ] }) }) });
+        meta ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: utils.cn(
+              "shrink-0 text-sm text-muted-foreground",
+              metaClassName
+            ),
+            children: meta
+          }
+        ) : null
+      ] }) })
+    }
+  );
 }
 function DataTableLoadingRows({
   columns,
@@ -2596,8 +2736,8 @@ function menuStateFromTrigger(event, columnKey) {
   };
   return columnKey ? { ...position, columnKey } : position;
 }
-function columnStyle(column, widths) {
-  const width = widths[column.key];
+function columnStyle(column, widths, pinned = {}) {
+  const width = widths[column.key] ?? pinned[column.key];
   return width ? { width: `${width}px` } : void 0;
 }
 function measureColumnContentWidth(table, columnIndex, column) {