@shival99/z-ui 1.2.28 → 1.2.30

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

@@ -20,6 +20,7 @@ import { ZSafeHtmlPipe } from '@shival99/z-ui/pipes';
 import { ZTranslateService, ZCacheService } from '@shival99/z-ui/services';
 import { createAngularTable, getFacetedMinMaxValues, getFacetedUniqueValues, getFacetedRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, getExpandedRowModel, getCoreRowModel, FlexRenderDirective } from '@tanstack/angular-table';
 import { NgScrollbar } from 'ngx-scrollbar';
+import { effectOnceIf } from 'ngxtension/effect-once-if';
 import { explicitEffect } from 'ngxtension/explicit-effect';
 import { injectDestroy } from 'ngxtension/inject-destroy';
 import { ZDropdownMenuComponent } from '@shival99/z-ui/components/z-dropdown-menu';
@@ -2350,7 +2351,7 @@ class ZTableComponent {
     _dataForceUpdate = signal(0, ...(ngDevMode ? [{ debugName: "_dataForceUpdate" }] : []));
     _columnConfigCache = new Map();
     _lastColumnsRef = null;
-    _initialStateApplied = false;
+    _configCacheLoaded = false;
     pinnedColumnIds = computed(() => {
         this._columnPinVersion();
         return this.columnOrder().filter(id => {
@@ -3053,93 +3054,85 @@ class ZTableComponent {
         }
     }, ...(ngDevMode ? [{ debugName: "_measureVirtualItems" }] : []));
     constructor() {
-        effect(() => {
-            const lang = this._zTranslate.currentLang();
-            untracked(() => {
-                void lang;
-                this._dataForceUpdate.update(v => v + 1);
-            });
+        explicitEffect([this._zTranslate.currentLang], () => {
+            this._dataForceUpdate.update(v => v + 1);
+        });
+        effectOnceIf(computed(() => {
+            const key = this.zKey();
+            const config = this.zConfig();
+            return !!key && !!config.columns && config.columns.length > 0 && !this._configCacheLoaded;
+        }), () => {
+            this._loadConfigCache();
+            this._configCacheLoaded = true;
         });
-        effect(() => {
-            const cfg = this.zConfig();
+        explicitEffect([this.zConfig], ([cfg]) => {
             const initial = cfg.initialState;
-            const cols = cfg.columns ?? [];
-            untracked(() => {
-                // Only apply initial state once on first run
-                // This prevents overwriting cached settings when zConfig changes (e.g., data loads)
-                if (this._initialStateApplied) {
-                    return;
+            if (initial) {
+                if (initial.columnPinning) {
+                    this.columnPinning.set(initial.columnPinning);
                 }
-                this._initialStateApplied = true;
-                if (initial) {
-                    if (initial.columnPinning) {
-                        this.columnPinning.set(initial.columnPinning);
-                    }
-                    if (initial.columnVisibility) {
-                        this.columnVisibility.set(initial.columnVisibility);
-                    }
-                    if (initial.sorting) {
-                        this.sorting.set(initial.sorting);
-                    }
-                    if (initial.columnFilters) {
-                        this.columnFilters.set(initial.columnFilters);
-                    }
-                    if (initial.globalFilter) {
-                        this.globalFilter.set(initial.globalFilter);
-                    }
-                    if (initial.expanded) {
-                        this.expanded.set(initial.expanded);
-                    }
-                    if (initial.rowSelection) {
-                        this.rowSelection.set(initial.rowSelection);
-                    }
-                    if (initial.rowPinning) {
-                        this.rowPinning.set(initial.rowPinning);
+                if (initial.columnVisibility) {
+                    this.columnVisibility.set(initial.columnVisibility);
+                }
+                if (initial.sorting) {
+                    this.sorting.set(initial.sorting);
+                }
+                if (initial.columnFilters) {
+                    this.columnFilters.set(initial.columnFilters);
+                }
+                if (initial.globalFilter) {
+                    this.globalFilter.set(initial.globalFilter);
+                }
+                if (initial.expanded) {
+                    this.expanded.set(initial.expanded);
+                }
+                if (initial.rowSelection) {
+                    this.rowSelection.set(initial.rowSelection);
+                }
+                if (initial.rowPinning) {
+                    this.rowPinning.set(initial.rowPinning);
+                }
+                if (initial.pagination) {
+                    this.pagination.set(initial.pagination);
+                }
+            }
+            this.showHeaderFooterShadow.set(cfg.showHeaderShadow ?? cfg.showFooterShadow ?? true);
+            const cols = cfg.columns ?? [];
+            const leftPinned = [...(initial?.columnPinning?.left ?? [])];
+            const rightPinned = [...(initial?.columnPinning?.right ?? [])];
+            const collectPinnedColumns = (columns) => {
+                for (const col of columns) {
+                    if (col.pinned === 'left' && !leftPinned.includes(col.id)) {
+                        leftPinned.push(col.id);
                     }
-                    if (initial.pagination) {
-                        this.pagination.set(initial.pagination);
+                    if (col.pinned === 'right' && !rightPinned.includes(col.id)) {
+                        rightPinned.push(col.id);
                     }
-                }
-                this.showHeaderFooterShadow.set(cfg.showHeaderShadow ?? cfg.showFooterShadow ?? true);
-                const leftPinned = [...(initial?.columnPinning?.left ?? [])];
-                const rightPinned = [...(initial?.columnPinning?.right ?? [])];
-                const collectPinnedColumns = (columns) => {
-                    for (const col of columns) {
-                        if (col.pinned === 'left' && !leftPinned.includes(col.id)) {
-                            leftPinned.push(col.id);
-                        }
-                        if (col.pinned === 'right' && !rightPinned.includes(col.id)) {
-                            rightPinned.push(col.id);
-                        }
-                        if (col.columns) {
-                            collectPinnedColumns(col.columns);
-                        }
+                    if (col.columns) {
+                        collectPinnedColumns(col.columns);
                     }
-                };
-                collectPinnedColumns(cols);
-                if (leftPinned.length > 0 || rightPinned.length > 0) {
-                    this.columnPinning.set({ left: leftPinned, right: rightPinned });
                 }
-            });
+            };
+            collectPinnedColumns(cols);
+            if (leftPinned.length > 0 || rightPinned.length > 0) {
+                this.columnPinning.set({ left: leftPinned, right: rightPinned });
+            }
         });
-        effect(() => {
-            const cfg = this.zConfig();
+        explicitEffect([this.zConfig], ([cfg]) => {
             if (cfg.enableRowPinning && !this.hasBodyRowSpan()) {
                 const cols = cfg.columns ?? [];
                 const hasSelect = cols.some(c => c.id === 'select');
                 const hasExpand = cols.some(c => c.id === 'expand');
-                untracked(() => {
-                    const currentPinning = this.columnPinning();
-                    const leftPinned = [...(currentPinning.left || [])];
-                    if (hasSelect && !leftPinned.includes('select')) {
-                        leftPinned.unshift('select');
-                        this.columnPinning.set({ ...currentPinning, left: leftPinned });
-                    }
-                    if (!hasSelect && !hasExpand && !leftPinned.includes('actions')) {
-                        leftPinned.unshift('actions');
-                        this.columnPinning.set({ ...currentPinning, left: leftPinned });
-                    }
-                });
+                const currentPinning = this.columnPinning();
+                const leftPinned = [...(currentPinning.left || [])];
+                if (hasSelect && !leftPinned.includes('select')) {
+                    leftPinned.unshift('select');
+                    this.columnPinning.set({ ...currentPinning, left: leftPinned });
+                }
+                if (!hasSelect && !hasExpand && !leftPinned.includes('actions')) {
+                    leftPinned.unshift('actions');
+                    this.columnPinning.set({ ...currentPinning, left: leftPinned });
+                }
             }
         });
         afterNextRender(() => {
@@ -3189,6 +3182,7 @@ class ZTableComponent {
                     wrapperEl.scrollTop = 0;
                     wrapperEl.scrollLeft = this._savedScrollLeft();
                 }
+                this._checkScrollState();
             });
         });
         explicitEffect([
@@ -3204,11 +3198,7 @@ class ZTableComponent {
         }, { defer: true });
     }
     ngAfterViewInit() {
-        this._loadConfig();
-        setTimeout(() => {
-            this._checkVerticalScroll();
-            this._checkHorizontalScroll();
-        }, 100);
+        queueMicrotask(() => this._checkScrollState());
         this.zControl.emit({
             updateConfig: (config) => {
                 const current = this.zConfig();
@@ -3306,6 +3296,10 @@ class ZTableComponent {
             });
         }, 300);
     }
+    _checkScrollState() {
+        this._checkVerticalScroll();
+        this._checkHorizontalScroll();
+    }
     _checkVerticalScroll() {
         const tbodyWrapperEl = this.tbodyWrapper()?.nativeElement;
         if (tbodyWrapperEl) {
@@ -3654,7 +3648,7 @@ class ZTableComponent {
         collect(columns);
         return result;
     }
-    _loadConfig() {
+    _loadConfigCache() {
         const key = this.zKey();
         if (!key) {
             return;
@@ -3672,9 +3666,6 @@ class ZTableComponent {
             if (config.columnOrder && config.columnOrder.length > 0) {
                 this.columnOrder.set(config.columnOrder);
             }
-            if (config.columnSizing) {
-                this.table.setColumnSizing(config.columnSizing);
-            }
             if (config.columnPinning) {
                 this.columnPinning.set(config.columnPinning);
             }
@@ -3690,6 +3681,9 @@ class ZTableComponent {
             if (typeof config.showVerticalBorder === 'boolean') {
                 this.showVerticalBorder.set(config.showVerticalBorder);
             }
+            if (config.columnSizing) {
+                this.table.setColumnSizing(config.columnSizing);
+            }
         }
         catch (error) {
             console.error('Failed to load table config:', error);