flexdesk 0.6.0 → 0.6.2

package/README.md

@@ -321,6 +321,83 @@ behaves as it did in 0.4, except for these:
   to it if it is in a cascade layer, or has zero specificity and loads before
   `flexdesk.css`. A rule for the cells, the rows or the table does not.
 
+### Comparing two tables: `diff` and `createScrollLock`
+
+A side-by-side comparison is two `DataTable`s drawn from ONE aligned row list:
+the rows as they are on one side, as they were on the other, and a gap where
+a side has no row. Both options are off until you set them.
+
+```js
+import { DataTable, createScrollLock } from '@flexdesk/widgets';
+
+const lock = createScrollLock({ axis: 'y' });   // 'x', 'y' or 'both'
+const side = (host, pick) => DataTable.mount(host, {
+    headers, rows: aligned.map((r) => pick(r) ?? blank), pagination: false,
+    scrollLock: lock,
+    diff: (_row, i) => ({ status: statusOf(aligned[i], pick), cells: changedCols(aligned[i]) }),
+});
+side(left,  (r) => r.now);
+side(right, (r) => r.then);
+lock.setEnabled(false);   // scroll each side on its own; true brings them level
+```
+
+- `diff: (row, rowIdx) => {status, cells?}` draws the row
+  `twm-dt-diff twm-dt-diff--<status>`, for `added`, `removed`, `changed`,
+  `same` or `gap`, and each column index in `cells` (an array or a Set)
+  `twm-dt-diff__cell--changed`. `null` or any other status draws the row as
+  without `diff`. A `gap` row's cells are drawn empty, whatever its values and
+  `renderCell`, so the two sides keep their rows level. `updateRow` asks again.
+- `scrollLock` takes a group from `createScrollLock()`. The table's body box
+  joins it on every render and leaves on the next render and on `dispose()`.
+  Any element can join with `lock.attach(el)`, which returns its detach. A
+  box that joins starts at the group's last position, and the echo of a
+  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

