@kodaris/krubble-components 1.0.64 → 1.0.66

package/dist/krubble-components.umd.js

@@ -4805,6 +4805,23 @@
           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() {
@@ -4978,20 +4995,6 @@
                   }
               }
               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 => {
@@ -5982,13 +5985,8 @@
       }
       /** 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()}
@@ -6960,6 +6958,7 @@
     :host(.kr-table--card) .wrapper {
       flex: none;
       overflow: visible;
+      min-height: 200px;
     }
 
     :host(.kr-table--card) .content {