@eifi1/ui-kit 0.48.1 → 0.48.2

package/dist/components/data-table-virtual.js

@@ -0,0 +1,369 @@
+"use client";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+const SELECT_KEY = "\0select";
+const VIRTUAL_SELECT_COL = SELECT_KEY;
+function firstBelow(m, y) {
+  let lo = 0;
+  let hi = m.n;
+  while (lo < hi) {
+    const mid = lo + hi >> 1;
+    if (m.tops[mid] + m.h[mid] > y) hi = mid;
+    else lo = mid + 1;
+  }
+  return lo;
+}
+function lastAbove(m, y) {
+  let lo = 0;
+  let hi = m.n;
+  while (lo < hi) {
+    const mid = lo + hi >> 1;
+    if (m.tops[mid] < y) lo = mid + 1;
+    else hi = mid;
+  }
+  return lo;
+}
+function planBodies(m, groups, start, end, pinned) {
+  const rendered = /* @__PURE__ */ new Set();
+  for (let i = Math.max(0, start); i < Math.min(m.n, end); i++) rendered.add(i);
+  for (const p of pinned) if (p >= 0 && p < m.n) rendered.add(p);
+  const sorted = [...rendered].sort((a, b) => a - b);
+  let anchor = -1;
+  if (sorted.length > 0 && start < m.n) {
+    const s = Math.max(0, start);
+    const g = groups.findIndex((gr) => s >= gr.start && s < gr.end);
+    if (g >= 0) anchor = groups[g].first;
+  }
+  const bottom = (i) => m.tops[i] + m.h[i];
+  const out = [];
+  let k = 0;
+  let skippedFrom = -1;
+  const flushSkipped = (upTo) => {
+    if (skippedFrom < 0) return;
+    out.push({ kind: "spacer", key: `vs:${skippedFrom}`, height: m.gTop[upTo] - m.gTop[skippedFrom] });
+    skippedFrom = -1;
+  };
+  groups.forEach((g, gi) => {
+    while (k < sorted.length && sorted[k] < g.start) k++;
+    const items = [];
+    let prevBottom = m.tops[g.start] ?? m.gTop[gi + 1];
+    let any = false;
+    while (k < sorted.length && sorted[k] < g.end) {
+      const i = sorted[k++];
+      const gap = m.tops[i] - prevBottom;
+      if (gap > 0.01) items.push({ kind: "gap", key: `gap:${i}`, height: gap });
+      items.push({ kind: "row", index: i });
+      prevBottom = bottom(i);
+      any = true;
+    }
+    if (!any && gi !== anchor) {
+      if (skippedFrom < 0) skippedFrom = gi;
+      return;
+    }
+    flushSkipped(gi);
+    const rest = m.gTop[gi + 1] - prevBottom;
+    if (rest > 0.01) items.push({ kind: "gap", key: `gap:end:${gi}`, height: rest });
+    out.push({ kind: "group", group: gi, items });
+  });
+  flushSkipped(groups.length);
+  return out;
+}
+function useRowWindow({
+  enabled,
+  rows,
+  rowKey,
+  groups,
+  expanded,
+  pinnedKeys,
+  scrollerRef,
+  tableRef,
+  options,
+  compact,
+  rowsBefore,
+  rowsAfter,
+  colKeys,
+  lockable,
+  resetKey
+}) {
+  const overscan = Math.max(1, options.overscan ?? 12);
+  const estimate = options.estimateRowHeight ?? (compact ? 29 : 37);
+  const n = rows.length;
+  const [measured, setMeasured] = useState(() => ({
+    heights: /* @__PURE__ */ new Map(),
+    details: /* @__PURE__ */ new Map(),
+    sum: 0,
+    count: 0,
+    band: [estimate, estimate * 0.8]
+  }));
+  const initialEnd = () => Math.min(n, Math.ceil((typeof window === "undefined" ? 800 : Math.min(window.innerHeight || 800, 1600)) / estimate) + overscan);
+  const [range, setRange] = useState(() => ({ start: 0, end: initialEnd() }));
+  const [focusTarget, setFocusTarget] = useState(null);
+  const [focusKey, setFocusKey] = useState(null);
+  const [scrollerWidth, setScrollerWidth] = useState(0);
+  const [lock, setLock] = useState(null);
+  const naturalOverflow = useRef(false);
+  const expandedSig = expanded.join(",");
+  const model = useMemo(() => {
+    if (!enabled) return null;
+    const keys = rows.map(rowKey);
+    const avg = measured.count > 0 ? measured.sum / measured.count : estimate;
+    const open = new Set(expanded);
+    const h = new Float64Array(n);
+    for (let i = 0; i < n; i++) {
+      h[i] = (measured.heights.get(keys[i]) ?? avg) + (open.has(i) ? measured.details.get(keys[i]) ?? 0 : 0);
+    }
+    const tops = new Float64Array(n + 1);
+    const gTop = new Float64Array(groups.length + 1);
+    const ariaRows = new Int32Array(n);
+    const ariaBands = new Int32Array(groups.length * 2);
+    let y = 0;
+    let aria = rowsBefore + 1;
+    groups.forEach((g, gi) => {
+      gTop[gi] = y;
+      for (const level of g.bands) {
+        y += measured.band[level - 1];
+        ariaBands[gi * 2 + level - 1] = aria++;
+      }
+      for (let i = g.start; i < g.end; i++) {
+        tops[i] = y;
+        y += h[i];
+        ariaRows[i] = aria++;
+        if (open.has(i)) aria++;
+      }
+    });
+    gTop[groups.length] = y;
+    tops[n] = y;
+    return { n, keys, tops, h, gTop, total: y, ariaRows, ariaBands, rowCount: aria - 1 + rowsAfter };
+  }, [enabled, rows, rowKey, groups, expandedSig, measured, estimate, n, rowsBefore, rowsAfter]);
+  const pinned = useMemo(() => {
+    if (!model) return [];
+    const out = [...expanded];
+    for (const key of [...pinnedKeys, focusKey]) {
+      if (key === null) continue;
+      const i = model.keys.indexOf(key);
+      if (i >= 0) out.push(i);
+    }
+    if (focusTarget !== null) out.push(focusTarget);
+    return out;
+  }, [model, expanded, pinnedKeys, focusKey, focusTarget]);
+  const pinnedSig = pinned.join(",");
+  const start = Math.min(range.start, n);
+  const end = Math.min(range.end, n);
+  const bodies = useMemo(
+    () => model ? planBodies(model, groups, start, end, pinned) : [],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, groups, start, end, pinnedSig]
+  );
+  const lockSig = `${resetKey}|${scrollerWidth}|${colKeys.join(",")}`;
+  const colWidths = lock && lock.sig === lockSig ? lock.widths : null;
+  const latest = useRef({ model, colWidths, lockSig, colKeys, lockable, overscan });
+  useLayoutEffect(() => {
+    latest.current = { model, colWidths, lockSig, colKeys, lockable, overscan };
+  });
+  const update = useCallback(() => {
+    const { model: m, overscan: over } = latest.current;
+    const sc = scrollerRef.current;
+    const table = tableRef.current;
+    if (!m || !sc || !table) return;
+    const origin = table.querySelector("tbody[data-vt-body]");
+    if (!origin) return;
+    const sr = sc.getBoundingClientRect();
+    const top = Math.max(sr.top, 0);
+    const bottom = Math.min(sr.bottom, window.innerHeight || sr.bottom);
+    if (!(bottom > top)) return;
+    const o = origin.getBoundingClientRect().top;
+    const a = Math.min(firstBelow(m, top - o), m.n);
+    const b = Math.max(a, Math.min(lastAbove(m, bottom - o), m.n));
+    setRange(
+      (prev) => prev.start <= a && prev.end >= b && prev.end <= m.n && prev.end - prev.start <= b - a + 4 * over ? prev : { start: Math.max(0, a - over), end: Math.min(m.n, b + over) }
+    );
+  }, [scrollerRef, tableRef]);
+  const measure = useCallback(() => {
+    const { model: m, colWidths: locked, lockSig: sig, colKeys: cols, lockable: lockKeys } = latest.current;
+    const table = tableRef.current;
+    const sc = scrollerRef.current;
+    if (!m || !table || !sc) return;
+    const trs = table.rows;
+    const rects = Array.from(trs, (tr) => tr.getBoundingClientRect());
+    const rowSamples = [];
+    const detailSamples = [];
+    const bandSamples = [];
+    for (let k = 0; k < trs.length; k++) {
+      const own = rects[k];
+      const next = rects[k + 1];
+      const h = next && next.top > own.top ? next.top - own.top : own.height;
+      if (!(h > 0)) continue;
+      const ds = trs[k].dataset;
+      if (ds.rowIndex !== void 0) {
+        const key = m.keys[Number(ds.rowIndex)];
+        if (key !== void 0) rowSamples.push([key, h]);
+      } else if (ds.rowDetail !== void 0) {
+        const key = m.keys[Number(ds.rowDetail)];
+        if (key !== void 0) detailSamples.push([key, h]);
+      } else if (ds.groupRow === "1" || ds.groupRow === "2") {
+        bandSamples.push([ds.groupRow === "1" ? 0 : 1, h]);
+      }
+    }
+    if (rowSamples.length + detailSamples.length + bandSamples.length > 0) {
+      setMeasured((prev) => {
+        let { heights, details, sum, count } = prev;
+        let band = prev.band;
+        for (const [key, h] of rowSamples) {
+          const old = heights.get(key);
+          if (old !== void 0 && Math.abs(old - h) <= 0.5) continue;
+          if (heights === prev.heights) heights = new Map(heights);
+          heights.set(key, h);
+          sum += h - (old ?? 0);
+          if (old === void 0) count++;
+        }
+        for (const [key, h] of detailSamples) {
+          const old = details.get(key);
+          if (old !== void 0 && Math.abs(old - h) <= 0.5) continue;
+          if (details === prev.details) details = new Map(details);
+          details.set(key, h);
+        }
+        for (const [level, h] of bandSamples) {
+          if (Math.abs(band[level] - h) <= 0.5) continue;
+          band = level === 0 ? [h, band[1]] : [band[0], h];
+        }
+        return heights === prev.heights && details === prev.details && band === prev.band ? prev : { heights, details, sum, count, band };
+      });
+    }
+    const cells = table.tHead?.rows[0]?.cells;
+    if (!cells || cells.length !== cols.length) return;
+    const widths = {};
+    let anyWidth = false;
+    for (let c = 0; c < cells.length; c++) {
+      if (!lockKeys.has(cols[c])) continue;
+      const w = cells[c].getBoundingClientRect().width;
+      if (w > 0) {
+        widths[cols[c]] = w;
+        anyWidth = true;
+      }
+    }
+    if (!anyWidth) return;
+    const over = table.getBoundingClientRect().width > sc.clientWidth + 1;
+    if (!locked) {
+      naturalOverflow.current = over;
+      setLock({ sig, widths });
+    } else if (over && !naturalOverflow.current) {
+      setLock(null);
+    } else {
+      let grew = false;
+      const merged = { ...locked };
+      for (const [key, w] of Object.entries(widths)) {
+        if (w > (merged[key] ?? 0) + 0.5) {
+          merged[key] = w;
+          grew = true;
+        }
+      }
+      if (grew) setLock({ sig, widths: merged });
+    }
+  }, [scrollerRef, tableRef]);
+  const frame = useRef(0);
+  const schedule = useCallback(() => {
+    if (frame.current) return;
+    const run = () => {
+      frame.current = 0;
+      measure();
+      update();
+    };
+    frame.current = typeof requestAnimationFrame === "undefined" ? -setTimeout(run, 16) : requestAnimationFrame(run);
+  }, [measure, update]);
+  useEffect(
+    () => () => {
+      if (frame.current > 0) cancelAnimationFrame(frame.current);
+      else if (frame.current < 0) clearTimeout(-frame.current);
+      frame.current = 0;
+    },
+    []
+  );
+  useEffect(() => {
+    if (!enabled) return;
+    const onScroll = () => update();
+    window.addEventListener("scroll", onScroll, { capture: true, passive: true });
+    window.addEventListener("resize", onScroll, { passive: true });
+    const sc = scrollerRef.current;
+    let ro;
+    if (sc && typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(() => {
+        setScrollerWidth(Math.round(sc.clientWidth));
+        update();
+      });
+      ro.observe(sc);
+    }
+    return () => {
+      window.removeEventListener("scroll", onScroll, { capture: true });
+      window.removeEventListener("resize", onScroll);
+      ro?.disconnect();
+    };
+  }, [enabled, update, scrollerRef]);
+  useEffect(() => {
+    const table = tableRef.current;
+    if (!enabled || !table) return;
+    const onIn = (e) => {
+      const tr = e.target?.closest?.("tr[data-row-index], tr[data-row-detail]");
+      const index = tr ? Number(tr.dataset.rowIndex ?? tr.dataset.rowDetail) : NaN;
+      const key = Number.isNaN(index) ? void 0 : latest.current.model?.keys[index];
+      setFocusKey(key ?? null);
+      setFocusTarget(null);
+    };
+    const onOut = (e) => {
+      const to = e.relatedTarget;
+      if (!to || !table.contains(to)) setFocusKey(null);
+    };
+    table.addEventListener("focusin", onIn);
+    table.addEventListener("focusout", onOut);
+    return () => {
+      table.removeEventListener("focusin", onIn);
+      table.removeEventListener("focusout", onOut);
+    };
+  }, [enabled, tableRef]);
+  const dataSig = n > 0 && model ? `${n}:${String(model.keys[0])}:${String(model.keys[n - 1])}` : "0";
+  const renderSig = `${start}:${end}:${dataSig}:${expandedSig}:${pinnedSig}:${lockSig}:${colWidths ? 1 : 0}`;
+  const lastRender = useRef("");
+  useLayoutEffect(() => {
+    if (!enabled || lastRender.current === renderSig) return;
+    lastRender.current = renderSig;
+    schedule();
+  });
+  const total = model?.total ?? 0;
+  useLayoutEffect(() => {
+    if (enabled) schedule();
+  }, [enabled, schedule, total, n]);
+  useLayoutEffect(() => {
+    if (focusTarget === null) return;
+    tableRef.current?.querySelector(`tr[data-row-index="${focusTarget}"]`)?.focus();
+  }, [focusTarget, bodies, tableRef]);
+  const focusRow = useCallback(
+    (i) => {
+      const el = tableRef.current?.querySelector(`tr[data-row-index="${i}"]`);
+      if (el) el.focus();
+      else setFocusTarget(i);
+    },
+    [tableRef]
+  );
+  if (!enabled || !model) return null;
+  return {
+    bodies,
+    rowCount: model.rowCount,
+    ariaRow: (i) => model.ariaRows[i],
+    ariaBand: (g, level) => model.ariaBands[g * 2 + level - 1],
+    colWidths,
+    focusRow
+  };
+}
+function rowNavTarget(from, key, n) {
+  if (n === 0) return null;
+  if (key === "ArrowDown") return Math.min(n - 1, from + 1);
+  if (key === "ArrowUp") return Math.max(0, from - 1);
+  if (key === "Home") return 0;
+  if (key === "End") return n - 1;
+  return null;
+}
+export {
+  VIRTUAL_SELECT_COL,
+  planBodies,
+  rowNavTarget,
+  useRowWindow
+};
+//# sourceMappingURL=data-table-virtual.js.map

