@eifi1/ui-kit 0.47.0 → 0.48.1

package/src/components/data-table.tsx

@@ -17,6 +17,17 @@ import {
 } from "./data-table-shared";
 import { MobileFilters, MobileRow, MobileSelectBar, MobileSort, StackedFields } from "./data-table-mobile";
 import { DataTableHead } from "./data-table-head";
+import { DataTableLeadingRow } from "./data-table-leading-row";
+import {
+  DataTableGroupBand,
+  DataTableLoadMoreFooter,
+  groupLevels,
+  groupRows,
+  useGroupBandTops,
+  type DataTableGroupBy,
+  type DataTableLoadMore,
+} from "./data-table-groups";
+export type { DataTableGroupBy, DataTableLoadMore } from "./data-table-groups";
 import { ColumnSettingsPanel } from "./data-table-column-settings";
 import { useLargeText } from "../hooks/use-large-text";
 import { cn } from "../lib/cn";
@@ -127,6 +138,44 @@ export interface DataTableColumn<T> {
    * end-aligned), its resized width, and drops out with the column when it is hidden.
    */
   footer?: (rows: T[], page: T[]) => ReactNode;
+  /**
+   * This column takes the width the others leave, and its text ellipsises (0.48,
+   * keksdose live #451): `w-full max-w-0` on its cells, so in the table's auto layout it
+   * is "the rest of the row" and one long title can no longer widen the table. One per
+   * table. It has no resize handle, and a width stored for it (before it grew) is
+   * ignored: it always takes the rest. Resize the others to change it. Opt-in: without it nothing
+   * changes. It keeps at least 10rem: with {@link fitPriority} columns the table leaves
+   * those out first, and scrolls sideways once none is left. Every other cell keeps one
+   * line at Normal text size (`whitespace-nowrap`; a column's own
+   * `not-large:whitespace-normal` lets its prose wrap), so a figure or a name is never
+   * broken in two to make room for it.
+   */
+  grow?: boolean;
+  /**
+   * Leave this column out while the TABLE is too narrow for it (0.48, keksdose live
+   * #451) — measured on the table's own scroller, so a sidebar, the window and Large
+   * text count alike. The lowest number goes first (ties: the later column first), and
+   * comes back last, once the scroller is as wide as the table needed with it. Columns
+   * without it never go. Desktop only: the phone's card list is not narrowed.
+   *
+   * The Columns panel counts only what is drawn ("Columns (8/10)") and marks a column
+   * left out this way "hidden for width". Ticking it there keeps it in for as long as
+   * the table is mounted (not persisted): the table makes room by leaving out the next
+   * one instead, and scrolls sideways once none is left. Unticking hides it as any column.
+   */
+  fitPriority?: number;
+  /**
+   * Start this column HIDDEN (0.48, keksdose dev #617) — for as long as the view saved
+   * under `storageKey` holds no entry for it: on a first visit, on a device whose saved
+   * view predates the column (or the flag), and for a column the app adds later. The
+   * user's own choice in the Columns panel always wins: ticking it is remembered
+   * (`shown` in the saved view), unticking it again stores it as any hidden column. The
+   * default itself is never written into the saved view, so dropping the flag brings the
+   * column back on every device where nobody chose. In the panel it is simply unticked —
+   * not "hidden for width", which `fitPriority` alone says. Ignored, like every hidden
+   * column, with `columnSettings={false}`: nothing could bring it back.
+   */
+  defaultHidden?: boolean;
 }
 
 /** A `data-*` attribute, typed so `{ "data-private": "" }` needs no cast. */
