@mmlogic/components 0.5.5 → 0.5.7

package/dist/collection/components/table/mrd-table/mrd-table.js

@@ -9,6 +9,10 @@ import { REQUEST_DEBOUNCE_MS, REQUEST_TIMEOUT_MS, MAX_RETRY_ATTEMPTS, visibleCou
 const STALE_CHECK_INTERVAL_MS = 2000;
 /** Breedte van de filterpopup in px — voor overflow-correctie. */
 const POPUP_WIDTH = 280;
+/** Smallest column width (px) a user can drag a column down to. */
+const MIN_COL_WIDTH = 48;
+/** Upper bound (px) for a double-click auto-fit, so one huge value can't blow up the layout. */
+const MAX_AUTOFIT_WIDTH = 600;
 export class MrdTable {
     constructor() {
         // ── Non-state internals ────────────────────────────────────────────────────
@@ -25,6 +29,13 @@ export class MrdTable {
         this.viewPopoverClickHandler = null;
         /** Guards against scheduling more than one column-width measurement per freeze. */
         this.colWidthMeasureScheduled = false;
+        /** Drag origin of the running column resize (null = no drag in progress). */
+        this.resizeOrigin = null;
+        /** True once the user has dragged (or auto-fitted) a column — see colWidthsUserSet usages. */
+        this.colWidthsUserSet = false;
+        /** Set once the host drives this table through init()/setPage(). Never cleared: it has to
+         *  survive resetPages(), which empties loadedPages — see the isPaginated getter. */
+        this.paginationActivated = false;
         // ── Props ──────────────────────────────────────────────────────────────────
         /** The VIEW or RELATED_VIEW layout item. Contains view config, dataClass, fromClass, actions etc. */
         this.item = null;
@@ -54,10 +65,10 @@ export class MrdTable {
         this.renderStart = 0;
         this.renderEnd = 0;
         this.colWidths = [];
+        /** Index of the column currently being dragged by its resize handle (null = not resizing). */
+        this.resizingCol = null;
         this.sortField = '';
         this.sortDir = 'asc';
-        /** Whether the filter UI is visible on column headers. */
-        this.filterMode = false;
         /** Active filters keyed by field name. */
         this.activeFilters = new Map();
         /** Field name of the currently open filter popup (null = closed). */
@@ -94,15 +105,24 @@ export class MrdTable {
         };
     }
     // ── Prop watchers ─────────────────────────────────────────────────────────
-    /** Clamp renderEnd when totalElements shrinks (e.g. after a filter is applied). */
+    /** Clamp renderEnd when totalElements shrinks (e.g. after a filter is applied).
+     *  0 means "unknown" (hosts that rely on minKnownTotal never set it, and some reset it
+     *  while a filter is being applied) — clamping to it would collapse the window to a
+     *  single row, so leave the window alone and let the render pass clamp it. */
     totalElementsChanged(newVal) {
-        this.renderEnd = Math.min(this.renderEnd, Math.max(0, newVal - 1));
+        if (newVal > 0)
+            this.renderEnd = Math.min(this.renderEnd, newVal - 1);
     }
     /** Reset to primary view when the item prop is replaced from outside. */
     itemChanged(newVal) {
         var _a, _b;
         this.activeViewIdx = 0;
         this.applyDefaultSort((_b = (_a = newVal === null || newVal === void 0 ? void 0 : newVal.view) === null || _a === void 0 ? void 0 : _a.defaultSort) !== null && _b !== void 0 ? _b : '');
+        // The columns getter derives from item/activeViewIdx: locked widths belong to the old
+        // column set and would otherwise be applied by index to the new one.
+        this.colWidths = [];
+        this.colWidthMeasureScheduled = false;
+        this.colWidthsUserSet = false;
     }
     // ── Lifecycle ──────────────────────────────────────────────────────────────
     componentWillLoad() {
@@ -137,6 +157,7 @@ export class MrdTable {
         this.retryAttempts.clear();
         this.colWidths = [];
         this.colWidthMeasureScheduled = false;
+        this.colWidthsUserSet = false;
         this.scrollTop = 0;
         this.renderStart = 0;
         // Always fill the visible viewport on init — totalElements may be stale from a
@@ -149,6 +170,7 @@ export class MrdTable {
         this.aggregationsTotal = null;
         this.aggregationsPending = true;
         this.minKnownTotal = 0;
+        this.paginationActivated = true;
         // Always request page 0 — totalElements may be unknown (0) on first load.
         this.emitLoadPage(0);
         this.requestedPages = new Set([0]);
@@ -165,6 +187,7 @@ export class MrdTable {
      * detection even when rows.length === pageSize (exact multiple of page size).
      */
     async setPage(pageNumber, rows, hasNext) {
+        this.paginationActivated = true;
         const isLastPage = hasNext !== undefined ? !hasNext : rows.length < this.pageSize;
         if (isLastPage) {
             // lastRowIdx is -1 when the page is empty; clamp renderEnd to -1 so the
@@ -181,6 +204,13 @@ export class MrdTable {
         const next = new Map(this.loadedPages);
         next.set(pageNumber, rows);
         this.loadedPages = next;
+        // Repair a window that renders nothing. renderEnd is only ever clamped *down* (here and
+        // in totalElementsChanged), so a window computed while the total was still unknown stays
+        // collapsed and the rows sit in loadedPages without ever reaching the screen until the
+        // user scrolls. Stays collapsed when the data really is empty (minKnownTotal 0).
+        if (this.renderEnd < this.renderStart) {
+            this.renderEnd = Math.min(this.renderStart + this.visibleCount() - 1, this.minKnownTotal - 1);
+        }
         this.requestedAt.delete(pageNumber);
         this.retryAttempts.delete(pageNumber);
         if (this.failedPages.has(pageNumber)) {
@@ -231,23 +261,118 @@ export class MrdTable {
         // re-render *during* the render cycle if done synchronously here. Defer it to a
         // writeTask so the state mutation happens outside the render pass (avoids the
         // Stencil "state/prop changed during rendering" warning and potential loops).
+        // NB: the freeze must not depend on the totalElements prop — hosts may omit it
+        // and rely on minKnownTotal, in which case the widths would never be locked and
+        // every incoming page would re-flow all columns.
         if (this.colWidths.length === 0 &&
             !this.colWidthMeasureScheduled &&
-            this.loadedPages.size > 0 &&
-            this.totalElements > 0) {
+            this.loadedPages.size > 0) {
             this.colWidthMeasureScheduled = true;
             writeTask(() => {
                 this.colWidthMeasureScheduled = false;
                 // Re-check: state may have changed (e.g. a reset) between scheduling and running.
                 if (this.colWidths.length !== 0)
                     return;
-                const ths = this.el.querySelectorAll('.mrd-table__header');
-                if (ths.length > 0) {
-                    this.colWidths = Array.from(ths).map(th => th.offsetWidth);
-                }
+                const measured = this.measureColWidths();
+                if (measured)
+                    this.colWidths = measured;
             });
         }
     }
+    // ── Column resizing (drag the header border, Excel-style) ──────────────────
+    /** Current rendered header widths, or null when they can't be trusted (header not laid out yet). */
+    measureColWidths() {
+        const ths = this.el.querySelectorAll('.mrd-table__header');
+        if (ths.length === 0 || ths.length !== this.columns.length)
+            return null;
+        return Array.from(ths).map(th => Math.round(th.getBoundingClientRect().width));
+    }
+    /** Locks the columns at their current rendered widths if they aren't locked yet. */
+    ensureColWidths() {
+        if (this.colWidths.length === this.columns.length)
+            return true;
+        const measured = this.measureColWidths();
+        if (!measured)
+            return false;
+        this.colWidths = measured;
+        return true;
+    }
+    setColWidth(idx, width) {
+        const next = [...this.colWidths];
+        next[idx] = Math.max(MIN_COL_WIDTH, Math.round(width));
+        this.colWidths = next;
+        this.colWidthsUserSet = true;
+    }
+    handleResizeStart(e, idx) {
+        var _a, _b;
+        // Stop the header's own click/sort handling; the drag owns this gesture.
+        e.preventDefault();
+        e.stopPropagation();
+        if (!this.ensureColWidths())
+            return;
+        this.resizeOrigin = { idx, startX: e.clientX, startWidth: this.colWidths[idx] };
+        this.resizingCol = idx;
+        // Pointer capture keeps move/up events on the handle even when the cursor runs
+        // ahead of it — no document-level listeners to register and clean up.
+        (_b = (_a = e.currentTarget).setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, e.pointerId);
+    }
+    handleResizeMove(e) {
+        if (!this.resizeOrigin)
+            return;
+        const { idx, startX, startWidth } = this.resizeOrigin;
+        this.setColWidth(idx, startWidth + (e.clientX - startX));
+    }
+    handleResizeEnd(e) {
+        var _a, _b;
+        if (!this.resizeOrigin)
+            return;
+        this.resizeOrigin = null;
+        this.resizingCol = null;
+        (_b = (_a = e.currentTarget).releasePointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, e.pointerId);
+    }
+    /** Double-click on the handle: widen the column to fit its widest *rendered* cell.
+     *  Only rows currently in the virtual-scroll window are measured — off-screen pages
+     *  aren't in the DOM at all, so this is "fit what you can see", not "fit all data". */
+    handleResizeAutoFit(e, idx) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!this.ensureColWidths())
+            return;
+        // .mrd-table__cell only matches real data cells — the shimmer/retry rows render a single
+        // colSpan cell (without that class) which would otherwise measure as the full table width.
+        const cells = this.el.querySelectorAll(`.mrd-table__header:nth-child(${idx + 1}), .mrd-table__cell:nth-child(${idx + 1})`);
+        let widest = 0;
+        cells.forEach(cell => {
+            // scrollWidth is the untruncated content width; cells clip with overflow: hidden.
+            const style = getComputedStyle(cell);
+            const padding = parseFloat(style.paddingLeft || '0') + parseFloat(style.paddingRight || '0');
+            widest = Math.max(widest, cell.scrollWidth + padding);
+        });
+        if (widest > 0)
+            this.setColWidth(idx, Math.min(widest, MAX_AUTOFIT_WIDTH));
+    }
+    /** Inline table style once the column widths are locked, undefined while still auto-layout.
+     *  Once locked the table gets an explicit pixel width (the sum of the columns) instead of
+     *  the stylesheet's `min-width: max-content`. max-content is re-derived from the cell
+     *  contents, so every page that scrolled in with a longer value widened the table and
+     *  re-proportioned all columns — the jitter this replaces.
+     *  `minWidth: 100%` keeps an auto-measured table stretched to its container, but is dropped
+     *  once the user resizes by hand: with it, the space freed by narrowing a column is
+     *  redistributed over all columns, so a drag would partly spring back. */
+    lockedTableStyle() {
+        if (this.colWidths.length === 0)
+            return undefined;
+        const total = this.colWidths.reduce((sum, w) => sum + (w || 0), 0);
+        return Object.assign({ tableLayout: 'fixed', width: `${total}px` }, (this.colWidthsUserSet ? {} : { minWidth: '100%' }));
+    }
+    /** The resize handle rendered in the right edge of every header cell. */
+    renderColResizer(idx) {
+        const cls = 'mrd-table__col-resizer' + (this.resizingCol === idx ? ' mrd-table__col-resizer--active' : '');
+        return (h("span", { class: cls, role: "separator", "aria-orientation": "vertical", title: t('column_resize', this.locale), "on-pointerdown": (e) => this.handleResizeStart(e, idx), "on-pointermove": (e) => this.handleResizeMove(e), "on-pointerup": (e) => this.handleResizeEnd(e), "on-pointercancel": (e) => this.handleResizeEnd(e), "on-dblclick": (e) => this.handleResizeAutoFit(e, idx),
+            // The click that follows the drag targets this handle; swallow it so it never
+            // bubbles to the header and triggers a sort or the filter popup.
+            onClick: (e) => e.stopPropagation() }));
+    }
     // ── Paging / scroll helpers ────────────────────────────────────────────────
     visibleCount() {
         return visibleCount(this.tableHeight, this.rowHeight);
@@ -331,6 +456,17 @@ export class MrdTable {
             activeFilters: this.activeFilters.values(),
         });
     }
+    /** True when the table is in paginated / virtual-scroll mode rather than driven by the
+     *  rows prop. Mirrors the branch taken in render().
+     *
+     *  The filter handlers gate their reload on this. They used to test minKnownTotal, which is
+     *  0 after a filter returned no rows at all — so clearing that filter reloaded nothing and
+     *  the table stayed empty. Hosts that omit totalElements have the same problem, hence the
+     *  sticky flag rather than loadedPages.size: resetPages() clears the loaded pages, and the
+     *  mode must not flip back to the rows prop (and its "no results") while page 0 is in flight. */
+    get isPaginated() {
+        return this.totalElements > 0 || this.paginationActivated;
+    }
     get columns() {
         var _a, _b, _c;
         return ((_c = (_b = (_a = this.allViews[this.activeViewIdx]) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.values) !== null && _c !== void 0 ? _c : []);
@@ -412,8 +548,13 @@ export class MrdTable {
         this.failedPages = new Set();
         this.requestedAt.clear();
         this.retryAttempts.clear();
-        this.colWidths = [];
-        this.colWidthMeasureScheduled = false;
+        // A sort or filter change keeps the same columns, so hand-set widths survive it —
+        // re-measuring would throw away what the user just dragged. Auto-measured widths are
+        // dropped so they can be re-derived from the new first page.
+        if (!this.colWidthsUserSet) {
+            this.colWidths = [];
+            this.colWidthMeasureScheduled = false;
+        }
         this.scrollTop = 0;
         this.renderStart = 0;
         this.minKnownTotal = 0;
@@ -424,18 +565,8 @@ export class MrdTable {
         if (scroller)
             scroller.scrollTop = 0;
     }
-    handleSortClick(col) {
-        const name = this.colName(col);
-        if (this.sortField === name) {
-            this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
-        }
-        else {
-            this.sortField = name;
-            this.sortDir = 'asc';
-        }
-        this.resetPages();
-        this.emitPagesForWindow(this.renderStart, this.renderEnd);
-    }
+    /** Sorting runs through the column popup's sort section (applySort); there is no
+     *  separate click-to-sort mode any more. */
     applySort(col, dir) {
         this.sortField = this.colName(col);
         this.sortDir = dir;
@@ -541,11 +672,6 @@ export class MrdTable {
         this.requestedPages = requested;
     }
     // ── Filter helpers ─────────────────────────────────────────────────────────
-    handleFilterToggle() {
-        this.filterMode = !this.filterMode;
-        if (!this.filterMode)
-            this.closeFilterPopup();
-    }
     handleFilterOpen(col, e) {
         e.stopPropagation();
         const btn = e.currentTarget;
@@ -652,7 +778,7 @@ export class MrdTable {
         this.aggregations = null;
         this.aggregationsTotal = null;
         this.aggregationsPending = true;
-        if (this.totalElements > 0 || this.minKnownTotal > 0) {
+        if (this.isPaginated) {
             this.resetPages();
             this.emitPagesForWindow(this.renderStart, this.renderEnd);
         }
@@ -667,7 +793,7 @@ export class MrdTable {
         this.aggregations = null;
         this.aggregationsTotal = null;
         this.aggregationsPending = true;
-        if (this.totalElements > 0 || this.minKnownTotal > 0) {
+        if (this.isPaginated) {
             this.resetPages();
             this.emitPagesForWindow(this.renderStart, this.renderEnd);
         }
@@ -677,7 +803,7 @@ export class MrdTable {
         this.aggregations = null;
         this.aggregationsTotal = null;
         this.aggregationsPending = true;
-        if (this.totalElements > 0 || this.minKnownTotal > 0) {
+        if (this.isPaginated) {
             this.resetPages();
             this.emitPagesForWindow(this.renderStart, this.renderEnd);
         }
@@ -713,8 +839,7 @@ export class MrdTable {
     // ── Render: toolbar ────────────────────────────────────────────────────────
     renderToolbar() {
         var _a;
-        return (h(Toolbar, { locale: this.locale, filterMode: this.filterMode, filterCount: this.activeFilters.size, actions: this.tableActions, views: this.allViews, activeViewIdx: this.activeViewIdx, viewPopoverOpen: this.viewPopoverOpen, createPickerOpen: this.createPickerOpen, createTypes: (_a = this.item) === null || _a === void 0 ? void 0 : _a.createTypes, cb: {
-                onFilterToggle: () => this.handleFilterToggle(),
+        return (h(Toolbar, { locale: this.locale, filterCount: this.activeFilters.size, actions: this.tableActions, views: this.allViews, activeViewIdx: this.activeViewIdx, viewPopoverOpen: this.viewPopoverOpen, createPickerOpen: this.createPickerOpen, createTypes: (_a = this.item) === null || _a === void 0 ? void 0 : _a.createTypes, cb: {
                 onClearAllFilters: () => this.clearAllFilters(),
                 onViewSwitch: idx => this.handleViewSwitch(idx),
                 onToggleViewPopover: e => this.toggleViewPopover(e),
@@ -747,7 +872,7 @@ export class MrdTable {
     // ── Render: footer ────────────────────────────────────────────────────────
     renderFooter(rowCount, effectiveTotal, isTotalKnown = true) {
         // Non-paginated mode: totalElements=0 and no paginated data loaded yet
-        if (this.totalElements === 0 && this.loadedPages.size === 0) {
+        if (!this.isPaginated) {
             const count = rowCount !== null && rowCount !== void 0 ? rowCount : 0;
             if (count === 0)
                 return null;
@@ -781,17 +906,18 @@ export class MrdTable {
         // ── Non-paginated mode ──────────────────────────────────────────────────
         // Only enter non-paginated mode when totalElements is 0 AND no paginated data
         // has been loaded yet — prevents the wrong branch when the host omits totalElements.
-        if (this.totalElements === 0 && this.loadedPages.size === 0) {
-            return (h(Host, null, this.renderToolbar(), h("div", { class: "mrd-table" }, h("table", { class: "mrd-table__table" }, h("thead", null, h("tr", null, this.columns.map(col => {
+        if (!this.isPaginated) {
+            return (h(Host, { class: { 'mrd-table--resizing': this.resizingCol !== null } }, this.renderToolbar(), h("div", { class: "mrd-table" }, h("table", { class: "mrd-table__table", style: this.lockedTableStyle() }, h("thead", null, h("tr", null, this.columns.map((col, idx) => {
                 var _a;
                 const name = this.colName(col);
                 const isFiltered = this.activeFilters.has(name);
+                const isInteractive = !NON_INTERACTIVE_TYPES.has(this.colDataType(col));
                 const cls = [
                     'mrd-table__header',
                     isFiltered ? 'mrd-table__header--filtered' : '',
-                    this.filterMode ? 'mrd-table__header--sortable' : '',
+                    isInteractive ? 'mrd-table__header--sortable' : '',
                 ].filter(Boolean).join(' ');
-                return (h("th", { class: cls, onClick: this.filterMode ? (e) => this.handleFilterOpen(col, e) : undefined }, h("span", { class: "mrd-table__header-label" }, (_a = col.label) !== null && _a !== void 0 ? _a : ''), isFiltered && h(FilterIcon, null)));
+                return (h("th", { class: cls, style: this.colWidths[idx] ? { width: `${this.colWidths[idx]}px` } : undefined, onClick: isInteractive ? (e) => this.handleFilterOpen(col, e) : undefined }, h("span", { class: "mrd-table__header-label" }, (_a = col.label) !== null && _a !== void 0 ? _a : ''), isFiltered && h(FilterIcon, null), this.renderColResizer(idx)));
             }))), h("tbody", null, (_b = this.rows) === null || _b === void 0 ? void 0 : _b.map((row, i) => (h("tr", { class: "mrd-table__row mrd-table__row--clickable", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' }, onClick: () => this.mrdRowClick.emit({ row }) }, this.columns.map(col => this.renderCell(col, row)))))), this.renderTotalsRow()), (!this.rows || this.rows.length === 0) && (h("p", { class: "mrd-table__empty" }, t('no_results', this.locale)))), this.renderFooter((_c = this.rows) === null || _c === void 0 ? void 0 : _c.length), this.renderFilterPopup(), this.renderTextblockModal(), this.renderJsonModal()));
         }
         // ── Paginated / virtual-scroll mode ────────────────────────────────────
@@ -805,9 +931,13 @@ export class MrdTable {
         const colCount = this.columns.length;
         const topSpacerHeight = this.renderStart * this.rowHeight;
         const bottomSpacerHeight = Math.max(0, (effectiveTotal - 1 - clampedEnd) * this.rowHeight);
-        const tableStyle = this.colWidths.length > 0
-            ? { tableLayout: 'fixed' }
-            : undefined;
+        // Once the widths are frozen the table gets an explicit pixel width (the sum of the
+        // locked columns) instead of the stylesheet's `min-width: max-content`. max-content is
+        // re-derived from the cell contents, so every page that scrolled in with a longer value
+        // widened the table and re-proportioned all columns — the jitter this replaces.
+        // `minWidth: 100%` keeps a narrow table stretched to the container (and still responsive
+        // to container resizes) without ever consulting the content again.
+        const tableStyle = this.lockedTableStyle();
         const renderedRows = [];
         for (let i = this.renderStart; i <= clampedEnd; i++) {
             const row = this.getRow(i);
@@ -832,7 +962,7 @@ export class MrdTable {
                     }) }, this.columns.map(col => this.renderCell(col, row))));
             }
         }
-        return (h(Host, null, this.renderToolbar(), h("div", { class: "mrd-table__scroll", style: { height: `${this.tableHeight}px` }, onScroll: this.handleScroll }, h("table", { class: "mrd-table__table", style: tableStyle }, h("thead", null, h("tr", null, this.columns.map((col, idx) => {
+        return (h(Host, { class: { 'mrd-table--resizing': this.resizingCol !== null } }, this.renderToolbar(), h("div", { class: "mrd-table__scroll", style: { height: `${this.tableHeight}px` }, onScroll: this.handleScroll }, h("table", { class: "mrd-table__table", style: tableStyle }, h("thead", null, h("tr", null, this.columns.map((col, idx) => {
             var _a;
             const name = this.colName(col);
             const isActive = this.sortField === name;
@@ -844,7 +974,7 @@ export class MrdTable {
                 isActive ? `mrd-table__header--sorted-${this.sortDir}` : '',
                 isFiltered ? 'mrd-table__header--filtered' : '',
             ].filter(Boolean).join(' ');
-            return (h("th", { class: cls, style: this.colWidths[idx] ? { width: `${this.colWidths[idx]}px` } : undefined, onClick: isInteractive ? ((e) => this.filterMode ? this.handleFilterOpen(col, e) : this.handleSortClick(col)) : undefined }, h("span", { class: "mrd-table__header-label" }, (_a = col.label) !== null && _a !== void 0 ? _a : ''), isInteractive && isActive && (h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, this.sortDir === 'asc' ? '▲' : '▼')), isInteractive && !isActive && !this.filterMode && (h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, "\u21C5")), isInteractive && isFiltered && h(FilterIcon, null)));
+            return (h("th", { class: cls, style: this.colWidths[idx] ? { width: `${this.colWidths[idx]}px` } : undefined, onClick: isInteractive ? ((e) => this.handleFilterOpen(col, e)) : undefined }, h("span", { class: "mrd-table__header-label" }, (_a = col.label) !== null && _a !== void 0 ? _a : ''), isInteractive && isActive && (h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, this.sortDir === 'asc' ? '▲' : '▼')), isInteractive && !isActive && (h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, "\u21C5")), isInteractive && isFiltered && h(FilterIcon, null), this.renderColResizer(idx)));
         }))), h("tbody", null, topSpacerHeight > 0 && (h("tr", { class: "mrd-table__spacer", style: { height: `${topSpacerHeight}px` } }, h("td", { colSpan: colCount }))), renderedRows, bottomSpacerHeight > 0 && (h("tr", { class: "mrd-table__spacer", style: { height: `${bottomSpacerHeight}px` } }, h("td", { colSpan: colCount })))), this.renderTotalsRow())), effectiveTotal === 0 && this.loadedPages.has(0) && (h("p", { class: "mrd-table__empty" }, t('no_results', this.locale))), effectiveTotal > 0 && this.renderFooter(undefined, effectiveTotal, this.isTotalKnown()), this.renderFilterPopup(), this.renderTextblockModal(), this.renderJsonModal()));
     }
     renderTextblockModal() {
@@ -1066,9 +1196,9 @@ export class MrdTable {
             "renderStart": {},
             "renderEnd": {},
             "colWidths": {},
+            "resizingCol": {},
             "sortField": {},
             "sortDir": {},
-            "filterMode": {},
             "activeFilters": {},
             "openFilterCol": {},
             "pendingFilter": {},

package/dist/collection/components/table/mrd-table/table-parts.js

@@ -42,7 +42,10 @@ export const TableCell = ({ col, row, locale, onDownload, onOpenTextblock, onOpe
         return (h("td", { class: "mrd-table__cell" }, preview, h("button", { class: "mrd-table__textblock-btn", onClick: (e) => { e.stopPropagation(); onOpenTextblock(full); }, "aria-label": t('textblock_show_more', locale) }, "\u22EF")));
     }
     const value = CellRenderer.render(col, row, locale);
-    return (h("td", { class: `mrd-table__cell${isNumeric ? ' mrd-table__cell--numeric' : ''}` }, value));
+    return (
+    // title: columns are locked to the width measured on page 0, so a longer value on a
+    // later page is ellipsised rather than widening the column — the tooltip keeps it readable.
+    h("td", { class: `mrd-table__cell${isNumeric ? ' mrd-table__cell--numeric' : ''}`, title: value || undefined }, value));
 };
 /** Formats the aggregation total for one column, '' when not applicable. */
 export function formatAggregationValue(col, aggregations, locale) {
@@ -84,11 +87,11 @@ export const JsonModal = ({ html, locale, onClose }) => {
         return null;
     return (h("div", { class: "mrd-table__modal-backdrop", onClick: onClose, role: "dialog", "aria-modal": "true" }, h("div", { class: "mrd-table__modal", onClick: (e) => e.stopPropagation() }, h("button", { class: "mrd-table__modal-close", onClick: onClose, "aria-label": t('close', locale) }, "\u2715"), h("pre", { class: "mrd-table__modal-json", innerHTML: html }))));
 };
-export const Toolbar = ({ locale, filterMode, filterCount, actions, views, activeViewIdx, viewPopoverOpen, createPickerOpen, createTypes, cb }) => {
+export const Toolbar = ({ locale, filterCount, actions, views, activeViewIdx, viewPopoverOpen, createPickerOpen, createTypes, cb }) => {
     var _a;
     const hasActions = actions.length > 0;
     const hasViewSwitcher = views.length > 1;
-    return (h("div", { class: "mrd-table__toolbar" }, h("div", { class: "mrd-table__toolbar-left" }, h("button", { class: `mrd-table__action mrd-table__action--secondary mrd-table__filter-toggle${filterMode ? ' mrd-table__filter-toggle--active' : ''}`, onClick: cb.onFilterToggle }, h("svg", { class: "mrd-table__action-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" })), filterCount > 0 && h("span", { class: "mrd-table__filter-badge" }, filterCount), h("span", { class: "mrd-table__action-tooltip" }, filterMode ? t('table_filter_hide', locale) : t('table_filter', locale), filterCount > 0 ? ` (${filterCount} ${t('table_filter_active', locale)})` : '')), filterCount > 0 && (h("button", { class: "mrd-table__action mrd-table__action--secondary", onClick: cb.onClearAllFilters }, h("svg", { class: "mrd-table__action-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })), h("span", { class: "mrd-table__action-tooltip" }, t('table_filter_clear_all', locale))))), hasViewSwitcher && (h("div", { class: "mrd-table__toolbar-center" }, h("div", { class: "mrd-table__view-switcher" }, h("button", { class: "mrd-table__view-arrow", "aria-label": "Previous view", onClick: () => cb.onViewSwitch((activeViewIdx - 1 + views.length) % views.length) }, "\u25C0"), h("div", { class: "mrd-table__view-title-wrap" }, h("button", { class: "mrd-table__view-title", onClick: (e) => cb.onToggleViewPopover(e) }, (_a = views[activeViewIdx]) === null || _a === void 0 ? void 0 : _a.label), viewPopoverOpen && (h("div", { class: "mrd-table__view-popover", onClick: (e) => e.stopPropagation() }, views.map((v, i) => (h("button", { key: String(i), class: `mrd-table__view-popover-item${i === activeViewIdx ? ' mrd-table__view-popover-item--active' : ''}`, onClick: () => {
+    return (h("div", { class: "mrd-table__toolbar" }, h("div", { class: "mrd-table__toolbar-left" }, filterCount > 0 && (h("button", { class: "mrd-table__action mrd-table__action--secondary mrd-table__filter-clear", onClick: cb.onClearAllFilters }, h("svg", { class: "mrd-table__action-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })), h("span", { class: "mrd-table__filter-clear-label" }, t('table_filter_clear_all', locale), " (", filterCount, ")")))), hasViewSwitcher && (h("div", { class: "mrd-table__toolbar-center" }, h("div", { class: "mrd-table__view-switcher" }, h("button", { class: "mrd-table__view-arrow", "aria-label": "Previous view", onClick: () => cb.onViewSwitch((activeViewIdx - 1 + views.length) % views.length) }, "\u25C0"), h("div", { class: "mrd-table__view-title-wrap" }, h("button", { class: "mrd-table__view-title", onClick: (e) => cb.onToggleViewPopover(e) }, (_a = views[activeViewIdx]) === null || _a === void 0 ? void 0 : _a.label), viewPopoverOpen && (h("div", { class: "mrd-table__view-popover", onClick: (e) => e.stopPropagation() }, views.map((v, i) => (h("button", { key: String(i), class: `mrd-table__view-popover-item${i === activeViewIdx ? ' mrd-table__view-popover-item--active' : ''}`, onClick: () => {
             if (i !== activeViewIdx)
                 cb.onViewSwitch(i);
             cb.onCloseViewPopover();

package/dist/collection/components/table/mrd-table/virtual-scroll.js

@@ -14,13 +14,18 @@ export const MAX_RETRY_ATTEMPTS = 3;
 export function visibleCount(tableHeight, rowHeight) {
     return Math.ceil(tableHeight / rowHeight);
 }
-/** Render window (with buffer) for the given scroll offset. */
+/** Render window (with buffer) for the given scroll offset.
+ *  total <= 0 means "not known yet" (no totalElements prop, no aggregation total and no page
+ *  loaded — e.g. right after a filter reset), *not* "no rows". Clamping to total - 1 would
+ *  collapse the window to renderEnd = -1, so nothing renders and no page is ever requested;
+ *  the window is left unclamped instead and the render pass clamps it against
+ *  effectiveTotal once real data has landed. */
 export function computeWindow(scrollTop, rowHeight, tableHeight, total) {
     const visStart = Math.floor(scrollTop / rowHeight);
-    const visEnd = Math.min(visStart + visibleCount(tableHeight, rowHeight), total - 1);
+    const unclamped = visStart + visibleCount(tableHeight, rowHeight) + BUFFER;
     return {
         renderStart: Math.max(0, visStart - BUFFER),
-        renderEnd: Math.min(total - 1, visEnd + BUFFER),
+        renderEnd: total > 0 ? Math.min(total - 1, unclamped) : unclamped,
     };
 }
 /** First/last page (0-based) covering the given row window. */

package/dist/collection/utils/format.js

@@ -53,166 +53,6 @@ export function formatTime(value, locale) {
     date.setHours(hours, minutes, 0, 0);
     return new Intl.DateTimeFormat(locale, { hour: '2-digit', minute: '2-digit' }).format(date);
 }
-/**
- * Locale-aware date input support.
- *
- * A native <input type="date"> always displays in the browser/OS locale, so the
- * date fields render a plain text input instead and use these helpers to format
- * and parse the value in the locale the host passed down — the same approach
- * mrd-number-field takes with formatNumber / parseLocalizedNumber.
- */
-/** 31 December 2026, 13:45 — day > 12 so day/month order is unambiguous. */
-const PATTERN_SAMPLE = new Date(2026, 11, 31, 13, 45, 0);
-function dateTimeParts(locale, withTime) {
-    const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
-    if (withTime) {
-        options.hour = '2-digit';
-        options.minute = '2-digit';
-    }
-    return new Intl.DateTimeFormat(locale, options).formatToParts(PATTERN_SAMPLE);
-}
-/** Order in which day/month/year appear for a locale, e.g. ['day','month','year'] for nl-NL. */
-function datePartOrder(locale) {
-    const order = dateTimeParts(locale, false)
-        .filter(p => p.type === 'day' || p.type === 'month' || p.type === 'year')
-        .map(p => p.type);
-    return order.length === 3 ? order : ['day', 'month', 'year'];
-}
-/** The locale's am/pm markers, so 12-hour input can be parsed back. */
-function dayPeriodMarkers(locale) {
-    const marker = (hour) => {
-        var _a, _b;
-        return (_b = (_a = new Intl.DateTimeFormat(locale, { hour: 'numeric', hour12: true })
-            .formatToParts(new Date(2026, 0, 1, hour))
-            .find(p => p.type === 'dayPeriod')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
-    };
-    return { am: marker(9), pm: marker(21) };
-}
-/** Arabic-Indic and extended Arabic-Indic digits → ASCII, so typed input parses everywhere. */
-function toLatinDigits(str) {
-    return str.replace(/[٠-٩۰-۹]/g, d => {
-        const code = d.charCodeAt(0);
-        return String(code >= 0x06f0 ? code - 0x06f0 : code - 0x0660);
-    });
-}
-function pad(n, size = 2) {
-    return String(n).padStart(size, '0');
-}
-/** Two-digit years: < 70 → 20xx, otherwise 19xx. */
-function expandYear(value, digits) {
-    if (digits > 2)
-        return value;
-    return value < 70 ? 2000 + value : 1900 + value;
-}
-function isValidYmd(year, month, day) {
-    if (year < 1 || month < 1 || month > 12 || day < 1)
-        return false;
-    return day <= new Date(year, month, 0).getDate();
-}
-/**
- * Placeholder showing the locale's date order, e.g. 'dd-mm-jjjj' (nl-NL) or
- * 'mm/dd/yyyy' (en-US). Pass `hour`/`minute` tokens to include the time part.
- */
-export function localeDatePattern(locale, tokens) {
-    const withTime = !!(tokens.hour && tokens.minute);
-    return dateTimeParts(locale, withTime)
-        .map(part => {
-        var _a, _b;
-        switch (part.type) {
-            case 'day': return tokens.day;
-            case 'month': return tokens.month;
-            case 'year': return tokens.year;
-            case 'hour': return (_a = tokens.hour) !== null && _a !== void 0 ? _a : '';
-            case 'minute': return (_b = tokens.minute) !== null && _b !== void 0 ? _b : '';
-            case 'dayPeriod': return 'AM';
-            case 'literal': return part.value;
-            default: return '';
-        }
-    })
-        .join('')
-        .trim();
-}
-/** Pulls day/month/year out of the number groups a user typed, per locale order. */
-function ymdFromGroups(groups, locale) {
-    const order = datePartOrder(locale);
-    const values = {};
-    order.forEach((type, i) => (values[type] = groups[i]));
-    const year = expandYear(Number(values.year), values.year.length);
-    const month = Number(values.month);
-    const day = Number(values.day);
-    return isValidYmd(year, month, day) ? { year, month, day } : null;
-}
-/**
- * Parses a date the user typed in their own locale format → 'YYYY-MM-DD'.
- * Accepts any separator, one- or two-digit day/month, two-digit years, and
- * plain ISO input (pasted values). Returns null when it is not a valid date.
- */
-export function parseLocalizedDate(input, locale) {
-    const raw = toLatinDigits(String(input !== null && input !== void 0 ? input : '')).trim();
-    if (!raw)
-        return null;
-    const groups = raw.match(/\d+/g);
-    if (!groups || groups.length < 3)
-        return null;
-    const iso = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(raw);
-    const parsed = iso
-        ? (isValidYmd(+iso[1], +iso[2], +iso[3]) ? { year: +iso[1], month: +iso[2], day: +iso[3] } : null)
-        : ymdFromGroups(groups.slice(0, 3), locale);
-    if (!parsed)
-        return null;
-    return `${pad(parsed.year, 4)}-${pad(parsed.month)}-${pad(parsed.day)}`;
-}
-/**
- * Parses a date+time the user typed in their own locale format →
- * 'YYYY-MM-DDTHH:mm' in local time (the shape mrd-datetime-field converts to
- * UTC before emitting). A missing time defaults to 00:00; am/pm is recognised
- * both in English and in the locale's own markers.
- */
-export function parseLocalizedDateTime(input, locale) {
-    const raw = toLatinDigits(String(input !== null && input !== void 0 ? input : '')).trim();
-    if (!raw)
-        return null;
-    const groups = raw.match(/\d+/g);
-    if (!groups || groups.length < 3)
-        return null;
-    const iso = /^(\d{4})-(\d{1,2})-(\d{1,2})(?:[T ]|$)/.exec(raw);
-    const date = iso
-        ? (isValidYmd(+iso[1], +iso[2], +iso[3]) ? { year: +iso[1], month: +iso[2], day: +iso[3] } : null)
-        : ymdFromGroups(groups.slice(0, 3), locale);
-    if (!date)
-        return null;
-    let hour = groups.length > 3 ? Number(groups[3]) : 0;
-    const minute = groups.length > 4 ? Number(groups[4]) : 0;
-    const lower = raw.toLowerCase();
-    const { am, pm } = dayPeriodMarkers(locale);
-    const isPm = /p\.?\s?m\.?/.test(lower) || (!!pm && lower.includes(pm.toLowerCase()));
-    const isAm = /a\.?\s?m\.?/.test(lower) || (!!am && lower.includes(am.toLowerCase()));
-    if (isPm && hour < 12)
-        hour += 12;
-    if (isAm && hour === 12)
-        hour = 0;
-    if (hour > 23 || minute > 59)
-        return null;
-    return `${pad(date.year, 4)}-${pad(date.month)}-${pad(date.day)}T${pad(hour)}:${pad(minute)}`;
-}
-/**
- * 'YYYY-MM-DD' → localized display string. Parsed as a *local* date, unlike
- * formatDate(), which would read a date-only string as UTC midnight and shift
- * the day in negative-offset timezones.
- */
-export function formatIsoDate(iso, locale) {
-    const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(iso !== null && iso !== void 0 ? iso : ''));
-    if (!m)
-        return '';
-    return formatDate(new Date(+m[1], +m[2] - 1, +m[3]), locale);
-}
-/** 'YYYY-MM-DDTHH:mm' in local time → localized display string. */
-export function formatLocalDateTime(local, locale) {
-    const m = /^(\d{4})-(\d{2})-(\d{2})[T ](\d{2}):(\d{2})/.exec(String(local !== null && local !== void 0 ? local : ''));
-    if (!m)
-        return '';
-    return formatDateTime(new Date(+m[1], +m[2] - 1, +m[3], +m[4], +m[5]), locale);
-}
 export function parseLocalizedNumber(str, locale) {
     var _a, _b, _c, _d;
     if (!str || !str.trim())