@mmlogic/components 0.5.6 → 0.5.8

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

@@ -34,6 +34,8 @@
   color: var(--mrd-color-neutral-600);
   font-weight: var(--mrd-font-weight-medium);
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   font-size: var(--mrd-font-size-xs);
   text-transform: uppercase;
   letter-spacing: 0.04em;
@@ -57,6 +59,41 @@
 .mrd-table__header-label {
   margin-right: var(--mrd-space-1);
 }
+.mrd-table__col-resizer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 9px;
+  height: 100%;
+  cursor: col-resize;
+  touch-action: none;
+  user-select: none;
+}
+.mrd-table__col-resizer::after {
+  content: "";
+  position: absolute;
+  top: 25%;
+  right: 4px;
+  width: 1px;
+  height: 50%;
+  background: var(--mrd-border-color);
+}
+.mrd-table__col-resizer:hover::after {
+  width: 2px;
+  right: 3px;
+  background: var(--mrd-color-primary);
+}
+.mrd-table__col-resizer--active::after {
+  width: 2px;
+  right: 3px;
+  height: 100%;
+  top: 0;
+  background: var(--mrd-color-primary);
+}
+.mrd-table--resizing {
+  cursor: col-resize;
+  user-select: none;
+}
 .mrd-table__sort-icon {
   font-size: 0.85rem;
   opacity: 0.4;
@@ -99,6 +136,8 @@
   padding: var(--mrd-space-2) var(--mrd-space-4);
   vertical-align: top;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .mrd-table__cell--numeric {
   text-align: right;
@@ -313,31 +352,20 @@
   background: var(--mrd-color-neutral-50);
   color: var(--mrd-color-neutral-900);
 }
-.mrd-table__filter-toggle--active {
-  background: var(--mrd-color-primary);
+.mrd-table__filter-clear {
+  width: auto;
+  gap: var(--mrd-space-1);
+  padding: 0 var(--mrd-space-2);
+  color: var(--mrd-color-primary);
   border-color: var(--mrd-color-primary);
-  color: var(--mrd-color-white);
 }
-.mrd-table__filter-toggle--active:hover {
-  background: var(--mrd-color-primary-dark, var(--mrd-color-primary));
-  border-color: var(--mrd-color-primary-dark, var(--mrd-color-primary));
-  color: var(--mrd-color-white);
+.mrd-table__filter-clear:hover {
+  color: var(--mrd-color-primary);
+  border-color: var(--mrd-color-primary);
 }
-.mrd-table__filter-badge {
-  position: absolute;
-  top: -6px;
-  right: -6px;
-  min-width: 1.25rem;
-  height: 1.25rem;
-  padding: 0 3px;
-  background: var(--mrd-color-error, #e53e3e);
-  color: var(--mrd-color-white);
-  border-radius: 9999px;
-  font-size: 0.65rem;
-  font-weight: var(--mrd-font-weight-medium);
-  line-height: 1.25rem;
-  text-align: center;
-  pointer-events: none;
+.mrd-table__filter-clear-label {
+  font-size: var(--mrd-font-size-sm);
+  white-space: nowrap;
 }
 .mrd-table__filter-popup {
   position: fixed;
@@ -550,6 +578,8 @@
   font-weight: var(--mrd-font-weight-medium);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   border-top: 2px solid var(--mrd-border-color);
 }
 .mrd-table__totals-cell--numeric {

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,123 @@ 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));
+    }
+    /** Re-reads the rendered header widths into colWidths so a drag starts from what is
+     *  actually on screen — and locks the columns if they weren't locked yet.
+     *
+     *  A table narrower than its container is stretched by `minWidth: 100%`, so the rendered
+     *  columns are wider than the auto-measured values held in colWidths. Dragging from those
+     *  stale values moved the grabbed column to the wrong width, and dropping the stretch (which
+     *  a hand-set width does) then re-laid out every other column at once. */
+    syncColWidths() {
+        const measured = this.measureColWidths();
+        if (measured) {
+            this.colWidths = measured;
+            return true;
+        }
+        return this.colWidths.length === this.columns.length;
+    }
+    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.syncColWidths())
+            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.syncColWidths())
+            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 +461,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 +553,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 +570,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 +677,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 +783,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 +798,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 +808,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 +844,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 +877,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 +911,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 +936,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 +967,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 +979,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 +1201,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. */