flexdesk 0.6.1 → 0.6.3

package/README.md

@@ -354,6 +354,50 @@ lock.setEnabled(false);   // scroll each side on its own; true brings them level
   position the lock itself wrote moves nobody back. The lock copies pixels, so
   it lines rows up only when both sides draw rows of the same height.
 
+### A server's rows in pages or as one list: `paging`
+
+`paging` (off unless you set it) shows rows that your code fetches from a
+server either one page at a time or as one list that loads more as the reader
+scrolls. A strip under the body shows which rows are loaded. It has the page
+buttons or a *Load all rows* button, and a Pages / Scroll switch if you pass
+`onModeChange`. Set `paging` and the old pager (`pagination`) is not drawn.
+
+```js
+new DataTable(host, {
+    headers, rows,                       // the rows you hold: one page, or all scrolled so far
+    virtualize: true,
+    paging: {
+        mode: 'scroll',                  // what was asked for: 'pages' or 'scroll'
+        pageSize: 1000,
+        softLimit: 10000,                // above this many rows the table is always paged
+        total: 22521,                    // exact count, or null if unknown
+        atLeast: 0,                      // a lower bound when the count is not known
+        offset: 0,                       // in pages: where rows[0] is in the source
+        hasMore: true,
+        onPage: (offset, limit) => fetchPage(offset),
+        onLoadMore: () => fetchNext(),   // called near the end of the scroll
+        onLoadAll: () => fetchRest(),
+        onModeChange: (mode) => remember(mode),
+    },
+});
+```
+
+Your code holds the rows and fetches them. The table decides how to show them
+with `resolvePaging`, which is exported so your code gets the same answer when
+it decides what to fetch. A source with more rows than `softLimit` is shown in
+pages even if scroll was asked for. The strip says so, and Scroll is disabled
+with the reason. `softLimit` can't be more than `hardLimit` (default and
+ceiling `PAGING_HARD_LIMIT`, 100,000), and a scrolling table never asks for rows
+past it. If no count is known, the rows already loaded count as evidence: a
+table that has loaded more than `softLimit` rows and still has more is paged.
+While scrolling, `onLoadMore` is called within 400px of the end, or after
+render when the rows don't fill the box. It is never called when the box has
+no height, for example in a hidden tab. A callback that returns a Promise
+blocks the next call until it settles, and the strip shows the table busy.
+`setPaging(patch)` redraws the strip only, for example when a count arrives.
+In pages, `showRowNumbers: 'position'` numbers rows from `offset`. Row indexes
+(`__rowIndex`, the selection, `onRowClick`) still refer to positions in `rows`.
+
 ### Scrollbars
 
 `installAutoScrollbars(root)` (from `@flexdesk/widgets`) replaces the browser's

package/css/base.css

@@ -1648,6 +1648,49 @@ body.twm-window-maximized .twm-resize-handle {
     opacity: 0.3;
     cursor: not-allowed;
 }