package/dist/components/data-table-virtual.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/data-table-virtual.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { RefObject } from \"react\";\n\n// DataTable's row windowing (0.48.2, keksdose dev #632 — Marcel: \"The table is extremely\n// slow. Is it virtualised or is everytime the whole table rendered?\"). Opt-in through\n// `virtualize`: the desktop table renders the rows near the visible part of its scroller\n// (plus `overscan`) and stands spacer rows in for the rest, inside each group's own\n// `<tbody>`, so the sticky group bands keep working as they do on a full table — a band\n// cell's sticky containing block is the TABLE, and the latest band of each level that has\n// scrolled past is the one drawn (Chromium, checked with a probe at the group's middle,\n// its end and the next group's start).\n//\n// What it keeps rendered whatever the scroll: the header, the leading row, the band rows\n// of every group that has a rendered row (and the first day of the period the window\n// starts in, whose band is the period's), every OPEN row (`isExpanded`, so an inline\n// editor keeps its state), the roving tab stop, a row holding the focus, and the row the\n// keyboard is moving to.\n//\n// Heights: each rendered row is measured after render (the distance to the next row's\n// top, which is exact under collapsed borders where a row's own box is half a border\n// short) and remembered by its key; a row never rendered counts as the average of the\n// measured ones, or `estimateRowHeight` before any. The spacers are the sums, so the\n// scroll height settles as rows are seen. Scroll anchoring (the browser's) keeps the rows\n// in view still while a spacer above them is corrected.\n//\n// Column widths: in an auto table layout a column is as wide as its widest RENDERED\n// cell, so rows coming and going would move the columns. The header cells' widths are\n// read after the first render and locked into a `<colgroup>`, only ever growing while the\n// rows scroll (a wider cell arriving widens its column once; one leaving narrows\n// nothing). Re-measured from scratch when the data, the columns, a user width, the text\n// size or the scroller's width change — and when a grown column would push the table\n// past its scroller, which it fit before. A `grow` column and a user-resized one are not\n// locked (the first takes the rest, the second is pinned already).\n\n/** {@link DataTableProps.virtualize}'s options. */\nexport interface DataTableVirtualize {\n  /** Rows rendered beyond each edge of the visible part. Default 12. */\n  overscan?: number;\n  /** A row's height in px before it has been measured. Default: 37 (`comfortable`) /\n   *  29 (`compact`) — the kit's one-line rows. */\n  estimateRowHeight?: number;\n}\n\n/** One innermost group's run of rows, `[start, end)` in the rows on screen, with the\n *  band levels its `<tbody>` opens with. `first` is the index of the innermost group that\n *  opens its level-1 group (itself with one level). Ungrouped: one run with no bands. */\nexport interface VirtualGroup {\n  start: number;\n  end: number;\n  bands: readonly (1 | 2)[];\n  first: number;\n}\n\n/** A row, or a spacer standing in for the rows between two rendered ones. */\nexport type VirtualItem = { kind: \"row\"; index: number } | { kind: \"gap\"; key: string; height: number };\n\n/** A group's `<tbody>` with its rendered rows, or one spacer `<tbody>` for a run of\n *  groups of which nothing is rendered. */\nexport type VirtualBody =\n  | { kind: \"spacer\"; key: string; height: number }\n  | { kind: \"group\"; group: number; items: VirtualItem[] };\n\nexport interface RowWindow {\n  bodies: VirtualBody[];\n  /** `aria-rowcount`: every row of the table, header, bands, details and footer included. */\n  rowCount: number;\n  /** `aria-rowindex` of data row `i`; its detail row (open) is the next one. */\n  ariaRow: (i: number) => number;\n  /** `aria-rowindex` of group `g`'s band of `level`. */\n  ariaBand: (g: number, level: 1 | 2) => number;\n  /** The locked widths for the `<colgroup>`, by column key; null while measuring. */\n  colWidths: Record<string, number> | null;\n  /** Move the focus to row `i`, rendering it first when it is not. */\n  focusRow: (i: number) => void;\n}\n\n/** The heights measured so far, by row key; the bands' by level. */\ninterface Measured {\n  heights: Map<string | number, number>;\n  details: Map<string | number, number>;\n  sum: number;\n  count: number;\n  band: [number, number];\n}\n\nconst SELECT_KEY = \"\\u0000select\";\n/** The `<colgroup>` key of the selection column. */\nexport const VIRTUAL_SELECT_COL = SELECT_KEY;\n\ninterface Model {\n  n: number;\n  keys: (string | number)[];\n  /** Top of row i, from the top of the first group's `<tbody>`. */\n  tops: Float64Array;\n  /** Full height of row i (its detail row included while open). */\n  h: Float64Array;\n  /** Top of group g's `<tbody>`; [groups.length] is the total. */\n  gTop: Float64Array;\n  total: number;\n  ariaRows: Int32Array;\n  ariaBands: Int32Array;\n  rowCount: number;\n}\n\n/** First index whose bottom is below `y` (n when none). */\nfunction firstBelow(m: Model, y: number): number {\n  let lo = 0;\n  let hi = m.n;\n  while (lo < hi) {\n    const mid = (lo + hi) >> 1;\n    if (m.tops[mid] + m.h[mid] > y) hi = mid;\n    else lo = mid + 1;\n  }\n  return lo;\n}\n\n/** One past the last index whose top is above `y`. */\nfunction lastAbove(m: Model, y: number): number {\n  let lo = 0;\n  let hi = m.n;\n  while (lo < hi) {\n    const mid = (lo + hi) >> 1;\n    if (m.tops[mid] < y) lo = mid + 1;\n    else hi = mid;\n  }\n  return lo;\n}\n\n/** The `<tbody>`s to render: the groups holding a rendered row (or the period's first\n *  day, for its band), and one spacer for each run of groups in between. Pure. */\nexport function planBodies(\n  m: Pick<Model, \"n\" | \"tops\" | \"h\" | \"gTop\">,\n  groups: readonly VirtualGroup[],\n  start: number,\n  end: number,\n  pinned: readonly number[],\n): VirtualBody[] {\n  const rendered = new Set<number>();\n  for (let i = Math.max(0, start); i < Math.min(m.n, end); i++) rendered.add(i);\n  for (const p of pinned) if (p >= 0 && p < m.n) rendered.add(p);\n  const sorted = [...rendered].sort((a, b) => a - b);\n  // The group the window starts in, and the first day of its period.\n  let anchor = -1;\n  if (sorted.length > 0 && start < m.n) {\n    const s = Math.max(0, start);\n    const g = groups.findIndex((gr) => s >= gr.start && s < gr.end);\n    if (g >= 0) anchor = groups[g].first;\n  }\n  const bottom = (i: number) => m.tops[i] + m.h[i];\n  const out: VirtualBody[] = [];\n  let k = 0;\n  let skippedFrom = -1;\n  const flushSkipped = (upTo: number) => {\n    if (skippedFrom < 0) return;\n    out.push({ kind: \"spacer\", key: `vs:${skippedFrom}`, height: m.gTop[upTo] - m.gTop[skippedFrom] });\n    skippedFrom = -1;\n  };\n  groups.forEach((g, gi) => {\n    while (k < sorted.length && sorted[k] < g.start) k++;\n    const items: VirtualItem[] = [];\n    let prevBottom = m.tops[g.start] ?? m.gTop[gi + 1];\n    let any = false;\n    while (k < sorted.length && sorted[k] < g.end) {\n      const i = sorted[k++];\n      const gap = m.tops[i] - prevBottom;\n      if (gap > 0.01) items.push({ kind: \"gap\", key: `gap:${i}`, height: gap });\n      items.push({ kind: \"row\", index: i });\n      prevBottom = bottom(i);\n      any = true;\n    }\n    if (!any && gi !== anchor) {\n      if (skippedFrom < 0) skippedFrom = gi;\n      return;\n    }\n    flushSkipped(gi);\n    const rest = m.gTop[gi + 1] - prevBottom;\n    if (rest > 0.01) items.push({ kind: \"gap\", key: `gap:end:${gi}`, height: rest });\n    out.push({ kind: \"group\", group: gi, items });\n  });\n  flushSkipped(groups.length);\n  return out;\n}\n\nexport function useRowWindow<T>({\n  enabled,\n  rows,\n  rowKey,\n  groups,\n  expanded,\n  pinnedKeys,\n  scrollerRef,\n  tableRef,\n  options,\n  compact,\n  rowsBefore,\n  rowsAfter,\n  colKeys,\n  lockable,\n  resetKey,\n}: {\n  enabled: boolean;\n  /** The rows on screen, in order. */\n  rows: T[];\n  rowKey: (row: T) => string | number;\n  groups: readonly VirtualGroup[];\n  /** Indices of the open rows: always rendered, their detail rows counted. */\n  expanded: readonly number[];\n  /** Keys always rendered (the roving tab stop). */\n  pinnedKeys: readonly (string | number | null)[];\n  scrollerRef: RefObject<HTMLElement | null>;\n  tableRef: RefObject<HTMLTableElement | null>;\n  options: DataTableVirtualize;\n  compact: boolean;\n  /** Rows above the first group: the header, the leading row. */\n  rowsBefore: number;\n  /** Rows after the last: the totals row. */\n  rowsAfter: number;\n  /** The header cells' keys, in order (the selection column as {@link VIRTUAL_SELECT_COL}). */\n  colKeys: readonly string[];\n  /** The keys whose width is locked (not a `grow` column, not a user-resized one). */\n  lockable: ReadonlySet<string>;\n  /** Anything that re-measures the column widths from scratch when it changes. */\n  resetKey: string;\n}): RowWindow | null {\n  const overscan = Math.max(1, options.overscan ?? 12);\n  const estimate = options.estimateRowHeight ?? (compact ? 29 : 37);\n  const n = rows.length;\n\n  const [measured, setMeasured] = useState<Measured>(() => ({\n    heights: new Map(),\n    details: new Map(),\n    sum: 0,\n    count: 0,\n    band: [estimate, estimate * 0.8],\n  }));\n  const initialEnd = () =>\n    Math.min(n, Math.ceil((typeof window === \"undefined\" ? 800 : Math.min(window.innerHeight || 800, 1600)) / estimate) + overscan);\n  const [range, setRange] = useState(() => ({ start: 0, end: initialEnd() }));\n  const [focusTarget, setFocusTarget] = useState<number | null>(null);\n  const [focusKey, setFocusKey] = useState<string | number | null>(null);\n  const [scrollerWidth, setScrollerWidth] = useState(0);\n  const [lock, setLock] = useState<{ sig: string; widths: Record<string, number> } | null>(null);\n  const naturalOverflow = useRef(false);\n\n  const expandedSig = expanded.join(\",\");\n  const model = useMemo<Model | null>(() => {\n    if (!enabled) return null;\n    const keys = rows.map(rowKey);\n    const avg = measured.count > 0 ? measured.sum / measured.count : estimate;\n    const open = new Set(expanded);\n    const h = new Float64Array(n);\n    for (let i = 0; i < n; i++) {\n      h[i] = (measured.heights.get(keys[i]) ?? avg) + (open.has(i) ? (measured.details.get(keys[i]) ?? 0) : 0);\n    }\n    const tops = new Float64Array(n + 1);\n    const gTop = new Float64Array(groups.length + 1);\n    const ariaRows = new Int32Array(n);\n    const ariaBands = new Int32Array(groups.length * 2);\n    let y = 0;\n    let aria = rowsBefore + 1;\n    groups.forEach((g, gi) => {\n      gTop[gi] = y;\n      for (const level of g.bands) {\n        y += measured.band[level - 1];\n        ariaBands[gi * 2 + level - 1] = aria++;\n      }\n      for (let i = g.start; i < g.end; i++) {\n        tops[i] = y;\n        y += h[i];\n        ariaRows[i] = aria++;\n        if (open.has(i)) aria++;\n      }\n    });\n    gTop[groups.length] = y;\n    tops[n] = y;\n    return { n, keys, tops, h, gTop, total: y, ariaRows, ariaBands, rowCount: aria - 1 + rowsAfter };\n    // `expanded` by its signature.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [enabled, rows, rowKey, groups, expandedSig, measured, estimate, n, rowsBefore, rowsAfter]);\n\n  // The rows outside the range that stay: open rows, the tab stop, the focused row and\n  // the keyboard's target.\n  const pinned = useMemo(() => {\n    if (!model) return [];\n    const out = [...expanded];\n    for (const key of [...pinnedKeys, focusKey]) {\n      if (key === null) continue;\n      const i = model.keys.indexOf(key);\n      if (i >= 0) out.push(i);\n    }\n    if (focusTarget !== null) out.push(focusTarget);\n    return out;\n  }, [model, expanded, pinnedKeys, focusKey, focusTarget]);\n  const pinnedSig = pinned.join(\",\");\n\n  const start = Math.min(range.start, n);\n  const end = Math.min(range.end, n);\n  const bodies = useMemo(\n    () => (model ? planBodies(model, groups, start, end, pinned) : []),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [model, groups, start, end, pinnedSig],\n  );\n\n  const lockSig = `${resetKey}|${scrollerWidth}|${colKeys.join(\",\")}`;\n  const colWidths = lock && lock.sig === lockSig ? lock.widths : null;\n\n  // What the scroll handler and the frame's measure read: this render's model and lock.\n  const latest = useRef({ model, colWidths, lockSig, colKeys, lockable, overscan });\n  useLayoutEffect(() => {\n    latest.current = { model, colWidths, lockSig, colKeys, lockable, overscan };\n  });\n\n  // Which rows the visible part of the scroller (and of the window, for a table in a page\n  // that scrolls) shows, and a new range around them when the rendered one no longer\n  // covers them. Read from the client rects, which a scroll leaves laid out.\n  const update = useCallback(() => {\n    const { model: m, overscan: over } = latest.current;\n    const sc = scrollerRef.current;\n    const table = tableRef.current;\n    if (!m || !sc || !table) return;\n    const origin = table.querySelector<HTMLElement>(\"tbody[data-vt-body]\");\n    if (!origin) return;\n    const sr = sc.getBoundingClientRect();\n    const top = Math.max(sr.top, 0);\n    const bottom = Math.min(sr.bottom, window.innerHeight || sr.bottom);\n    if (!(bottom > top)) return;\n    const o = origin.getBoundingClientRect().top;\n    const a = Math.min(firstBelow(m, top - o), m.n);\n    const b = Math.max(a, Math.min(lastAbove(m, bottom - o), m.n));\n    setRange((prev) =>\n      prev.start <= a && prev.end >= b && prev.end <= m.n && prev.end - prev.start <= b - a + 4 * over\n        ? prev\n        : { start: Math.max(0, a - over), end: Math.min(m.n, b + over) },\n    );\n  }, [scrollerRef, tableRef]);\n\n  // After a render that changed what is drawn: measure the rendered rows and bands, and\n  // the header cells for the lock. Not after a render that only ticked a box. In the next\n  // animation frame rather than in the commit: there the browser lays the table out once\n  // for the frame anyway, where a read in the commit forced a layout of its own, and the\n  // re-render the heights cause forced another (Chromium, 3000 rows: 35–130 ms of forced\n  // layout per scrolled step, against one layout per frame now).\n  const measure = useCallback(() => {\n    const { model: m, colWidths: locked, lockSig: sig, colKeys: cols, lockable: lockKeys } = latest.current;\n    const table = tableRef.current;\n    const sc = scrollerRef.current;\n    if (!m || !table || !sc) return;\n    const trs = table.rows;\n    const rects = Array.from(trs, (tr) => tr.getBoundingClientRect());\n    const rowSamples: [string | number, number][] = [];\n    const detailSamples: [string | number, number][] = [];\n    const bandSamples: [0 | 1, number][] = [];\n    for (let k = 0; k < trs.length; k++) {\n      const own = rects[k];\n      const next = rects[k + 1];\n      // The distance to the next row's top: exact under collapsed borders.\n      const h = next && next.top > own.top ? next.top - own.top : own.height;\n      if (!(h > 0)) continue;\n      const ds = trs[k].dataset;\n      if (ds.rowIndex !== undefined) {\n        const key = m.keys[Number(ds.rowIndex)];\n        if (key !== undefined) rowSamples.push([key, h]);\n      } else if (ds.rowDetail !== undefined) {\n        const key = m.keys[Number(ds.rowDetail)];\n        if (key !== undefined) detailSamples.push([key, h]);\n      } else if (ds.groupRow === \"1\" || ds.groupRow === \"2\") {\n        bandSamples.push([ds.groupRow === \"1\" ? 0 : 1, h]);\n      }\n    }\n    if (rowSamples.length + detailSamples.length + bandSamples.length > 0) {\n      setMeasured((prev) => {\n        let { heights, details, sum, count } = prev;\n        let band = prev.band;\n        for (const [key, h] of rowSamples) {\n          const old = heights.get(key);\n          if (old !== undefined && Math.abs(old - h) <= 0.5) continue;\n          if (heights === prev.heights) heights = new Map(heights);\n          heights.set(key, h);\n          sum += h - (old ?? 0);\n          if (old === undefined) count++;\n        }\n        for (const [key, h] of detailSamples) {\n          const old = details.get(key);\n          if (old !== undefined && Math.abs(old - h) <= 0.5) continue;\n          if (details === prev.details) details = new Map(details);\n          details.set(key, h);\n        }\n        for (const [level, h] of bandSamples) {\n          if (Math.abs(band[level] - h) <= 0.5) continue;\n          band = level === 0 ? [h, band[1]] : [band[0], h];\n        }\n        return heights === prev.heights && details === prev.details && band === prev.band\n          ? prev\n          : { heights, details, sum, count, band };\n      });\n    }\n    // The column lock.\n    const cells = table.tHead?.rows[0]?.cells;\n    if (!cells || cells.length !== cols.length) return;\n    const widths: Record<string, number> = {};\n    let anyWidth = false;\n    for (let c = 0; c < cells.length; c++) {\n      if (!lockKeys.has(cols[c])) continue;\n      const w = cells[c].getBoundingClientRect().width;\n      if (w > 0) {\n        widths[cols[c]] = w;\n        anyWidth = true;\n      }\n    }\n    if (!anyWidth) return;\n    const over = table.getBoundingClientRect().width > sc.clientWidth + 1;\n    if (!locked) {\n      naturalOverflow.current = over;\n      setLock({ sig, widths });\n    } else if (over && !naturalOverflow.current) {\n      // A grown column pushed the table past a scroller it fit: measure afresh.\n      setLock(null);\n    } else {\n      let grew = false;\n      const merged = { ...locked };\n      for (const [key, w] of Object.entries(widths)) {\n        if (w > (merged[key] ?? 0) + 0.5) {\n          merged[key] = w;\n          grew = true;\n        }\n      }\n      if (grew) setLock({ sig, widths: merged });\n    }\n  }, [scrollerRef, tableRef]);\n\n  const frame = useRef(0);\n  const schedule = useCallback(() => {\n    if (frame.current) return;\n    const run = () => {\n      frame.current = 0;\n      measure();\n      update();\n    };\n    frame.current =\n      typeof requestAnimationFrame === \"undefined\" ? -(setTimeout(run, 16) as unknown as number) : requestAnimationFrame(run);\n  }, [measure, update]);\n  useEffect(\n    () => () => {\n      if (frame.current > 0) cancelAnimationFrame(frame.current);\n      else if (frame.current < 0) clearTimeout(-frame.current);\n      frame.current = 0;\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (!enabled) return;\n    const onScroll = () => update();\n    window.addEventListener(\"scroll\", onScroll, { capture: true, passive: true });\n    window.addEventListener(\"resize\", onScroll, { passive: true });\n    const sc = scrollerRef.current;\n    let ro: ResizeObserver | undefined;\n    if (sc && typeof ResizeObserver !== \"undefined\") {\n      ro = new ResizeObserver(() => {\n        setScrollerWidth(Math.round(sc.clientWidth));\n        update();\n      });\n      ro.observe(sc);\n    }\n    return () => {\n      window.removeEventListener(\"scroll\", onScroll, { capture: true });\n      window.removeEventListener(\"resize\", onScroll);\n      ro?.disconnect();\n    };\n  }, [enabled, update, scrollerRef]);\n\n  // The row holding the focus (a row, or a control in it or in its open detail) stays.\n  useEffect(() => {\n    const table = tableRef.current;\n    if (!enabled || !table) return;\n    const onIn = (e: FocusEvent) => {\n      const tr = (e.target as Element | null)?.closest?.<HTMLElement>(\"tr[data-row-index], tr[data-row-detail]\");\n      const index = tr ? Number(tr.dataset.rowIndex ?? tr.dataset.rowDetail) : NaN;\n      const key = Number.isNaN(index) ? undefined : latest.current.model?.keys[index];\n      setFocusKey(key ?? null);\n      setFocusTarget(null);\n    };\n    const onOut = (e: FocusEvent) => {\n      const to = e.relatedTarget as Node | null;\n      if (!to || !table.contains(to)) setFocusKey(null);\n    };\n    table.addEventListener(\"focusin\", onIn);\n    table.addEventListener(\"focusout\", onOut);\n    return () => {\n      table.removeEventListener(\"focusin\", onIn);\n      table.removeEventListener(\"focusout\", onOut);\n    };\n  }, [enabled, tableRef]);\n\n  const dataSig = n > 0 && model ? `${n}:${String(model.keys[0])}:${String(model.keys[n - 1])}` : \"0\";\n  const renderSig = `${start}:${end}:${dataSig}:${expandedSig}:${pinnedSig}:${lockSig}:${colWidths ? 1 : 0}`;\n  const lastRender = useRef(\"\");\n  useLayoutEffect(() => {\n    if (!enabled || lastRender.current === renderSig) return;\n    lastRender.current = renderSig;\n    schedule();\n  });\n\n  // A new layout (heights measured, rows added): the range may no longer cover the view.\n  const total = model?.total ?? 0;\n  useLayoutEffect(() => {\n    if (enabled) schedule();\n  }, [enabled, schedule, total, n]);\n\n  // The keyboard's target: rendered (pinned), then focused — its focus scrolls it into\n  // view, and the scroll renders the rows around it.\n  useLayoutEffect(() => {\n    if (focusTarget === null) return;\n    // Released by the focus it receives (the `focusin` above), which pins it as the\n    // focused row from then on.\n    tableRef.current?.querySelector<HTMLElement>(`tr[data-row-index=\"${focusTarget}\"]`)?.focus();\n  }, [focusTarget, bodies, tableRef]);\n\n  const focusRow = useCallback(\n    (i: number) => {\n      const el = tableRef.current?.querySelector<HTMLElement>(`tr[data-row-index=\"${i}\"]`);\n      if (el) el.focus();\n      else setFocusTarget(i);\n    },\n    [tableRef],\n  );\n\n  if (!enabled || !model) return null;\n  return {\n    bodies,\n    rowCount: model.rowCount,\n    ariaRow: (i) => model.ariaRows[i],\n    ariaBand: (g, level) => model.ariaBands[g * 2 + level - 1],\n    colWidths,\n    focusRow,\n  };\n}\n\n/** The roving rows' Arrow/Home/End target over ALL the rows, rendered or not. */\nexport function rowNavTarget(from: number, key: string, n: number): number | null {\n  if (n === 0) return null;\n  if (key === \"ArrowDown\") return Math.min(n - 1, from + 1);\n  if (key === \"ArrowUp\") return Math.max(0, from - 1);\n  if (key === \"Home\") return 0;\n  if (key === \"End\") return n - 1;\n  return null;\n}\n"],"mappings":"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","names":[]}