@@ -686,6 +686,39 @@ body.twm-dt-col-resizing {
     color: var(--text-dim, #666);
     font-style: italic;
 }
+/* 0.6.1 `diff` — one side of a comparison. A row that is NEW on this side is
+ * green, one that is GONE on this side red, a changed row carries an amber
+ * left edge and its changed cells an amber fill, and a GAP — the place a row
+ * holds on the other side — is hatched, so the eye reads it as "nothing here"
+ * rather than as an empty row. (0,3,2) and up, for `twm-dt-cell--null`'s
+ * reason above; a selected row keeps its own colour (`:not(.selected)`). */
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--added:not(.selected) > td {
+    background: color-mix(in srgb, var(--color-success, #3fb950) 16%, transparent);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--removed:not(.selected) > td {
+    background: color-mix(in srgb, var(--color-danger, #c74e4e) 18%, transparent);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--removed > td {
+    text-decoration: line-through;
+    text-decoration-color: color-mix(in srgb, var(--color-danger, #c74e4e) 70%, transparent);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--added > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-success, #3fb950);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--removed > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-danger, #c74e4e);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--changed > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-warning, #ff9800);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff:not(.selected) > td.twm-dt-diff__cell--changed {
+    background: color-mix(in srgb, var(--color-warning, #ff9800) 22%, transparent);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--gap > td.twm-dt-diff__gap {
+    background: repeating-linear-gradient(135deg,
+        transparent 0 6px,
+        color-mix(in srgb, var(--text-muted, #888) 14%, transparent) 6px 7px);
+}
 /* `emptyState` and `setError` with no rows: the box's own words, which may
  * wrap — muted for an empty state, red for a failure, in both densities. Quiet
  * while loading — an empty table that is still loading is not empty. */
@@ -1615,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

@@ -713,6 +713,39 @@ body.twm-dt-col-resizing {
     color: var(--text-dim, #666);
     font-style: italic;
 }
+/* 0.6.1 `diff` — one side of a comparison. A row that is NEW on this side is
+ * green, one that is GONE on this side red, a changed row carries an amber
+ * left edge and its changed cells an amber fill, and a GAP — the place a row
+ * holds on the other side — is hatched, so the eye reads it as "nothing here"
+ * rather than as an empty row. (0,3,2) and up, for `twm-dt-cell--null`'s
+ * reason above; a selected row keeps its own colour (`:not(.selected)`). */
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--added:not(.selected) > td {
+    background: color-mix(in srgb, var(--color-success, #3fb950) 16%, transparent);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--removed:not(.selected) > td {
+    background: color-mix(in srgb, var(--color-danger, #c74e4e) 18%, transparent);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--removed > td {
+    text-decoration: line-through;
+    text-decoration-color: color-mix(in srgb, var(--color-danger, #c74e4e) 70%, transparent);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--added > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-success, #3fb950);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--removed > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-danger, #c74e4e);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--changed > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-warning, #ff9800);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff:not(.selected) > td.twm-dt-diff__cell--changed {
+    background: color-mix(in srgb, var(--color-warning, #ff9800) 22%, transparent);
+}
+.twm-data-table-component .twm-preview-table tbody tr.twm-dt-diff--gap > td.twm-dt-diff__gap {
+    background: repeating-linear-gradient(135deg,
+        transparent 0 6px,
+        color-mix(in srgb, var(--text-muted, #888) 14%, transparent) 6px 7px);
+}
 /* `emptyState` and `setError` with no rows: the box's own words, which may
  * wrap — muted for an empty state, red for a failure, in both densities. Quiet
  * while loading — an empty table that is still loading is not empty. */
@@ -1713,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-CNXP3SIN.js";
+} from "./chunk-XYUZF5CD.js";
 import {
   createRafResizeObserver
-} from "./chunk-KH2GJTKR.js";
+} from "./chunk-CPYBQN3Q.js";
 import {
   ManagedWindow
 } from "./chunk-6JSOVNID.js";

package/dist/{chunk-KH2GJTKR.js → chunk-CPYBQN3Q.js}

@@ -360,6 +360,35 @@ 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();
@@ -512,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,
@@ -531,6 +563,8 @@ var DataTable = class {
       rowClass: null,
       rowAttrs: null,
       cellClass: null,
+      diff: null,
+      scrollLock: null,
       rowIcon: null,
       emptyState: void 0,
       nullDisplay: null,
@@ -922,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);
     }
@@ -1008,7 +1042,15 @@ 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));
+    }
     if (this.config.autoDispose) autoDisposeWatch(this);
     if (prevScroll && this._state.offset === this._renderedOffset) {
       tableWrap.scrollTop = prevScroll.top;
@@ -1022,6 +1064,14 @@ 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());
       if (this._resizeObserver) {
@@ -1884,13 +1934,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;
@@ -1953,6 +2224,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;
@@ -2411,11 +2684,20 @@ var DataTable = class {
       tr.appendChild(td);
     }
     const { cellClass, nullDisplay } = this.config;
+    const diff = this._diffOf(row, globalIdx);
+    const gap = diff?.status === "gap";
+    const changedCells = diff?.cells ? diff.cells instanceof Set ? diff.cells : new Set(diff.cells) : null;
     for (let colIdx = 0; colIdx < row.length; colIdx++) {
       const td = document.createElement("td");
       td.className = this._columnTypes[colIdx] || "text";
       const value = row[colIdx];
       let handled = false;
+      if (gap) {
+        td.classList.add("twm-dt-diff__gap");
+        tr.appendChild(td);
+        continue;
+      }
+      if (changedCells?.has(colIdx)) td.classList.add("twm-dt-diff__cell--changed");
       if (this.config.renderCell) {
         handled = !!this.config.renderCell(td, value, colIdx, globalIdx, row);
         if (!handled) {
@@ -2682,6 +2964,14 @@ var DataTable = class {
     }
     return null;
   }
+  /** 0.6.1. The `diff` answer for one row, or `null` when there is none or
+   *  its status is not one this component draws. */
+  _diffOf(row, rowIdx) {
+    if (typeof this.config.diff !== "function") return null;
+    const answer = this.config.diff(row, rowIdx);
+    if (!answer || !DIFF_STATUSES.has(answer.status)) return null;
+    return answer;
+  }
   /** Everything `rowClass`, `rowAttrs` and the open mark put on a `<tr>`,
    *  taken off again first — so `updateRow` cannot leave last state's class
    *  behind. */
@@ -2696,6 +2986,11 @@ var DataTable = class {
       const added = this._addClasses(tr, rowClass(row, rowIdx));
       tr.__twmClasses = added.filter((c) => c !== "data-preview-row" && c !== "selected");
     }
+    for (const c of [...tr.classList]) {
+      if (c === "twm-dt-diff" || c.startsWith("twm-dt-diff--")) tr.classList.remove(c);
+    }
+    const diff = this._diffOf(row, rowIdx);
+    if (diff) tr.classList.add("twm-dt-diff", `twm-dt-diff--${diff.status}`);
     if (tr.__twmAttrs) {
       for (const name of tr.__twmAttrs) tr.removeAttribute(name);
       tr.__twmAttrs = null;
@@ -3697,6 +3992,9 @@ export {
   formatDuration,
   matchDateFilter,
   matchDurationFilter,
+  PAGING_HARD_LIMIT,
+  PAGING_SOFT_LIMIT,
+  resolvePaging,
   DataTable
 };
-//# sourceMappingURL=chunk-KH2GJTKR.js.map
+//# sourceMappingURL=chunk-CPYBQN3Q.js.map