@eifi1/ui-kit 0.48.0 → 0.48.2

package/dist/components/data-table.js

@@ -1,23 +1,14 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createElement } from "react";
 import { Fragment as Fragment2, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Card } from "./card.js";
 import { Spinner } from "./spinner.js";
 import { isTableOwnColumn, useRowActionColumn } from "./data-table-row-actions.js";
 import { useColumnResize } from "./data-table-resize.js";
 import { useRangeSelection } from "./data-table-selection.js";
-import {
-  RowLink,
-  cleanAttrs,
-  columnLabel,
-  fromOutside,
-  fromOwnControl,
-  logicalAlign,
-  resolveDataTableLabels,
-  splitCellProps
-} from "./data-table-shared.js";
-import { MobileFilters, MobileRow, MobileSelectBar, MobileSort, StackedFields } from "./data-table-mobile.js";
+import { columnLabel, logicalAlign, resolveDataTableLabels } from "./data-table-shared.js";
+import { MobileFilters, MobileSelectBar, MobileSort, StackedFields } from "./data-table-mobile.js";
+import { DataTableMobileRow, DataTableRow } from "./data-table-row.js";
 import { DataTableHead } from "./data-table-head.js";
 import { DataTableLeadingRow } from "./data-table-leading-row.js";
 import {
@@ -27,6 +18,7 @@ import {
   groupRows,
   useGroupBandTops
 } from "./data-table-groups.js";
+import { VIRTUAL_SELECT_COL, rowNavTarget, useRowWindow } from "./data-table-virtual.js";
 import { ColumnSettingsPanel } from "./data-table-column-settings.js";
 import { useLargeText } from "../hooks/use-large-text.js";
 import { cn } from "../lib/cn.js";
@@ -48,21 +40,11 @@ const DEFAULT_DATA_TABLE_SORT_LABELS = {
   sortDescending: DEFAULT_DATA_TABLE_LABELS.sortDescending
 };
 const flipDir = (d) => d === "asc" ? "desc" : "asc";
-function moveRowFocus(from, key) {
-  if (!(key in ROW_NAV_KEYS)) return false;
-  const table = from.closest("table");
-  if (!table) return false;
-  const rows = Array.from(table.tBodies).flatMap(
-    (body) => Array.from(body.children).filter(
-      (el) => el instanceof HTMLElement && el.hasAttribute("data-row-nav")
-    )
-  );
-  const i = rows.indexOf(from);
-  const target = key === "ArrowDown" ? rows[i + 1] : key === "ArrowUp" ? rows[i - 1] : key === "Home" ? rows[0] : key === "End" ? rows[rows.length - 1] : void 0;
-  target?.focus();
-  return true;
-}
-const ROW_NAV_KEYS = { ArrowDown: 1, ArrowUp: 1, Home: 1, End: 1 };
+const NO_BANDS = [];
+const BAND_1 = [1];
+const BAND_2 = [2];
+const BAND_1_2 = [1, 2];
+const NO_VIRTUAL_OPTIONS = {};
 import { DEFAULT_PERSIST_PREFIX, useTableState } from "./use-table-state.js";
 import { useMobileReveal } from "./use-mobile-reveal.js";
 import { GROW_CELL_CLASS, GROW_PEER_CELL_CLASS, useColumnFit } from "./data-table-fit.js";
@@ -84,6 +66,7 @@ function DataTable({
   fillHeight = false,
   maxBodyHeight = "calc(100dvh - 12rem)",
   serverPagination,
+  serverRows: serverRowsProp,
   filters: filtersProp,
   onFiltersChange,
   sorts: sortsProp,
@@ -108,6 +91,7 @@ function DataTable({
   leadingRowSticky = false,
   groupBy,
   loadMore,
+  virtualize = false,
   density = "comfortable",
   sortCycle = "tri",
   chrome = "full",
@@ -129,6 +113,7 @@ function DataTable({
   const resizable = resizableProp ?? !minimal;
   const multiSort = multiSortProp ?? !minimal;
   const isServer = !!serverPagination;
+  const serverRows = isServer || (serverRowsProp ?? !!loadMore);
   const isLoading = !!serverPagination?.isLoading;
   const labelOverrides = useKitLabelOverrides("dataTable");
   const providerStorageKeyPrefix = useKitTableStorageKeyPrefix();
@@ -210,7 +195,7 @@ function DataTable({
     return map;
   }, [columnSig, selectOptionsSig, rows]);
   const filtered = useMemo(() => {
-    if (isServer) return rows;
+    if (serverRows) return rows;
     let result = rows;
     for (const col of columns) {
       const state = filters[col.key];
@@ -218,9 +203,9 @@ function DataTable({
       result = result.filter((row) => rowMatches(col, row, state, locale));
     }
     return result;
-  }, [rows, columnSig, filters, isServer, locale]);
+  }, [rows, columnSig, filters, serverRows, locale]);
   const sorted = useMemo(() => {
-    if (isServer) return filtered;
+    if (serverRows) return filtered;
     const chain = sorts.map((s) => {
       const col = columns.find((c) => c.key === s.key);
       return col?.sortBy ? { sortBy: col.sortBy, dir: s.dir } : null;
@@ -240,8 +225,8 @@ function DataTable({
       return 0;
     });
     return copy;
-  }, [filtered, sorts, columnSig, isServer]);
-  const unpaged = !isServer && (!paginated || !!loadMore);
+  }, [filtered, sorts, columnSig, serverRows]);
+  const unpaged = !isServer && (!paginated || !!loadMore || serverRows);
   const effectivePageSize = isServer ? serverPagination.pageSize : unpaged || pageSize === Infinity ? sorted.length || 1 : pageSize;
   const paginationTotal = isServer ? serverPagination.total : sorted.length;
   const paginationPageSize = isServer ? serverPagination.pageSize : pageSize;
@@ -289,7 +274,7 @@ function DataTable({
     setPage(0);
   };
   const clearAllFilters = () => {
-    const keys = columns.filter((col) => !isServer || onFiltersChange ? resolveFilter(col) : null).map((col) => col.key);
+    const keys = columns.filter((col) => !serverRows || onFiltersChange ? resolveFilter(col) : null).map((col) => col.key);
     if (!keys.length) return;
     if (onFiltersChange) {
       const rest = { ...filters };
@@ -309,20 +294,23 @@ function DataTable({
   useEffect(() => {
     if (announcedFilterKey.current === filterKey) return;
     announcedFilterKey.current = filterKey;
-    if (isServer) return;
+    if (serverRows) return;
     announce(labels.filterResults(filtered.length, rows.length));
-  }, [filterKey, filtered.length, rows.length, isServer, announce, labels]);
+  }, [filterKey, filtered.length, rows.length, serverRows, announce, labels]);
   const goToPage = (p) => {
     if (isServer) serverPagination.onPageChange(p);
     else setPage(p);
     announce(labels.pageChanged(p + 1, totalPages));
   };
+  const large = useLargeText();
   const { autoHidden, keep: keepColumn } = useColumnFit({
     columns,
     hiddenCols,
     headRefs,
     scroller: () => desktopScroller.current,
-    enabled: !usePhoneLayout()
+    enabled: !usePhoneLayout(),
+    // Measured only when one of these changed (0.48.2): not on a ticked box.
+    content: [slice, columns, hiddenCols, widths, density, large]
   });
   const visibleColumns = useMemo(
     () => columns.filter((c) => !hiddenCols.has(c.key) && !autoHidden.has(c.key)),
@@ -362,11 +350,13 @@ function DataTable({
     return () => ro.disconnect();
   }, [measuresVisibleWidth]);
   const edgeFadeProps = useEdgeFade(desktopScroller, edgeFade && isMdUp);
-  const mobileColumns = visibleColumns.filter((c) => !c.mobileHidden);
+  const mobileColumns = useMemo(() => visibleColumns.filter((c) => !c.mobileHidden), [visibleColumns]);
   const mobilePrimaryCol = mobileColumns.find((c) => c.mobilePrimary) ?? mobileColumns[0] ?? null;
-  const mobileSecondaryColumns = mobileColumns.filter((c) => c !== mobilePrimaryCol);
+  const mobileSecondaryColumns = useMemo(
+    () => mobileColumns.filter((c) => c !== mobilePrimaryCol),
+    [mobileColumns, mobilePrimaryCol]
+  );
   const mobileDetailColumns = mobileDetailsInRow ? visibleColumns.filter((c) => c.mobileHidden) : [];
-  const large = useLargeText();
   const opensRow = !!expandedRow || mobileDetailColumns.length > 0;
   const openedRowContent = (row) => {
     const detail = expandedRow?.(row) ?? null;
@@ -415,7 +405,7 @@ function DataTable({
     if (!anySelected) setPhoneSelectMode(false);
   }
   const phoneSelecting = !!selection && !isMdUp && (phoneSelectMode || anySelected);
-  const { selectionAnchor, rangeClick, canSelect, selectRange } = useRangeSelection({
+  const { canSelect, selectRange, setAnchor, markRangeClick, takeRangeClick } = useRangeSelection({
     selection,
     slice,
     rowKey
@@ -423,49 +413,73 @@ function DataTable({
   const rowsFocusable = !!onRowClick;
   const [focusRowKey, setFocusRowKey] = useState(null);
   const tabRowKey = focusRowKey !== null && slice.some((r) => rowKey(r) === focusRowKey) ? focusRowKey : slice.length ? rowKey(slice[0]) : null;
+  const virtualOn = !!virtualize && isMdUp && slice.length > 0;
+  const focusRowRef = useRef(void 0);
+  const latestRowCtx = {
+    moveFocus: virtualOn ? (from, key) => {
+      const target = rowNavTarget(from, key, slice.length);
+      if (target === null) return false;
+      focusRowRef.current?.(target);
+      return true;
+    } : void 0,
+    onRowClick,
+    onToggle: selection?.onToggle,
+    isSelected: (row) => !!selection?.isSelected(row),
+    canSelect,
+    selectRange,
+    setAnchor,
+    markRangeClick,
+    takeRangeClick,
+    setFocusRowKey,
+    onLongPress: (row) => {
+      setPhoneSelectMode(true);
+      setAnchor(rowKey(row));
+      if (selection && !selection.isSelected(row)) selection.onToggle(row, true);
+    }
+  };
+  const rowCtx = useRef(latestRowCtx);
+  useLayoutEffect(() => {
+    rowCtx.current = latestRowCtx;
+  });
   const mobileDialogRow = mobileExpandAsDialog && !isMdUp ? mobileSlice.find((r) => isExpanded?.(r)) : void 0;
   const mobileDialogContent = mobileDialogRow ? openedRowContent(mobileDialogRow) : null;
   const dialogOpen = !!(mobileDialogRow && mobileDialogContent);
   const closeDialog = () => {
     if (mobileDialogRow) onRowClick?.(mobileDialogRow);
   };
-  const renderMobileRow = (row) => /* @__PURE__ */ jsx(
-    MobileRow,
-    {
-      row,
-      isExpanded,
-      openedRowContent,
-      opensRow,
-      rowClassName,
-      rowAttributes,
-      onRowClick,
-      rowHref,
-      swipeActionsFor,
-      mobileDir,
-      mobileCardLinkable,
-      mobileCard,
-      mobilePrimaryCol,
-      mobileSecondaryColumns,
-      mobileExpandAsDialog,
-      compact,
-      large,
-      select: selection ? {
-        active: phoneSelecting,
+  const renderMobileRow = (row) => {
+    const key = rowKey(row);
+    const expanded = isExpanded?.(row) ?? false;
+    return /* @__PURE__ */ jsx(
+      DataTableMobileRow,
+      {
+        ctx: rowCtx,
+        rowKey: key,
+        row,
+        expanded,
+        expansion: expanded ? openedRowContent(row) : null,
+        opensRow,
+        className: rowClassName?.(row),
+        attrs: rowAttributes?.(row),
+        interactive: !!onRowClick,
+        href: mobileCardLinkable ? rowHref?.(row) : void 0,
+        swipeActionsFor,
+        mobileDir,
+        mobileCardLinkable,
+        mobileCard,
+        mobilePrimaryCol,
+        mobileSecondaryColumns,
+        mobileExpandAsDialog,
+        compact,
+        large,
+        selectionOn: !!selection,
+        selectActive: phoneSelecting,
         selectable: canSelect(row),
-        selected: selection.isSelected(row),
-        onToggle: (checked) => {
-          selectionAnchor.current = rowKey(row);
-          selection.onToggle(row, checked);
-        },
-        onLongPress: () => {
-          setPhoneSelectMode(true);
-          selectionAnchor.current = rowKey(row);
-          if (!selection.isSelected(row)) selection.onToggle(row, true);
-        }
-      } : null
-    },
-    rowKey(row)
-  );
+        selected: !!selection && selection.isSelected(row)
+      },
+      key
+    );
+  };
   const tableRef = useRef(null);
   const desktopGroups = isMdUp && levels.length > 0 ? groupRows(slice, levels) : null;
   const bandTops = useGroupBandTops(
@@ -473,6 +487,51 @@ function DataTable({
     !!desktopGroups,
     `${levels.length}:${leadingRowSticky && !!leadingRow}:${desktopGroups?.[0]?.key ?? ""}`
   );
+  const virtualGroups = [];
+  const virtualBands = [];
+  if (virtualOn) {
+    if (!desktopGroups) virtualGroups.push({ start: 0, end: slice.length, bands: NO_BANDS, first: 0 });
+    else
+      for (const g1 of desktopGroups) {
+        const first = virtualGroups.length;
+        if (!g1.children) {
+          virtualGroups.push({ start: g1.start, end: g1.start + g1.rows.length, bands: BAND_1, first });
+          virtualBands.push({ g1, g2: null });
+          continue;
+        }
+        g1.children.forEach((g2, j) => {
+          virtualGroups.push({ start: g2.start, end: g2.start + g2.rows.length, bands: j === 0 ? BAND_1_2 : BAND_2, first });
+          virtualBands.push({ g1, g2 });
+        });
+      }
+  }
+  const expandedIndices = [];
+  if (virtualOn && isExpanded && expandedRow) slice.forEach((r, i) => isExpanded(r) && expandedIndices.push(i));
+  const virtualColKeys = [...selection ? [VIRTUAL_SELECT_COL] : [], ...visibleColumns.map((c) => c.key)];
+  const virtualLockable = new Set(
+    virtualColKeys.filter((k) => !widths[k] && !visibleColumns.some((c) => c.key === k && c.grow))
+  );
+  const rowWindow = useRowWindow({
+    enabled: virtualOn,
+    rows: slice,
+    rowKey,
+    groups: virtualGroups,
+    expanded: expandedIndices,
+    pinnedKeys: [tabRowKey],
+    scrollerRef: desktopScroller,
+    tableRef,
+    options: typeof virtualize === "object" ? virtualize : NO_VIRTUAL_OPTIONS,
+    compact,
+    rowsBefore: 1 + (leadingRow ? 1 : 0),
+    rowsAfter: showFooter ? 1 : 0,
+    colKeys: virtualColKeys,
+    lockable: virtualLockable,
+    resetKey: `${Object.entries(widths).join(";")}|${density}|${large}|${slice.length}:${slice.length ? `${rowKey(slice[0])}:${rowKey(slice[slice.length - 1])}` : ""}`
+  });
+  const focusRowAt = rowWindow?.focusRow;
+  useLayoutEffect(() => {
+    focusRowRef.current = focusRowAt;
+  }, [focusRowAt]);
   const mobileLevel = typeof mobileGroupBy === "function" ? null : mobileGroupBy ?? null;
   const mobileKey = typeof mobileGroupBy === "function" ? mobileGroupBy : mobileGroupBy?.key;
   const mobileGroups = mobileKey ? mobileSlice.reduce((acc, row) => {
@@ -515,13 +574,13 @@ function DataTable({
           }
         ),
         !isMdUp && /* @__PURE__ */ jsxs("div", { ref: mobileRootRef, className: cn(fillHeight && "flex min-h-0 flex-1 flex-col"), children: [
-          (!isServer || onFiltersChange) && /* @__PURE__ */ jsx(
+          (!serverRows || onFiltersChange) && /* @__PURE__ */ jsx(
             MobileFilters,
             {
               columns,
               filters,
               selectOptionsByKey,
-              isServer,
+              isServer: serverRows,
               hasFilterCallback: !!onFiltersChange,
               onSetFilter: setFilterValue,
               onClearFilter: clearFilter,
@@ -533,7 +592,7 @@ function DataTable({
           mobileSort && /* @__PURE__ */ jsx(
             MobileSort,
             {
-              columns: visibleColumns.filter((c) => (!isServer || !!onSortsChange) && !!c.sortBy),
+              columns: visibleColumns.filter((c) => (!serverRows || !!onSortsChange) && !!c.sortBy),
               sorts,
               sortCycle,
               compact,
@@ -702,7 +761,13 @@ function DataTable({
                       "data-fit-grow": growDrawn ? "" : void 0,
                       "aria-label": labels.table,
                       "aria-busy": isLoading || void 0,
+                      "aria-rowcount": rowWindow?.rowCount,
+                      "data-virtualized": rowWindow ? "" : void 0,
                       children: [
+                        rowWindow && /* @__PURE__ */ jsx("colgroup", { children: virtualColKeys.map((key) => {
+                          const w = rowWindow.colWidths?.[key];
+                          return /* @__PURE__ */ jsx("col", { style: w !== void 0 ? { width: w } : void 0 }, key);
+                        }) }),
                         /* @__PURE__ */ jsx(
                           DataTableHead,
                           {
@@ -711,7 +776,7 @@ function DataTable({
                             compact,
                             labels,
                             locale,
-                            isServer,
+                            isServer: serverRows,
                             hasSortCallback: !!onSortsChange,
                             hasFilterCallback: !!onFiltersChange,
                             sorts,
@@ -727,154 +792,58 @@ function DataTable({
                             clearFilter,
                             startResize,
                             moveResize,
-                            finishResize
+                            finishResize,
+                            ariaRowIndex: rowWindow ? 1 : void 0,
+                            lockedWidths: rowWindow?.colWidths,
+                            selectionLockKey: VIRTUAL_SELECT_COL
                           }
                         ),
                         (() => {
                           const bodyClass = cn(isLoading && slice.length > 0 && "opacity-60 transition-opacity");
-                          const leading = leadingRow ? /* @__PURE__ */ jsx(DataTableLeadingRow, { colSpan: totalColSpan, sticky: leadingRowSticky, children: leadingRow }) : null;
+                          const leading = leadingRow ? /* @__PURE__ */ jsx(
+                            DataTableLeadingRow,
+                            {
+                              colSpan: totalColSpan,
+                              sticky: leadingRowSticky,
+                              ariaRowIndex: rowWindow ? 2 : void 0,
+                              children: leadingRow
+                            }
+                          ) : null;
                           const renderRow = (row, rowIndex) => {
                             const expanded = isExpanded?.(row) ?? false;
-                            const expansion = expanded ? expandedRow?.(row) : null;
-                            const rowInteractive = !!onRowClick || !!selection;
-                            const href = rowHref?.(row);
                             const key = rowKey(row);
-                            const detailId = `${detailIdBase}-${rowIndex}`;
-                            const disclosure = rowsFocusable && expandedRow ? /* @__PURE__ */ jsx(
-                              "button",
+                            return /* @__PURE__ */ jsx(
+                              DataTableRow,
                               {
-                                type: "button",
-                                tabIndex: -1,
-                                className: "sr-only-fixed",
-                                "aria-label": labels.rowDetails,
-                                "aria-expanded": expanded,
-                                "aria-controls": expansion ? detailId : void 0,
-                                onClick: () => onRowClick(row)
-                              }
-                            ) : null;
-                            return /* @__PURE__ */ jsxs(Fragment2, { children: [
-                              /* @__PURE__ */ jsxs(
-                                "tr",
-                                {
-                                  ...cleanAttrs(rowAttributes?.(row)),
-                                  "data-row-nav": rowsFocusable ? "" : void 0,
-                                  tabIndex: rowsFocusable ? key === tabRowKey ? 0 : -1 : void 0,
-                                  onFocus: rowsFocusable ? (e) => {
-                                    if (e.target === e.currentTarget) setFocusRowKey(key);
-                                  } : void 0,
-                                  onKeyDown: rowsFocusable ? (e) => {
-                                    if (e.target !== e.currentTarget) return;
-                                    if (e.altKey || e.ctrlKey || e.metaKey) return;
-                                    if (e.key === "Enter" || e.key === " ") {
-                                      e.preventDefault();
-                                      onRowClick(row);
-                                      return;
-                                    }
-                                    if (e.shiftKey) return;
-                                    if (moveRowFocus(e.currentTarget, e.key)) e.preventDefault();
-                                  } : void 0,
-                                  className: cn(
-                                    "border-t border-subtle",
-                                    rowInteractive && "cursor-pointer hover:bg-hover",
-                                    // The kit's focus frame width (§5, `--focus-ring-width`), drawn as an
-                                    // OUTLINE rather than FOCUS_RING's box-shadow: a shadow on a `<tr>`
-                                    // is not painted by every engine, an outline is.
-                                    rowsFocusable && "focus-visible:bg-hover focus-visible:outline-focus focus-visible:-outline-offset-2 focus-visible:outline-brand",
-                                    rowClassName?.(row)
-                                  ),
-                                  onClick: rowInteractive ? (e) => {
-                                    if (fromOwnControl(e.target, e.currentTarget)) return;
-                                    if (fromOutside(e.target, e.currentTarget)) return;
-                                    if (selection && canSelect(row)) {
-                                      if (e.shiftKey) {
-                                        window.getSelection?.()?.removeAllRanges();
-                                        if (selectRange(rowIndex)) return;
-                                        selectionAnchor.current = rowKey(row);
-                                        selection.onToggle(row, !selection.isSelected(row));
-                                        return;
-                                      }
-                                      if (e.metaKey || e.ctrlKey) {
-                                        selectionAnchor.current = rowKey(row);
-                                        selection.onToggle(row, !selection.isSelected(row));
-                                        return;
-                                      }
-                                    }
-                                    onRowClick?.(row);
-                                  } : void 0,
-                                  children: [
-                                    selection && /* @__PURE__ */ jsx(
-                                      "td",
-                                      {
-                                        className: cn("align-top", compact ? "w-8 px-2 py-1" : "w-10 px-3 py-2"),
-                                        onClick: (e) => e.stopPropagation(),
-                                        children: canSelect(row) && /* @__PURE__ */ jsx(
-                                          "input",
-                                          {
-                                            type: "checkbox",
-                                            className: cn("accent-indigo-600", compact ? "size-3.5" : "size-4"),
-                                            checked: selection.isSelected(row),
-                                            onClick: (e) => {
-                                              if (e.shiftKey && selectRange(rowIndex)) {
-                                                e.preventDefault();
-                                                rangeClick.current = e.nativeEvent;
-                                              }
-                                            },
-                                            onChange: (e) => {
-                                              if (rangeClick.current && e.nativeEvent === rangeClick.current) {
-                                                rangeClick.current = null;
-                                                return;
-                                              }
-                                              selectionAnchor.current = rowKey(row);
-                                              selection.onToggle(row, e.target.checked);
-                                            },
-                                            "aria-label": labels.selectRow
-                                          }
-                                        )
-                                      }
-                                    ),
-                                    visibleColumns.map((col, colIndex) => {
-                                      const width = widths[col.key];
-                                      const own = splitCellProps(col.cellProps?.(row));
-                                      const pinned = width ? { width, minWidth: width, maxWidth: width } : void 0;
-                                      return /* @__PURE__ */ createElement(
-                                        "td",
-                                        {
-                                          ...own.attrs,
-                                          key: col.key,
-                                          "data-col": col.key,
-                                          style: own.style || pinned ? { ...own.style, ...pinned } : void 0,
-                                          className: cn(
-                                            "align-top",
-                                            compact ? "px-2 py-1" : "px-3 py-2",
-                                            width && "overflow-hidden text-ellipsis",
-                                            col.grow ? GROW_CELL_CLASS : growDrawn && GROW_PEER_CELL_CLASS,
-                                            logicalAlign(own.className),
-                                            logicalAlign(col.className)
-                                          )
-                                        },
-                                        colIndex === 0 && disclosure,
-                                        col === linkColumn && href ? (
-                                          // No `onActivate`: the click is left to bubble to the
-                                          // <tr> handler above, which already owns expand-vs-select.
-                                          // Calling it here as well would toggle the row twice.
-                                          /* @__PURE__ */ jsx(RowLink, { href, className: "block", "data-row-link": "", children: col.cell(row) })
-                                        ) : col.cell(row)
-                                      );
-                                    })
-                                  ]
-                                }
-                              ),
-                              expansion && /* @__PURE__ */ jsx("tr", { id: disclosure ? detailId : void 0, className: "bg-surface-2 border-t border-subtle", children: /* @__PURE__ */ jsx("td", { colSpan: totalColSpan, className: "p-0", children: /* @__PURE__ */ jsx("div", { className: "w-0 min-w-full", children: /* @__PURE__ */ jsx(
-                                "div",
-                                {
-                                  className: cn(
-                                    "sticky start-0 w-[var(--dt-visible-w,100%)] max-w-full",
-                                    compact ? "px-2 py-2" : "px-3 py-3"
-                                  ),
-                                  children: expansion
-                                }
-                              ) }) }) })
-                            ] }, key);
+                                row,
+                                rowIndex,
+                                rowKey: key,
+                                ctx: rowCtx,
+                                columns: visibleColumns,
+                                widths,
+                                growDrawn,
+                                linkColumn,
+                                href: rowHref?.(row),
+                                selectionColumn: !!selection,
+                                selectable: canSelect(row),
+                                selected: !!selection && selection.isSelected(row),
+                                expanded,
+                                expansion: expanded ? expandedRow?.(row) : null,
+                                disclosure: rowsFocusable && !!expandedRow,
+                                detailId: `${detailIdBase}-${rowIndex}`,
+                                rowsFocusable,
+                                rowInteractive: !!onRowClick || !!selection,
+                                tabbable: key === tabRowKey,
+                                className: rowClassName?.(row),
+                                attrs: rowAttributes?.(row),
+                                compact,
+                                totalColSpan,
+                                rowDetailsLabel: labels.rowDetails,
+                                selectRowLabel: labels.selectRow,
+                                ariaRowIndex: rowWindow?.ariaRow(rowIndex)
+                              },
+                              key
+                            );
                           };
                           const emptyRow = slice.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
                             "td",
@@ -884,14 +853,7 @@ function DataTable({
                               children: isLoading ? /* @__PURE__ */ jsx(LoadingText, { label: labels.loading }) : empty ?? labels.empty
                             }
                           ) }) : null;
-                          if (!desktopGroups) {
-                            return /* @__PURE__ */ jsxs("tbody", { className: bodyClass, children: [
-                              leading,
-                              slice.map(renderRow),
-                              emptyRow
-                            ] });
-                          }
-                          const band = (level, def, g) => /* @__PURE__ */ jsx(
+                          const band = (level, def, g, ariaRowIndex) => /* @__PURE__ */ jsx(
                             DataTableGroupBand,
                             {
                               level,
@@ -899,9 +861,44 @@ function DataTable({
                               top: level === 1 ? bandTops[0] : bandTops[1],
                               compact,
                               label: def.label ? def.label(g.key, g.rows) : g.key,
-                              end: def.end?.(g.key, g.rows)
+                              end: def.end?.(g.key, g.rows),
+                              ariaRowIndex
                             }
                           );
+                          if (rowWindow) {
+                            const spacer = (key, height) => /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", "data-vt-spacer": "", children: /* @__PURE__ */ jsx("td", { colSpan: totalColSpan, style: { height, padding: 0, border: 0 } }) }, key);
+                            return /* @__PURE__ */ jsxs(Fragment, { children: [
+                              leading && /* @__PURE__ */ jsx("tbody", { className: bodyClass, children: leading }),
+                              rowWindow.bodies.map((b) => {
+                                if (b.kind === "spacer")
+                                  return /* @__PURE__ */ jsx("tbody", { "data-vt-body": "", "aria-hidden": "true", children: spacer("s", b.height) }, b.key);
+                                const g = virtualGroups[b.group];
+                                const vb = virtualBands[b.group];
+                                return /* @__PURE__ */ jsxs(
+                                  "tbody",
+                                  {
+                                    "data-vt-body": "",
+                                    className: bodyClass,
+                                    children: [
+                                      vb && g.bands.includes(1) && band(1, levels[0], vb.g1, rowWindow.ariaBand(b.group, 1)),
+                                      vb?.g2 && band(2, levels[1], vb.g2, rowWindow.ariaBand(b.group, 2)),
+                                      b.items.map(
+                                        (it) => it.kind === "gap" ? spacer(it.key, it.height) : renderRow(slice[it.index], it.index)
+                                      )
+                                    ]
+                                  },
+                                  vb ? `vg:${vb.g1.key}:${vb.g2?.key ?? ""}:${g.start}` : "vg"
+                                );
+                              })
+                            ] });
+                          }
+                          if (!desktopGroups) {
+                            return /* @__PURE__ */ jsxs("tbody", { className: bodyClass, children: [
+                              leading,
+                              slice.map(renderRow),
+                              emptyRow
+                            ] });
+                          }
                           const rowsOf = (g) => g.rows.map((r, i) => renderRow(r, g.start + i));
                           return /* @__PURE__ */ jsxs(Fragment, { children: [
                             (leading || emptyRow) && /* @__PURE__ */ jsxs("tbody", { className: bodyClass, children: [
@@ -933,7 +930,7 @@ function DataTable({
                               "font-semibold text-primary",
                               isLoading && "opacity-60 transition-opacity"
                             ),
-                            children: /* @__PURE__ */ jsxs("tr", { children: [
+                            children: /* @__PURE__ */ jsxs("tr", { "aria-rowindex": rowWindow?.rowCount, children: [
                               selection && /* @__PURE__ */ jsx(
                                 "td",
                                 {