package/dist/components/data-table.d.ts

@@ -1,6 +1,8 @@
 import type { ReactNode, TdHTMLAttributes, ThHTMLAttributes } from "react";
 import { type DataTableGroupBy, type DataTableLoadMore } from "./data-table-groups.js";
 export type { DataTableGroupBy, DataTableLoadMore } from "./data-table-groups.js";
+import { type DataTableVirtualize } from "./data-table-virtual.js";
+export type { DataTableVirtualize } from "./data-table-virtual.js";
 import type { ColumnFilter, FilterValue } from "./data-table-filters.js";
 import type { SortCycle, SortDir, SortState } from "./data-table-sort.js";
 import type { SwipeAction } from "./swipeable-row.js";
@@ -557,6 +559,43 @@ export interface DataTableProps<T> {
      * {@link DataTableLoadMore}.
      */
     loadMore?: DataTableLoadMore;
+    /**
+     * 0.48.2 (keksdose dev #632, Marcel: "The table is extremely slow. Is it virtualised…?"):
+     * render only the desktop rows near the visible part of the scroller, plus `overscan`
+     * rows each side ({@link DataTableVirtualize}), with spacer rows standing in for the
+     * rest. For long lists — keksdose's register under `loadMore` holds 1000+ rows. Opt-in;
+     * without it every row renders, as before.
+     *
+     * - **Scroller:** the bounded body (`fillHeight` or `maxBodyHeight`), or the page when the
+     *   body is unbounded (`maxBodyHeight="none"`): the window is what of the table both the
+     *   scroller and the browser window show.
+     * - **Kept rendered:** the header, the `leadingRow`, the group bands (sticky and stacked
+     *   as before; a period's band while any of its rows is in view), every OPEN row (so an
+     *   inline editor in `expandedRow` keeps its state), the roving tab stop and a row
+     *   holding the focus. The `loadMore` footer follows the last spacer and loads once.
+     * - **Heights:** each rendered row is measured and remembered by its key; a row not yet
+     *   seen counts as the measured average (`estimateRowHeight` before any). The scroll
+     *   height settles as the rows are seen; the browser's scroll anchoring holds the rows in
+     *   view while a spacer above is corrected (Safari has none: a jump of the difference
+     *   is possible there on the first pass).
+     * - **Columns:** the header widths are measured once and locked in a `<colgroup>`, so the
+     *   columns do not move as rows come and go; a wider cell scrolling in widens its column
+     *   (once). Re-measured when the rows, the columns, a width or the scroller's width
+     *   change. A `grow` column and a resized one are not locked.
+     * - **Keyboard and screen reader:** Arrow/Home/End move over every row — the target is
+     *   rendered, then focused (End reaches the last row); Shift+click ranges and select-all
+     *   work on the data, not the DOM. The table has `aria-rowcount`, every rendered row its
+     *   `aria-rowindex` (bands, details and the totals row counted); spacers are
+     *   `aria-hidden`.
+     * - **Trade-offs:** the browser's find-in-page sees only the rendered rows, and so does
+     *   print; an `id` from `rowAttributes` (an anchor, an `aria-controls` target, a
+     *   `scrollIntoView` on a fresh row) exists only while its row is rendered. Memoise
+     *   `columns` (and `mobileCard`): the rows bail out of a render only then, and a scroll
+     *   renders the rows that come in, not the whole window.
+     * - **Phone:** desktop only. The card list renders every row it holds (`loadMore`,
+     *   `paginated={false}`) or reveals them in chunks as it is scrolled (client paging).
+     */
+    virtualize?: boolean | DataTableVirtualize;
     /**
      * 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
@@ -786,4 +825,4 @@ export interface DataTableSortLabels {
  *  (DataTableLabels extends DataTableSortLabels; one source for the English). */
 export declare const DEFAULT_DATA_TABLE_SORT_LABELS: DataTableSortLabels;
 import { type TableUrlSync } from "./use-table-state.js";
-export declare function DataTable<T>({ rows, columns: columnsProp, rowKey, defaultPageSize, onRowClick, rowHref, expandedRow, isExpanded, rowClassName, rowAttributes, paginated, empty, storageKey, urlSync, fillHeight, maxBodyHeight, serverPagination, serverRows: serverRowsProp, filters: filtersProp, onFiltersChange, sorts: sortsProp, onSortsChange, pageSize: pageSizeProp, onPageSizeChange, selection, labels: labelsProp, locale: localeProp, storageKeyPrefix: storageKeyPrefixProp, mobileExpandAsDialog, mobileDetailsInRow, rowName, mobileDialogBackCloses, mobileGroupBy, mobileGroupLabel, mobileCard, mobileSort, mobileSwipeActions, desktopSwipeActions, leadingRow, leadingRowSticky, groupBy, loadMore, density, sortCycle, chrome, columnSettings: columnSettingsProp, resizable: resizableProp, multiSort: multiSortProp, frame, edgeFade, className, rowActions, rowActionsHeader, toolbar, footerLabel, footer: footerProp, }: DataTableProps<T>): import("react").JSX.Element;
+export declare function DataTable<T>({ rows, columns: columnsProp, rowKey, defaultPageSize, onRowClick, rowHref, expandedRow, isExpanded, rowClassName, rowAttributes, paginated, empty, storageKey, urlSync, fillHeight, maxBodyHeight, serverPagination, serverRows: serverRowsProp, filters: filtersProp, onFiltersChange, sorts: sortsProp, onSortsChange, pageSize: pageSizeProp, onPageSizeChange, selection, labels: labelsProp, locale: localeProp, storageKeyPrefix: storageKeyPrefixProp, mobileExpandAsDialog, mobileDetailsInRow, rowName, mobileDialogBackCloses, mobileGroupBy, mobileGroupLabel, mobileCard, mobileSort, mobileSwipeActions, desktopSwipeActions, leadingRow, leadingRowSticky, groupBy, loadMore, virtualize, density, sortCycle, chrome, columnSettings: columnSettingsProp, resizable: resizableProp, multiSort: multiSortProp, frame, edgeFade, className, rowActions, rowActionsHeader, toolbar, footerLabel, footer: footerProp, }: DataTableProps<T>): import("react").JSX.Element;