@mmlogic/components 0.5.10 → 0.5.12

package/dist/cjs/mrd-boolean-field_25.cjs.entry.js

@@ -6641,8 +6641,14 @@ const MrdTable = class {
         this.keydownHandler = null;
         this.createPickerClickHandler = null;
         this.viewPopoverClickHandler = null;
+        /** Watches the host for gaining a box (e.g. its tab pane being shown) — see componentDidLoad. */
+        this.resizeObserver = null;
         /** Guards against scheduling more than one column-width measurement per freeze. */
         this.colWidthMeasureScheduled = false;
+        /** True once the header/totals widths have been checked against the current totals row. */
+        this.fixedContentMeasured = false;
+        /** Guards against scheduling more than one grow pass. */
+        this.growScheduled = 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. */
@@ -6737,6 +6743,7 @@ const MrdTable = class {
         this.colWidths = [];
         this.colWidthMeasureScheduled = false;
         this.colWidthsUserSet = false;
+        this.fixedContentMeasured = false;
     }
     // ── Lifecycle ──────────────────────────────────────────────────────────────
     componentWillLoad() {
@@ -6745,6 +6752,14 @@ const MrdTable = class {
     }
     componentDidLoad() {
         this.staleCheckTimer = setInterval(() => this.checkStalePages(), STALE_CHECK_INTERVAL_MS);
+        // A table inside a hidden tab pane renders and loads page 0 without ever having a box, so
+        // the width freeze cannot measure anything. ResizeObserver fires the moment the pane is
+        // shown (the host gains a box) — that is when the freeze gets its chance. componentDidRender
+        // is no help there: showing a sibling tab does not re-render this component.
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.freezeColWidths());
+            this.resizeObserver.observe(this.el);
+        }
     }
     // ── Helpers ────────────────────────────────────────────────────────────────
     applyDefaultSort(defaultSort) {
@@ -6772,6 +6787,7 @@ const MrdTable = class {
         this.colWidths = [];
         this.colWidthMeasureScheduled = false;
         this.colWidthsUserSet = false;
+        this.fixedContentMeasured = false;
         this.scrollTop = 0;
         this.renderStart = 0;
         // Always fill the visible viewport on init — totalElements may be stale from a
@@ -6845,9 +6861,15 @@ const MrdTable = class {
         if (data.total != null)
             this.aggregationsTotal = data.total;
         this.aggregations = data;
+        // Fresh totals can be wider than the ones the columns were checked against.
+        this.fixedContentMeasured = false;
     }
     // ── Lifecycle ──────────────────────────────────────────────────────────────
     disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
         if (this.staleCheckTimer !== null) {
             clearInterval(this.staleCheckTimer);
             this.staleCheckTimer = null;
@@ -6870,29 +6892,36 @@ const MrdTable = class {
         }
     }
     componentDidRender() {
-        // Freeze header widths once the first data page has rendered. The measurement
-        // reads offsetWidth and writes the colWidths @State, which would trigger a
-        // 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.colWidthMeasureScheduled = true;
-            index.writeTask(() => {
-                var _a;
-                this.colWidthMeasureScheduled = false;
-                // Re-check: state may have changed (e.g. a reset) between scheduling and running.
-                if (this.colWidths.length !== 0)
-                    return;
-                const measured = (_a = this.measureContentWidths()) !== null && _a !== void 0 ? _a : this.measureColWidths();
-                if (measured)
-                    this.colWidths = measured;
-            });
-        }
+        this.freezeColWidths();
+        this.growToFixedContent();
+    }
+    /** Freeze the column widths once the first data page has rendered.
+     *
+     *  The measurement reads layout and writes the colWidths @State, which would trigger a
+     *  re-render *during* the render cycle if done synchronously from componentDidRender. It is
+     *  deferred 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. */
+    freezeColWidths() {
+        if (this.colWidths.length !== 0 || this.colWidthMeasureScheduled || this.loadedPages.size === 0)
+            return;
+        this.colWidthMeasureScheduled = true;
+        index.writeTask(() => {
+            var _a;
+            this.colWidthMeasureScheduled = false;
+            // Re-check: state may have changed (e.g. a reset) between scheduling and running.
+            if (this.colWidths.length !== 0)
+                return;
+            const measured = (_a = this.measureContentWidths()) !== null && _a !== void 0 ? _a : this.measureColWidths();
+            // A table inside a hidden tab pane (a tab page that is loaded but not shown) has no
+            // layout at all, so every measurement comes back 0. Locking those would pin every
+            // column at MIN_COL_WIDTH for good; wait for the ResizeObserver to report a real box.
+            if (measured && measured.some(w => w > 0))
+                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). */
@@ -6918,6 +6947,38 @@ const MrdTable = class {
         const content = scrollWidth > clientWidth ? scrollWidth + paddingRight : clientWidth;
         return Math.ceil(content + borders);
     }
+    /** Width a header cell needs, measured from its children instead of the cell's own
+     *  scrollWidth. A header is not just text: it holds the label plus a sort icon (and a filter
+     *  icon once the column is filtered), with the drag handle absolutely positioned on top of
+     *  the right padding. Summing the in-flow children makes the icons part of the width by
+     *  construction — and a child's own rect is never clipped by the header's `overflow: hidden`,
+     *  so it stays correct even when the header is already truncated on screen.
+     *  Returns 0 when nothing can be measured, so callers fall back to neededWidth(). */
+    neededHeaderWidth(th) {
+        const px = (v) => (typeof v === 'number' && Number.isFinite(v) ? v : 0);
+        const size = (v) => px(parseFloat(v || '0'));
+        const style = getComputedStyle(th);
+        const paddingLeft = size(style.paddingLeft);
+        const paddingRight = size(style.paddingRight);
+        const borders = Math.max(0, px(th.offsetWidth) - px(th.clientWidth));
+        let inflow = 0;
+        let handle = 0;
+        Array.from(th.children).forEach(child => {
+            const el = child;
+            const cs = getComputedStyle(el);
+            const width = px(el.getBoundingClientRect().width) + size(cs.marginLeft) + size(cs.marginRight);
+            // The drag handle is absolutely positioned: it takes no room in the flow, it overlays it.
+            if (cs.position === 'absolute')
+                handle = Math.max(handle, width);
+            else
+                inflow += width;
+        });
+        if (inflow <= 0)
+            return 0;
+        // The handle sits over the right padding; only reserve what would stick out past it,
+        // so the label never ends up underneath the grab area.
+        return Math.ceil(inflow + paddingLeft + paddingRight + Math.max(0, handle - paddingRight) + borders);
+    }
     /** Width each column needs for its header and its rendered page-0 cells — what the columns
      *  are locked to, so they never end up narrower than their content.
      *
@@ -6930,14 +6991,63 @@ const MrdTable = class {
         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, idx) => {
-            let widest = this.neededWidth(th);
+        const needed = Array.from(ths).map((th, idx) => {
+            let widest = Math.max(this.neededWidth(th), this.neededHeaderWidth(th));
             // .mrd-table__cell only matches real data cells — the shimmer/retry rows render a single
             // colSpan cell (without that class) which would measure as the full table width.
             this.el
-                .querySelectorAll(`.mrd-table__cell:nth-child(${idx + 1})`)
+                .querySelectorAll(this.columnCellSelector(idx))
                 .forEach(cell => { widest = Math.max(widest, this.neededWidth(cell)); });
-            return Math.min(Math.max(widest, MIN_COL_WIDTH), MAX_AUTOFIT_WIDTH);
+            return widest;
+        });
+        // Nothing has a box: the table is in a hidden tab pane. Report "cannot measure" rather
+        // than clamping a row of zeroes up to MIN_COL_WIDTH, which would look like a real result.
+        if (needed.every(w => w <= 0))
+            return null;
+        return needed.map(w => Math.min(Math.max(w, MIN_COL_WIDTH), MAX_AUTOFIT_WIDTH));
+    }
+    /** Data and totals cells of one column. The totals row is included everywhere the data
+     *  cells are: it is fixed, always-visible content, so it must never be clipped. */
+    columnCellSelector(idx) {
+        return `.mrd-table__cell:nth-child(${idx + 1}), .mrd-table__totals-cell:nth-child(${idx + 1})`;
+    }
+    /** Width the header and totals cells of each column need. Null when nothing has a box. */
+    measureFixedContentWidths() {
+        const ths = this.el.querySelectorAll('.mrd-table__header');
+        if (ths.length === 0 || ths.length !== this.columns.length)
+            return null;
+        const needed = Array.from(ths).map((th, idx) => {
+            let widest = Math.max(this.neededWidth(th), this.neededHeaderWidth(th));
+            this.el
+                .querySelectorAll(`.mrd-table__totals-cell:nth-child(${idx + 1})`)
+                .forEach(cell => { widest = Math.max(widest, this.neededWidth(cell)); });
+            return widest;
+        });
+        return needed.every(w => w <= 0) ? null : needed;
+    }
+    /** Widen columns whose header or totals cell does not fit. Data cells may be ellipsised —
+     *  that is what the lock is for — but the header and the totals row are fixed content that
+     *  is always on screen, so clipping them just hides information with no way to reveal it.
+     *
+     *  It runs as a second pass because the totals only arrive with setAggregations(), long
+     *  after the widths were frozen on page 0. Grow-only and once per totals change, so it can
+     *  never turn into the per-page re-proportioning the lock exists to prevent. Hand-set
+     *  widths are left alone. */
+    growToFixedContent() {
+        if (this.colWidths.length === 0 || this.colWidthsUserSet || this.fixedContentMeasured || this.growScheduled)
+            return;
+        this.growScheduled = true;
+        index.writeTask(() => {
+            this.growScheduled = false;
+            if (this.colWidths.length === 0 || this.colWidthsUserSet)
+                return;
+            const needed = this.measureFixedContentWidths();
+            if (!needed)
+                return;
+            this.fixedContentMeasured = true;
+            const grown = this.colWidths.map((w, i) => Math.min(Math.max(w, needed[i]), MAX_AUTOFIT_WIDTH));
+            if (grown.some((w, i) => w !== this.colWidths[i]))
+                this.colWidths = grown;
         });
     }
     /** Re-reads the rendered header widths into colWidths so a drag starts from what is
@@ -6998,9 +7108,14 @@ const MrdTable = class {
             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})`);
+        const cells = this.el.querySelectorAll(`.mrd-table__header:nth-child(${idx + 1}), ${this.columnCellSelector(idx)}`);
         let widest = 0;
-        cells.forEach(cell => { widest = Math.max(widest, this.neededWidth(cell)); });
+        cells.forEach(cell => {
+            const needed = cell.classList.contains('mrd-table__header')
+                ? Math.max(this.neededWidth(cell), this.neededHeaderWidth(cell))
+                : this.neededWidth(cell);
+            widest = Math.max(widest, needed);
+        });
         if (widest > 0)
             this.setColWidth(idx, Math.min(widest, MAX_AUTOFIT_WIDTH));
     }

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

@@ -27,8 +27,14 @@ export class MrdTable {
         this.keydownHandler = null;
         this.createPickerClickHandler = null;
         this.viewPopoverClickHandler = null;
+        /** Watches the host for gaining a box (e.g. its tab pane being shown) — see componentDidLoad. */
+        this.resizeObserver = null;
         /** Guards against scheduling more than one column-width measurement per freeze. */
         this.colWidthMeasureScheduled = false;
+        /** True once the header/totals widths have been checked against the current totals row. */
+        this.fixedContentMeasured = false;
+        /** Guards against scheduling more than one grow pass. */
+        this.growScheduled = 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. */
@@ -123,6 +129,7 @@ export class MrdTable {
         this.colWidths = [];
         this.colWidthMeasureScheduled = false;
         this.colWidthsUserSet = false;
+        this.fixedContentMeasured = false;
     }
     // ── Lifecycle ──────────────────────────────────────────────────────────────
     componentWillLoad() {
@@ -131,6 +138,14 @@ export class MrdTable {
     }
     componentDidLoad() {
         this.staleCheckTimer = setInterval(() => this.checkStalePages(), STALE_CHECK_INTERVAL_MS);
+        // A table inside a hidden tab pane renders and loads page 0 without ever having a box, so
+        // the width freeze cannot measure anything. ResizeObserver fires the moment the pane is
+        // shown (the host gains a box) — that is when the freeze gets its chance. componentDidRender
+        // is no help there: showing a sibling tab does not re-render this component.
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.freezeColWidths());
+            this.resizeObserver.observe(this.el);
+        }
     }
     // ── Helpers ────────────────────────────────────────────────────────────────
     applyDefaultSort(defaultSort) {
@@ -158,6 +173,7 @@ export class MrdTable {
         this.colWidths = [];
         this.colWidthMeasureScheduled = false;
         this.colWidthsUserSet = false;
+        this.fixedContentMeasured = false;
         this.scrollTop = 0;
         this.renderStart = 0;
         // Always fill the visible viewport on init — totalElements may be stale from a
@@ -231,9 +247,15 @@ export class MrdTable {
         if (data.total != null)
             this.aggregationsTotal = data.total;
         this.aggregations = data;
+        // Fresh totals can be wider than the ones the columns were checked against.
+        this.fixedContentMeasured = false;
     }
     // ── Lifecycle ──────────────────────────────────────────────────────────────
     disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
         if (this.staleCheckTimer !== null) {
             clearInterval(this.staleCheckTimer);
             this.staleCheckTimer = null;
@@ -256,29 +278,36 @@ export class MrdTable {
         }
     }
     componentDidRender() {
-        // Freeze header widths once the first data page has rendered. The measurement
-        // reads offsetWidth and writes the colWidths @State, which would trigger a
-        // 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.colWidthMeasureScheduled = true;
-            writeTask(() => {
-                var _a;
-                this.colWidthMeasureScheduled = false;
-                // Re-check: state may have changed (e.g. a reset) between scheduling and running.
-                if (this.colWidths.length !== 0)
-                    return;
-                const measured = (_a = this.measureContentWidths()) !== null && _a !== void 0 ? _a : this.measureColWidths();
-                if (measured)
-                    this.colWidths = measured;
-            });
-        }
+        this.freezeColWidths();
+        this.growToFixedContent();
+    }
+    /** Freeze the column widths once the first data page has rendered.
+     *
+     *  The measurement reads layout and writes the colWidths @State, which would trigger a
+     *  re-render *during* the render cycle if done synchronously from componentDidRender. It is
+     *  deferred 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. */
+    freezeColWidths() {
+        if (this.colWidths.length !== 0 || this.colWidthMeasureScheduled || this.loadedPages.size === 0)
+            return;
+        this.colWidthMeasureScheduled = true;
+        writeTask(() => {
+            var _a;
+            this.colWidthMeasureScheduled = false;
+            // Re-check: state may have changed (e.g. a reset) between scheduling and running.
+            if (this.colWidths.length !== 0)
+                return;
+            const measured = (_a = this.measureContentWidths()) !== null && _a !== void 0 ? _a : this.measureColWidths();
+            // A table inside a hidden tab pane (a tab page that is loaded but not shown) has no
+            // layout at all, so every measurement comes back 0. Locking those would pin every
+            // column at MIN_COL_WIDTH for good; wait for the ResizeObserver to report a real box.
+            if (measured && measured.some(w => w > 0))
+                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). */
@@ -304,6 +333,38 @@ export class MrdTable {
         const content = scrollWidth > clientWidth ? scrollWidth + paddingRight : clientWidth;
         return Math.ceil(content + borders);
     }
+    /** Width a header cell needs, measured from its children instead of the cell's own
+     *  scrollWidth. A header is not just text: it holds the label plus a sort icon (and a filter
+     *  icon once the column is filtered), with the drag handle absolutely positioned on top of
+     *  the right padding. Summing the in-flow children makes the icons part of the width by
+     *  construction — and a child's own rect is never clipped by the header's `overflow: hidden`,
+     *  so it stays correct even when the header is already truncated on screen.
+     *  Returns 0 when nothing can be measured, so callers fall back to neededWidth(). */
+    neededHeaderWidth(th) {
+        const px = (v) => (typeof v === 'number' && Number.isFinite(v) ? v : 0);
+        const size = (v) => px(parseFloat(v || '0'));
+        const style = getComputedStyle(th);
+        const paddingLeft = size(style.paddingLeft);
+        const paddingRight = size(style.paddingRight);
+        const borders = Math.max(0, px(th.offsetWidth) - px(th.clientWidth));
+        let inflow = 0;
+        let handle = 0;
+        Array.from(th.children).forEach(child => {
+            const el = child;
+            const cs = getComputedStyle(el);
+            const width = px(el.getBoundingClientRect().width) + size(cs.marginLeft) + size(cs.marginRight);
+            // The drag handle is absolutely positioned: it takes no room in the flow, it overlays it.
+            if (cs.position === 'absolute')
+                handle = Math.max(handle, width);
+            else
+                inflow += width;
+        });
+        if (inflow <= 0)
+            return 0;
+        // The handle sits over the right padding; only reserve what would stick out past it,
+        // so the label never ends up underneath the grab area.
+        return Math.ceil(inflow + paddingLeft + paddingRight + Math.max(0, handle - paddingRight) + borders);
+    }
     /** Width each column needs for its header and its rendered page-0 cells — what the columns
      *  are locked to, so they never end up narrower than their content.
      *
@@ -316,14 +377,63 @@ export class MrdTable {
         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, idx) => {
-            let widest = this.neededWidth(th);
+        const needed = Array.from(ths).map((th, idx) => {
+            let widest = Math.max(this.neededWidth(th), this.neededHeaderWidth(th));
             // .mrd-table__cell only matches real data cells — the shimmer/retry rows render a single
             // colSpan cell (without that class) which would measure as the full table width.
             this.el
-                .querySelectorAll(`.mrd-table__cell:nth-child(${idx + 1})`)
+                .querySelectorAll(this.columnCellSelector(idx))
                 .forEach(cell => { widest = Math.max(widest, this.neededWidth(cell)); });
-            return Math.min(Math.max(widest, MIN_COL_WIDTH), MAX_AUTOFIT_WIDTH);
+            return widest;
+        });
+        // Nothing has a box: the table is in a hidden tab pane. Report "cannot measure" rather
+        // than clamping a row of zeroes up to MIN_COL_WIDTH, which would look like a real result.
+        if (needed.every(w => w <= 0))
+            return null;
+        return needed.map(w => Math.min(Math.max(w, MIN_COL_WIDTH), MAX_AUTOFIT_WIDTH));
+    }
+    /** Data and totals cells of one column. The totals row is included everywhere the data
+     *  cells are: it is fixed, always-visible content, so it must never be clipped. */
+    columnCellSelector(idx) {
+        return `.mrd-table__cell:nth-child(${idx + 1}), .mrd-table__totals-cell:nth-child(${idx + 1})`;
+    }
+    /** Width the header and totals cells of each column need. Null when nothing has a box. */
+    measureFixedContentWidths() {
+        const ths = this.el.querySelectorAll('.mrd-table__header');
+        if (ths.length === 0 || ths.length !== this.columns.length)
+            return null;
+        const needed = Array.from(ths).map((th, idx) => {
+            let widest = Math.max(this.neededWidth(th), this.neededHeaderWidth(th));
+            this.el
+                .querySelectorAll(`.mrd-table__totals-cell:nth-child(${idx + 1})`)
+                .forEach(cell => { widest = Math.max(widest, this.neededWidth(cell)); });
+            return widest;
+        });
+        return needed.every(w => w <= 0) ? null : needed;
+    }
+    /** Widen columns whose header or totals cell does not fit. Data cells may be ellipsised —
+     *  that is what the lock is for — but the header and the totals row are fixed content that
+     *  is always on screen, so clipping them just hides information with no way to reveal it.
+     *
+     *  It runs as a second pass because the totals only arrive with setAggregations(), long
+     *  after the widths were frozen on page 0. Grow-only and once per totals change, so it can
+     *  never turn into the per-page re-proportioning the lock exists to prevent. Hand-set
+     *  widths are left alone. */
+    growToFixedContent() {
+        if (this.colWidths.length === 0 || this.colWidthsUserSet || this.fixedContentMeasured || this.growScheduled)
+            return;
+        this.growScheduled = true;
+        writeTask(() => {
+            this.growScheduled = false;
+            if (this.colWidths.length === 0 || this.colWidthsUserSet)
+                return;
+            const needed = this.measureFixedContentWidths();
+            if (!needed)
+                return;
+            this.fixedContentMeasured = true;
+            const grown = this.colWidths.map((w, i) => Math.min(Math.max(w, needed[i]), MAX_AUTOFIT_WIDTH));
+            if (grown.some((w, i) => w !== this.colWidths[i]))
+                this.colWidths = grown;
         });
     }
     /** Re-reads the rendered header widths into colWidths so a drag starts from what is
@@ -384,9 +494,14 @@ export class MrdTable {
             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})`);
+        const cells = this.el.querySelectorAll(`.mrd-table__header:nth-child(${idx + 1}), ${this.columnCellSelector(idx)}`);
         let widest = 0;
-        cells.forEach(cell => { widest = Math.max(widest, this.neededWidth(cell)); });
+        cells.forEach(cell => {
+            const needed = cell.classList.contains('mrd-table__header')
+                ? Math.max(this.neededWidth(cell), this.neededHeaderWidth(cell))
+                : this.neededWidth(cell);
+            widest = Math.max(widest, needed);
+        });
         if (widest > 0)
             this.setColWidth(idx, Math.min(widest, MAX_AUTOFIT_WIDTH));
     }