@eifi1/ui-kit 0.46.1 → 0.48.0

package/dist/components/data-table.js

@@ -1,7 +1,7 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
-import { Fragment, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } 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";
@@ -19,6 +19,14 @@ import {
 } from "./data-table-shared.js";
 import { MobileFilters, MobileRow, MobileSelectBar, MobileSort, StackedFields } from "./data-table-mobile.js";
 import { DataTableHead } from "./data-table-head.js";
+import { DataTableLeadingRow } from "./data-table-leading-row.js";
+import {
+  DataTableGroupBand,
+  DataTableLoadMoreFooter,
+  groupLevels,
+  groupRows,
+  useGroupBandTops
+} from "./data-table-groups.js";
 import { ColumnSettingsPanel } from "./data-table-column-settings.js";
 import { useLargeText } from "../hooks/use-large-text.js";
 import { cn } from "../lib/cn.js";
@@ -42,10 +50,12 @@ const DEFAULT_DATA_TABLE_SORT_LABELS = {
 const flipDir = (d) => d === "asc" ? "desc" : "asc";
 function moveRowFocus(from, key) {
   if (!(key in ROW_NAV_KEYS)) return false;
-  const body = from.parentElement;
-  if (!body) return false;
-  const rows = Array.from(body.children).filter(
-    (el) => el instanceof HTMLElement && el.hasAttribute("data-row-nav")
+  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;
@@ -55,6 +65,7 @@ function moveRowFocus(from, key) {
 const ROW_NAV_KEYS = { ArrowDown: 1, ArrowUp: 1, Home: 1, End: 1 };
 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";
 function DataTable({
   rows,
   columns: columnsProp,
@@ -94,6 +105,9 @@ function DataTable({
   mobileSwipeActions,
   desktopSwipeActions,
   leadingRow,
+  leadingRowSticky = false,
+  groupBy,
+  loadMore,
   density = "comfortable",
   sortCycle = "tri",
   chrome = "full",
@@ -160,7 +174,13 @@ function DataTable({
     // Ignored in `serverPagination` mode, where the owner's is the page size.
     pageSizeProp: isServer ? void 0 : pageSizeProp
   });
-  const widths = useMemo(() => resizable ? storedWidths : {}, [resizable, storedWidths]);
+  const widths = useMemo(() => {
+    if (!resizable) return {};
+    const grow = columns.find((c) => c.grow)?.key;
+    if (!grow || !(grow in storedWidths)) return storedWidths;
+    const { [grow]: _ignored, ...rest } = storedWidths;
+    return rest;
+  }, [resizable, storedWidths, columns]);
   const hiddenCols = useMemo(
     () => columnSettings ? storedHiddenCols : /* @__PURE__ */ new Set(),
     [columnSettings, storedHiddenCols]
@@ -221,7 +241,7 @@ function DataTable({
     });
     return copy;
   }, [filtered, sorts, columnSig, isServer]);
-  const unpaged = !isServer && !paginated;
+  const unpaged = !isServer && (!paginated || !!loadMore);
   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;
@@ -297,17 +317,26 @@ function DataTable({
     else setPage(p);
     announce(labels.pageChanged(p + 1, totalPages));
   };
+  const { autoHidden, keep: keepColumn } = useColumnFit({
+    columns,
+    hiddenCols,
+    headRefs,
+    scroller: () => desktopScroller.current,
+    enabled: !usePhoneLayout()
+  });
   const visibleColumns = useMemo(
-    () => columns.filter((c) => !hiddenCols.has(c.key)),
-    [columns, hiddenCols]
+    () => columns.filter((c) => !hiddenCols.has(c.key) && !autoHidden.has(c.key)),
+    [columns, hiddenCols, autoHidden]
   );
+  const growDrawn = visibleColumns.some((c) => c.grow);
   const linkColumn = rowHref ? visibleColumns.find((c) => c.mobilePrimary && !c.noRowLink) ?? visibleColumns.find((c) => !c.noRowLink) : void 0;
   const { startResize, moveResize, finishResize, autoSizeAll } = useColumnResize({
     headRefs,
     widths,
     setWidths,
     columns,
-    hiddenCols
+    // The columns left out for width have no header to measure either.
+    hiddenCols: autoHidden.size > 0 ? /* @__PURE__ */ new Set([...hiddenCols, ...autoHidden]) : hiddenCols
   });
   const visibleCount = visibleColumns.length;
   const totalCount = columns.length;
@@ -323,6 +352,15 @@ function DataTable({
   const columnsCountLabel = labels.columnsCount(visibleCount - ownVisible, totalCount - ownColumns);
   const isMdUp = !usePhoneLayout();
   const desktopScroller = useRef(null);
+  const levels = groupLevels(groupBy);
+  const measuresVisibleWidth = isMdUp && (!!expandedRow || levels.length > 0 || !!loadMore);
+  useEffect(() => {
+    const el = desktopScroller.current;
+    if (!measuresVisibleWidth || !el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => el.style.setProperty("--dt-visible-w", `${el.clientWidth}px`));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [measuresVisibleWidth]);
   const edgeFadeProps = useEdgeFade(desktopScroller, edgeFade && isMdUp);
   const mobileColumns = visibleColumns.filter((c) => !c.mobileHidden);
   const mobilePrimaryCol = mobileColumns.find((c) => c.mobilePrimary) ?? mobileColumns[0] ?? null;
@@ -428,8 +466,17 @@ function DataTable({
     },
     rowKey(row)
   );
-  const mobileGroups = mobileGroupBy ? mobileSlice.reduce((acc, row) => {
-    const key = mobileGroupBy(row);
+  const tableRef = useRef(null);
+  const desktopGroups = isMdUp && levels.length > 0 ? groupRows(slice, levels) : null;
+  const bandTops = useGroupBandTops(
+    tableRef,
+    !!desktopGroups,
+    `${levels.length}:${leadingRowSticky && !!leadingRow}:${desktopGroups?.[0]?.key ?? ""}`
+  );
+  const mobileLevel = typeof mobileGroupBy === "function" ? null : mobileGroupBy ?? null;
+  const mobileKey = typeof mobileGroupBy === "function" ? mobileGroupBy : mobileGroupBy?.key;
+  const mobileGroups = mobileKey ? mobileSlice.reduce((acc, row) => {
+    const key = mobileKey(row);
     const last = acc[acc.length - 1];
     if (last && last.key === key) last.rows.push(row);
     else acc.push({ key, rows: [row] });
@@ -544,8 +591,11 @@ function DataTable({
               ),
               "aria-busy": isLoading || void 0,
               children: [
-                mobileGroups ? mobileGroups.map((g) => /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx("li", { className: "sticky top-0 z-10 bg-surface-2 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-muted backdrop-blur", children: mobileGroupLabel ? mobileGroupLabel(g.key) : g.key }),
+                mobileGroups ? mobileGroups.map((g) => /* @__PURE__ */ jsxs(Fragment2, { children: [
+                  /* @__PURE__ */ jsxs("li", { className: "sticky top-0 z-10 flex flex-wrap items-baseline justify-between gap-x-3 bg-surface-2 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-muted backdrop-blur", children: [
+                    /* @__PURE__ */ jsx("span", { className: "min-w-0", children: mobileGroupLabel ? mobileGroupLabel(g.key) : mobileLevel?.label ? mobileLevel.label(g.key, g.rows) : g.key }),
+                    mobileLevel?.end && /* @__PURE__ */ jsx("span", { className: "ms-auto tabular-nums", children: mobileLevel.end(g.key, g.rows) })
+                  ] }),
                   g.rows.map(renderMobileRow)
                 ] }, `hb-group:${g.key}`)) : mobileSlice.map(renderMobileRow),
                 mobileSlice.length === 0 && /* @__PURE__ */ jsx(
@@ -565,6 +615,16 @@ function DataTable({
                     className: "px-4 py-4 text-center text-xs text-placeholder",
                     children: /* @__PURE__ */ jsx("bdi", { children: labels.loading })
                   }
+                ),
+                loadMore && !canRevealMoreMobile && /* @__PURE__ */ jsx(
+                  DataTableLoadMoreFooter,
+                  {
+                    as: "li",
+                    loadMore,
+                    rowCount: sorted.length,
+                    labels,
+                    compact
+                  }
                 )
               ]
             }
@@ -588,7 +648,7 @@ function DataTable({
                       "grid grid-cols-[auto_1fr] gap-x-3",
                       compact ? "gap-y-0.5 text-xs" : "gap-y-1 text-sm"
                     ),
-                    children: mobileColumns.filter((c) => c.footer).map((col) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                    children: mobileColumns.filter((c) => c.footer).map((col) => /* @__PURE__ */ jsxs(Fragment2, { children: [
                       /* @__PURE__ */ jsx("dt", { className: "self-center text-xs uppercase tracking-wide text-muted", children: col.header }),
                       /* @__PURE__ */ jsx("dd", { className: "min-w-0 self-center font-semibold text-primary", children: footerValue(col) })
                     ] }, col.key))
@@ -597,7 +657,7 @@ function DataTable({
               ]
             }
           ),
-          isServer && /* @__PURE__ */ jsx(
+          isServer && !loadMore && /* @__PURE__ */ jsx(
             Pagination,
             {
               page: safePage,
@@ -625,7 +685,7 @@ function DataTable({
         ] }),
         isMdUp && /* @__PURE__ */ jsxs("div", { className: cn("flex", fillHeight && "flex-1"), children: [
           /* @__PURE__ */ jsxs("div", { className: cn("relative min-w-0 flex-1", fillHeight && "flex flex-col"), children: [
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxs(
               "div",
               {
                 ref: desktopScroller,
@@ -633,248 +693,294 @@ function DataTable({
                 className: cn("overflow-auto [scrollbar-gutter:stable]", fillHeight && "min-h-0 grow basis-48"),
                 ...edgeFadeProps,
                 style: fillHeight ? edgeFadeProps.style : { ...edgeFadeProps.style, maxHeight: maxBodyHeight },
-                children: /* @__PURE__ */ jsxs(
-                  "table",
-                  {
-                    className: cn("w-full", compact ? "text-xs" : "text-sm"),
-                    "aria-label": labels.table,
-                    "aria-busy": isLoading || void 0,
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        DataTableHead,
-                        {
-                          visibleColumns,
-                          selection,
-                          compact,
-                          labels,
-                          locale,
-                          isServer,
-                          hasSortCallback: !!onSortsChange,
-                          hasFilterCallback: !!onFiltersChange,
-                          sorts,
-                          filters,
-                          selectOptionsByKey,
-                          multiSort,
-                          resizable,
-                          widths,
-                          setWidths,
-                          headRefs,
-                          toggleSort,
-                          setFilterValue,
-                          clearFilter,
-                          startResize,
-                          moveResize,
-                          finishResize
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs(
-                        "tbody",
-                        {
-                          className: cn(isLoading && slice.length > 0 && "opacity-60 transition-opacity"),
-                          children: [
-                            leadingRow && /* @__PURE__ */ jsx("tr", { className: "border-t border-subtle", children: /* @__PURE__ */ jsx("td", { colSpan: totalColSpan, className: "p-0", children: leadingRow }) }),
-                            slice.map((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",
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "table",
+                    {
+                      ref: tableRef,
+                      className: cn("w-full", compact ? "text-xs" : "text-sm"),
+                      "data-fit-grow": growDrawn ? "" : void 0,
+                      "aria-label": labels.table,
+                      "aria-busy": isLoading || void 0,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          DataTableHead,
+                          {
+                            visibleColumns,
+                            selection,
+                            compact,
+                            labels,
+                            locale,
+                            isServer,
+                            hasSortCallback: !!onSortsChange,
+                            hasFilterCallback: !!onFiltersChange,
+                            sorts,
+                            filters,
+                            selectOptionsByKey,
+                            multiSort,
+                            resizable,
+                            widths,
+                            setWidths,
+                            headRefs,
+                            toggleSort,
+                            setFilterValue,
+                            clearFilter,
+                            startResize,
+                            moveResize,
+                            finishResize
+                          }
+                        ),
+                        (() => {
+                          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 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",
+                              {
+                                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",
                                 {
-                                  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(Fragment, { 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);
+                                  ...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.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;
-                                        }
+                                      if (e.metaKey || e.ctrlKey) {
+                                        selectionAnchor.current = rowKey(row);
+                                        selection.onToggle(row, !selection.isSelected(row));
+                                        return;
                                       }
-                                      onRowClick?.(row);
-                                    } : void 0,
-                                    children: [
-                                      selection && /* @__PURE__ */ jsx(
+                                    }
+                                    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",
                                         {
-                                          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
-                                            }
+                                          ...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)
                                           )
-                                        }
-                                      ),
-                                      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",
-                                              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: cn("w-0 min-w-full", compact ? "px-2 py-2" : "px-3 py-3"), children: expansion }) }) })
-                              ] }, key);
-                            }),
-                            slice.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-                              "td",
-                              {
-                                colSpan: totalColSpan,
-                                className: cn("text-center text-muted", compact ? "px-2 py-2" : "px-3 py-4"),
-                                children: isLoading ? /* @__PURE__ */ jsx(LoadingText, { label: labels.loading }) : empty ?? labels.empty
-                              }
-                            ) })
-                          ]
-                        }
-                      ),
-                      showFooter && // Sticky to the scroller's bottom edge for the same reason the header is
-                      // sticky to its top: the body scrolls inside a bounded wrapper, and a
-                      // total that scrolls away with the last row is a total nobody sees on a
-                      // 25-row page. Each cell carries its own background and its own `sticky`,
-                      // as the header's do — `position: sticky` on a `<tfoot>` is not reliable.
-                      /* @__PURE__ */ jsx(
-                        "tfoot",
-                        {
-                          "data-table-footer": "",
-                          className: cn(
-                            "font-semibold text-primary",
-                            isLoading && "opacity-60 transition-opacity"
-                          ),
-                          children: /* @__PURE__ */ jsxs("tr", { children: [
-                            selection && /* @__PURE__ */ jsx(
-                              "td",
-                              {
-                                className: cn(
-                                  FOOTER_CELL,
-                                  compact ? "w-8 px-2 py-1" : "w-10 px-3 py-2"
-                                )
-                              }
+                                        },
+                                        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);
+                          };
+                          const emptyRow = slice.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+                            "td",
+                            {
+                              colSpan: totalColSpan,
+                              className: cn("text-center text-muted", compact ? "px-2 py-2" : "px-3 py-4"),
+                              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(
+                            DataTableGroupBand,
+                            {
+                              level,
+                              colSpan: totalColSpan,
+                              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)
+                            }
+                          );
+                          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: [
+                              leading,
+                              emptyRow
+                            ] }),
+                            desktopGroups.map(
+                              (g1) => g1.children ? g1.children.map((g2, j) => /* @__PURE__ */ jsxs("tbody", { className: bodyClass, children: [
+                                j === 0 && band(1, levels[0], g1),
+                                band(2, levels[1], g2),
+                                rowsOf(g2)
+                              ] }, `g:${g1.key}:${g2.key}:${g2.start}`)) : /* @__PURE__ */ jsxs("tbody", { className: bodyClass, children: [
+                                band(1, levels[0], g1),
+                                rowsOf(g1)
+                              ] }, `g:${g1.key}:${g1.start}`)
+                            )
+                          ] });
+                        })(),
+                        showFooter && // Sticky to the scroller's bottom edge for the same reason the header is
+                        // sticky to its top: the body scrolls inside a bounded wrapper, and a
+                        // total that scrolls away with the last row is a total nobody sees on a
+                        // 25-row page. Each cell carries its own background and its own `sticky`,
+                        // as the header's do — `position: sticky` on a `<tfoot>` is not reliable.
+                        /* @__PURE__ */ jsx(
+                          "tfoot",
+                          {
+                            "data-table-footer": "",
+                            className: cn(
+                              "font-semibold text-primary",
+                              isLoading && "opacity-60 transition-opacity"
                             ),
-                            visibleColumns.map((col) => {
-                              const width = widths[col.key];
-                              const pinned = width ? { width, minWidth: width, maxWidth: width } : void 0;
-                              const isLabel = col === footerLabelCol;
-                              const Cell = isLabel ? "th" : "td";
-                              return /* @__PURE__ */ jsx(
-                                Cell,
+                            children: /* @__PURE__ */ jsxs("tr", { children: [
+                              selection && /* @__PURE__ */ jsx(
+                                "td",
                                 {
-                                  "data-col": col.key,
-                                  scope: isLabel ? "row" : void 0,
-                                  style: pinned,
                                   className: cn(
                                     FOOTER_CELL,
-                                    "align-top",
-                                    compact ? "px-2 py-1" : "px-3 py-2",
-                                    width && "overflow-hidden text-ellipsis",
-                                    // A `<th>` centres by default; the label reads from the start
-                                    // like the cells above it, unless the column says otherwise.
-                                    isLabel && "text-start",
-                                    logicalAlign(col.className)
-                                  ),
-                                  children: col.footer ? footerValue(col) : isLabel ? footerLabel : null
-                                },
-                                col.key
-                              );
-                            })
-                          ] })
-                        }
-                      )
-                    ]
-                  }
-                )
+                                    compact ? "w-8 px-2 py-1" : "w-10 px-3 py-2"
+                                  )
+                                }
+                              ),
+                              visibleColumns.map((col) => {
+                                const width = widths[col.key];
+                                const pinned = width ? { width, minWidth: width, maxWidth: width } : void 0;
+                                const isLabel = col === footerLabelCol;
+                                const Cell = isLabel ? "th" : "td";
+                                return /* @__PURE__ */ jsx(
+                                  Cell,
+                                  {
+                                    "data-col": col.key,
+                                    scope: isLabel ? "row" : void 0,
+                                    style: pinned,
+                                    className: cn(
+                                      FOOTER_CELL,
+                                      "align-top",
+                                      compact ? "px-2 py-1" : "px-3 py-2",
+                                      width && "overflow-hidden text-ellipsis",
+                                      // A `<th>` centres by default; the label reads from the start
+                                      // like the cells above it, unless the column says otherwise.
+                                      isLabel && "text-start",
+                                      col.grow ? GROW_CELL_CLASS : growDrawn && GROW_PEER_CELL_CLASS,
+                                      logicalAlign(col.className)
+                                    ),
+                                    children: col.footer ? footerValue(col) : isLabel ? footerLabel : null
+                                  },
+                                  col.key
+                                );
+                              })
+                            ] })
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  loadMore && /* @__PURE__ */ jsx(DataTableLoadMoreFooter, { loadMore, rowCount: sorted.length, labels, compact })
+                ]
               }
             ),
-            !unpaged && /* @__PURE__ */ jsx(
+            !unpaged && !loadMore && /* @__PURE__ */ jsx(
               Pagination,
               {
                 page: safePage,
@@ -899,6 +1005,8 @@ function DataTable({
               columns,
               hiddenCols,
               setHiddenCols,
+              autoHidden,
+              keepColumn,
               showSettings,
               setShowSettings,
               columnsCountLabel,