@optionfactory/fml 9.0.0-rc31 → 9.0.0-rc33

package/dist/fml.iife.js

@@ -10875,6 +10875,10 @@ var fml = (function (exports) {
      * @typedef {{ data: any[], size: number }} TablePageResponse the rows of the
      * requested page and the total number of rows across every page
      */
+    /**
+     * @typedef {{ count: Element, appending: Element, failure: Element, error: Element }} TableStatus the pieces
+     * of the status bar `paging="infinite"` and `paging="virtual"` show in place of the pager
+     */
     /**
      * @typedef {{ load(pageRequest: TablePageRequest, sortRequest: TableSortRequest|null, filterRequest: Record<string, any>): Promise<TablePageResponse> }} TableRowLoader
      */
@@ -11347,6 +11351,21 @@ var fml = (function (exports) {
      * for it. Without it the table shows an initial panel until `load`,
      * `reload` or `resetWithFilter` is called.
      *
+     * `paging="infinite"`, read once at the upgrade, replaces the pager with a
+     * status bar saying how many rows of how many are shown, with a reload
+     * button. A load still replaces the rows with one page, scrolling the rows
+     * back to the top; from then on, whenever a row of the last half page
+     * comes into view, the next page is asked with the same size, sort and
+     * filters and appended (see `load`). `reload`, a sort, a filter submit and a
+     * size change start over from the first page.
+     *
+     * `paging="virtual"` shows the same status bar, saying which rows of how many
+     * are in view, and keeps in the page only the page in view and one on either
+     * side of it, the others standing in as empty space sized on the height of
+     * the rows. The rows must scroll inside the table, as `ful-fill` makes them:
+     * a table whose rows the page scrolls appends as `paging="infinite"` does,
+     * and warns. See `load` and `reload`.
+     *
      * Inside the table, and not inside a `ful-table` nested in it, a
      * `page:requested` loads that page with the current size,
      * sort and filters; a `sort:requested` loads the current page with the new
@@ -11362,13 +11381,14 @@ var fml = (function (exports) {
      */
     class Table extends ParsedElement {
         /** Read once at the upgrade. */
-        static attributes = ['loader', 'autoload:presence'];
+        static attributes = ['loader', 'autoload:presence', 'paging'];
         /** These stay live after the upgrade: see `pageSize`, `src` and `method`. */
         static observed = ['page-size:number', 'src', 'method'];
         static slots = true;
         static config = {
             searchIcon: 'search',
             emptyIcon: 'inbox',
+            reloadIcon: 'arrow-clockwise',
         };
         static template = `
         <ful-form data-tpl-if="slots.filters">
@@ -11378,7 +11398,9 @@ var fml = (function (exports) {
             <table>
                 <caption data-tpl-if="slots.caption">{{{{ slots.caption }}}}</caption>
                 <thead></thead>
+                <tbody data-tpl-if="virtual" data-ref="before" aria-hidden="true"><tr><td data-tpl-colspan="schema.length"></td></tr></tbody>
                 <tbody></tbody>
+                <tbody data-tpl-if="virtual" data-ref="after" aria-hidden="true"><tr><td data-tpl-colspan="schema.length"></td></tr></tbody>
                 <tbody data-ref="initial">
                     <tr>
                         <td data-tpl-colspan="schema.length">
@@ -11422,7 +11444,16 @@ var fml = (function (exports) {
                 </tfoot>
             </table>
         </ful-table-wrapper>
-        <ful-pagination current="0" total="1"></ful-pagination>
+        <ful-pagination data-tpl-if="!scrolled" current="0" total="1"></ful-pagination>
+        <ful-table-status data-tpl-if="scrolled">
+            <span data-ref="count"></span>
+            <ful-spinner data-ref="appending" role="status" hidden><span class="ful-sr-only">{{ #l10n:t('spinner.loading') }}</span></ful-spinner>
+            <div data-ref="append-failure" role="alert" hidden>
+                <span>{{ #l10n:t('table.error') }} <span data-ref="append-error"></span></span>
+                <button type="button" data-ref="retry">{{ #l10n:t('table.retry') }}</button>
+            </div>
+            <button type="button" data-ref="reload" data-tpl-aria-label="#l10n:t('pagination.reload')"><ful-icon data-tpl-name="config.reloadIcon" aria-hidden="true"></ful-icon></button>
+        </ful-table-status>
     `;
         static templates = {
             row: `
@@ -11440,6 +11471,31 @@ var fml = (function (exports) {
         #feedback;
         #paginator;
         #sorters;
+        #wrapper;
+        /** @type {TableStatus|null} null under the pager */
+        #status = null;
+        /** @type {IntersectionObserver|null} */
+        #endWatch = null;
+        /** @type {Element[]} the rows whose coming into view appends the next page, none while no append is awaited */
+        #watched = [];
+        /** the page the next append asks for, the rows shown, the total the last answer reported and the rows it carried */
+        #appended = { next: 1, shown: 0, total: 0, last: 0 };
+        /** whether the table keeps a window of pages, `paging="virtual"` over rows that scroll inside it */
+        #virtual = false;
+        /** @type {{ before: HTMLElement, after: HTMLElement } | null} the cells standing in for the rows above and below the window */
+        #spacers = null;
+        /** @type {{ first: number, last: number, pages: Map<number, Element[]> } | null} the pages in the page, in order, null while no rows show */
+        #window = null;
+        /** the total number of rows the last answer reported */
+        #total = 0;
+        /** the height of a row the spacers are sized on, measured on the first rows a load shows; 0 until measured */
+        #rowHeight = 0;
+        /** @type {{ readonly stale: boolean } | null} the claim of the window shift in flight */
+        #shifting = null;
+        /** whether the last window shift failed: scrolling asks for nothing more until a retry or a load */
+        #windowFailed = false;
+        /** @type {ReturnType<typeof setTimeout>|undefined} */
+        #jump = undefined;
         /** @type {{ pageRequest: { page: number, size: number }, sortRequest: any, filterRequest: any }} */
         #latestRequest = { pageRequest: { page: 0, size: 10 }, sortRequest: null, filterRequest: {} };
         /** whether a load has been asked for, by autoload or by a caller */
@@ -11567,6 +11623,7 @@ var fml = (function (exports) {
             }
             this.#buildLoader();
             this.#latestRequest = { ...this.#latestRequest, pageRequest: { ...this.#latestRequest.pageRequest, page: 0 } };
+            this.#window = null;
             return true;
         }
         /**
@@ -11577,14 +11634,24 @@ var fml = (function (exports) {
         async render({ slots }) {
             const template = this.template();
             const schema = TableSchemaParser.parse(slots.schema, template);
-            const fragment = template.withOverlay({ slots, schema }).render();
+            const paging = this.declared('paging');
+            const fragment = template
+                .withOverlay({
+                    slots,
+                    schema,
+                    scrolled: paging === 'infinite' || paging === 'virtual',
+                    virtual: paging === 'virtual',
+                })
+                .render();
             const tableWrapper = /** @type HTMLTableElement */ (Nodes.queryChildren(fragment, 'ful-table-wrapper'));
             const table = /** @type HTMLTableElement */ (tableWrapper.querySelector('table'));
             Attributes.forward('table-', this, table);
             this.#buildLoader();
 
+            this.#wrapper = tableWrapper;
+            const status = Nodes.queryChildren(fragment, 'ful-table-status');
             this.#schema = schema;
-            this.#body = table.querySelector(':scope > tbody');
+            this.#body = table.querySelector(':scope > tbody:not([data-ref])');
             this.#loading = table.querySelector(':scope > tbody[data-ref=loading]');
             this.#noAutoload = table.querySelector(':scope > tbody[data-ref=initial]');
             this.#empty = table.querySelector(':scope > tbody[data-ref=empty]');
@@ -11594,6 +11661,63 @@ var fml = (function (exports) {
             this.#feedback = table.querySelector(':scope > tbody[data-ref=feedback]');
             this.#paginator = Nodes.queryChildren(fragment, 'ful-pagination');
             this.replaceChildren(fragment);
+            if (paging === 'virtual') {
+                const overflow = getComputedStyle(tableWrapper).overflowY;
+                this.#virtual = overflow === 'auto' || overflow === 'scroll';
+                if (!this.#virtual) {
+                    console.warn(
+                        'ful-table: paging="virtual" needs rows that scroll inside the table, as ful-fill makes them; this one appends its pages as paging="infinite" does',
+                    );
+                }
+            }
+            if (status) {
+                const piece = (/** @type string */ ref) =>
+                    /** @type Element */ (status.querySelector(`[data-ref=${ref}]`));
+                this.#status = {
+                    count: piece('count'),
+                    appending: piece('appending'),
+                    failure: piece('append-failure'),
+                    error: piece('append-error'),
+                };
+                piece('reload').addEventListener('click', () => this.reload());
+                piece('retry').addEventListener('click', () => {
+                    if (!this.#virtual) {
+                        this.#appendNext();
+                        return;
+                    }
+                    this.#windowFailed = false;
+                    this.#reconcile(true);
+                });
+            }
+            if (this.#virtual) {
+                this.#spacers = {
+                    before: /** @type HTMLElement */ (table.querySelector(':scope > tbody[data-ref=before] td')),
+                    after: /** @type HTMLElement */ (table.querySelector(':scope > tbody[data-ref=after] td')),
+                };
+                // scroll fires once per frame at most, so it needs no throttle of its own
+                tableWrapper.addEventListener(
+                    'scroll',
+                    () => {
+                        this.#countInView();
+                        this.#reconcile(false);
+                    },
+                    { passive: true },
+                );
+                // a table that loaded while it was not laid out, in a tab not yet shown for one, has
+                // measured nothing: with a first page shorter than its panel no scroll would ever come
+                // to do it. Its box changing size is the moment it is laid out, or shows more rows.
+                new ResizeObserver(() => {
+                    this.#countInView();
+                    this.#reconcile(false);
+                }).observe(tableWrapper);
+            } else if (status) {
+                this.#endWatch = new IntersectionObserver((entries) => {
+                    // an entry queued before the watch moved on to another row, or stopped, asks for nothing
+                    if (entries.some((e) => e.isIntersecting && this.#watched.includes(e.target))) {
+                        this.#appendNext();
+                    }
+                });
+            }
             const thead = /** @type HTMLTableSectionElement */ (this.querySelector('thead'));
             schema.headersTemplate.renderTo(thead);
             this.#sorters = thead.querySelectorAll('ful-sorter');
@@ -11650,6 +11774,14 @@ var fml = (function (exports) {
          * `submit` listeners as the later ones, and the load its `submit:success`
          * starts is the one awaited. A filter submit that is cancelled, fails or
          * is dropped for one in flight loads nothing, and the promise resolves.
+         *
+         * Under `paging="virtual"`, once rows show, it asks again for the pages in
+         * the page, with the same size, sort and filters, and shows them where
+         * they are, the scroll position and the widths of the columns kept; the
+         * table is busy and settles, fails and dispatches as a load does, one
+         * `load:success` per page. When the answers report fewer rows than the
+         * window starts at, it loads the first page instead. A `src` or `method`
+         * write still starts over from the first page.
          * @returns {Promise<void>} as `load`
          */
         async reload() {
@@ -11659,6 +11791,9 @@ var fml = (function (exports) {
                 }
                 return;
             }
+            if (this.#window) {
+                return await this.#reloadWindow();
+            }
             return await this.load(
                 this.#latestRequest.pageRequest,
                 this.#latestRequest.sortRequest,
@@ -11697,6 +11832,40 @@ var fml = (function (exports) {
          * failure arrives it changes nothing, dispatches nothing and resolves;
          * superseded while its rows render, it leaves them to the newer load and
          * dispatches nothing.
+         *
+         * Under `paging="infinite"` the status bar takes the pager's place, and
+         * once the load has dispatched `load:success` the next page is awaited:
+         * when a row of the last half page comes into view, through
+         * whatever scrolls it, the following page is asked for with the same
+         * size, sort and filters and its rows are appended. An append runs
+         * without `aria-busy`, a spinner in the status bar standing in, and
+         * dispatches `load:success` or `load:failure` as a load does, its
+         * `pageRequest` naming the appended page. A failed append keeps the
+         * rows, shows the error in the status bar with a retry button and
+         * rejects to nobody, nothing awaiting it. Appending stops once the rows
+         * shown reach the total the last answer reported, or an answer carries
+         * no rows. A load supersedes an append in flight; `reload` repeats this
+         * load, not the pages appended to it.
+         *
+         * Under `paging="virtual"` the load shows its page as the window, scrolled
+         * to where it sits among the total, and measures two things on its rows:
+         * the height the empty space standing in for the other rows is sized on,
+         * and the width of the columns, which then stay as they are, in
+         * proportion, until the next load, so that the pages coming and going do
+         * not move them. From then on the window follows the scroll: the page in
+         * view and one on either side stay in the page and the others are dropped,
+         * the page holding the focus kept while it is within two pages of them. A
+         * page next to the window is asked for at once; a scroll landing farther
+         * waits for the scroll to rest. Window pages are asked for without
+         * `aria-busy`, a spinner in the status bar standing in, and dispatch
+         * `load:success` or `load:failure` per page as appends do; a failure keeps
+         * the rows and offers a retry. The row in view stays where it is as pages
+         * come and go above it: the table measures it before and after and
+         * corrects the scroll by whatever the browser's own scroll anchoring has
+         * not kept, which is all of it where the browser anchors no table rows
+         * (Firefox), has no scroll anchoring or the rows' container declares
+         * `overflow-anchor: none`, and nothing where it has. The table carries
+         * `aria-rowcount` and each row its `aria-rowindex`.
          * @param {TablePageRequest} pageRequest
          * @param {TableSortRequest|null} sortRequest
          * @param {Record<string, any>} filterRequest
@@ -11707,6 +11876,13 @@ var fml = (function (exports) {
             this.#loadRequested = true;
             this.#requestedFilters = filterRequest;
             const claim = this.#loads.take();
+            this.#watched = [];
+            this.#endWatch?.disconnect();
+            clearTimeout(this.#jump);
+            this.#shifting = null;
+            this.#windowFailed = false;
+            this.#status?.appending.setAttribute('hidden', '');
+            this.#status?.failure.setAttribute('hidden', '');
             this.#loading.toggleAttribute('hidden', this.#body.childElementCount > 0);
             this.#feedback.setAttribute('hidden', '');
             this.#noAutoload.setAttribute('hidden', '');
@@ -11736,6 +11912,9 @@ var fml = (function (exports) {
                     if (claim.stale) {
                         return;
                     }
+                    if (this.#virtual) {
+                        this.#settleWindow();
+                    }
                     this.removeAttribute('aria-busy');
                     this.dispatchEvent(
                         new CustomEvent('load:success', {
@@ -11744,24 +11923,15 @@ var fml = (function (exports) {
                             detail: { pageRequest, sortRequest, filterRequest, response: pageResponse },
                         }),
                     );
+                    this.#watchEnd(pageRequest.size);
+                    this.#reconcile(false);
                     return;
                 }
             } catch (/** @type any */ error) {
                 if (claim.stale) {
                     return;
                 }
-                this.#loading.setAttribute('hidden', '');
-                this.#body.replaceChildren();
-                this.#feedback.removeAttribute('hidden');
-                this.#feedback.querySelector('[data-ref=feedback-error]').textContent = Localization.of().failure(error);
-                this.removeAttribute('aria-busy');
-                this.dispatchEvent(
-                    new CustomEvent('load:failure', {
-                        bubbles: true,
-                        cancelable: false,
-                        detail: { pageRequest, sortRequest, filterRequest, exception: error },
-                    }),
-                );
+                this.#fail(error, { pageRequest, sortRequest, filterRequest });
                 throw error;
             }
             return await this.load({ page: lastPage, size: pageRequest.size }, sortRequest, filterRequest);
@@ -11792,19 +11962,471 @@ var fml = (function (exports) {
                 filterRequest,
             );
         }
-        #update(pageRequest, sortRequest, filterRequest, pageResponse) {
-            const pages = Math.ceil(pageResponse.size / pageRequest.size);
+        /**
+         * Watches the last half page of rows, so that any of them coming into
+         * view appends the next page, unless the rows shown already reach the
+         * total or the last answer carried none. A single row would be missed by
+         * a scroll jumping past it, to the end for instance.
+         * @param {number} size the rows a page asks for
+         */
+        #watchEnd(size) {
+            const { shown, total, last } = this.#appended;
+            if (!this.#endWatch || !(shown < total) || last === 0) {
+                return;
+            }
+            const rows = [...this.#body.children];
+            this.#watched = rows.slice(Math.max(0, rows.length - Math.ceil(size / 2)));
+            for (const row of this.#watched) {
+                this.#endWatch.observe(row);
+            }
+        }
+        async #appendNext() {
+            const status = /** @type TableStatus */ (this.#status);
+            this.#watched = [];
+            this.#endWatch?.disconnect();
+            const { sortRequest, filterRequest } = this.#latestRequest;
+            const pageRequest = { page: this.#appended.next, size: this.#latestRequest.pageRequest.size };
+            const claim = this.#loads.take();
+            status.failure.setAttribute('hidden', '');
+            status.appending.removeAttribute('hidden');
+            try {
+                const pageResponse = await this.#loader.load(pageRequest, sortRequest, filterRequest);
+                if (claim.stale) {
+                    return;
+                }
+                this.#body.append(
+                    this.template('row')
+                        .withOverlay({ schema: this.#schema, pageRequest, filterRequest, pageResponse })
+                        .render(),
+                );
+                this.#appended = {
+                    next: pageRequest.page + 1,
+                    shown: this.#appended.shown + pageResponse.data.length,
+                    total: pageResponse.size,
+                    last: pageResponse.data.length,
+                };
+                status.count.textContent = Localization.of().t('table.loaded', {
+                    loaded: this.#appended.shown,
+                    total: this.#appended.total,
+                });
+                await Rendering.waitForChildren(this.#body).catch(() => undefined);
+                if (claim.stale) {
+                    return;
+                }
+                status.appending.setAttribute('hidden', '');
+                this.dispatchEvent(
+                    new CustomEvent('load:success', {
+                        bubbles: true,
+                        cancelable: false,
+                        detail: { pageRequest, sortRequest, filterRequest, response: pageResponse },
+                    }),
+                );
+                this.#watchEnd(pageRequest.size);
+            } catch (/** @type any */ error) {
+                if (claim.stale) {
+                    return;
+                }
+                status.appending.setAttribute('hidden', '');
+                status.error.textContent = Localization.of().failure(error);
+                status.failure.removeAttribute('hidden');
+                this.dispatchEvent(
+                    new CustomEvent('load:failure', {
+                        bubbles: true,
+                        cancelable: false,
+                        detail: { pageRequest, sortRequest, filterRequest, exception: error },
+                    }),
+                );
+            }
+        }
+        /**
+         * Renders the rows of a page, numbering them with `aria-rowindex` under
+         * `paging="virtual"`, the header row being the first.
+         * @param {TablePageRequest} pageRequest
+         * @param {Record<string, any>} filterRequest
+         * @param {TablePageResponse} pageResponse
+         * @returns {Element[]}
+         */
+        #pageRows(pageRequest, filterRequest, pageResponse) {
+            const rows = [
+                ...this.template('row')
+                    .withOverlay({ schema: this.#schema, pageRequest, filterRequest, pageResponse })
+                    .render().children,
+            ];
+            if (this.#virtual) {
+                rows.forEach((row, i) => {
+                    row.setAttribute('aria-rowindex', String(pageRequest.page * pageRequest.size + i + 2));
+                });
+            }
+            return rows;
+        }
+        /**
+         * Shows a failed load: the rows go, the error panel shows and
+         * `load:failure` is dispatched.
+         * @param {any} error
+         * @param {{ pageRequest: TablePageRequest, sortRequest: TableSortRequest|null, filterRequest: Record<string, any> }} request
+         */
+        #fail(error, request) {
             this.#loading.setAttribute('hidden', '');
-            this.#body.replaceChildren(
-                this.template('row')
-                    .withOverlay({
-                        schema: this.#schema,
-                        pageRequest,
-                        filterRequest,
-                        pageResponse,
-                    })
-                    .render(),
+            this.#body.replaceChildren();
+            this.#window = null;
+            this.#fitSpacers();
+            this.#status?.count.replaceChildren();
+            this.#feedback.removeAttribute('hidden');
+            this.#feedback.querySelector('[data-ref=feedback-error]').textContent = Localization.of().failure(error);
+            this.removeAttribute('aria-busy');
+            this.dispatchEvent(
+                new CustomEvent('load:failure', {
+                    bubbles: true,
+                    cancelable: false,
+                    detail: { ...request, exception: error },
+                }),
             );
+        }
+        /** Counts the rows of a load just shown and moves the window where its page sits. */
+        #settleWindow() {
+            const table = /** @type HTMLTableElement */ (this.#body.parentElement);
+            table.setAttribute('aria-rowcount', String(this.#total + 1));
+            table.tHead?.rows[0]?.setAttribute('aria-rowindex', '1');
+            const status = /** @type TableStatus */ (this.#status);
+            const window = this.#window;
+            if (!window) {
+                this.#fitSpacers();
+                status.count.textContent = Localization.of().t('table.loaded', { loaded: 0, total: this.#total });
+                return;
+            }
+            const size = this.#latestRequest.pageRequest.size;
+            const from = window.first * size;
+            status.count.textContent = Localization.of().t('table.range', {
+                from: from + 1,
+                to: from + /** @type Element[] */ (window.pages.get(window.first)).length,
+                total: this.#total,
+            });
+            if (this.#measureRows()) {
+                this.#wrapper.scrollTop = from * this.#rowHeight;
+            }
+        }
+        /**
+         * Measures the height of a row and locks the widths of the columns, once
+         * per load, on the rows it shows, then sizes the spacers. A table that is not laid out, inside a
+         * closed disclosure for instance, measures nothing and is measured when
+         * it is laid out, or when its rows next scroll.
+         * @returns {boolean} whether the rows are measured
+         */
+        #measureRows() {
+            if (this.#rowHeight > 0) {
+                return true;
+            }
+            const count = this.#body.childElementCount;
+            const height = this.#body.getBoundingClientRect().height;
+            if (count === 0 || height === 0) {
+                return false;
+            }
+            this.#rowHeight = height / count;
+            this.#lockColumns();
+            this.#fitSpacers();
+            return true;
+        }
+        /**
+         * Fixes the widths of the columns, in proportion to the table, at those
+         * the rows in the page give them.
+         */
+        #lockColumns() {
+            const table = /** @type HTMLTableElement */ (this.#body.parentElement);
+            const widths = [...(table.tHead?.rows[0]?.cells ?? [])].map((cell) => cell.getBoundingClientRect().width);
+            const sum = widths.reduce((a, b) => a + b, 0);
+            const columns = document.createElement('colgroup');
+            columns.setAttribute('data-ref', 'widths');
+            for (const width of widths) {
+                const column = document.createElement('col');
+                column.style.width = `${(width / sum) * 100}%`;
+                columns.append(column);
+            }
+            table.insertBefore(columns, table.tHead);
+        }
+        #unlockColumns() {
+            this.#body.parentElement?.querySelector(':scope > colgroup[data-ref=widths]')?.remove();
+        }
+        /** Sizes the space standing in for the rows above and below the window. */
+        #fitSpacers() {
+            if (!this.#spacers) {
+                return;
+            }
+            const window = this.#window;
+            const size = this.#latestRequest.pageRequest.size;
+            const above = window ? window.first * size : 0;
+            const below = window ? Math.max(0, this.#total - (window.last + 1) * size) : 0;
+            this.#spacers.before.style.height = `${above * this.#rowHeight}px`;
+            this.#spacers.after.style.height = `${below * this.#rowHeight}px`;
+        }
+        /** Says in the status bar which rows are in view; nothing changes while none is. */
+        #countInView() {
+            const status = /** @type TableStatus */ (this.#status);
+            const size = this.#latestRequest.pageRequest.size;
+            const view = this.#wrapper.getBoundingClientRect();
+            const top = view.top + (this.#body.parentElement?.querySelector(':scope > thead')?.getBoundingClientRect().height ?? 0);
+            let from = 0;
+            let to = 0;
+            for (const [page, rows] of this.#window?.pages ?? []) {
+                rows.forEach((row, i) => {
+                    const rect = row.getBoundingClientRect();
+                    if (rect.bottom > top && rect.top < view.bottom) {
+                        from ||= page * size + i + 1;
+                        to = page * size + i + 1;
+                    }
+                });
+            }
+            if (from > 0) {
+                status.count.textContent = Localization.of().t('table.range', { from, to, total: this.#total });
+            }
+        }
+        /**
+         * The page at the middle of the view: found among the rows in the page,
+         * or estimated on the height of a row when the middle falls in the space
+         * standing in for others.
+         * @param {{ first: number, last: number, pages: Map<number, Element[]> }} window
+         * @returns {number}
+         */
+        #pageInView(window) {
+            const pageHeight = this.#latestRequest.pageRequest.size * this.#rowHeight;
+            const view = this.#wrapper.getBoundingClientRect();
+            const middle = view.top + view.height / 2;
+            const rows = this.#body.getBoundingClientRect();
+            if (middle < rows.top) {
+                return Math.max(0, window.first - Math.ceil((rows.top - middle) / pageHeight));
+            }
+            if (middle >= rows.bottom) {
+                return window.last + 1 + Math.floor((middle - rows.bottom) / pageHeight);
+            }
+            let found = window.first;
+            for (const [page, pageRows] of window.pages) {
+                if (pageRows.length > 0 && pageRows[0].getBoundingClientRect().top <= middle) {
+                    found = page;
+                }
+            }
+            return found;
+        }
+        /**
+         * Moves the window to the page in view and its neighbours. A window next
+         * to the current one moves at once; one farther away waits for the scroll
+         * to rest, unless `settled` says it has.
+         * @param {boolean} settled
+         */
+        #reconcile(settled) {
+            const window = this.#window;
+            const pageCount = Math.ceil(this.#total / this.#latestRequest.pageRequest.size);
+            if (
+                !window ||
+                this.#shifting ||
+                this.#windowFailed ||
+                this.hasAttribute('aria-busy') ||
+                !this.#wrapper.isConnected ||
+                !(pageCount > 0) ||
+                !this.#measureRows()
+            ) {
+                return;
+            }
+            const target = Math.min(pageCount - 1, this.#pageInView(window));
+            let first = Math.max(0, target - 1);
+            let last = Math.min(pageCount - 1, target + 1);
+            const focused = this.#body.contains(document.activeElement)
+                ? /** @type Element */ (document.activeElement).closest('tr')
+                : null;
+            const focusedPage = [...window.pages].find(([, rows]) => focused && rows.includes(focused))?.[0];
+            if (focusedPage !== undefined && Math.max(last, focusedPage) - Math.min(first, focusedPage) <= 4) {
+                first = Math.min(first, focusedPage);
+                last = Math.max(last, focusedPage);
+            }
+            if (first === window.first && last === window.last) {
+                return;
+            }
+            clearTimeout(this.#jump);
+            if (!settled && (last < window.first - 1 || first > window.last + 1)) {
+                this.#jump = setTimeout(() => this.#reconcile(true), 150);
+                return;
+            }
+            this.#shiftWindow(window, first, last);
+        }
+        /**
+         * Asks for the pages of the new window that are not in the page, drops
+         * the ones outside it and keeps the row in view where it is.
+         * @param {{ first: number, last: number, pages: Map<number, Element[]> }} window
+         * @param {number} first
+         * @param {number} last
+         */
+        async #shiftWindow(window, first, last) {
+            const status = /** @type TableStatus */ (this.#status);
+            const claim = this.#loads.hold();
+            this.#shifting = claim;
+            const { sortRequest, filterRequest } = this.#latestRequest;
+            const size = this.#latestRequest.pageRequest.size;
+            const wanted = Array.from({ length: last - first + 1 }, (_, i) => first + i);
+            const missing = wanted.filter((page) => !window.pages.has(page));
+            status.failure.setAttribute('hidden', '');
+            status.appending.removeAttribute('hidden');
+            try {
+                const answers = await Promise.all(
+                    missing.map(async (page) => {
+                        const pageRequest = { page, size };
+                        return { pageRequest, response: await this.#loader.load(pageRequest, sortRequest, filterRequest) };
+                    }),
+                );
+                if (claim.stale) {
+                    return;
+                }
+                const kept = wanted.filter((page) => window.pages.has(page));
+                const top = this.#wrapper.getBoundingClientRect().top;
+                const anchor = kept
+                    .flatMap((page) => window.pages.get(page) ?? [])
+                    .find((row) => row.getBoundingClientRect().bottom > top);
+                const anchorTop = anchor?.getBoundingClientRect().top ?? 0;
+                for (const [page, rows] of window.pages) {
+                    if (page < first || page > last) {
+                        for (const row of rows) {
+                            row.remove();
+                        }
+                    }
+                }
+                /** @type {Map<number, Element[]>} */
+                const pages = new Map();
+                for (const page of wanted) {
+                    const answer = answers.find((a) => a.pageRequest.page === page);
+                    pages.set(
+                        page,
+                        window.pages.get(page) ??
+                            (answer ? this.#pageRows(answer.pageRequest, filterRequest, answer.response) : []),
+                    );
+                }
+                if (kept.length === 0) {
+                    this.#body.replaceChildren(...[...pages.values()].flat());
+                } else {
+                    this.#body.prepend(...wanted.filter((page) => page < kept[0]).flatMap((page) => pages.get(page) ?? []));
+                    this.#body.append(
+                        ...wanted.filter((page) => page > /** @type number */ (kept.at(-1))).flatMap((page) => pages.get(page) ?? []),
+                    );
+                }
+                this.#window = { first, last, pages };
+                this.#total = answers.at(-1)?.response.size ?? this.#total;
+                this.#body.parentElement?.setAttribute('aria-rowcount', String(this.#total + 1));
+                this.#fitSpacers();
+                if (anchor) {
+                    this.#wrapper.scrollTop += anchor.getBoundingClientRect().top - anchorTop;
+                }
+                await Rendering.waitForChildren(this.#body).catch(() => undefined);
+                if (claim.stale) {
+                    return;
+                }
+                if (anchor) {
+                    // the elements in the new rows have rendered since, which can change their height
+                    this.#wrapper.scrollTop += anchor.getBoundingClientRect().top - anchorTop;
+                }
+                status.appending.setAttribute('hidden', '');
+                this.#countInView();
+                for (const { pageRequest, response } of answers) {
+                    this.dispatchEvent(
+                        new CustomEvent('load:success', {
+                            bubbles: true,
+                            cancelable: false,
+                            detail: { pageRequest, sortRequest, filterRequest, response },
+                        }),
+                    );
+                }
+            } catch (/** @type any */ error) {
+                if (claim.stale) {
+                    return;
+                }
+                this.#windowFailed = true;
+                status.appending.setAttribute('hidden', '');
+                status.error.textContent = Localization.of().failure(error);
+                status.failure.removeAttribute('hidden');
+                this.dispatchEvent(
+                    new CustomEvent('load:failure', {
+                        bubbles: true,
+                        cancelable: false,
+                        detail: { pageRequest: { page: missing[0], size }, sortRequest, filterRequest, exception: error },
+                    }),
+                );
+                return;
+            } finally {
+                if (this.#shifting === claim) {
+                    this.#shifting = null;
+                }
+            }
+            this.#reconcile(false);
+        }
+        /**
+         * Asks again for the pages of the window and shows them where they are.
+         * @returns {Promise<void>}
+         */
+        async #reloadWindow() {
+            const window = /** @type {{ first: number, last: number, pages: Map<number, Element[]> }} */ (this.#window);
+            const status = /** @type TableStatus */ (this.#status);
+            const { sortRequest, filterRequest } = this.#latestRequest;
+            const size = this.#latestRequest.pageRequest.size;
+            this.#requestedFilters = filterRequest;
+            const claim = this.#loads.take();
+            clearTimeout(this.#jump);
+            this.#shifting = null;
+            this.#windowFailed = false;
+            status.appending.setAttribute('hidden', '');
+            status.failure.setAttribute('hidden', '');
+            this.setAttribute('aria-busy', 'true');
+            const wanted = Array.from({ length: window.last - window.first + 1 }, (_, i) => window.first + i);
+            try {
+                const answers = await Promise.all(
+                    wanted.map(async (page) => {
+                        const pageRequest = { page, size };
+                        return { pageRequest, response: await this.#loader.load(pageRequest, sortRequest, filterRequest) };
+                    }),
+                );
+                if (claim.stale) {
+                    return;
+                }
+                const total = /** @type {{ response: TablePageResponse }} */ (answers.at(-1)).response.size;
+                const pageCount = Math.ceil(total / size);
+                if (!(window.first < pageCount)) {
+                    return await this.load({ page: 0, size }, sortRequest, filterRequest);
+                }
+                const shown = answers.filter((a) => a.pageRequest.page < pageCount);
+                const pages = new Map(
+                    shown.map((a) => [a.pageRequest.page, this.#pageRows(a.pageRequest, filterRequest, a.response)]),
+                );
+                this.#body.replaceChildren(...[...pages.values()].flat());
+                this.#window = { first: window.first, last: Math.min(window.last, pageCount - 1), pages };
+                this.#total = total;
+                this.#body.parentElement?.setAttribute('aria-rowcount', String(total + 1));
+                this.#fitSpacers();
+                await Rendering.waitForChildren(this.#body).catch(() => undefined);
+                if (claim.stale) {
+                    return;
+                }
+                this.removeAttribute('aria-busy');
+                this.#countInView();
+                for (const { pageRequest, response } of shown) {
+                    this.dispatchEvent(
+                        new CustomEvent('load:success', {
+                            bubbles: true,
+                            cancelable: false,
+                            detail: { pageRequest, sortRequest, filterRequest, response },
+                        }),
+                    );
+                }
+                this.#reconcile(false);
+            } catch (/** @type any */ error) {
+                if (claim.stale) {
+                    return;
+                }
+                this.#fail(error, { pageRequest: { page: window.first, size }, sortRequest, filterRequest });
+                throw error;
+            }
+        }
+        #update(pageRequest, sortRequest, filterRequest, pageResponse) {
+            this.#loading.setAttribute('hidden', '');
+            if (this.#virtual) {
+                this.#rowHeight = 0;
+                this.#unlockColumns();
+            }
+            const rows = this.#pageRows(pageRequest, filterRequest, pageResponse);
+            this.#body.replaceChildren(...rows);
             this.#empty.toggleAttribute('hidden', pageResponse.data.length !== 0);
             if (this.#emptyTemplate && pageResponse.data.length === 0) {
                 this.#emptyAuthors.replaceChildren(
@@ -11813,7 +12435,28 @@ var fml = (function (exports) {
                         .render(),
                 );
             }
-            this.#paginator.update({ current: pageRequest.page, total: pages });
+            if (this.#virtual) {
+                this.#wrapper.scrollTop = 0;
+                this.#total = pageResponse.size;
+                this.#window =
+                    rows.length > 0 ? { first: pageRequest.page, last: pageRequest.page, pages: new Map([[pageRequest.page, rows]]) } : null;
+                return;
+            }
+            if (this.#status) {
+                this.#wrapper.scrollTop = 0;
+                this.#appended = {
+                    next: pageRequest.page + 1,
+                    shown: pageResponse.data.length,
+                    total: pageResponse.size,
+                    last: pageResponse.data.length,
+                };
+                this.#status.count.textContent = Localization.of().t('table.loaded', {
+                    loaded: this.#appended.shown,
+                    total: this.#appended.total,
+                });
+                return;
+            }
+            this.#paginator.update({ current: pageRequest.page, total: Math.ceil(pageResponse.size / pageRequest.size) });
         }
     }
 
@@ -14780,6 +15423,9 @@ var fml = (function (exports) {
         'table.initial': 'Start searching to see results.',
         'table.error': 'Error while loading data:',
         'table.no-data': 'No elements found.',
+        'table.loaded': 'Showing {loaded} of {total}',
+        'table.range': 'Rows {from}-{to} of {total}',
+        'table.retry': 'Retry',
         'dropdown.empty': 'No results',
         'select.remove': 'Remove',
         'files.dropzone-label': 'Click or drop your files here',
@@ -14831,6 +15477,9 @@ var fml = (function (exports) {
         'table.initial': 'Avvia la ricerca per visualizzare i risultati.',
         'table.error': 'Errore nel caricamento dei dati:',
         'table.no-data': 'Nessun elemento trovato.',
+        'table.loaded': 'Mostrati {loaded} di {total}',
+        'table.range': 'Righe {from}-{to} di {total}',
+        'table.retry': 'Riprova',
         'dropdown.empty': 'Nessun risultato',
         'select.remove': 'Rimuovi',
         'files.dropzone-label': 'Clicca o trascina i file qui',
@@ -14882,6 +15531,9 @@ var fml = (function (exports) {
         'table.initial': 'Inicia la búsqueda para ver los resultados.',
         'table.error': 'Error al cargar los datos:',
         'table.no-data': 'No se encontraron elementos.',
+        'table.loaded': 'Mostrando {loaded} de {total}',
+        'table.range': 'Filas {from}-{to} de {total}',
+        'table.retry': 'Reintentar',
         'dropdown.empty': 'Sin resultados',
         'select.remove': 'Eliminar',
         'files.dropzone-label': 'Haz clic o arrastra tus archivos aquí',
@@ -14936,6 +15588,9 @@ var fml = (function (exports) {
         'table.initial': 'Lancez la recherche pour voir les résultats.',
         'table.error': 'Erreur lors du chargement des données :',
         'table.no-data': 'Aucun élément trouvé.',
+        'table.loaded': 'Affichage de {loaded} sur {total}',
+        'table.range': 'Lignes {from} à {to} sur {total}',
+        'table.retry': 'Réessayer',
         'dropdown.empty': 'Aucun résultat',
         'select.remove': 'Retirer',
         'files.dropzone-label': 'Cliquez ou déposez vos fichiers ici',