+/* `paging` — the strip UNDER a paged or scrolling DataTable's body: which rows
+ * are held, the page buttons or Load all, why a large source is paged, and the
+ * Pages / Scroll switch. */
+.twm-dt-paging {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    flex: 0 0 auto;
+    min-width: 0;
+    padding: var(--space-xs) var(--space-md);
+    border-top: 1px solid var(--border-subtle);
+    font-size: var(--font-size-sm);
+    color: var(--text-muted);
+    white-space: nowrap;
+    overflow: hidden;
+}
+.twm-dt-paging__info { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.twm-dt-paging__spacer { flex: 1 1 auto; }
+.twm-dt-paging__nav { display: inline-flex; align-items: center; gap: var(--space-xs); }
+.twm-dt-paging__page { min-width: 72px; text-align: center; }
+.twm-dt-paging .twm-pagination-btn { height: 20px; min-width: 22px; }
+.twm-dt-paging__note { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }
+.twm-dt-paging__all,
+.twm-dt-paging__mode {
+    height: 20px;
+    padding: 0 var(--space-md);
+    background: transparent;
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-sm);
+    color: var(--text-body);
+    font: inherit;
+    cursor: pointer;
+}
+.twm-dt-paging__all:hover:not(:disabled),
+.twm-dt-paging__mode:hover:not(:disabled) { border-color: var(--accent); color: var(--text-bright); }
+.twm-dt-paging__modes { display: inline-flex; }
+.twm-dt-paging__mode { border-radius: 0; }
+.twm-dt-paging__mode:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
+.twm-dt-paging__mode:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-left: -1px; }
+.twm-dt-paging__mode[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--text-bright); }
+.twm-dt-paging__all:disabled,
+.twm-dt-paging__mode:disabled { opacity: 0.45; cursor: not-allowed; }
+.twm-dt-paging__mode[aria-pressed="true"]:disabled { opacity: 1; cursor: default; }
 /* Preview Table Styles - Essential for data view */
 .twm-preview-table-wrap { 
     overflow: auto; 

package/css/flexdesk.css

@@ -1746,6 +1746,49 @@ body.twm-window-maximized .twm-resize-handle {
     opacity: 0.3;
     cursor: not-allowed;
 }
+/* `paging` — the strip UNDER a paged or scrolling DataTable's body: which rows
+ * are held, the page buttons or Load all, why a large source is paged, and the
+ * Pages / Scroll switch. */
+.twm-dt-paging {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    flex: 0 0 auto;
+    min-width: 0;
+    padding: var(--space-xs) var(--space-md);
+    border-top: 1px solid var(--border-subtle);
+    font-size: var(--font-size-sm);
+    color: var(--text-muted);
+    white-space: nowrap;
+    overflow: hidden;
+}
+.twm-dt-paging__info { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.twm-dt-paging__spacer { flex: 1 1 auto; }
+.twm-dt-paging__nav { display: inline-flex; align-items: center; gap: var(--space-xs); }
+.twm-dt-paging__page { min-width: 72px; text-align: center; }
+.twm-dt-paging .twm-pagination-btn { height: 20px; min-width: 22px; }
+.twm-dt-paging__note { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }
+.twm-dt-paging__all,
+.twm-dt-paging__mode {
+    height: 20px;
+    padding: 0 var(--space-md);
+    background: transparent;
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-sm);
+    color: var(--text-body);
+    font: inherit;
+    cursor: pointer;
+}
+.twm-dt-paging__all:hover:not(:disabled),
+.twm-dt-paging__mode:hover:not(:disabled) { border-color: var(--accent); color: var(--text-bright); }
+.twm-dt-paging__modes { display: inline-flex; }
+.twm-dt-paging__mode { border-radius: 0; }
+.twm-dt-paging__mode:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
+.twm-dt-paging__mode:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-left: -1px; }
+.twm-dt-paging__mode[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--text-bright); }
+.twm-dt-paging__all:disabled,
+.twm-dt-paging__mode:disabled { opacity: 0.45; cursor: not-allowed; }
+.twm-dt-paging__mode[aria-pressed="true"]:disabled { opacity: 1; cursor: default; }
 /* Preview Table Styles - Essential for data view */
 .twm-preview-table-wrap { 
     overflow: auto; 

package/dist/charts.js

@@ -39,10 +39,10 @@ import {
   setPlotlySource,
   uid,
   updateChart
-} from "./chunk-ZMCRDOCF.js";
+} from "./chunk-WAVLVXYV.js";
 import {
   createRafResizeObserver
-} from "./chunk-IYV5JVYB.js";
+} from "./chunk-WLASPRGP.js";
 import {
   ManagedWindow
 } from "./chunk-6JSOVNID.js";

package/dist/{chunk-ZMCRDOCF.js → chunk-WAVLVXYV.js}

@@ -1,7 +1,7 @@
 import {
   DataTable,
   createRafResizeObserver
-} from "./chunk-IYV5JVYB.js";
+} from "./chunk-WLASPRGP.js";
 import {
   ManagedWindow
 } from "./chunk-6JSOVNID.js";
