@shival99/z-ui 2.0.91 → 2.0.92

package/fesm2022/shival99-z-ui-components-z-table.mjs

@@ -4612,7 +4612,11 @@ class ZTablePinningStylesPipe {
         return {};
     }
     _colWidth(columnId, column, domWidthMap) {
-        return domWidthMap?.[columnId] ?? column.getSize();
+        const measuredWidth = domWidthMap?.[columnId];
+        if (measuredWidth && measuredWidth > 0) {
+            return measuredWidth;
+        }
+        return column.getSize();
     }
     // ─── Body ─────────────────────────────────────────────────────────────────
     _getBodyPinningStyles(column, allCells, columns, domWidthMap) {
@@ -4620,6 +4624,9 @@ class ZTablePinningStylesPipe {
         if (!isPinned) {
             return this._buildPinningResult(undefined, 0, 0);
         }
+        if (!allCells?.length) {
+            return this._buildPinningResult(isPinned, column.getStart(isPinned), column.getAfter(isPinned));
+        }
         const offsets = this._getOrBuildBodyOffsetMap(allCells, columns, domWidthMap);
         const entry = offsets[column.id];
         return this._buildPinningResult(isPinned, entry?.left ?? 0, entry?.right ?? 0);
@@ -4628,14 +4635,18 @@ class ZTablePinningStylesPipe {
         if (!domWidthMap) {
             return this._buildBodyOffsetMap(allCells, columns, undefined);
         }
+        const signature = this._bodyOffsetSignature(allCells);
         const cached = this._offsetCache.get(domWidthMap);
-        if (cached) {
-            return cached;
+        if (cached?.signature === signature) {
+            return cached.result;
         }
         const result = this._buildBodyOffsetMap(allCells, columns, domWidthMap);
-        this._offsetCache.set(domWidthMap, result);
+        this._offsetCache.set(domWidthMap, { signature, result });
         return result;
     }
+    _bodyOffsetSignature(allCells) {
+        return (allCells ?? []).map(cell => `${cell.column.id}:${cell.column.getIsPinned() || 'center'}`).join('|');
+    }
     _buildBodyOffsetMap(allCells, columns, domWidthMap) {
         if (!allCells?.length) {
             return {};
@@ -4697,7 +4708,6 @@ class ZTablePinningStylesPipe {
             return this._buildPinningResult(undefined, 0, 0);
         }
         const isChildPinned = this._childPinDirection(column, headerCurrent);
-        const headerGroups = headerCurrent.headerGroup.headers;
         if (isChildPinned === 'left') {
             const leftOffset = this._headerLeftOffset(headerCurrent, table, domWidthMap);
             return { position: 'sticky', zIndex: 1, left: `${leftOffset}px`, right: undefined };
@@ -4737,7 +4747,6 @@ class ZTablePinningStylesPipe {
             return this._buildPinningResult(undefined, 0, 0);
         }
         const isChildPinned = this._childPinDirection(column, footerCurrent);
-        const footerHeaders = footerCurrent.headerGroup.headers;
         if (isChildPinned === 'left') {
             const leftOffset = this._footerLeftOffset(footerCurrent, table, domWidthMap);
             return { position: 'sticky', zIndex: 1, left: `${leftOffset}px`, right: undefined };
@@ -4788,33 +4797,6 @@ class ZTablePinningStylesPipe {
         }
         return new Set(leafHeaders.map(leafHeader => leafHeader.column.id));
     }
-    _headerWidth(header, allHeaders, columns, type, pinDirection, domWidthMap) {
-        const getColSpan = type === 'header' ? getHeaderColSpan : getFooterColSpan;
-        const shouldRender = type === 'header' ? shouldHeaderRender : shouldFooterRender;
-        if (header.subHeaders.length > 0) {
-            return header.subHeaders
-                .filter(s => shouldRender(s, header.subHeaders, columns))
-                .reduce((acc, s) => acc + this._headerWidth(s, header.subHeaders, columns, type, pinDirection, domWidthMap), 0);
-        }
-        if (header.column.getIsPinned() !== pinDirection) {
-            return 0;
-        }
-        return this._singleHeaderWidth(header, allHeaders, columns, getColSpan, domWidthMap);
-    }
-    _singleHeaderWidth(header, allHeaders, columns, getColSpanFn, domWidthMap) {
-        const config = findColumnConfig(header.column.id, columns);
-        const colSpan = getColSpanFn(config);
-        if (colSpan && colSpan > 1) {
-            const idx = allHeaders.findIndex(h => h.id === header.id);
-            let w = this._colWidth(header.column.id, header.column, domWidthMap);
-            for (let j = 1; j < colSpan && idx + j < allHeaders.length; j++) {
-                const next = allHeaders[idx + j];
-                w += this._colWidth(next.column.id, next.column, domWidthMap);
-            }
-            return w;
-        }
-        return this._colWidth(header.column.id, header.column, domWidthMap);
-    }
     // ─── Result builder ───────────────────────────────────────────────────────
     _buildPinningResult(isPinned, leftOffset, rightOffset) {
         return {
@@ -6298,6 +6280,7 @@ class ZTableComponent {
     }, ...(ngDevMode ? [{ debugName: "pendingColumnVisibilityDisabledMap" }] : []));
     orderedHeaderGroups = computed(() => {
         void this.columnPinning();
+        void this._columnPinVersion();
         void this.columnOrder();
         const leftGroups = this.table.getLeftHeaderGroups();
         const centerGroups = this.table.getCenterHeaderGroups();
@@ -6317,6 +6300,7 @@ class ZTableComponent {
     }, ...(ngDevMode ? [{ debugName: "orderedHeaderGroups" }] : []));
     orderedFooterGroups = computed(() => {
         void this.columnPinning();
+        void this._columnPinVersion();
         void this.columnOrder();
         const leftGroups = this.table.getLeftFooterGroups();
         const centerGroups = this.table.getCenterFooterGroups();
@@ -6359,16 +6343,19 @@ class ZTableComponent {
     bottomRowsReversed = computed(() => [...this.table.getBottomRows()].reverse(), ...(ngDevMode ? [{ debugName: "bottomRowsReversed" }] : []));
     leftHeaderRow = computed(() => {
         void this.columnPinning();
+        void this._columnPinVersion();
         void this.columnOrder();
         return this.table.getLeftHeaderGroups()[0]?.headers ?? [];
     }, ...(ngDevMode ? [{ debugName: "leftHeaderRow" }] : []));
     centerHeaderRow = computed(() => {
         void this.columnPinning();
+        void this._columnPinVersion();
         void this.columnOrder();
         return this.table.getCenterHeaderGroups()[0]?.headers ?? [];
     }, ...(ngDevMode ? [{ debugName: "centerHeaderRow" }] : []));
     rightHeaderRow = computed(() => {
         void this.columnPinning();
+        void this._columnPinVersion();
         void this.columnOrder();
         return this.table.getRightHeaderGroups()[0]?.headers ?? [];
     }, ...(ngDevMode ? [{ debugName: "rightHeaderRow" }] : []));
@@ -9229,13 +9216,24 @@ class ZTableComponent {
             ? [actionColumnId, ...fixedColumnPinning.left]
             : fixedColumnPinning.left;
         const fixedRightColumnIds = actionColumnId && actionPosition === 'right' ? [actionColumnId] : [];
-        const normalizedPinning = normalizeZTableColumnPinning(pinning, fixedLeftColumnIds, fixedRightColumnIds);
+        const normalizedPinning = this._sortColumnPinningByOrder(normalizeZTableColumnPinning(pinning, fixedLeftColumnIds, fixedRightColumnIds));
         if (this._areColumnIdListsEqual(currentPinning.left, normalizedPinning.left) &&
             this._areColumnIdListsEqual(currentPinning.right, normalizedPinning.right)) {
             return;
         }
         this.columnPinning.set(normalizedPinning);
     }
+    _sortColumnPinningByOrder(pinning) {
+        const order = this.columnOrder().length
+            ? this.columnOrder()
+            : this.table.getAllLeafColumns().map(column => column.id);
+        const orderMap = new Map(order.map((columnId, index) => [columnId, index]));
+        const sortByOrder = (columnIds) => [...columnIds].sort((a, b) => (orderMap.get(a) ?? Number.MAX_SAFE_INTEGER) - (orderMap.get(b) ?? Number.MAX_SAFE_INTEGER));
+        return {
+            left: sortByOrder(pinning.left),
+            right: sortByOrder(pinning.right),
+        };
+    }
     _moveGroupingColumnsToLeadingDataPosition(columnIds) {
         if (columnIds.length === 0) {
             return;