@@ -303,6 +352,21 @@ export interface DataTableProps<T> {
    * that produces `rows`.
    */
   serverPagination?: ServerPagination;
+  /**
+   * 0.48.1 (keksdose K-052-1): the rows are already filtered and sorted by the server —
+   * render them as given. No client filter, no client sort, no client paging (every row
+   * shows, as with `paginated={false}`). The column filters and sort headers behave as
+   * under `serverPagination`: hidden unless the owner takes them over with
+   * `onFiltersChange` / `onSortsChange`, and then a click only REPORTS the new state (a
+   * header click calls `onSortsChange` with the next sort and the rows keep their order
+   * until the owner re-queries and passes new ones).
+   *
+   * Defaults to `true` when {@link loadMore} is set — the slices it loads come from the
+   * server in its order, and re-filtering them dropped rows (the other leg of each
+   * transfer). Pass `serverRows={false}` for a client table that loads more chunks but
+   * filters and sorts what it holds itself. `serverPagination` implies it regardless.
+   */
+  serverRows?: boolean;
   /**
    * Controlled filter/sort state. When the `on*Change` callback is provided
    * the table stops owning that piece of state: it renders `filters`/`sorts`
@@ -433,7 +497,9 @@ export interface DataTableProps<T> {
    * contiguous (pair with a matching default sort). `mobileGroupLabel` formats
    * the header. Desktop is unaffected. Feedback #317.
    */
-  mobileGroupBy?: (row: T) => string;
+  mobileGroupBy?: ((row: T) => string) | DataTableGroupBy<T>;
+  /** The section header's words for `mobileGroupBy`'s key. Wins over a level's own
+   *  `label` when `mobileGroupBy` is a {@link DataTableGroupBy}. */
   mobileGroupLabel?: (key: string) => ReactNode;
   /**
    * Fully replace the default mobile card body (bold primary + labelled
@@ -505,6 +571,42 @@ export interface DataTableProps<T> {
    * "hide upcoming/scheduled" toggle).
    */
   leadingRow?: ReactNode;
+  /**
+   * 0.48 (keksdose dev #603: "it should rather be sticky, so the user can show hide them
+   * everywhere on click"): pin the {@link leadingRow} under the sticky header while the
+   * rows scroll beneath both — its `top` is the header's measured height. Desktop only,
+   * as `leadingRow` is; it sticks within the table's own scroller (a bounded body:
+   * `fillHeight` or `maxBodyHeight`). Default: it scrolls with the rows.
+   */
+  leadingRowSticky?: boolean;
+  /**
+   * 0.48 (keksdose dev #605): group the desktop table's rows under full-width bands, one
+   * level or two (period → day). Each band is a row header spanning the visible columns
+   * (selection column included, hidden and fit-hidden columns not) with a label and an
+   * end slot (counts, totals), and opens its own `<tbody>`, so a screen reader announces
+   * it as the reader enters the group; the period band opens the first day's. Rows must
+   * already be ordered so equal keys are contiguous (as for `mobileGroupBy`); grouping
+   * runs over the rows on screen, page by page.
+   *
+   * The bands are sticky: the period under the header (and under a sticky
+   * {@link leadingRow}), the day under the period — measured offsets, inside the table's
+   * own scroller (`fillHeight` or `maxBodyHeight`). The `leadingRow` stays above the first
+   * group. On a phone pass the same level to `mobileGroupBy`:
+   * `groupBy={[period, day]} mobileGroupBy={period}`. See {@link DataTableGroupBy}.
+   */
+  groupBy?: DataTableGroupBy<T> | readonly [DataTableGroupBy<T>, DataTableGroupBy<T>?];
+  /**
+   * 0.48 (keksdose dev #605): a "load more" footer in place of the pager. The table
+   * renders every row it is given (as `paginated={false}` does — pass that too, to say
+   * so), and the footer asks the owner for the next slice: as it scrolls into view (an
+   * IntersectionObserver, guarded against double calls while one is in flight) and with
+   * a button the keyboard reaches, named by the app ("Load August 2026"). With
+   * `serverPagination` it replaces that pager as well. Both layouts: on a phone it is the
+   * card list's last item. Since 0.48.1 it implies {@link serverRows} — the rows are
+   * rendered in the order given, unfiltered — unless `serverRows={false}`. See
+   * {@link DataTableLoadMore}.
+   */
+  loadMore?: DataTableLoadMore;
   /**
    * Row height. `"compact"` is lenkbank's in-card tables: five `text-xs` tables with
    * `px-2 py-1` cells sitting inside cards, which at the default padding came out at
@@ -760,14 +862,17 @@ export const DEFAULT_DATA_TABLE_SORT_LABELS: DataTableSortLabels = {
 
 const flipDir = (d: SortDir): SortDir => (d === "asc" ? "desc" : "asc");
 
-/** Arrow/Home/End between the focusable rows of one `<tbody>` — the roving half of
+/** Arrow/Home/End between the focusable rows of the table's bodies — the roving half of
  *  the keyboard-activatable rows (see the row's `onKeyDown`). */
 function moveRowFocus(from: HTMLElement, key: string): boolean {
   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 is HTMLElement => el instanceof HTMLElement && el.hasAttribute("data-row-nav"),
+  // Every body of the table: a grouped table (`groupBy`, 0.48) has one per group.
+  const table = from.closest("table");
+  if (!table) return false;
+  const rows = Array.from(table.tBodies).flatMap((body) =>
+    Array.from(body.children).filter(
+      (el): el is HTMLElement => el instanceof HTMLElement && el.hasAttribute("data-row-nav"),
+    ),
   );
   const i = rows.indexOf(from);
   const target =
@@ -793,6 +898,7 @@ const ROW_NAV_KEYS = { ArrowDown: 1, ArrowUp: 1, Home: 1, End: 1 } as const;
 
 import { DEFAULT_PERSIST_PREFIX, useTableState, type TableUrlSync } from "./use-table-state";
 import { useMobileReveal } from "./use-mobile-reveal";
+import { GROW_CELL_CLASS, GROW_PEER_CELL_CLASS, useColumnFit } from "./data-table-fit";
 
 export function DataTable<T>({
   rows,
@@ -812,6 +918,7 @@ export function DataTable<T>({
   fillHeight = false,
   maxBodyHeight = "calc(100dvh - 12rem)",
   serverPagination,
+  serverRows: serverRowsProp,
   filters: filtersProp,
   onFiltersChange,
   sorts: sortsProp,
@@ -833,6 +940,9 @@ export function DataTable<T>({
   mobileSwipeActions,
   desktopSwipeActions,
   leadingRow,
+  leadingRowSticky = false,
+  groupBy,
+  loadMore,
   density = "comfortable",
   sortCycle = "tri",
   chrome = "full",
@@ -854,6 +964,10 @@ export function DataTable<T>({
   const resizable = resizableProp ?? !minimal;
   const multiSort = multiSortProp ?? !minimal;
   const isServer = !!serverPagination;
+  // The server filtered and sorted these rows (0.48.1, K-052-1): no client filter, sort
+  // or paging, and the sort/filter UI only reports to the owner. `isServer` keeps
+  // meaning "the server pages" (its pager, its page and page size).
+  const serverRows = isServer || (serverRowsProp ?? !!loadMore);
   const isLoading = !!serverPagination?.isLoading;
   // prop > provider > English, through the table's own resolver rather than
   // `useKitLabels`: that resolver derives `columnsCount` from a translated `columns`,
@@ -921,7 +1035,17 @@ export function DataTable<T>({
   // columns are ignored rather than applied: a table cannot be left in a state the
   // user has no control to get out of. They stay in storage untouched, so turning
   // the control back on brings them back.
-  const widths = useMemo(() => (resizable ? storedWidths : {}), [resizable, storedWidths]);
+  // A `grow` column takes the rest of the row by design (0.48): a width stored for it
+  // (a drag or "Auto-size columns" before it grew, KS N2) is ignored, and it has no
+  // handle, so it can never pin it again. Ignored rather than deleted from storage, as
+  // the widths above; the next resize or auto-size writes a blob without it.
+  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 : new Set<string>()),
     [columnSettings, storedHiddenCols],
@@ -975,7 +1099,7 @@ export function DataTable<T>({
   }, [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];
@@ -984,10 +1108,10 @@ export function DataTable<T>({
     }
     return result;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rows, columnSig, filters, isServer, locale]);
+  }, [rows, columnSig, filters, serverRows, locale]);
 
   const sorted = useMemo(() => {
-    if (isServer) return filtered;
+    if (serverRows) return filtered;
     // Priority chain: the first sort key that distinguishes two rows wins;
     // nulls sort last for that key regardless of direction (as before).
     const chain = sorts
@@ -1012,12 +1136,12 @@ export function DataTable<T>({
     });
     return copy;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filtered, sorts, columnSig, isServer]);
+  }, [filtered, sorts, columnSig, serverRows]);
 
   // `paginated={false}` is expressed as "page size = everything" rather than as a
   // second code path, so slicing, the page clamp and the range summary all keep
   // exactly one definition.
-  const unpaged = !isServer && !paginated;
+  const unpaged = !isServer && (!paginated || !!loadMore || serverRows);
   const effectivePageSize = isServer
     ? serverPagination!.pageSize
     : unpaged || pageSize === Infinity
@@ -1100,7 +1224,7 @@ export function DataTable<T>({
   // "clear all"). Only touches keys the table actually exposes as filters.
   const clearAllFilters = () => {
     const keys = columns
-      .filter((col) => ((!isServer || onFiltersChange) ? resolveFilter(col) : null))
+      .filter((col) => ((!serverRows || onFiltersChange) ? resolveFilter(col) : null))
       .map((col) => col.key);
     if (!keys.length) return;
     if (onFiltersChange) {
@@ -1134,9 +1258,9 @@ export function DataTable<T>({
     // some later render from the caller, and `serverPagination.total` is ALREADY the
     // filtered total — so the "n of m" sentence has no second number to give here.
     // Saying nothing is better than announcing the page size as a result count.
-    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]);
 
   // 1-based, because that is what the page strip shows and what a person says.
   const goToPage = (p: number) => {
@@ -1145,10 +1269,22 @@ export function DataTable<T>({
     announce(labels.pageChanged(p + 1, totalPages));
   };
 
+  // 0.48 (keksdose live #451): the `fitPriority` columns the table's width leaves out
+  // (data-table-fit.ts). Desktop only; the scroller is read after render.
+  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],
   );
+  // With a `grow` column drawn, every other cell keeps one line at Normal (kastlan S2,
+  // 0.48): the `w-full` column squeezed them to their min-content width.
+  const growDrawn = visibleColumns.some((c) => c.grow);
 
   // Which cell carries the row's link when `rowHref` is set (feedback #451). The
   // `mobilePrimary` column is the row's headline by declaration, so it is both the
@@ -1174,7 +1310,8 @@ export function DataTable<T>({
     widths,
     setWidths,
     columns,
-    hiddenCols,
+    // The columns left out for width have no header to measure either.
+    hiddenCols: autoHidden.size > 0 ? new Set([...hiddenCols, ...autoHidden]) : hiddenCols,
   });
 
   const visibleCount = visibleColumns.length;
@@ -1216,7 +1353,9 @@ export function DataTable<T>({
   // 0.47 (keksdose S4): the scroller's visible width, as `--dt-visible-w` on it, for the
   // expansion row's pinned content (below). Set on the element, not in state: a resize
   // re-renders nothing. Only a table that can expand a row measures.
-  const measuresVisibleWidth = isMdUp && !!expandedRow;
+  // The group bands and the load-more footer pin their content the same way (0.48).
+  const levels = groupLevels(groupBy);
+  const measuresVisibleWidth = isMdUp && (!!expandedRow || levels.length > 0 || !!loadMore);
   useEffect(() => {
     const el = desktopScroller.current;
     if (!measuresVisibleWidth || !el || typeof ResizeObserver === "undefined") return;
@@ -1419,9 +1558,20 @@ export function DataTable<T>({
   // Consecutive grouping of the (already-sorted) mobile slice into labelled
   // sections for the "assistance"-style list (feedback #317). Null unless the
   // caller opts in via `mobileGroupBy`.
-  const mobileGroups: { key: string; rows: T[] }[] | null = mobileGroupBy
+  // The desktop's bands (0.48, keksdose dev #605), over the rows on screen.
+  const tableRef = useRef<HTMLTableElement | null>(null);
+  const desktopGroups = isMdUp && levels.length > 0 ? groupRows(slice, levels) : null;
+  const bandTops = useGroupBandTops(
+    tableRef,
+    !!desktopGroups,
+    `${levels.length}:${leadingRowSticky && !!leadingRow}:${desktopGroups?.[0]?.key ?? ""}`,
+  );
+  // `mobileGroupBy` may be a desktop `groupBy` level (0.48), its label and end slot too.
+  const mobileLevel = typeof mobileGroupBy === "function" ? null : (mobileGroupBy ?? null);
+  const mobileKey = typeof mobileGroupBy === "function" ? mobileGroupBy : mobileGroupBy?.key;
+  const mobileGroups: { key: string; rows: T[] }[] | null = mobileKey
     ? mobileSlice.reduce<{ key: string; rows: T[] }[]>((acc, row) => {
-        const key = mobileGroupBy(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] });
@@ -1484,12 +1634,12 @@ export function DataTable<T>({
         {/* Mobile filter access (feedback #299): the per-column filter popovers
             live in the desktop header, which the card list doesn't render — so
             expose the same filters through a bottom sheet here. */}
-        {(!isServer || onFiltersChange) && (
+        {(!serverRows || onFiltersChange) && (
           <MobileFilters
             columns={columns}
             filters={filters}
             selectOptionsByKey={selectOptionsByKey}
-            isServer={isServer}
+            isServer={serverRows}
             hasFilterCallback={!!onFiltersChange}
             onSetFilter={setFilterValue}
             onClearFilter={clearFilter}
@@ -1500,7 +1650,7 @@ export function DataTable<T>({
         )}
         {mobileSort && (
           <MobileSort
-            columns={visibleColumns.filter((c) => (!isServer || !!onSortsChange) && !!c.sortBy)}
+            columns={visibleColumns.filter((c) => (!serverRows || !!onSortsChange) && !!c.sortBy)}
             sorts={sorts}
             sortCycle={sortCycle}
             compact={compact}
@@ -1559,8 +1709,15 @@ export function DataTable<T>({
           {mobileGroups
             ? mobileGroups.map((g) => (
                 <Fragment key={`hb-group:${g.key}`}>
-                  <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">
-                    {mobileGroupLabel ? mobileGroupLabel(g.key) : g.key}
+                  <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">
+                    <span className="min-w-0">
+                      {mobileGroupLabel
+                        ? mobileGroupLabel(g.key)
+                        : mobileLevel?.label
+                          ? mobileLevel.label(g.key, g.rows)
+                          : g.key}
+                    </span>
+                    {mobileLevel?.end && <span className="ms-auto tabular-nums">{mobileLevel.end(g.key, g.rows)}</span>}
                   </li>
                   {g.rows.map(renderMobileRow)}
                 </Fragment>
@@ -1587,6 +1744,16 @@ export function DataTable<T>({
               <bdi>{labels.loading}</bdi>
             </li>
           )}
+          {/* The owner's next slice (0.48), once every row held is revealed. */}
+          {loadMore && !canRevealMoreMobile && (
+            <DataTableLoadMoreFooter
+              as="li"
+              loadMore={loadMore}
+              rowCount={sorted.length}
+              labels={labels}
+              compact={compact}
+            />
+          )}
         </ul>
         {/* The phone's totals: a summary card after the list rather than one more
             `<li>` in it. The list reveals rows in chunks as it is scrolled, so a last
@@ -1633,7 +1800,7 @@ export function DataTable<T>({
         )}
         {/* Client-side mobile lists scroll endlessly (sentinel above); only
             server-paginated tables keep the pager here. */}
-        {isServer && (
+        {isServer && !loadMore && (
           <Pagination
             page={safePage}
             totalPages={totalPages}
@@ -1694,7 +1861,9 @@ export function DataTable<T>({
             the rows that are about to be replaced, and the dimmed body says the same
             to the eye. The pager stays live — see `ServerPagination.isLoading`. */}
         <table
+          ref={tableRef}
           className={cn("w-full", compact ? "text-xs" : "text-sm")}
+          data-fit-grow={growDrawn ? "" : undefined}
           aria-label={labels.table}
           aria-busy={isLoading || undefined}
         >
@@ -1713,7 +1882,7 @@ export function DataTable<T>({
             compact={compact}
             labels={labels}
             locale={locale}
-            isServer={isServer}
+            isServer={serverRows}
             hasSortCallback={!!onSortsChange}
             hasFilterCallback={!!onFiltersChange}
             sorts={sorts}
@@ -1731,17 +1900,14 @@ export function DataTable<T>({
             moveResize={moveResize}
             finishResize={finishResize}
           />
-          <tbody
-            className={cn(isLoading && slice.length > 0 && "opacity-60 transition-opacity")}
-          >
-            {leadingRow && (
-              <tr className="border-t border-subtle">
-                <td colSpan={totalColSpan} className="p-0">
-                  {leadingRow}
-                </td>
-              </tr>
-            )}
-            {slice.map((row, rowIndex) => {
+          {(() => {
+            const bodyClass = cn(isLoading && slice.length > 0 && "opacity-60 transition-opacity");
+            const leading = leadingRow ? (
+              <DataTableLeadingRow colSpan={totalColSpan} sticky={leadingRowSticky}>
+                {leadingRow}
+              </DataTableLeadingRow>
+            ) : null;
+            const renderRow = (row: T, rowIndex: number) => {
               const expanded = isExpanded?.(row) ?? false;
               const expansion = expanded ? expandedRow?.(row) : null;
               const rowInteractive = !!onRowClick || !!selection;
@@ -1906,6 +2072,7 @@ export function DataTable<T>({
                             "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),
                           )}
@@ -1962,20 +2129,70 @@ export function DataTable<T>({
                   )}
                 </Fragment>
               );
-            })}
-            {slice.length === 0 && (
-              <tr>
-                <td
-                  colSpan={totalColSpan}
-                  className={cn("text-center text-muted", compact ? "px-2 py-2" : "px-3 py-4")}
-                >
-                  {/* Nothing is not the same as not-yet: "no results" while the first
-                      page is still in flight is a claim the table cannot make. */}
-                  {isLoading ? <LoadingText label={labels.loading} /> : (empty ?? labels.empty)}
-                </td>
-              </tr>
-            )}
-          </tbody>
+            };
+            const emptyRow =
+              slice.length === 0 ? (
+                <tr>
+                  <td
+                    colSpan={totalColSpan}
+                    className={cn("text-center text-muted", compact ? "px-2 py-2" : "px-3 py-4")}
+                  >
+                    {/* Nothing is not the same as not-yet: "no results" while the first
+                        page is still in flight is a claim the table cannot make. */}
+                    {isLoading ? <LoadingText label={labels.loading} /> : (empty ?? labels.empty)}
+                  </td>
+                </tr>
+              ) : null;
+            if (!desktopGroups) {
+              return (
+                <tbody className={bodyClass}>
+                  {leading}
+                  {slice.map(renderRow)}
+                  {emptyRow}
+                </tbody>
+              );
+            }
+            // Grouped (0.48, keksdose dev #605): one `<tbody>` per innermost group, its
+            // band the row header; the leading row (and the empty state) in their own
+            // before the first group.
+            const band = (level: 1 | 2, def: DataTableGroupBy<T>, g: { key: string; rows: T[] }) => (
+              <DataTableGroupBand
+                level={level}
+                colSpan={totalColSpan}
+                top={level === 1 ? bandTops[0] : bandTops[1]}
+                compact={compact}
+                label={def.label ? def.label(g.key, g.rows) : g.key}
+                end={def.end?.(g.key, g.rows)}
+              />
+            );
+            const rowsOf = (g: { rows: T[]; start: number }) => g.rows.map((r, i) => renderRow(r, g.start + i));
+            return (
+              <>
+                {(leading || emptyRow) && (
+                  <tbody className={bodyClass}>
+                    {leading}
+                    {emptyRow}
+                  </tbody>
+                )}
+                {desktopGroups.map((g1) =>
+                  g1.children ? (
+                    g1.children.map((g2, j) => (
+                      <tbody key={`g:${g1.key}:${g2.key}:${g2.start}`} className={bodyClass}>
+                        {j === 0 && band(1, levels[0], g1)}
+                        {band(2, levels[1], g2)}
+                        {rowsOf(g2)}
+                      </tbody>
+                    ))
+                  ) : (
+                    <tbody key={`g:${g1.key}:${g1.start}`} className={bodyClass}>
+                      {band(1, levels[0], g1)}
+                      {rowsOf(g1)}
+                    </tbody>
+                  ),
+                )}
+              </>
+            );
+          })()}
           {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
@@ -2019,6 +2236,7 @@ export function DataTable<T>({
                         // 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),
                       )}
                     >
@@ -2030,8 +2248,13 @@ export function DataTable<T>({
             </tfoot>
           )}
         </table>
+        {/* In the scroller, after the rows (0.48): it comes into view as the last row
+            does, under `fillHeight` too, where the body is the scroller. */}
+        {loadMore && (
+          <DataTableLoadMoreFooter loadMore={loadMore} rowCount={sorted.length} labels={labels} compact={compact} />
+        )}
       </div>
-          {!unpaged && (
+          {!unpaged && !loadMore && (
             <Pagination
               page={safePage}
               totalPages={totalPages}
@@ -2059,6 +2282,8 @@ export function DataTable<T>({
             columns={columns}
             hiddenCols={hiddenCols}
             setHiddenCols={setHiddenCols}
+            autoHidden={autoHidden}
+            keepColumn={keepColumn}
             showSettings={showSettings}
             setShowSettings={setShowSettings}
             columnsCountLabel={columnsCountLabel}

package/src/components/disclosure.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useId, useState } from "react";
+import { Children, Fragment, isValidElement, useEffect, useId, useState } from "react";
 import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from "react";
 import { ChevronDown } from "lucide-react";
 
@@ -262,7 +262,9 @@ export interface DisclosureProps extends Omit<ComponentPropsWithRef<"div">, "tit
    * ```
    */
   controls?: string;
-  /** The body. Not rendered in trigger-only mode ({@link DisclosureProps.controls}). */
+  /** The body. Not rendered in trigger-only mode ({@link DisclosureProps.controls}),
+   *  nor when there is none (0.48): no children, no empty box under the header.
+   *  `null`, `false`, `undefined` and an empty fragment (`<></>`) count as none. */
   children?: ReactNode;
 }
 
@@ -312,8 +314,13 @@ export function Disclosure({
   const chevronAtEnd = chevronAt === "end";
   const chevronAfterTitle = chevronAt === "after-title";
   const triggerOnly = controls !== undefined;
+  // 0.48 (keksdose dev #603): no children, no body — an empty padded box under the
+  // header made an open disclosure 8px taller than a shut one, and its `aria-controls`
+  // named a region with nothing in it. `null`, `false` and `undefined` are nothing, and
+  // so is a fragment of nothing (`cond ? <X /> : <></>`, keksdose N1).
+  const hasBody = !triggerOnly && hasBodyContent(children);
   // The card's header squares its lower corners only when a body opens under it.
-  const joined = open && !triggerOnly;
+  const joined = open && hasBody;
   const hasTrailing = trailing !== undefined && trailing !== null && trailing !== false;
   // `trailing` beside the button, which then stretches under it; inside the button,
   // the row is simply the button.
@@ -334,7 +341,7 @@ export function Disclosure({
       type="button"
       aria-expanded={open}
       // `||`: an empty `controls` is trigger-only with nothing to name, not `aria-controls=""`.
-      aria-controls={triggerOnly ? controls || undefined : bodyId}
+      aria-controls={triggerOnly ? controls || undefined : hasBody ? bodyId : undefined}
       disabled={disabled}
       onClick={toggle}
       data-disclosure-trigger=""
@@ -424,7 +431,7 @@ export function Disclosure({
       ) : (
         header
       )}
-      {!triggerOnly && (
+      {hasBody && (
         <Collapse id={bodyId} open={open} keepMounted={keepMounted}>
           <div className={cn(card ? "space-y-3 px-4 pb-4" : !menu && "space-y-2 pt-2", bodyClassName)}>{children}</div>
         </Collapse>
@@ -461,3 +468,13 @@ function Chevron({
     />
   );
 }
+
+/** Whether `children` holds anything to draw: `null`/`false`/`undefined`/`""` are nothing,
+ *  and a fragment counts by what is in it (an empty `<></>` is nothing). */
+function hasBodyContent(children: ReactNode): boolean {
+  return Children.toArray(children).some((child) =>
+    isValidElement<{ children?: ReactNode }>(child) && child.type === Fragment
+      ? hasBodyContent(child.props.children)
+      : child !== "",
+  );
+}