@@ -2370,4 +2370,4 @@ export {
   openPlotPopoutWindow,
   openRawTracesWindow
 };
-//# sourceMappingURL=chunk-ZMCRDOCF.js.map
+//# sourceMappingURL=chunk-WAVLVXYV.js.map

package/dist/{chunk-IYV5JVYB.js → chunk-WLASPRGP.js}

@@ -361,6 +361,34 @@ function matchDurationFilter(ms, filterText, shown) {
 // src/ui/components/data_table.js
 var DEFAULT_PAGE_SIZE = 100;
 var DIFF_STATUSES = /* @__PURE__ */ new Set(["added", "removed", "changed", "same", "gap"]);
+var PAGING_HARD_LIMIT = 1e5;
+var PAGING_SOFT_LIMIT = 1e4;
+function resolvePaging({
+  mode = "scroll",
+  total = null,
+  atLeast = 0,
+  held = 0,
+  hasMore = false,
+  softLimit = PAGING_SOFT_LIMIT,
+  hardLimit = PAGING_HARD_LIMIT
+} = {}) {
+  const requested = mode === "pages" ? "pages" : "scroll";
+  const hard = Number.isFinite(hardLimit) && hardLimit >= 1 ? Math.floor(hardLimit) : PAGING_HARD_LIMIT;
+  const soft = Math.min(hard, Number.isFinite(softLimit) && softLimit >= 1 ? Math.floor(softLimit) : PAGING_SOFT_LIMIT);
+  const exact = Number.isFinite(total) && total >= 0;
+  const known = exact ? total : Math.max(Number.isFinite(atLeast) ? atLeast : 0, (held || 0) + (hasMore ? 1 : 0));
+  const forced = requested === "scroll" && known > soft;
+  return {
+    mode: forced ? "pages" : requested,
+    requested,
+    forced,
+    softLimit: soft,
+    hardLimit: hard,
+    known,
+    exact
+  };
+}
+var PAGING_LOAD_MORE_PX = 400;
 var TYPED_COLUMNS = /* @__PURE__ */ new Set(["date", "datetime", "duration"]);
 var DESELECTING_CLICKS = /* @__PURE__ */ new WeakSet();
 var AUTO_DISPOSE = /* @__PURE__ */ new Map();
@@ -513,6 +541,9 @@ var DataTable = class {
       // promise that adding the key changed no existing layout by a
       // pixel. Only a consumer that asks for 'content' sees anything new.
       columnFit: "container",
+      // Off unless asked for — see the typedef. With it the old pager is
+      // not drawn: the paging strip says the same and more.
+      paging: null,
       // C10. Off unless asked for — see the typedef.
       virtualize: false,
       virtualRowHeight: null,
@@ -925,7 +956,7 @@ var DataTable = class {
       this._wrapperEl.style.cssText = "display:flex; flex-direction:column; height:100%; min-height:0;";
     }
     this._loading = false;
-    if (pagination && rows.length > 0) {
+    if (pagination && rows.length > 0 && !this._pagingConfig()) {
       this._paginationEl = this._createPagination();
       if (this._paginationEl) this._wrapperEl.appendChild(this._paginationEl);
     }
@@ -1011,6 +1042,11 @@ var DataTable = class {
       this._wrapperEl.appendChild(tableWrap);
     }
     this._tableWrapEl = tableWrap;
+    this._pagingEl = null;
+    if (this._pagingConfig()) {
+      this._pagingEl = this._createPagingStrip();
+      if (this._pagingEl) this._wrapperEl.appendChild(this._pagingEl);
+    }
     this.container.appendChild(this._wrapperEl);
     if (this.config.scrollLock && typeof this.config.scrollLock.attach === "function") {
       this._disposers.push(this.config.scrollLock.attach(tableWrap));
@@ -1028,8 +1064,19 @@ var DataTable = class {
       this._virtMeasure();
       this._virtUpdate({ force: true, notify: false });
     }
+    if (this._pagingConfig()) {
+      const onScroll = () => this._pagingMaybeLoadMore();
+      tableWrap.addEventListener("scroll", onScroll, { passive: true });
+      this._disposers.push(() => tableWrap.removeEventListener("scroll", onScroll));
+      requestAnimationFrame(() => {
+        if (this._tableWrapEl === tableWrap) this._pagingMaybeLoadMore();
+      });
+    }
     if (this._headerTableEl && this._tableEl) {
-      requestAnimationFrame(() => this._syncHeaderWidths());
+      requestAnimationFrame(() => {
+        this._syncHeaderWidths();
+        this._virtRemeasure();
+      });
       if (this._resizeObserver) {
         try {
           this._resizeObserver.disconnect();
@@ -1890,13 +1937,234 @@ var DataTable = class {
     btn.addEventListener("click", onClick);
     return btn;
   }
+  // ── `paging` ────────────────────────────────────────────────────────────
+  /** The `paging` config with its defaults, or null when it is not set. */
+  _pagingConfig() {
+    const p = this.config.paging;
+    if (!p || typeof p !== "object") return null;
+    const size = Number.isFinite(p.pageSize) && p.pageSize >= 1 ? Math.floor(p.pageSize) : this.config.pageSize;
+    return {
+      ...p,
+      pageSize: size,
+      offset: Number.isFinite(p.offset) && p.offset > 0 ? Math.floor(p.offset) : 0,
+      // What the table holds of the source. A consumer whose `rows` carry
+      // a row the source does not (a blank line to type into) says so.
+      held: Number.isFinite(p.held) ? p.held : this.config.rows?.length || 0,
+      hasMore: !!p.hasMore,
+      loadMorePx: Number.isFinite(p.loadMorePx) ? p.loadMorePx : PAGING_LOAD_MORE_PX
+    };
+  }
+  /**
+   * Which way the rows are shown, and why — `resolvePaging` over this
+   * table's facts. `null` without `paging`.
+   */
+  get pagingState() {
+    const p = this._pagingConfig();
+    if (!p) return null;
+    return resolvePaging({
+      mode: p.mode,
+      total: p.total,
+      atLeast: p.atLeast,
+      held: p.offset + p.held,
+      hasMore: p.hasMore,
+      softLimit: p.softLimit,
+      hardLimit: p.hardLimit
+    });
+  }
+  /**
+   * Change some `paging` facts — a count that arrived, a mode — and redraw
+   * the STRIP only. The rows are not touched: a consumer with new rows
+   * renders the table as it always has.
+   */
+  setPaging(patch = {}) {
+    if (!this.config.paging) return;
+    this.config.paging = { ...this.config.paging, ...patch };
+    this._refreshPagingStrip();
+    this._pagingMaybeLoadMore();
+  }
+  _refreshPagingStrip() {
+    if (!this._wrapperEl) return;
+    const next = this._pagingConfig() ? this._createPagingStrip() : null;
+    const prev = this._pagingEl;
+    if (prev && prev.parentNode === this._wrapperEl) {
+      if (next) prev.replaceWith(next);
+      else prev.remove();
+    } else if (next) {
+      this._wrapperEl.appendChild(next);
+    }
+    this._pagingEl = next;
+  }
+  /**
+   * Call one of the consumer's paging callbacks. A Promise holds every other
+   * paging call back until it settles, and the strip shows the table busy —
+   * a second `onLoadMore` fired by the next scroll event would fetch the same
+   * page twice.
+   */
+  _pagingCall(kind, fn, ...args) {
+    if (typeof fn !== "function" || this._pagingBusy) return;
+    let result;
+    try {
+      result = fn(...args);
+    } catch (err) {
+      console.error(`[DataTable] paging ${kind} threw`, err);
+      return;
+    }
+    if (result && typeof result.then === "function") {
+      this._pagingBusy = kind;
+      this._refreshPagingStrip();
+      const settle = () => {
+        if (this._pagingBusy !== kind) return;
+        this._pagingBusy = null;
+        if (this._pagingEl?.isConnected) this._refreshPagingStrip();
+      };
+      result.then(settle, (err) => {
+        console.error(`[DataTable] paging ${kind} failed`, err);
+        settle();
+      });
+    }
+  }
+  /**
+   * Scrolling: ask for the next rows when the body is near its end — or does
+   * not fill its box, which no scroll can ever change. Never past the hard
+   * limit, never in pages, never with no layout (a hidden table's box is 0px
+   * tall, and "0 ≤ 0" would ask for the whole source).
+   */
+  _pagingMaybeLoadMore() {
+    const p = this._pagingConfig();
+    if (!p || !p.hasMore || this._pagingBusy) return;
+    const state = this.pagingState;
+    if (state.mode !== "scroll" || p.held >= state.hardLimit) return;
+    const wrap = this._tableWrapEl;
+    if (!wrap?.isConnected || !(wrap.clientHeight > 0)) return;
+    const remaining = wrap.scrollHeight - wrap.scrollTop - wrap.clientHeight;
+    if (remaining >= p.loadMorePx) return;
+    this._pagingCall("more", p.onLoadMore);
+  }
+  /** The strip under the body, or null when it would say nothing. */
+  _createPagingStrip() {
+    const p = this._pagingConfig();
+    const state = this.pagingState;
+    const { mode, forced, exact, known } = state;
+    const busy = this._pagingBusy;
+    const n = (x) => Number(x).toLocaleString();
+    const pageSize = p.pageSize;
+    const held = p.held;
+    const total = exact ? p.total : null;
+    const morePages = p.offset > 0 || p.hasMore || exact && total > held;
+    if (!forced && mode === "scroll" && !p.hasMore && held <= pageSize) return null;
+    if (!forced && mode === "pages" && !morePages) return null;
+    const el = document.createElement("div");
+    el.className = `twm-dt-paging twm-dt-paging--${mode}`;
+    el.setAttribute("role", "navigation");
+    el.setAttribute("aria-label", "Rows");
+    if (busy) el.classList.add("twm-dt-paging--busy");
+    const info = document.createElement("span");
+    info.className = "twm-dt-paging__info";
+    el.appendChild(info);
+    if (mode === "pages") {
+      const from = held ? p.offset + 1 : p.offset;
+      const to = p.offset + held;
+      let of = "";
+      if (exact) of = ` of ${n(total)}`;
+      else if (known > to) of = ` of more than ${n(known - 1)}`;
+      info.textContent = held ? `Rows ${n(from)}\u2013${n(to)}${of}` : "No rows on this page";
+      const hasPrev = p.offset > 0;
+      const hasNext = exact ? p.offset + held < total : p.hasMore;
+      const lastOffset = exact && total > 0 ? Math.floor((total - 1) / pageSize) * pageSize : null;
+      const go = (offset) => (ev) => {
+        if (!ev?.currentTarget?.disabled) this._pagingCall("page", p.onPage, offset, pageSize);
+      };
+      const nav = document.createElement("span");
+      nav.className = "twm-dt-paging__nav";
+      const off = !!busy || typeof p.onPage !== "function";
+      nav.append(
+        this._createPaginationBtn("first_page", "First page", off || !hasPrev, go(0)),
+        this._createPaginationBtn(
+          "chevron_left",
+          "Previous page",
+          off || !hasPrev,
+          go(Math.max(0, p.offset - pageSize))
+        )
+      );
+      const page = document.createElement("span");
+      page.className = "twm-dt-paging__page";
+      const current = Math.floor(p.offset / pageSize) + 1;
+      page.textContent = exact ? `Page ${n(current)} of ${n(Math.max(1, Math.ceil(total / pageSize)))}` : `Page ${n(current)}`;
+      nav.append(
+        page,
+        this._createPaginationBtn(
+          "chevron_right",
+          "Next page",
+          off || !hasNext,
+          go(p.offset + pageSize)
+        ),
+        // The last page needs the exact count: without it there is no
+        // offset to go to, and the button says so by being off.
+        this._createPaginationBtn(
+          "last_page",
+          lastOffset === null ? "Last page (the total is not known)" : "Last page",
+          off || !hasNext || lastOffset === null,
+          go(lastOffset)
+        )
+      );
+      el.appendChild(nav);
+    } else {
+      if (exact && total > held) info.textContent = `${n(held)} of ${n(total)} rows`;
+      else if (p.hasMore) info.textContent = `${n(held)} rows, more to come`;
+      else info.textContent = `${n(held)} rows`;
+      if (p.hasMore && typeof p.onLoadAll === "function") {
+        const all = document.createElement("button");
+        all.type = "button";
+        all.className = "twm-dt-paging__all";
+        all.textContent = busy === "all" ? "Loading\u2026" : exact ? `Load all ${n(total)} rows` : "Load all rows";
+        all.disabled = !!busy;
+        all.addEventListener("click", () => {
+          if (!all.disabled) this._pagingCall("all", p.onLoadAll);
+        });
+        el.appendChild(all);
+      }
+    }
+    const spacer = document.createElement("span");
+    spacer.className = "twm-dt-paging__spacer";
+    el.appendChild(spacer);
+    const why = forced ? `More than ${n(state.softLimit)} rows, so they are shown in pages.` : null;
+    if (why) {
+      const note = document.createElement("span");
+      note.className = "twm-dt-paging__note";
+      note.textContent = why;
+      el.appendChild(note);
+    }
+    if (typeof p.onModeChange === "function") {
+      const group = document.createElement("span");
+      group.className = "twm-dt-paging__modes";
+      group.setAttribute("role", "group");
+      group.setAttribute("aria-label", "Show rows");
+      for (const [value, label] of [["pages", "Pages"], ["scroll", "Scroll"]]) {
+        const b = document.createElement("button");
+        b.type = "button";
+        b.className = "twm-dt-paging__mode";
+        b.dataset.mode = value;
+        b.textContent = label;
+        const pressed = mode === value;
+        b.setAttribute("aria-pressed", String(pressed));
+        b.disabled = !!busy || value === "scroll" && forced;
+        if (value === "scroll" && forced) b.title = why;
+        b.addEventListener("click", () => {
+          if (!b.disabled && mode !== value) this._pagingCall("mode", p.onModeChange, value);
+        });
+        group.appendChild(b);
+      }
+      el.appendChild(group);
+    }
+    return el;
+  }
   _createTable() {
     const { headers, rows, pageSize, sortable, filterable, showRowNumbers, readonly, getHeaderIcon, onPageChange, offset: configOffset } = this.config;
     const { sortColumn, sortAscending } = this._state;
     const isServerSide = typeof onPageChange === "function";
     const processedRows = isServerSide ? rows : this._getProcessedRows();
     const offset = isServerSide ? configOffset || 0 : this._state.offset;
-    const pageRows = isServerSide || !this.config.pagination ? processedRows : processedRows.slice(offset, offset + pageSize);
+    const pageRows = isServerSide || !this.config.pagination || this._pagingConfig() ? processedRows : processedRows.slice(offset, offset + pageSize);
     const table = document.createElement("table");
     table.className = this._tableClassName();
     table.tabIndex = 0;
@@ -1959,6 +2227,8 @@ var DataTable = class {
       return isServerSide ? (configOffset || 0) + localIdx : this._processedIndexMap?.[processedIdx] ?? processedIdx;
     };
     this._positionBase = isServerSide ? configOffset || 0 : this.config.pagination ? offset : 0;
+    const paged = this._pagingConfig();
+    if (paged && Number.isFinite(paged.offset)) this._positionBase += paged.offset;
     const tbody = document.createElement("tbody");
     table.appendChild(tbody);
     this._tbodyEl = tbody;
@@ -2144,26 +2414,51 @@ var DataTable = class {
     }
     return lo;
   }
-  /** Measure one real row. Client pixels, so the zoom is divided back out —
-   *  `_measureNaturalWidths` explains why — and NOT `offsetHeight`, which is
-   *  rounded: 21 for a 21.19px row is a 1,100px error over 6,000 rows. */
+  /**
+   * Measure the rows that are DRAWN — the median of up to 64 of them. Client
+   * pixels, so the zoom is divided back out (`_measureNaturalWidths` explains
+   * why), and NOT `offsetHeight`, which is rounded: 21 for a 21.19px row is a
+   * 1,100px error over 6,000 rows.
+   *
+   * 0.6.3: IT USED TO MEASURE ONE ROW, ONCE, AT RENDER, and trust it for the
+   * life of the table. A row measured at a bad moment — a box not yet laid
+   * out at its width, a font not yet loaded — set every row's height: a
+   * Tables grid drawing 22.8px rows was found holding a 134px estimate, so the
+   * window took a 650px viewport for five rows, drew rows 1–35 and left the
+   * rest of the box blank spacer while the reader scrolled. Now it is asked
+   * again on every window update (`_virtUpdate`), on a resize and once the
+   * column widths are fixed, and corrects itself the first time real rows
+   * are on screen. The first measure is exact; after that a change has to be
+   * larger than half a pixel, so rows of mixed heights cannot make the
+   * offsets move under the reader on every scroll.
+   *
+   * @returns {boolean} whether the heights changed (the offsets are recomputed).
+   */
   _virtMeasure() {
     const v = this._virt;
     if (!v) return false;
+    const zoom = this._tableEl?.currentCSSZoom || 1;
+    const heights = [];
     for (const tr of v.map.values()) {
       if (!tr.isConnected || tr.hidden) continue;
-      const zoom = this._tableEl?.currentCSSZoom || 1;
-      const h = tr.getBoundingClientRect().height / zoom;
-      if (!(h > 0)) return false;
-      if (Math.abs(h - v.base) > 0.01) {
-        v.base = h;
-        this._virtBase = h;
-        this._virtComputeOffsets();
-        return true;
-      }
-      return false;
-    }
-    return false;
+      const h2 = tr.getBoundingClientRect().height / zoom;
+      if (h2 > 0) heights.push(h2);
+      if (heights.length >= 64) break;
+    }
+    if (!heights.length) return false;
+    heights.sort((a, b) => a - b);
+    const h = heights[heights.length >> 1];
+    const tolerance = v.measured ? 0.5 : 0.01;
+    v.measured = true;
+    if (Math.abs(h - v.base) <= tolerance) return false;
+    v.base = h;
+    this._virtBase = h;
+    this._virtComputeOffsets();
+    return true;
+  }
+  /** Measure again, and redraw the window when the heights moved. */
+  _virtRemeasure() {
+    if (this._virtMeasure()) this._virtUpdate({ force: true });
   }
   /**
    * Slide the window to wherever the scroll box now is.
@@ -2182,9 +2477,10 @@ var DataTable = class {
    * @param {number}  [o.viewport] the viewport height, likewise.
    * @returns {HTMLElement[]} the rows added.
    */
-  _virtUpdate({ force = false, notify = true, top = null, viewport = null } = {}) {
+  _virtUpdate({ force = false, notify = true, top = null, viewport = null, measure = true } = {}) {
     const v = this._virt;
     if (!v || !v.offsets) return [];
+    if (measure && this._virtMeasure()) force = true;
     const n = v.rows.length;
     const wrap = this._tableWrapEl;
     const view = viewport || wrap?.clientHeight || VIRTUAL_FALLBACK_VIEWPORT_PX;
@@ -2212,6 +2508,15 @@ var DataTable = class {
           console.error("[DataTable] onRowsRendered threw", err);
         }
       }
+      if (measure && added.length && this._virtMeasure()) {
+        return added.concat(this._virtUpdate({
+          force: true,
+          notify,
+          top,
+          viewport,
+          measure: false
+        }));
+      }
     }
     return added;
   }
@@ -3725,6 +4030,9 @@ export {
   formatDuration,
   matchDateFilter,
   matchDurationFilter,
+  PAGING_HARD_LIMIT,
+  PAGING_SOFT_LIMIT,
+  resolvePaging,
   DataTable
 };
-//# sourceMappingURL=chunk-IYV5JVYB.js.map
+//# sourceMappingURL=chunk-WLASPRGP.js.map