@kodaris/krubble-components 1.0.64 → 1.0.66

package/dist/krubble-components.bundled.js

@@ -4799,6 +4799,23 @@ let KRTable = class KRTable extends i$2 {
         this.classList.toggle('kr-table--card', this.variant === 'card');
         this._updateScrollFlags();
         this._syncSlottedContent();
+        this._lockColumnWidths();
+    }
+    /** Measures header cell widths and locks them to prevent column shift on subsequent data changes. */
+    _lockColumnWidths() {
+        if (this._columnWidthsLocked || this._data.length === 0)
+            return;
+        const headerCells = this.shadowRoot?.querySelectorAll('.header-row > .header-cell');
+        if (!headerCells)
+            return;
+        const cols = this.getDisplayedColumns();
+        headerCells.forEach((cell, i) => {
+            const cellWidth = cell.offsetWidth;
+            if (i < cols.length && !cols[i].width && cols[i].type !== 'actions' && cellWidth > 0) {
+                cols[i].width = `${cellWidth}px`;
+                this._columnWidthsLocked = true;
+            }
+        });
     }
     /** Syncs light DOM content for cells with custom render functions */
     _syncSlottedContent() {
@@ -4972,20 +4989,6 @@ let KRTable = class KRTable extends i$2 {
                 }
             }
             this._dataState = 'success';
-            if (!this._columnWidthsLocked) {
-                requestAnimationFrame(() => {
-                    const headerCells = this.shadowRoot?.querySelectorAll('.header-row > .header-cell');
-                    if (headerCells) {
-                        const cols = this.getDisplayedColumns();
-                        headerCells.forEach((cell, i) => {
-                            if (i < cols.length && !cols[i].width && cols[i].type !== 'actions') {
-                                cols[i].width = `${cell.offsetWidth}px`;
-                            }
-                        });
-                    }
-                    this._columnWidthsLocked = true;
-                });
-            }
             this._updateSearchPosition();
         })
             .catch(err => {
@@ -5976,13 +5979,8 @@ let KRTable = class KRTable extends i$2 {
     }
     /** Renders the scrollable data grid with column headers and rows. */
     _renderTable() {
-        const wrapperStyle = {};
-        if (this.variant === 'card') {
-            // Reserve space for header row + pageSize data rows to prevent layout shift
-            wrapperStyle['min-height'] = `${48 + (this._pageSize * 48)}px`;
-        }
         return b `
-      <div class="wrapper" style=${o$1(wrapperStyle)}>
+      <div class="wrapper">
         <div class="overlay-left"></div>
         <div class="overlay-right"></div>
         ${this._renderStatus()}
@@ -6954,6 +6952,7 @@ KRTable.styles = [krBaseCSS, i$5 `
     :host(.kr-table--card) .wrapper {
       flex: none;
       overflow: visible;
+      min-height: 200px;
     }
 
     :host(.kr-table--card) .content {