@shival99/z-ui 1.2.15 → 1.2.16

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

@@ -384,6 +384,7 @@ class ZTableFilterComponent {
           zAllowClear
           [zWrap]="false"
           [zOptions]="selectOptions()"
+          [zMaxTagCount]="1"
           [ngModel]="multiSelectValue()"
           [zPlaceholder]="'i18n_z_ui_common_select' | translate"
           (ngModelChange)="onMultiSelectChange($event)"
@@ -394,13 +395,14 @@ class ZTableFilterComponent {
         <z-select
           zMode="tags"
           zSize="sm"
-          zAllowClear
-          [zWrap]="false"
           [zOptions]="selectOptions()"
-          [ngModel]="multiSelectValue()"
+          [zWrap]="false"
+          [zMaxTagCount]="1"
           [zPlaceholder]="'i18n_z_ui_common_select' | translate"
-          (ngModelChange)="onMultiSelectChange($event)"
           class="w-full min-w-0"
+          [zAllowClear]="true"
+          (ngModelChange)="onMultiSelectChange($event)"
+          [ngModel]="multiSelectValue()"
         />
       }
       @case ('number') {
@@ -495,6 +497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
           zAllowClear
           [zWrap]="false"
           [zOptions]="selectOptions()"
+          [zMaxTagCount]="1"
           [ngModel]="multiSelectValue()"
           [zPlaceholder]="'i18n_z_ui_common_select' | translate"
           (ngModelChange)="onMultiSelectChange($event)"
@@ -505,13 +508,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         <z-select
           zMode="tags"
           zSize="sm"
-          zAllowClear
-          [zWrap]="false"
           [zOptions]="selectOptions()"
-          [ngModel]="multiSelectValue()"
+          [zWrap]="false"
+          [zMaxTagCount]="1"
           [zPlaceholder]="'i18n_z_ui_common_select' | translate"
-          (ngModelChange)="onMultiSelectChange($event)"
           class="w-full min-w-0"
+          [zAllowClear]="true"
+          (ngModelChange)="onMultiSelectChange($event)"
+          [ngModel]="multiSelectValue()"
         />
       }
       @case ('number') {
@@ -545,28 +549,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 const Z_DEFAULT_ROW_HEIGHT = 40;
 const Z_DEFAULT_VIRTUAL_OVERSCAN = 5;
 const Z_DEFAULT_GROUP_SIZE = 1;
-const Z_DEFAULT_COLUMN_MIN_SIZE = 80;
+const Z_DEFAULT_COLUMN_MIN_SIZE = 100;
 const Z_DEFAULT_DEBOUNCE_TIME = 150;
 const Z_SKELETON_ROW_HEIGHT = 60;
 
-const isHeaderConfig = (config) => {
-    if (!config || typeof config !== 'object') {
-        return false;
+const filterVisibleColumns = (columns) => columns
+    .filter(col => {
+    const { visible } = col;
+    if (visible === undefined) {
+        return true;
     }
-    return config.constructor === Object;
-};
-const isBodyConfig = (config) => {
-    if (!config || typeof config !== 'object') {
-        return false;
+    return typeof visible === 'function' ? visible() : visible;
+})
+    .map(col => {
+    if (col.columns && col.columns.length > 0) {
+        return {
+            ...col,
+            columns: filterVisibleColumns(col.columns),
+        };
     }
-    return config.constructor === Object;
-};
-const isFooterConfig = (config) => {
+    return col;
+});
+const isObjectConfig = (config) => {
     if (!config || typeof config !== 'object') {
         return false;
     }
     return config.constructor === Object;
 };
+const isHeaderConfig = (config) => isObjectConfig(config);
+const isBodyConfig = (config) => isObjectConfig(config);
+const isFooterConfig = (config) => isObjectConfig(config);
 const getHeaderOrFooterConfigInternal = (col, type) => {
     const empty = {
         content: undefined,
@@ -840,57 +852,39 @@ const shouldCellRenderUtil = (cell, columnConfig, allRows) => {
     }
     return true;
 };
-const shouldBodyCellRenderColSpan = (cell, allCells, columns) => {
-    const currentIndex = allCells.findIndex(c => c.id === cell.id);
-    if (currentIndex <= 0) {
-        return true;
-    }
-    for (let i = 0; i < currentIndex; i++) {
-        const prevCell = allCells[i];
-        const prevConfig = findColumnConfig(prevCell.column.id, columns);
-        const prevColSpan = getBodyColSpan(prevConfig, prevCell.getContext());
-        if (prevColSpan && prevColSpan > 1) {
-            if (i + prevColSpan > currentIndex) {
-                return false;
-            }
-        }
-    }
-    return true;
-};
-const shouldFooterRender = (header, allHeaders, columns) => {
+const shouldHeaderOrFooterRender = (header, allHeaders, columns, type) => {
     const currentIndex = allHeaders.findIndex(h => h.id === header.id);
     if (currentIndex <= 0) {
         return true;
     }
+    const getColSpanFn = type === 'header' ? getHeaderColSpan : getFooterColSpan;
     for (let i = 0; i < currentIndex; i++) {
         const prevHeader = allHeaders[i];
         const prevConfig = findColumnConfig(prevHeader.column.id, columns);
-        const prevColSpan = getFooterColSpan(prevConfig);
-        if (prevColSpan && prevColSpan > 1) {
-            if (i + prevColSpan > currentIndex) {
-                return false;
-            }
+        const prevColSpan = getColSpanFn(prevConfig);
+        if (prevColSpan && prevColSpan > 1 && i + prevColSpan > currentIndex) {
+            return false;
         }
     }
     return true;
 };
-const shouldHeaderRender = (header, allHeaders, columns) => {
-    const currentIndex = allHeaders.findIndex(h => h.id === header.id);
+const shouldBodyCellRenderColSpan = (cell, allCells, columns) => {
+    const currentIndex = allCells.findIndex(c => c.id === cell.id);
     if (currentIndex <= 0) {
         return true;
     }
     for (let i = 0; i < currentIndex; i++) {
-        const prevHeader = allHeaders[i];
-        const prevConfig = findColumnConfig(prevHeader.column.id, columns);
-        const prevColSpan = getHeaderColSpan(prevConfig);
-        if (prevColSpan && prevColSpan > 1) {
-            if (i + prevColSpan > currentIndex) {
-                return false;
-            }
+        const prevCell = allCells[i];
+        const prevConfig = findColumnConfig(prevCell.column.id, columns);
+        const prevColSpan = getBodyColSpan(prevConfig, prevCell.getContext());
+        if (prevColSpan && prevColSpan > 1 && i + prevColSpan > currentIndex) {
+            return false;
         }
     }
     return true;
 };
+const shouldFooterRender = (header, allHeaders, columns) => shouldHeaderOrFooterRender(header, allHeaders, columns, 'footer');
+const shouldHeaderRender = (header, allHeaders, columns) => shouldHeaderOrFooterRender(header, allHeaders, columns, 'header');
 function columnConfigToColumnDef(config) {
     const sortConfig = typeof config.sort === 'boolean' ? (config.sort ? { enabled: true } : undefined) : config.sort;
     const filterConfig = typeof config.filter === 'boolean' ? (config.filter ? { enabled: true } : undefined) : config.filter;
@@ -1128,30 +1122,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], propDecorators: { zTableRowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTableRowHover", required: false }] }] } });
 
-class ZTableResizerDirective {
-    zTableResizer = input.required(...(ngDevMode ? [{ debugName: "zTableResizer" }] : []));
+class ZTableResizeDirective {
+    zTableResize = input.required(...(ngDevMode ? [{ debugName: "zTableResize" }] : []));
     _elementRef = inject((ElementRef));
     _ngZone = inject(NgZone);
     _mousedownHandler = null;
     _touchstartHandler = null;
     ngAfterViewInit() {
         const element = this._elementRef.nativeElement;
-        const header = this.zTableResizer();
+        const header = this.zTableResize();
         this._mousedownHandler = (event) => {
-            const resizeHandler = header.getResizeHandler();
-            resizeHandler(event);
+            this._ngZone.run(() => {
+                const resizeHandler = header.getResizeHandler();
+                resizeHandler(event);
+            });
         };
         this._touchstartHandler = (event) => {
-            const resizeHandler = header.getResizeHandler();
-            resizeHandler(event);
+            this._ngZone.run(() => {
+                const resizeHandler = header.getResizeHandler();
+                resizeHandler(event);
+            });
         };
-        // Run outside Angular zone for better performance
-        // Use passive: true for touchstart to improve scroll performance
-        // The TanStack resize handler manages touch events internally
-        this._ngZone.runOutsideAngular(() => {
-            element.addEventListener('mousedown', this._mousedownHandler);
-            element.addEventListener('touchstart', this._touchstartHandler, { passive: true });
-        });
+        element.addEventListener('mousedown', this._mousedownHandler);
+        element.addEventListener('touchstart', this._touchstartHandler, { passive: true });
     }
     ngOnDestroy() {
         const element = this._elementRef.nativeElement;
@@ -1164,16 +1157,16 @@ class ZTableResizerDirective {
             this._touchstartHandler = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableResizerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: ZTableResizerDirective, isStandalone: true, selector: "[z-table-resizer],[zTableResizer]", inputs: { zTableResizer: { classPropertyName: "zTableResizer", publicName: "zTableResizer", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableResizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: ZTableResizeDirective, isStandalone: true, selector: "[z-table-resize],[zTableResize]", inputs: { zTableResize: { classPropertyName: "zTableResize", publicName: "zTableResize", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableResizerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableResizeDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[z-table-resizer],[zTableResizer]',
+                    selector: '[z-table-resize],[zTableResize]',
                     standalone: true,
                 }]
-        }], propDecorators: { zTableResizer: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTableResizer", required: true }] }] } });
+        }], propDecorators: { zTableResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTableResize", required: true }] }] } });
 
 class ZTableCellBottomPipe {
     transform(cell, columns, allRows) {
@@ -1310,6 +1303,132 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }] });
 
+class ZTableCellPinPipe {
+    transform(item, property, columns, cellType = 'header') {
+        switch (property) {
+            case 'isLastLeftPinned':
+                return this._isLastLeftPinned(item, columns ?? [], cellType);
+            case 'isFirstRightPinned':
+                return this._isFirstRightPinned(item, columns ?? [], cellType);
+            case 'isLastRightPinned':
+                return this._isLastRightPinned(item, columns ?? [], cellType);
+            default:
+                return false;
+        }
+    }
+    _isLastLeftPinned(header, columns, cellType) {
+        const leafHeaders = header.getLeafHeaders();
+        const hasLastLeftPinnedLeaf = leafHeaders.some(lh => lh.column.getIsPinned() === 'left' && lh.column.getIsLastColumn('left'));
+        if (hasLastLeftPinnedLeaf) {
+            return true;
+        }
+        const columnConfig = findColumnConfig(header.column.id, columns);
+        const configColSpan = cellType === 'footer' ? getFooterColSpan(columnConfig) : getHeaderColSpan(columnConfig);
+        if (!configColSpan || configColSpan <= 1) {
+            return false;
+        }
+        const { headers: allHeadersInGroup } = header.headerGroup;
+        const currentIndex = allHeadersInGroup.findIndex(h => h.id === header.id);
+        if (currentIndex === -1) {
+            return false;
+        }
+        for (let i = 0; i < configColSpan && currentIndex + i < allHeadersInGroup.length; i++) {
+            const targetHeader = allHeadersInGroup[currentIndex + i];
+            const targetLeafHeaders = targetHeader.getLeafHeaders();
+            const hasLastLeft = targetLeafHeaders.some(lh => lh.column.getIsPinned() === 'left' && lh.column.getIsLastColumn('left'));
+            if (hasLastLeft) {
+                return true;
+            }
+        }
+        return false;
+    }
+    _isFirstRightPinned(header, columns, cellType) {
+        const leafHeaders = header.getLeafHeaders();
+        const hasFirstRightPinnedLeaf = leafHeaders.some(lh => lh.column.getIsPinned() === 'right' && lh.column.getIsFirstColumn('right'));
+        if (hasFirstRightPinnedLeaf) {
+            return true;
+        }
+        const columnConfig = findColumnConfig(header.column.id, columns);
+        const configColSpan = cellType === 'footer' ? getFooterColSpan(columnConfig) : getHeaderColSpan(columnConfig);
+        if (!configColSpan || configColSpan <= 1) {
+            return false;
+        }
+        const { headers: allHeadersInGroup } = header.headerGroup;
+        const currentIndex = allHeadersInGroup.findIndex(h => h.id === header.id);
+        if (currentIndex === -1) {
+            return false;
+        }
+        for (let i = 0; i < configColSpan && currentIndex + i < allHeadersInGroup.length; i++) {
+            const targetHeader = allHeadersInGroup[currentIndex + i];
+            const targetLeafHeaders = targetHeader.getLeafHeaders();
+            const hasFirst = targetLeafHeaders.some(lh => lh.column.getIsPinned() === 'right' && lh.column.getIsFirstColumn('right'));
+            if (hasFirst) {
+                return true;
+            }
+        }
+        return false;
+    }
+    _isLastRightPinned(header, columns, cellType) {
+        const leafHeaders = header.getLeafHeaders();
+        const hasLastRightPinnedLeaf = leafHeaders.some(lh => lh.column.getIsPinned() === 'right' && lh.column.getIsLastColumn('right'));
+        if (hasLastRightPinnedLeaf) {
+            return true;
+        }
+        const columnConfig = findColumnConfig(header.column.id, columns);
+        const configColSpan = cellType === 'footer' ? getFooterColSpan(columnConfig) : getHeaderColSpan(columnConfig);
+        if (!configColSpan || configColSpan <= 1) {
+            return false;
+        }
+        const { headers: allHeadersInGroup } = header.headerGroup;
+        const currentIndex = allHeadersInGroup.findIndex(h => h.id === header.id);
+        if (currentIndex === -1) {
+            return false;
+        }
+        const endIndex = currentIndex + configColSpan - 1;
+        if (endIndex >= allHeadersInGroup.length) {
+            return false;
+        }
+        const targetHeader = allHeadersInGroup[endIndex];
+        const targetLeafHeaders = targetHeader.getLeafHeaders();
+        return targetLeafHeaders.some(lh => lh.column.getIsPinned() === 'right' && lh.column.getIsLastColumn('right'));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableCellPinPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZTableCellPinPipe, isStandalone: true, name: "zTableCellPin" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableCellPinPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zTableCellPin',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
+class ZTableCellRenderPipe {
+    transform(cellOrHeader, allCellsOrHeaders, columns, type) {
+        switch (type) {
+            case 'header':
+                return shouldHeaderRender(cellOrHeader, allCellsOrHeaders, columns);
+            case 'footer':
+                return shouldFooterRender(cellOrHeader, allCellsOrHeaders, columns);
+            case 'body':
+                return shouldBodyCellRenderColSpan(cellOrHeader, allCellsOrHeaders, columns);
+            default:
+                return true;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableCellRenderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZTableCellRenderPipe, isStandalone: true, name: "zTableCellRender" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableCellRenderPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zTableCellRender',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
 const Z_TABLE_ALIGN_MAP = {
     left: 'text-left',
     center: 'text-center',
@@ -1386,10 +1505,8 @@ class ZTableColumnConfigPipe {
             case 'hasBodyRowSpan':
                 return columnConfig ? isBodyConfig(columnConfig.body) && columnConfig.body.rowSpan !== undefined : false;
             case 'enableOrdering':
-                // Default to true if not explicitly set to false
                 return columnConfig?.enableOrdering !== false;
             case 'enablePinning':
-                // Default to true if not explicitly set to false
                 return columnConfig?.enablePinning !== false;
             case 'footerContent': {
                 const footerConfig = getFooterConfig(columnConfig);
@@ -1514,296 +1631,354 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }] });
 
-class ZTableHeaderPinPipe {
-    transform(item, property, columns, _orderedLeafColumns) {
-        switch (property) {
-            case 'isLastLeftPinned':
-                return this._isHeaderLastLeftPinned(item, columns ?? []);
-            case 'isFirstRightPinned':
-                return this._isHeaderFirstRightPinned(item);
-            case 'isLastRightPinned':
-                return this._isHeaderLastRightPinned(item, columns ?? []);
-            default:
-                return false;
-        }
-    }
-    _isHeaderLastLeftPinned(header, columns) {
-        const leafHeaders = header.getLeafHeaders();
-        const hasLastLeftPinnedLeaf = leafHeaders.some(lh => lh.column.getIsPinned() === 'left' && lh.column.getIsLastColumn('left'));
-        if (hasLastLeftPinnedLeaf) {
-            return true;
-        }
-        const columnConfig = findColumnConfig(header.column.id, columns);
-        const configColSpan = getHeaderColSpan(columnConfig);
-        if (configColSpan && configColSpan > 1) {
-            const { headers: allHeadersInGroup } = header.headerGroup;
-            const currentIndex = allHeadersInGroup.findIndex(h => h.id === header.id);
-            if (currentIndex !== -1) {
-                const endIndex = currentIndex + configColSpan - 1;
-                if (endIndex < allHeadersInGroup.length) {
-                    const targetHeader = allHeadersInGroup[endIndex];
-                    const targetLeafHeaders = targetHeader.getLeafHeaders();
-                    return targetLeafHeaders.some(lh => lh.column.getIsPinned() === 'left' && lh.column.getIsLastColumn('left'));
-                }
-            }
-        }
-        return false;
-    }
-    _isHeaderFirstRightPinned(header) {
-        const leafHeaders = header.getLeafHeaders();
-        return leafHeaders.some(lh => lh.column.getIsPinned() === 'right' && lh.column.getIsFirstColumn('right'));
-    }
-    _isHeaderLastRightPinned(header, columns) {
-        const leafHeaders = header.getLeafHeaders();
-        const hasLastRightPinnedLeaf = leafHeaders.some(lh => lh.column.getIsPinned() === 'right' && lh.column.getIsLastColumn('right'));
-        if (hasLastRightPinnedLeaf) {
-            return true;
-        }
-        const columnConfig = findColumnConfig(header.column.id, columns);
-        const configColSpan = getHeaderColSpan(columnConfig);
-        if (configColSpan && configColSpan > 1) {
-            const { headers: allHeadersInGroup } = header.headerGroup;
-            const currentIndex = allHeadersInGroup.findIndex(h => h.id === header.id);
-            if (currentIndex !== -1) {
-                const endIndex = currentIndex + configColSpan - 1;
-                if (endIndex < allHeadersInGroup.length) {
-                    const targetHeader = allHeadersInGroup[endIndex];
-                    const targetLeafHeaders = targetHeader.getLeafHeaders();
-                    return targetLeafHeaders.some(lh => lh.column.getIsPinned() === 'right' && lh.column.getIsLastColumn('right'));
-                }
-            }
-        }
-        return false;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableHeaderPinPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZTableHeaderPinPipe, isStandalone: true, name: "zTableHeaderPin" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableHeaderPinPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'zTableHeaderPin',
-                    standalone: true,
-                    pure: true,
-                }]
-        }] });
-
 class ZTablePinningStylesPipe {
-    transform(column, item, type, tableOrCells, columns) {
+    /**
+     * Main transform method - routes to appropriate calculation based on type
+     *
+     * @param column - The column being styled
+     * @param item - The cell or header item
+     * @param type - 'header' | 'body' | 'footer'
+     * @param tableOrCells - Table instance or array of cells
+     * @param columns - Column configuration array
+     * @param _sizingTrigger - Optional sizing trigger to force recalculation on resize
+     * @returns CSS style object for sticky positioning
+     */
+    transform(column, item, type, tableOrCells, columns, _sizingTrigger) {
         if (type === 'body') {
             const allCells = Array.isArray(tableOrCells) ? tableOrCells : undefined;
             return this._getBodyPinningStyles(column, item, allCells, columns || []);
         }
+        if (type === 'footer' && item && tableOrCells && !Array.isArray(tableOrCells)) {
+            return this._getFooterPinningStyles(column, item, tableOrCells, columns || []);
+        }
         if (type === 'header' && item && tableOrCells && !Array.isArray(tableOrCells)) {
             return this._getHeaderPinningStyles(column, item, tableOrCells, columns || []);
         }
         return {};
     }
+    // ============================================
+    // BODY PINNING STYLES
+    // ============================================
+    /**
+     * Calculates pinning styles for body cells.
+     * Handles colspan adjustments for accurate offset calculations.
+     */
     _getBodyPinningStyles(column, cell, allCells, columns) {
         const isPinned = column.getIsPinned();
         let leftOffset = column.getStart('left');
         let rightOffset = column.getAfter('right');
         if (allCells && cell && isPinned === 'left') {
-            const currentIdx = allCells.findIndex(c => c.id === cell.id);
-            if (currentIdx > 0) {
-                let calculatedOffset = 0;
-                for (let i = 0; i < currentIdx; i++) {
-                    const prevCell = allCells[i];
-                    if (!shouldBodyCellRenderColSpan(prevCell, allCells, columns)) {
-                        continue;
-                    }
-                    const prevConfig = findColumnConfig(prevCell.column.id, columns);
-                    const prevColSpan = getBodyColSpan(prevConfig, prevCell.getContext());
-                    if (prevColSpan && prevColSpan > 1) {
-                        let spanWidth = prevCell.column.getSize();
-                        for (let j = 1; j < prevColSpan && i + j < allCells.length; j++) {
-                            spanWidth += allCells[i + j].column.getSize();
-                        }
-                        calculatedOffset += spanWidth;
-                        continue;
-                    }
-                    calculatedOffset += prevCell.column.getSize();
-                }
-                leftOffset = calculatedOffset;
-            }
+            leftOffset = this._calculateBodyLeftOffset(cell, allCells, columns);
         }
         if (allCells && cell && isPinned === 'right') {
-            const currentIdx = allCells.findIndex(c => c.id === cell.id);
-            if (currentIdx === allCells.length - 1) {
-                rightOffset = 0;
-            }
-            if (currentIdx >= 0 && currentIdx < allCells.length - 1) {
-                let calculatedOffset = 0;
-                for (let i = currentIdx + 1; i < allCells.length; i++) {
-                    const nextCell = allCells[i];
-                    if (!shouldBodyCellRenderColSpan(nextCell, allCells, columns)) {
-                        continue;
-                    }
-                    const nextConfig = findColumnConfig(nextCell.column.id, columns);
-                    const nextColSpan = getBodyColSpan(nextConfig, nextCell.getContext());
-                    if (nextColSpan && nextColSpan > 1) {
-                        let spanWidth = nextCell.column.getSize();
-                        for (let j = 1; j < nextColSpan && i + j < allCells.length; j++) {
-                            spanWidth += allCells[i + j].column.getSize();
-                        }
-                        calculatedOffset += spanWidth;
-                        continue;
-                    }
-                    calculatedOffset += nextCell.column.getSize();
-                }
-                rightOffset = calculatedOffset;
+            rightOffset = this._calculateBodyRightOffset(cell, allCells, columns);
+        }
+        return this._buildPinningResult(isPinned, leftOffset, rightOffset);
+    }
+    /**
+     * Calculates left offset for a body cell considering colspan.
+     * Sums widths of all cells before the current cell.
+     */
+    _calculateBodyLeftOffset(cell, allCells, columns) {
+        const currentIdx = allCells.findIndex(c => c.id === cell.id);
+        if (currentIdx <= 0) {
+            return 0;
+        }
+        let calculatedOffset = 0;
+        for (let i = 0; i < currentIdx; i++) {
+            const prevCell = allCells[i];
+            // Skip cells that are covered by colspan from previous cells
+            if (!shouldBodyCellRenderColSpan(prevCell, allCells, columns)) {
+                continue;
+            }
+            calculatedOffset += this._getCellWidthWithColspan(prevCell, allCells, i, columns);
+        }
+        return calculatedOffset;
+    }
+    /**
+     * Calculates right offset for a body cell considering colspan.
+     * Sums widths of all cells after the current cell.
+     */
+    _calculateBodyRightOffset(cell, allCells, columns) {
+        const currentIdx = allCells.findIndex(c => c.id === cell.id);
+        // Last cell has 0 right offset
+        if (currentIdx === allCells.length - 1) {
+            return 0;
+        }
+        if (currentIdx < 0) {
+            return 0;
+        }
+        let calculatedOffset = 0;
+        for (let i = currentIdx + 1; i < allCells.length; i++) {
+            const nextCell = allCells[i];
+            // Skip cells that are covered by colspan
+            if (!shouldBodyCellRenderColSpan(nextCell, allCells, columns)) {
+                continue;
             }
+            calculatedOffset += this._getCellWidthWithColspan(nextCell, allCells, i, columns);
+        }
+        return calculatedOffset;
+    }
+    /**
+     * Gets cell width including any colspan expansion.
+     * If cell has colspan > 1, adds widths of covered cells.
+     */
+    _getCellWidthWithColspan(cell, allCells, cellIndex, columns) {
+        const config = findColumnConfig(cell.column.id, columns);
+        const colSpan = getBodyColSpan(config, cell.getContext());
+        if (colSpan && colSpan > 1) {
+            let spanWidth = cell.column.getSize();
+            for (let j = 1; j < colSpan && cellIndex + j < allCells.length; j++) {
+                spanWidth += allCells[cellIndex + j].column.getSize();
+            }
+            return spanWidth;
+        }
+        return cell.column.getSize();
+    }
+    // ============================================
+    // HEADER PINNING STYLES
+    // ============================================
+    /**
+     * Calculates pinning styles for header cells.
+     * Handles nested headers and colspan for grouped columns.
+     */
+    _getHeaderPinningStyles(column, headerCurrent, table, columns) {
+        const isPinnedColumn = column.getIsPinned();
+        if (!isPinnedColumn) {
+            return this._buildPinningResult(undefined, 0, 0);
+        }
+        const isChildPinned = this._determineChildPinDirection(column, headerCurrent);
+        const headerGroups = headerCurrent.headerGroup.headers;
+        let leftOffset;
+        let rightOffset;
+        if (isChildPinned === 'left') {
+            leftOffset = this._calculateHeaderLeftOffset(headerCurrent, headerGroups, columns);
+        }
+        if (isChildPinned === 'right') {
+            rightOffset = this._calculateHeaderRightOffset(headerCurrent, headerGroups, columns);
         }
         return {
-            left: isPinned === 'left' ? `${leftOffset}px` : undefined,
-            right: isPinned === 'right' ? `${rightOffset}px` : undefined,
-            position: isPinned ? 'sticky' : 'relative',
-            zIndex: isPinned ? 1 : 0,
+            position: isChildPinned ? 'sticky' : 'relative',
+            zIndex: isChildPinned ? 1 : 0,
+            left: leftOffset !== undefined ? `${leftOffset}px` : undefined,
+            right: rightOffset !== undefined ? `${rightOffset}px` : undefined,
         };
     }
-    _getHeaderPinningStyles(column, headerCurrent, table, columns) {
+    /**
+     * Determines if any child header is pinned and returns the direction.
+     * Checks leaf headers to find pinning status.
+     */
+    _determineChildPinDirection(column, header) {
         const isPinnedColumn = column.getIsPinned();
-        const leftPositions = {};
-        const headerGroupsAll = table.getHeaderGroups();
-        for (const headerGroup of headerGroupsAll) {
-            for (const header of headerGroup.headers) {
-                leftPositions[header.id] = header.getStart('left');
-            }
-        }
-        const newOffsetLeft = {};
-        const newOffsetRight = {};
-        let isChildPinned = undefined;
-        if (isPinnedColumn) {
-            const headerGroups = headerCurrent.headerGroup.headers;
-            const leafHeaders = headerCurrent.getLeafHeaders();
-            const filterChild = leafHeaders.filter(h => h.column.id !== column.id);
-            if (filterChild.length === 0) {
-                isChildPinned = isPinnedColumn;
-            }
-            for (const child of filterChild) {
-                const isPinned = child.column.getIsPinned();
-                if (isPinned) {
-                    isChildPinned = isPinned;
-                    break;
-                }
+        const leafHeaders = header.getLeafHeaders();
+        const filterChild = leafHeaders.filter(h => h.column.id !== column.id);
+        // No children - use column's own pin status
+        if (filterChild.length === 0) {
+            return isPinnedColumn || undefined;
+        }
+        // Check if any child is pinned
+        for (const child of filterChild) {
+            const isPinned = child.column.getIsPinned();
+            if (isPinned) {
+                return isPinned;
             }
-            if (isChildPinned === 'left') {
-                const temp = [...headerGroups];
-                const headersBeforeCurrent = [];
-                for (let i = 0; i < temp.length; i++) {
-                    const indexOfHeader = temp.findIndex(h => h.id === headerCurrent.id);
-                    if (i < indexOfHeader) {
-                        const leafs = temp[i].getLeafHeaders();
-                        const hasLeftPinned = leafs.some(lh => lh.column.getIsPinned() === 'left');
-                        if (hasLeftPinned) {
-                            headersBeforeCurrent.push(temp[i]);
-                        }
-                    }
-                }
-                newOffsetLeft[headerCurrent.id] = headersBeforeCurrent.reduce((sum, h) => {
-                    if (!shouldHeaderRender(h, headerGroups, columns)) {
-                        return sum;
-                    }
-                    if (h.subHeaders.length > 0) {
-                        const subSum = h.subHeaders
-                            .filter(subH => subH.column.getIsPinned() === 'left')
-                            .filter(subH => shouldHeaderRender(subH, h.subHeaders, columns))
-                            .reduce((subAcc, subH) => {
-                            const config = findColumnConfig(subH.column.id, columns);
-                            const colSpan = getHeaderColSpan(config);
-                            if (colSpan && colSpan > 1) {
-                                const currentIdx = h.subHeaders.findIndex(sh => sh.id === subH.id);
-                                let totalWidth = subH.column.getSize();
-                                for (let j = 1; j < colSpan && currentIdx + j < h.subHeaders.length; j++) {
-                                    totalWidth += h.subHeaders[currentIdx + j].column.getSize();
-                                }
-                                return subAcc + totalWidth;
-                            }
-                            return subAcc + subH.column.getSize();
-                        }, 0);
-                        return sum + subSum;
-                    }
-                    const config = findColumnConfig(h.column.id, columns);
-                    const colSpan = getHeaderColSpan(config);
-                    if (colSpan && colSpan > 1) {
-                        const currentIdx = headerGroups.findIndex(hg => hg.id === h.id);
-                        let totalWidth = h.column.getSize();
-                        for (let j = 1; j < colSpan && currentIdx + j < headerGroups.length; j++) {
-                            totalWidth += headerGroups[currentIdx + j].column.getSize();
-                        }
-                        return sum + totalWidth;
-                    }
-                    return sum + h.column.getSize();
-                }, 0);
-            }
-            if (isChildPinned === 'right') {
-                const headersAfterCurrent = [];
-                const temp = [...headerGroups].reverse();
-                for (let i = 0; i < temp.length; i++) {
-                    const indexOfHeader = temp.findIndex(h => h.id === headerCurrent.id);
-                    if (i < indexOfHeader) {
-                        headersAfterCurrent.push(temp[i]);
-                    }
-                }
-                newOffsetRight[headerCurrent.id] = headersAfterCurrent.reduce((sum, h) => {
-                    if (!shouldHeaderRender(h, headerGroups, columns)) {
-                        return sum;
-                    }
-                    if (h.subHeaders.length > 0) {
-                        const subSum = h.subHeaders
-                            .filter(subH => subH.column.getIsPinned() === 'right')
-                            .filter(subH => shouldHeaderRender(subH, h.subHeaders, columns))
-                            .reduce((subAcc, subH) => {
-                            const config = findColumnConfig(subH.column.id, columns);
-                            const colSpan = getHeaderColSpan(config);
-                            if (colSpan && colSpan > 1) {
-                                const currentIdx = h.subHeaders.findIndex(sh => sh.id === subH.id);
-                                let totalWidth = subH.column.getSize();
-                                for (let j = 1; j < colSpan && currentIdx + j < h.subHeaders.length; j++) {
-                                    totalWidth += h.subHeaders[currentIdx + j].column.getSize();
-                                }
-                                return subAcc + totalWidth;
-                            }
-                            return subAcc + subH.column.getSize();
-                        }, 0);
-                        return sum + subSum;
-                    }
-                    const config = findColumnConfig(h.column.id, columns);
-                    const colSpan = getHeaderColSpan(config);
-                    if (colSpan && colSpan > 1) {
-                        const currentIdx = headerGroups.findIndex(hg => hg.id === h.id);
-                        let totalWidth = h.column.getSize();
-                        for (let j = 1; j < colSpan && currentIdx + j < headerGroups.length; j++) {
-                            totalWidth += headerGroups[currentIdx + j].column.getSize();
-                        }
-                        return sum + totalWidth;
-                    }
-                    return sum + h.column.getSize();
-                }, 0);
+        }
+        return undefined;
+    }
+    /**
+     * Calculates left offset for a header cell.
+     * Sums widths of all left-pinned headers before current header.
+     */
+    _calculateHeaderLeftOffset(headerCurrent, headerGroups, columns) {
+        const headersBeforeCurrent = this._getLeftPinnedHeadersBefore(headerCurrent, headerGroups);
+        return headersBeforeCurrent.reduce((sum, h) => {
+            if (!shouldHeaderRender(h, headerGroups, columns)) {
+                return sum;
+            }
+            return sum + this._getHeaderWidthWithColspan(h, headerGroups, columns, 'header');
+        }, 0);
+    }
+    /**
+     * Calculates right offset for a header cell.
+     * Sums widths of all right-pinned headers after current header.
+     */
+    _calculateHeaderRightOffset(headerCurrent, headerGroups, columns) {
+        const headersAfterCurrent = this._getRightPinnedHeadersAfter(headerCurrent, headerGroups);
+        return headersAfterCurrent.reduce((sum, h) => {
+            if (!shouldHeaderRender(h, headerGroups, columns)) {
+                return sum;
             }
+            return sum + this._getHeaderWidthWithColspan(h, headerGroups, columns, 'header');
+        }, 0);
+    }
+    /**
+     * Gets all left-pinned headers that appear before the current header.
+     */
+    _getLeftPinnedHeadersBefore(headerCurrent, headerGroups) {
+        const result = [];
+        const indexOfHeader = headerGroups.findIndex(h => h.id === headerCurrent.id);
+        for (let i = 0; i < indexOfHeader; i++) {
+            const leafs = headerGroups[i].getLeafHeaders();
+            const hasLeftPinned = leafs.some(lh => lh.column.getIsPinned() === 'left');
+            if (hasLeftPinned) {
+                result.push(headerGroups[i]);
+            }
+        }
+        return result;
+    }
+    /**
+     * Gets all headers that appear after the current header (for right pinning).
+     */
+    _getRightPinnedHeadersAfter(headerCurrent, headerGroups) {
+        const result = [];
+        const reversed = [...headerGroups].reverse();
+        const indexOfHeader = reversed.findIndex(h => h.id === headerCurrent.id);
+        for (let i = 0; i < indexOfHeader; i++) {
+            result.push(reversed[i]);
+        }
+        return result;
+    }
+    // ============================================
+    // FOOTER PINNING STYLES
+    // ============================================
+    /**
+     * Calculates pinning styles for footer cells.
+     * Similar to header but handles footer-specific colspan.
+     */
+    _getFooterPinningStyles(column, footerCurrent, table, columns) {
+        const isPinnedColumn = column.getIsPinned();
+        if (!isPinnedColumn) {
+            return this._buildPinningResult(undefined, 0, 0);
+        }
+        const isChildPinned = this._determineChildPinDirection(column, footerCurrent);
+        const footerHeaders = footerCurrent.headerGroup.headers;
+        let leftOffset;
+        let rightOffset;
+        if (isChildPinned === 'left') {
+            leftOffset = this._calculateFooterLeftOffset(footerCurrent, footerHeaders, columns);
+        }
+        if (isChildPinned === 'right') {
+            rightOffset = this._calculateFooterRightOffset(footerCurrent, footerHeaders, columns);
         }
-        const leftValue = isChildPinned === 'left'
-            ? newOffsetLeft[headerCurrent.id] !== undefined
-                ? newOffsetLeft[headerCurrent.id]
-                : leftPositions[headerCurrent.id]
-            : undefined;
         return {
             position: isChildPinned ? 'sticky' : 'relative',
             zIndex: isChildPinned ? 1 : 0,
-            left: leftValue !== undefined ? `${leftValue}px` : undefined,
-            right: isChildPinned === 'right' ? `${newOffsetRight[headerCurrent.id]}px` : undefined,
+            left: leftOffset !== undefined ? `${leftOffset}px` : undefined,
+            right: rightOffset !== undefined ? `${rightOffset}px` : undefined,
+        };
+    }
+    /**
+     * Calculates left offset for a footer cell.
+     * Sums widths of all left-pinned footers before current footer.
+     */
+    _calculateFooterLeftOffset(footerCurrent, footerHeaders, columns) {
+        const footersBeforeCurrent = this._getLeftPinnedHeadersBefore(footerCurrent, footerHeaders);
+        return footersBeforeCurrent.reduce((sum, h) => {
+            if (!shouldFooterRender(h, footerHeaders, columns)) {
+                return sum;
+            }
+            return sum + this._getHeaderWidthWithColspan(h, footerHeaders, columns, 'footer');
+        }, 0);
+    }
+    /**
+     * Calculates right offset for a footer cell.
+     * Handles colspan coverage to exclude covered cells from calculation.
+     */
+    _calculateFooterRightOffset(footerCurrent, footerHeaders, columns) {
+        const footersAfterCurrent = this._getRightPinnedHeadersAfter(footerCurrent, footerHeaders);
+        // Check if current footer has colspan
+        const currentConfig = findColumnConfig(footerCurrent.column.id, columns);
+        const currentColSpan = getFooterColSpan(currentConfig);
+        if (currentColSpan && currentColSpan > 1) {
+            return this._calculateRightOffsetWithColspan(footerCurrent, footerHeaders, footersAfterCurrent, currentColSpan, columns);
+        }
+        // No colspan - sum all footers after
+        return footersAfterCurrent.reduce((sum, h) => {
+            if (!shouldFooterRender(h, footerHeaders, columns)) {
+                return sum;
+            }
+            return sum + this._getHeaderWidthWithColspan(h, footerHeaders, columns, 'footer');
+        }, 0);
+    }
+    /**
+     * Calculates right offset when current footer has colspan.
+     * Excludes cells that are covered by the colspan.
+     */
+    _calculateRightOffsetWithColspan(footerCurrent, footerHeaders, footersAfterCurrent, colSpan, columns) {
+        const currentIdx = footerHeaders.findIndex(h => h.id === footerCurrent.id);
+        const coveredCount = Math.min(colSpan - 1, footerHeaders.length - currentIdx - 1);
+        // Build set of covered column IDs
+        const coveredColumnIds = new Set();
+        for (let j = 1; j <= coveredCount && currentIdx + j < footerHeaders.length; j++) {
+            coveredColumnIds.add(footerHeaders[currentIdx + j].id);
+        }
+        // Only sum uncovered footers
+        const uncoveredFooters = footersAfterCurrent.filter(h => !coveredColumnIds.has(h.id));
+        return uncoveredFooters.reduce((sum, h) => {
+            if (!shouldFooterRender(h, footerHeaders, columns)) {
+                return sum;
+            }
+            return sum + h.column.getSize();
+        }, 0);
+    }
+    // ============================================
+    // SHARED UTILITY METHODS
+    // ============================================
+    /**
+     * Gets header/footer width including colspan expansion.
+     * Handles both root headers and subheaders.
+     */
+    _getHeaderWidthWithColspan(header, allHeaders, columns, type) {
+        const getColSpan = type === 'header' ? getHeaderColSpan : getFooterColSpan;
+        const shouldRender = type === 'header' ? shouldHeaderRender : shouldFooterRender;
+        if (header.subHeaders.length > 0) {
+            const pinDirection = type === 'header' ? 'left' : 'right';
+            return header.subHeaders
+                .filter(subH => subH.column.getIsPinned() === pinDirection || subH.column.getIsPinned())
+                .filter(subH => shouldRender(subH, header.subHeaders, columns))
+                .reduce((subAcc, subH) => subAcc + this._getSingleHeaderWidth(subH, header.subHeaders, columns, getColSpan), 0);
+        }
+        return this._getSingleHeaderWidth(header, allHeaders, columns, getColSpan);
+    }
+    /**
+     * Gets width of a single header considering its colspan.
+     */
+    _getSingleHeaderWidth(header, allHeaders, columns, getColSpanFn) {
+        const config = findColumnConfig(header.column.id, columns);
+        const colSpan = getColSpanFn(config);
+        if (colSpan && colSpan > 1) {
+            const currentIdx = allHeaders.findIndex(h => h.id === header.id);
+            let totalWidth = header.column.getSize();
+            for (let j = 1; j < colSpan && currentIdx + j < allHeaders.length; j++) {
+                totalWidth += allHeaders[currentIdx + j].column.getSize();
+            }
+            return totalWidth;
+        }
+        return header.column.getSize();
+    }
+    /**
+     * Builds the final pinning styles result object.
+     */
+    _buildPinningResult(isPinned, leftOffset, rightOffset) {
+        return {
+            left: isPinned === 'left' ? `${leftOffset}px` : undefined,
+            right: isPinned === 'right' ? `${rightOffset}px` : undefined,
+            position: isPinned ? 'sticky' : 'relative',
+            zIndex: isPinned ? 1 : 0,
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTablePinningStylesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZTablePinningStylesPipe, isStandalone: true, name: "zTablePinningStyles" });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZTablePinningStylesPipe, isStandalone: true, name: "zTablePinningStyles", pure: false });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTablePinningStylesPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'zTablePinningStyles',
                     standalone: true,
-                    pure: true,
+                    pure: false,
                 }]
         }] });
+('');
 
 class ZTableRowPipe {
     transform(row, table, property, virtualRowHeight) {
@@ -1921,54 +2096,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }] });
 
-class ZTableBodyCellRenderPipe {
-    transform(cell, allCells, columns) {
-        return shouldBodyCellRenderColSpan(cell, allCells, columns);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableBodyCellRenderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZTableBodyCellRenderPipe, isStandalone: true, name: "zTableBodyCellRender" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableBodyCellRenderPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'zTableBodyCellRender',
-                    standalone: true,
-                    pure: true,
-                }]
-        }] });
-
-class ZTableFooterRenderPipe {
-    transform(header, allHeaders, columns) {
-        return shouldFooterRender(header, allHeaders, columns);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableFooterRenderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZTableFooterRenderPipe, isStandalone: true, name: "zTableFooterRender" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableFooterRenderPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'zTableFooterRender',
-                    standalone: true,
-                    pure: true,
-                }]
-        }] });
-
-class ZTableHeaderRenderPipe {
-    transform(header, allHeaders, columns) {
-        return shouldHeaderRender(header, allHeaders, columns);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableHeaderRenderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZTableHeaderRenderPipe, isStandalone: true, name: "zTableHeaderRender" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableHeaderRenderPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'zTableHeaderRender',
-                    standalone: true,
-                    pure: true,
-                }]
-        }] });
-
 /* eslint-disable @stylistic/indent */
 const Z_TABLE_DEFAULT_ACTION_BUTTON_WIDTH = 32;
 class ZTableComponent {
@@ -2159,7 +2286,7 @@ class ZTableComponent {
     }, ...(ngDevMode ? [{ debugName: "_data" }] : []));
     _columns = computed(() => {
         let cols = this.zConfig().columns ?? [];
-        cols = this._filterVisibleColumns(cols);
+        cols = filterVisibleColumns(cols);
         if (this.hasBodyRowSpan()) {
             cols = cols.filter(c => c.id !== 'expand');
         }
@@ -3289,27 +3416,8 @@ class ZTableComponent {
         this._columnConfigCache.set(columnId, result);
         return result;
     }
-    _filterVisibleColumns(columns) {
-        return columns
-            .filter(col => {
-            const { visible } = col;
-            if (visible === undefined) {
-                return true;
-            }
-            return typeof visible === 'function' ? visible() : visible;
-        })
-            .map(col => {
-            if (col.columns && col.columns.length > 0) {
-                return {
-                    ...col,
-                    columns: this._filterVisibleColumns(col.columns),
-                };
-            }
-            return col;
-        });
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZTableComponent, isStandalone: true, selector: "z-table", inputs: { zConfig: { classPropertyName: "zConfig", publicName: "zConfig", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zKey: { classPropertyName: "zKey", publicName: "zKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zChange: "zChange", zControl: "zControl" }, host: { classAttribute: "z-table block relative py-1" }, providers: [TranslatePipe], viewQueries: [{ propertyName: "theadWrapper", first: true, predicate: ["theadWrapper"], descendants: true, isSignal: true }, { propertyName: "tbodyContainer", first: true, predicate: ["tbodyContainer"], descendants: true, isSignal: true }, { propertyName: "tbodyWrapper", first: true, predicate: ["tbodyWrapper"], descendants: true, isSignal: true }, { propertyName: "tbodyScrollbar", first: true, predicate: ["tbodyWrapper"], descendants: true, isSignal: true }, { propertyName: "tfootWrapper", first: true, predicate: ["tfootWrapper"], descendants: true, isSignal: true }, { propertyName: "expandedRowTemplate", first: true, predicate: ["expandedRowTemplate"], descendants: true, isSignal: true }], exportAs: ["zTable"], ngImport: i0, template: "<!-- Toolbar: Search & Settings -->\n@if (isSearchEnabled() || zConfig().enableSettings) {\n  <div class=\"z-table-toolbar mb-2 flex items-center justify-between gap-4\">\n    <!-- Search -->\n    @if (isSearchEnabled()) {\n      @let config = searchConfig();\n      <z-input\n        [class]=\"config?.width ?? 'w-64'\"\n        [zSize]=\"config?.size ?? 'sm'\"\n        [zPlaceholder]=\"config?.placeholder ?? 'i18n_z_ui_table_search' | translate\"\n        [zSearch]=\"true\"\n        [zDebounce]=\"config?.debounceTime ?? 300\"\n        (zOnSearch)=\"onSearchChange($event)\" />\n    } @else {\n      <div></div>\n    }\n\n    <!-- Settings Button -->\n    @if (zConfig().enableSettings) {\n      <z-button zType=\"outline\" zSize=\"sm\" zTypeIcon=\"lucideSettings\" (click)=\"openSettingsDrawer()\">\n        {{ 'i18n_z_ui_table_settings' | translate }}\n      </z-button>\n    }\n  </div>\n}\n\n<div\n  class=\"z-table-container shadow-xs\"\n  [class.z-hide-horizontal-border]=\"!showHorizontalBorder()\"\n  [class.z-hide-vertical-border]=\"!showVerticalBorder()\"\n  [style.max-height]=\"zConfig().maxHeight\"\n  [style.min-height]=\"zConfig().minHeight\">\n  <!-- Shared colgroup template -->\n  <ng-template #colGroupTpl>\n    <colgroup>\n      @for (column of orderedLeafColumns(); track column.id) {\n        @if (column.getIsVisible()) {\n          <col [style.width]=\"'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n      }\n    </colgroup>\n  </ng-template>\n\n  <!-- Header table -->\n  <div\n    class=\"z-thead-wrapper shadow-xs\"\n    [class.z-shadow-header]=\"shouldHeaderShowShadow()\"\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\"\n    #theadWrapper>\n    <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n      <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n      <thead>\n        @for (headerGroup of orderedHeaderGroups(); track headerGroup.id) {\n          <tr>\n            @for (header of headerGroup.headers; track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableHeaderRender: headerGroup.headers : zConfig().columns;\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [ngStyle]=\"header.column | zTablePinningStyles: header : 'header' : table : zConfig().columns\"\n                  [class]=\"\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass') +\n                    ' ' +\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass')\n                  \"\n                  [style]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\"\n                  [class.z-sticky-left]=\"header.column.getIsPinned() === 'left'\"\n                  [class.z-sticky-right]=\"header.column.getIsPinned() === 'right'\"\n                  [class.z-sticky-left-last]=\"header | zTableHeaderPin: 'isLastLeftPinned' : zConfig().columns\"\n                  [class.z-sticky-right-first]=\"header | zTableHeaderPin: 'isFirstRightPinned' : zConfig().columns\"\n                  [class.z-sticky-right-last]=\"header | zTableHeaderPin: 'isLastRightPinned' : zConfig().columns\"\n                  [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                  [class.z-col-select]=\"header.column.id === 'select'\"\n                  [class.z-col-expand]=\"header.column.id === 'expand'\"\n                  [class.z-col-actions]=\"\n                    header.column.id === 'actions' || header.column.id === actionColumnInfo()?.columnId\n                  \"\n                  [attr.rowspan]=\"rowSpan\"\n                  [attr.colspan]=\"header | zTableSpan: zConfig().columns : 'headerColSpan'\">\n                  @if (header.column.id === 'select') {\n                    <!-- Header Checkbox -->\n                    <div class=\"flex items-center justify-center\">\n                      <z-checkbox\n                        zSize=\"sm\"\n                        [zChecked]=\"table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\"\n                        (zChange)=\"table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <!-- Expand All Button -->\n                    <div class=\"flex items-center justify-center\">\n                      <button\n                        type=\"button\"\n                        (click)=\"table.toggleAllRowsExpanded()\"\n                        class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                        <z-icon\n                          zType=\"lucideChevronRight\"\n                          zSize=\"14\"\n                          class=\"transition-transform duration-200\"\n                          [class.rotate-90]=\"table.getIsSomeRowsExpanded()\" />\n                      </button>\n                    </div>\n                  } @else {\n                    <!-- Header Content with Sort and Pin -->\n                    <div\n                      class=\"flex w-full items-center gap-1\"\n                      [class.justify-center]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                        'text-center'\n                      \"\n                      [class.justify-end]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') === 'text-right'\n                      \">\n                      <!-- Column Options Popover Template -->\n                      @let columnEnableOrdering =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableOrdering';\n                      @let columnEnablePinning =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enablePinning';\n                      @let effectiveEnableOrdering = columnEnableOrdering || zConfig().enableColumnOrdering;\n                      @let effectiveEnablePinning = columnEnablePinning || zConfig().enableColumnPinning;\n                      <ng-template #colOptionsPopoverContent>\n                        <div class=\"flex flex-col gap-0.5 p-0.5\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_left' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isLastMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_right' | translate }}</span>\n                            </button>\n                          }\n                          @if (effectiveEnableOrdering && header.column.getCanPin() && effectiveEnablePinning) {\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                          }\n                          @if (header.column.getCanPin() && effectiveEnablePinning) {\n                            @if (header.column.getIsPinned() !== 'left') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'right') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned()) {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                        </div>\n                      </ng-template>\n\n                      <!-- Header Text with Popover Trigger -->\n                      @let hasColumnOptions =\n                        (header.column.getCanPin() && effectiveEnablePinning) || effectiveEnableOrdering;\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded px-1.5 py-1\"\n                        [class.cursor-pointer]=\"hasColumnOptions\"\n                        [class.z-has-options]=\"hasColumnOptions\"\n                        [attr.z-popover]=\"hasColumnOptions ? '' : null\"\n                        #colOptionsPopover=\"zPopover\"\n                        #headerTextWrapper\n                        z-popover\n                        [zPopoverContent]=\"hasColumnOptions ? colOptionsPopoverContent : null\"\n                        zTrigger=\"click\"\n                        zPosition=\"bottom\"\n                        [zOffset]=\"5\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \">\n                              <ng-container\n                                *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                            </div>\n                          } @else if (headerContent | zTableHasIcon) {\n                            <z-table-icon-text\n                              class=\"min-w-0 truncate\"\n                              [zText]=\"headerContent\"\n                              [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \" />\n                          } @else {\n                            <span\n                              class=\"z-table-cell-text\"\n                              z-tooltip\n                              [zContent]=\"\n                                (header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip') ||\n                                headerContent\n                              \"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [innerHTML]=\"headerContent | translate | zSafeHtml\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        <!-- Dropdown indicator when has options (between text and sort icon) -->\n                        @if (hasColumnOptions) {\n                          <z-icon\n                            zType=\"lucideChevronDown\"\n                            zSize=\"12\"\n                            class=\"text-muted-foreground shrink-0 opacity-50\" />\n                        }\n                      </div>\n                      <!-- Sort Icon (outside wrapper, no hover background) -->\n                      @if (header.column.getCanSort() && !hasBodyRowSpan()) {\n                        <span\n                          class=\"z-sort-icon shrink-0 cursor-pointer text-gray-500 hover:text-gray-700\"\n                          (click)=\"handleSort($event, header.column.getToggleSortingHandler())\">\n                          @if (header.column.getIsSorted() === 'asc') {\n                            <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                          } @else if (header.column.getIsSorted() === 'desc') {\n                            <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                          } @else {\n                            <z-icon zType=\"lucideArrowDownUp\" zSize=\"12\" class=\"opacity-30\" />\n                          }\n                        </span>\n                      }\n                    </div>\n                  }\n                  <!-- Column Filter -->\n                  @if (header.column.getCanFilter() && hasFiltering()) {\n                    <div class=\"mt-1\">\n                      <z-table-filter [zColumn]=\"$any(header.column)\" [zTable]=\"$any(table)\" />\n                    </div>\n                  }\n                  <!-- Column Resizer -->\n                  @if (\n                    header.column.id !== 'select' &&\n                    header.column.id !== 'expand' &&\n                    zConfig().enableColumnResizing !== false\n                  ) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"\n                        header.column.getIsPinned() === 'right' || header.column.getIsLastColumn()\n                      \"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResizer]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n          </tr>\n        }\n      </thead>\n    </table>\n  </div>\n\n  <!-- Body table -->\n  <div\n    class=\"z-tbody-wrapper relative\"\n    #tbodyContainer\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\">\n    @if (zLoading() || isProcessing()) {\n      <!-- Loading State -->\n      @if (zConfig().useSkeleton) {\n        <!-- Skeleton Loading -->\n        <div class=\"animate-in fade-in flex h-full flex-col duration-200\">\n          @for (i of skeletonRows(); track $index; let last = $last) {\n            <div\n              class=\"border-border box-border flex flex-1 flex-col items-start justify-center gap-1.5 px-2\"\n              [class.border-b]=\"!last\">\n              <z-skeleton zType=\"bar\" zWidth=\"100%\" zHeight=\"22px\" zRadius=\"4px\" />\n              <z-skeleton zType=\"bar\" zWidth=\"50%\" zHeight=\"14px\" zRadius=\"4px\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <!-- Spinner Loading -->\n        <div class=\"z-loading-state\">\n          <z-loading [zLoading]=\"true\" zSize=\"lg\" [zText]=\"'i18n_z_ui_table_loading' | translate\" />\n        </div>\n      }\n    } @else if (isEmpty()) {\n      <div class=\"z-empty-state\">\n        @if (isNoSearchResults()) {\n          <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"'i18n_z_ui_table_no_results' | translate\" />\n        } @else {\n          <z-empty zIcon=\"lucidePackageOpen\" zSize=\"sm\" [zMessage]=\"'i18n_z_ui_table_no_data' | translate\" />\n        }\n      </div>\n    } @else {\n      <ng-scrollbar class=\"z-tbody-scrollbar\" #tbodyWrapper track=\"all\" (scroll)=\"onTbodyScroll($event)\">\n        @if (isVirtual()) {\n          <!-- Virtual Scroll Mode -->\n          <div\n            class=\"z-virtual-scroll-inner\"\n            [style.height.px]=\"virtualizer.getTotalSize()\"\n            [style.min-width.px]=\"table.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let groupRows = dynamicGroupRows()[virtualItem.index] || [];\n              <div\n                class=\"z-virtual-row\"\n                [style.height.px]=\"dynamicGroupHeights()[virtualItem.index] ?? groupSize() * virtualRowHeight()\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\">\n                <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n                  <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n                  <tbody\n                    [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n                    [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n                    @for (row of groupRows; track row.id) {\n                      <tr\n                        z-table-row-hover\n                        [style.height.px]=\"virtualRowHeight()\"\n                        [class.z-child-row]=\"row.depth > 0\"\n                        [class.z-selected]=\"row.getIsSelected()\"\n                        [class.z-indeterminate-selected]=\"row.getIsSomeSelected() && !row.getIsSelected()\">\n                        @for (cell of row.getVisibleCells(); track cell.id) {\n                          @let shouldRenderRowSpan =\n                            cell | zTableSpan: zConfig().columns : 'shouldRender' : table.getRowModel().rows;\n                          @let shouldRenderColSpan =\n                            cell | zTableBodyCellRender: row.getVisibleCells() : zConfig().columns;\n                          @if (shouldRenderRowSpan && shouldRenderColSpan) {\n                            <td\n                              [ngStyle]=\"\n                                cell.column\n                                  | zTablePinningStyles: cell : 'body' : row.getVisibleCells() : zConfig().columns\n                              \"\n                              [class.z-sticky-left]=\"cell.column.getIsPinned() === 'left'\"\n                              [class.z-sticky-right]=\"cell.column.getIsPinned() === 'right'\"\n                              [class.z-sticky-left-last]=\"\n                                cell.column.getIsPinned() === 'left' && cell.column.getIsLastColumn('left')\n                              \"\n                              [class.z-sticky-right-first]=\"\n                                cell.column.getIsPinned() === 'right' && cell.column.getIsFirstColumn('right')\n                              \"\n                              [class.z-sticky-right-last]=\"\n                                cell.column.getIsPinned() === 'right' && cell.column.getIsLastColumn('right')\n                              \"\n                              [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                              [class.z-col-select]=\"cell.column.id === 'select'\"\n                              [class.z-col-expand]=\"cell.column.id === 'expand'\"\n                              [class.z-col-actions]=\"cell.column.id === actionColumnInfo()?.columnId\"\n                              [class.z-at-bottom]=\"\n                                cell | zTableCellBottom: zConfig().columns : table.getRowModel().rows\n                              \"\n                              [attr.rowspan]=\"\n                                cell | zTableSpan: zConfig().columns : 'cellRowSpan' : table.getRowModel().rows\n                              \"\n                              [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan'\"\n                              [class]=\"cell | zTableCellConfig: zConfig().columns : 'cellClass'\"\n                              [style]=\"cell | zTableCellConfig: zConfig().columns : 'cellStyle'\">\n                              @if (cell.column.id === 'select') {\n                                <!-- Row Checkbox -->\n                                <div class=\"flex items-center justify-center\">\n                                  <z-checkbox\n                                    zSize=\"sm\"\n                                    [zChecked]=\"cell.row.getIsSelected()\"\n                                    [zIndeterminate]=\"cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\"\n                                    [zDisabled]=\"!cell.row.getCanSelect()\"\n                                    (zChange)=\"cell.row.toggleSelected()\" />\n                                </div>\n                              } @else if (cell.column.id === 'expand') {\n                                <!-- Expand Button -->\n                                <div class=\"flex items-center justify-center\">\n                                  @if (cell.row.subRows && cell.row.subRows.length > 0) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.toggleExpanded()\"\n                                      class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                                      <z-icon\n                                        zType=\"lucideChevronRight\"\n                                        zSize=\"14\"\n                                        class=\"transition-transform duration-200\"\n                                        [class.rotate-90]=\"cell.row.getIsExpanded()\" />\n                                    </button>\n                                  }\n                                </div>\n                              } @else if (cell.column.id === actionColumnInfo()?.columnId && actionColumnInfo()) {\n                                <z-table-actions\n                                  [zConfig]=\"$any(actionColumnInfo()!.config)\"\n                                  [zRow]=\"cell.row.original\"\n                                  [zRowId]=\"cell.row.id\"\n                                  (zActionClick)=\"onActionClick($event)\" />\n                              } @else {\n                                <ng-container\n                                  *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellContent\">\n                                  @if (cellContent | zTableIsTemplateRef) {\n                                    <!-- TemplateRef rendering -->\n                                    <div\n                                      [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                      [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\">\n                                      <ng-container\n                                        *ngTemplateOutlet=\"cellContent; context: { $implicit: cell.getContext() }\" />\n                                    </div>\n                                  } @else if (cellContent | zTableHasIcon) {\n                                    <!-- Icon syntax rendering -->\n                                    <z-table-icon-text\n                                      [zText]=\"cellContent\"\n                                      [zTooltip]=\"cell | zTableCellConfig: zConfig().columns : 'contentTooltip'\"\n                                      [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                      [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\" />\n                                  } @else {\n                                    <!-- Default/innerHTML rendering -->\n                                    <div\n                                      class=\"z-table-cell-text\"\n                                      z-tooltip\n                                      [zContent]=\"\n                                        (cell | zTableCellConfig: zConfig().columns : 'contentTooltip') || cellContent\n                                      \"\n                                      [innerHTML]=\"cellContent | translate | zSafeHtml\"\n                                      [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                      [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"></div>\n                                  }\n                                </ng-container>\n                              }\n                            </td>\n                          }\n                        }\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Normal Scroll Mode -->\n          <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n            <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n            <tbody\n              [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n              [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n              <!-- Row Template -->\n              <ng-template #rowTemplate let-row>\n                <tr\n                  z-table-row-hover\n                  [attr.data-row-id]=\"row.id\"\n                  [ngStyle]=\"row | zTableRow: table : 'pinningStyles' : virtualRowHeight()\"\n                  [class.z-child-row]=\"row.depth > 0\"\n                  [class.z-selected]=\"row.getIsSelected()\"\n                  [class.z-indeterminate-selected]=\"row.getIsSomeSelected() && !row.getIsSelected()\"\n                  [class.z-pinned-top]=\"row.getIsPinned() === 'top'\"\n                  [class.z-pinned-bottom]=\"row.getIsPinned() === 'bottom'\"\n                  [class.z-shadow-bottom]=\"\n                    showHeaderFooterShadow() &&\n                    row.getIsPinned() === 'top' &&\n                    (row | zTableRow: table : 'isLastTopPinned')\n                  \"\n                  [class.z-shadow-top]=\"\n                    showHeaderFooterShadow() &&\n                    row.getIsPinned() === 'bottom' &&\n                    (row | zTableRow: table : 'isFirstBottomPinned')\n                  \"\n                  [attr.data-depth]=\"row.depth\">\n                  @for (cell of row.getVisibleCells(); track cell.id) {\n                    @let shouldRenderRowSpan =\n                      cell | zTableSpan: zConfig().columns : 'shouldRender' : table.getRowModel().rows;\n                    @let shouldRenderColSpan = cell | zTableBodyCellRender: row.getVisibleCells() : zConfig().columns;\n                    @if (shouldRenderRowSpan && shouldRenderColSpan) {\n                      <td\n                        [ngStyle]=\"\n                          cell.column | zTablePinningStyles: cell : 'body' : row.getVisibleCells() : zConfig().columns\n                        \"\n                        [class]=\"cell | zTableCellConfig: zConfig().columns : 'cellClass'\"\n                        [style]=\"cell | zTableCellConfig: zConfig().columns : 'cellStyle'\"\n                        [class.z-sticky-left]=\"cell.column.getIsPinned() === 'left'\"\n                        [class.z-sticky-right]=\"cell.column.getIsPinned() === 'right'\"\n                        [class.z-sticky-left-last]=\"\n                          cell.column.getIsPinned() === 'left' && cell.column.getIsLastColumn('left')\n                        \"\n                        [class.z-sticky-right-first]=\"\n                          cell.column.getIsPinned() === 'right' && cell.column.getIsFirstColumn('right')\n                        \"\n                        [class.z-sticky-right-last]=\"\n                          cell.column.getIsPinned() === 'right' && cell.column.getIsLastColumn('right')\n                        \"\n                        [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                        [class.z-col-select]=\"cell.column.id === 'select'\"\n                        [class.z-col-expand]=\"cell.column.id === 'expand'\"\n                        [class.z-col-actions]=\"\n                          cell.column.id === 'actions' || cell.column.id === actionColumnInfo()?.columnId\n                        \"\n                        [class.z-at-bottom]=\"cell | zTableCellBottom: zConfig().columns : table.getRowModel().rows\"\n                        [attr.rowspan]=\"cell | zTableSpan: zConfig().columns : 'cellRowSpan' : table.getRowModel().rows\"\n                        [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan'\">\n                        @if (cell.column.id === 'select') {\n                          <!-- Row Checkbox with Pin Button -->\n                          <div class=\"flex items-center justify-center gap-1\">\n                            <z-checkbox\n                              zSize=\"sm\"\n                              [zChecked]=\"cell.row.getIsSelected()\"\n                              [zIndeterminate]=\"cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\"\n                              [zDisabled]=\"!cell.row.getCanSelect()\"\n                              (zChange)=\"cell.row.toggleSelected()\" />\n                            @if (zConfig().enableRowPinning && cell.row.depth === 0 && !hasBodyRowSpan()) {\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            }\n                          </div>\n                        } @else if (cell.column.id === 'expand') {\n                          <!-- Expand Button with Row Pin Popover -->\n                          <div class=\"flex items-center justify-center gap-1\">\n                            @if (cell.row.subRows && cell.row.subRows.length > 0) {\n                              <button\n                                type=\"button\"\n                                (click)=\"cell.row.toggleExpanded()\"\n                                class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                                <z-icon\n                                  zType=\"lucideChevronRight\"\n                                  zSize=\"14\"\n                                  class=\"transition-transform duration-200\"\n                                  [class.rotate-90]=\"cell.row.getIsExpanded()\" />\n                              </button>\n                            }\n                            @if (\n                              zConfig().enableRowPinning &&\n                              cell.row.depth === 0 &&\n                              !(cell.row.subRows && cell.row.subRows.length > 0) &&\n                              !hasBodyRowSpan()\n                            ) {\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            }\n                          </div>\n                        } @else if (cell.column.id === 'actions') {\n                          <!-- Actions Column - Row Pin Only (for parent rows) -->\n                          @if (cell.row.depth === 0 && !hasBodyRowSpan()) {\n                            <div class=\"flex items-center justify-center\">\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            </div>\n                          }\n                        } @else if (cell.column.id === actionColumnInfo()?.columnId && actionColumnInfo()) {\n                          <z-table-actions\n                            [zConfig]=\"$any(actionColumnInfo()!.config)\"\n                            [zRow]=\"cell.row.original\"\n                            [zRowId]=\"cell.row.id\"\n                            (zActionClick)=\"onActionClick($event)\" />\n                        } @else {\n                          <ng-container\n                            *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellContent\">\n                            @if (cellContent | zTableIsTemplateRef) {\n                              <!-- TemplateRef rendering -->\n                              <div\n                                [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\">\n                                <ng-container\n                                  *ngTemplateOutlet=\"cellContent; context: { $implicit: cell.getContext() }\" />\n                              </div>\n                            } @else if (cellContent | zTableHasIcon) {\n                              <!-- Icon syntax rendering -->\n                              <z-table-icon-text\n                                [zText]=\"cellContent\"\n                                [zTooltip]=\"cell | zTableCellConfig: zConfig().columns : 'contentTooltip'\"\n                                [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\" />\n                            } @else {\n                              <!-- Default/innerHTML rendering -->\n                              <div\n                                class=\"z-table-cell-text\"\n                                z-tooltip\n                                [zContent]=\"\n                                  (cell | zTableCellConfig: zConfig().columns : 'contentTooltip') || cellContent\n                                \"\n                                [innerHTML]=\"cellContent | translate | zSafeHtml\"\n                                [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"></div>\n                            }\n                          </ng-container>\n                        }\n                      </td>\n                    }\n                  }\n                </tr>\n\n                <!-- Expanded Row Detail -->\n                @if (row.getIsExpanded() && row.depth === 0 && !row.subRows?.length && zConfig().expandedRowTemplate) {\n                  <tr class=\"z-expanded-row\">\n                    <td [attr.colspan]=\"row.getVisibleCells().length\" class=\"p-0\">\n                      <ng-container *ngTemplateOutlet=\"zConfig().expandedRowTemplate!; context: { $implicit: row }\" />\n                    </td>\n                  </tr>\n                }\n              </ng-template>\n\n              <!-- Render Top Pinned Rows (hidden when filtered data is empty) -->\n              @if (!isEmpty()) {\n                @for (row of table.getTopRows(); track row.id) {\n                  <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n                }\n              }\n\n              <!-- Render Center Rows -->\n              @for (row of table.getCenterRows(); track row.id) {\n                <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n              }\n\n              <!-- Render Bottom Pinned Rows (hidden when filtered data is empty) -->\n              @if (!isEmpty()) {\n                @for (row of bottomRowsReversed(); track row.id) {\n                  <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n                }\n              }\n            </tbody>\n          </table>\n        }\n      </ng-scrollbar>\n    }\n    <!-- end @else -->\n  </div>\n\n  <!-- Footer table -->\n  @if (hasFooter()) {\n    <div\n      class=\"z-tfoot-wrapper\"\n      [class.z-shadow-footer]=\"shouldFooterShowShadow()\"\n      [class.z-scroll-left]=\"hasScrollLeft()\"\n      [class.z-scroll-right]=\"hasScrollRight()\"\n      #tfootWrapper>\n      <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n        <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n        <tfoot>\n          @for (footerGroup of orderedFooterGroups(); track footerGroup.id) {\n            @if (footerGroup | zTableFooterContent: zConfig().columns) {\n              <tr>\n                @for (footer of footerGroup.headers; track footer.id) {\n                  @let rowSpan = footer | zTableSpan: zConfig().columns : 'footerRowSpan';\n                  @let shouldRender = footer | zTableFooterRender: footerGroup.headers : zConfig().columns;\n                  @if (rowSpan && shouldRender) {\n                    <th\n                      [ngStyle]=\"footer.column | zTablePinningStyles: footer : 'header' : table : zConfig().columns\"\n                      [class]=\"\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerClass') +\n                        ' ' +\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass')\n                      \"\n                      [style]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerStyle'\"\n                      [class.z-sticky-left]=\"footer.column.getIsPinned() === 'left'\"\n                      [class.z-sticky-right]=\"footer.column.getIsPinned() === 'right'\"\n                      [class.z-sticky-left-last]=\"footer | zTableHeaderPin: 'isLastLeftPinned' : zConfig().columns\"\n                      [class.z-sticky-right-first]=\"footer | zTableHeaderPin: 'isFirstRightPinned' : zConfig().columns\"\n                      [class.z-sticky-right-last]=\"footer | zTableHeaderPin: 'isLastRightPinned' : zConfig().columns\"\n                      [class.z-at-left-edge]=\"footer | zTableCellOffset: orderedLeafColumns()\"\n                      [attr.rowspan]=\"rowSpan\"\n                      [attr.colspan]=\"footer | zTableSpan: zConfig().columns : 'footerColSpan'\">\n                      @let configFooterContent =\n                        footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContent';\n                      @if (footer.column.columnDef.footer) {\n                        <ng-container\n                          *flexRender=\"footer.column.columnDef.footer; props: footer.getContext(); let footerContent\">\n                          <div\n                            class=\"flex w-full items-center\"\n                            [class.justify-center]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                              'text-center'\n                            \"\n                            [class.justify-end]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                              'text-right'\n                            \">\n                            @if (footerContent | zTableIsTemplateRef) {\n                              <!-- TemplateRef rendering -->\n                              <div\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \">\n                                <ng-container\n                                  *ngTemplateOutlet=\"footerContent; context: { $implicit: footer.getContext() }\" />\n                              </div>\n                            } @else if (footerContent | zTableHasIcon) {\n                              <!-- Icon syntax rendering -->\n                              <z-table-icon-text\n                                [zText]=\"footerContent\"\n                                [zTooltip]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip'\"\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \" />\n                            } @else {\n                              <!-- Default/string rendering -->\n                              <span\n                                class=\"z-table-cell-text\"\n                                z-tooltip\n                                [zContent]=\"\n                                  (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip') ||\n                                  footerContent\n                                \"\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \">\n                                {{ footerContent | translate }}\n                              </span>\n                            }\n                          </div>\n                        </ng-container>\n                      } @else if (configFooterContent) {\n                        <!-- Fallback for group columns without TanStack footer -->\n                        <div\n                          class=\"flex w-full items-center\"\n                          [class.justify-center]=\"\n                            (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                            'text-center'\n                          \"\n                          [class.justify-end]=\"\n                            (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                            'text-right'\n                          \">\n                          <span\n                            class=\"z-table-cell-text\"\n                            z-tooltip\n                            [zContent]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip') ||\n                              $any(configFooterContent)\n                            \"\n                            [ngClass]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\"\n                            [ngStyle]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\">\n                            {{ $any(configFooterContent) | translate }}\n                          </span>\n                        </div>\n                      }\n                    </th>\n                  }\n                }\n              </tr>\n            }\n          }\n        </tfoot>\n      </table>\n    </div>\n  }\n</div>\n\n<!-- Pagination -->\n@if (zConfig().enablePagination && zConfig().pagination?.enabled !== false) {\n  @let totalRows = table.getFilteredRowModel().rows.length;\n  <div class=\"mt-4 flex items-center justify-between gap-4\">\n    <div class=\"text-sm text-gray-500\">\n      {{\n        ('i18n_z_ui_table_total_rows' | translate).replace(\n          '{total}',\n          zConfig().totalCount?.toString() || totalRows.toString()\n        )\n      }}\n    </div>\n    <z-pagination\n      [zTotal]=\"zConfig().totalCount ?? totalRows\"\n      [(zPageIndex)]=\"pagination().pageIndex\"\n      [(zPageSize)]=\"pagination().pageSize\"\n      [zPageSizeOptions]=\"zConfig().pagination?.pageSizeOptions ?? [10, 20, 50, 100]\"\n      [zShowSizeChanger]=\"zConfig().pagination?.showSizeChanger ?? true\"\n      [zShowQuickJumper]=\"zConfig().pagination?.showQuickJumper ?? false\"\n      [zShowTotal]=\"false\"\n      [zDisabled]=\"zConfig().pagination?.disabled || zLoading() || isProcessing()\"\n      (zOnPageChange)=\"onPageChange($event)\" />\n  </div>\n}\n\n<!-- Settings Drawer -->\n<z-drawer\n  [(zVisible)]=\"showSettingsDrawer\"\n  [zTitle]=\"'i18n_z_ui_table_settings_title' | translate\"\n  zPlacement=\"right\"\n  zWidth=\"500px\"\n  [zShadow]=\"true\"\n  [zOkText]=\"null\"\n  [zCancelText]=\"'i18n_z_ui_drawer_close' | translate\">\n  <div class=\"z-table-settings-drawer px-4\">\n    <!-- Display Settings -->\n    <div class=\"mb-4\">\n      <h4 class=\"text-foreground mb-2 text-sm font-semibold\">{{ 'i18n_z_ui_table_display_settings' | translate }}</h4>\n      <p class=\"text-muted-foreground mb-3 text-xs\">{{ 'i18n_z_ui_table_display_settings_desc' | translate }}</p>\n      <div class=\"grid grid-cols-2 gap-x-4 gap-y-3\">\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showHorizontalBorder()\"\n          [zText]=\"'i18n_z_ui_table_horizontal_border' | translate\"\n          (zChange)=\"showHorizontalBorder.set(!showHorizontalBorder())\" />\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showVerticalBorder()\"\n          [zText]=\"'i18n_z_ui_table_vertical_border' | translate\"\n          (zChange)=\"showVerticalBorder.set(!showVerticalBorder())\" />\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showHeaderFooterShadow()\"\n          [zText]=\"'i18n_z_ui_table_header_footer_shadow' | translate\"\n          (zChange)=\"showHeaderFooterShadow.set(!showHeaderFooterShadow())\" />\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-border my-4 border-t\"></div>\n\n    <!-- Unified Column Settings -->\n    @if (zConfig().enableSettings) {\n      <div class=\"mb-4\">\n        <h4 class=\"text-foreground mb-2 text-sm font-semibold\">{{ 'i18n_z_ui_table_column_settings' | translate }}</h4>\n        <p class=\"text-muted-foreground mb-3 text-xs\">{{ 'i18n_z_ui_table_column_settings_desc' | translate }}</p>\n\n        <!-- Unpinned Columns (Draggable) -->\n        <div\n          cdkDropList\n          #columnDropList=\"cdkDropList\"\n          (cdkDropListDropped)=\"onPendingColumnDrop($event)\"\n          class=\"z-column-drop-list space-y-1.5\">\n          @for (columnId of columnOrder(); track columnId; let i = $index) {\n            @if (columnId !== 'expand' && columnId !== 'select') {\n              @let column = table.getColumn(columnId);\n              @let isPinned = column?.getIsPinned();\n              @let isVisible = columnVisibility()[columnId] !== false;\n              @let canPin = column?.getCanPin() !== false && zConfig().enableColumnPinning;\n              @if (!isPinned) {\n                <div\n                  cdkDrag\n                  [cdkDragData]=\"columnId\"\n                  cdkDragLockAxis=\"y\"\n                  cdkDragBoundary=\".z-column-drop-list\"\n                  cdkDragPreviewClass=\"z-drag-preview\"\n                  class=\"z-drag-item border-border bg-card hover:border-primary flex cursor-grab items-center gap-2 rounded border px-2 py-1.5 text-sm active:cursor-grabbing\"\n                  [class.opacity-60]=\"!isVisible\">\n                  <!-- Drag Handle -->\n                  <z-icon\n                    cdkDragHandle\n                    zType=\"lucideGripVertical\"\n                    zSize=\"14\"\n                    class=\"text-muted-foreground shrink-0 cursor-grab active:cursor-grabbing\" />\n\n                  <!-- Visibility Checkbox -->\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isVisible\"\n                    (change)=\"onToggleColumnVisibility(columnId)\"\n                    (mousedown)=\"$event.stopPropagation()\"\n                    class=\"border-input h-4 w-4 shrink-0 cursor-pointer rounded\" />\n\n                  <!-- Column Name -->\n                  <span class=\"flex min-w-0 flex-1 flex-col\">\n                    <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                      {{ columnId | zTableColumnHeader: zConfig().columns | translate }}\n                    </span>\n                    @let parents = columnId | zTableColumnParents: zConfig().columns;\n                    @if (parents) {\n                      <span class=\"text-muted-foreground truncate text-[10px]\">({{ parents | translate }})</span>\n                    }\n                  </span>\n\n                  <!-- Pin Buttons -->\n                  @if (canPin) {\n                    <div class=\"flex shrink-0 items-center gap-0.5\" (mousedown)=\"$event.stopPropagation()\">\n                      <button\n                        type=\"button\"\n                        [disabled]=\"!isVisible\"\n                        (click)=\"onToggleColumnPin(columnId, 'left')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                        title=\"Pin Left\">\n                        <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                      </button>\n                      <button\n                        type=\"button\"\n                        [disabled]=\"!isVisible\"\n                        (click)=\"onToggleColumnPin(columnId, 'right')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                        title=\"Pin Right\">\n                        <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                      </button>\n                    </div>\n                  }\n                </div>\n              }\n            }\n          }\n        </div>\n\n        <!-- Pinned Columns Section -->\n        @if (zConfig().enableColumnPinning) {\n          @if (pinnedColumnIds().length > 0) {\n            <div class=\"border-border mt-4 border-t pt-4\">\n              <h5 class=\"text-muted-foreground mb-2 text-xs font-medium\">\n                {{ 'i18n_z_ui_table_pinned_columns' | translate }}\n              </h5>\n              <div class=\"space-y-1.5\">\n                @for (columnId of pinnedColumnIds(); track columnId) {\n                  @let column = table.getColumn(columnId);\n                  @let isPinned = column?.getIsPinned();\n                  @let isVisible = columnVisibility()[columnId] !== false;\n                  <div\n                    class=\"border-border bg-muted/30 flex items-center gap-2 rounded border px-2 py-1.5 text-sm\"\n                    [class.opacity-60]=\"!isVisible\">\n                    <!-- Pin Icon -->\n                    <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"text-primary shrink-0\" />\n\n                    <!-- Visibility Checkbox -->\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"isVisible\"\n                      (change)=\"onToggleColumnVisibility(columnId)\"\n                      class=\"border-input h-4 w-4 shrink-0 cursor-pointer rounded\" />\n\n                    <!-- Column Name -->\n                    <span class=\"flex min-w-0 flex-1 flex-col\">\n                      <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                        {{ columnId | zTableColumnHeader: zConfig().columns | translate }}\n                      </span>\n                      @let pinnedParents = columnId | zTableColumnParents: zConfig().columns;\n                      @if (pinnedParents) {\n                        <span class=\"text-muted-foreground truncate text-[10px]\">\n                          ({{ pinnedParents | translate }})\n                        </span>\n                      }\n                    </span>\n\n                    <!-- Position Badge -->\n                    <span class=\"bg-primary/10 text-primary shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium\">\n                      {{\n                        isPinned === 'left'\n                          ? ('i18n_z_ui_table_left' | translate)\n                          : ('i18n_z_ui_table_right' | translate)\n                      }}\n                    </span>\n\n                    <!-- Unpin Button -->\n                    <button\n                      type=\"button\"\n                      (click)=\"onToggleColumnPin(columnId, isPinned === 'left' ? 'left' : 'right')\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground cursor-pointer rounded p-1 text-xs transition-colors\"\n                      title=\"Unpin\">\n                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        }\n      </div>\n    }\n  </div>\n</z-drawer>\n", styles: [":host{display:flex;flex-direction:column;height:100%;--scrollbar-track-thickness: 7px;--scrollbar-track-color: transparent;--scrollbar-thumb-shape: 3px}.z-table-container{display:flex;flex-direction:column;position:relative;width:100%;height:100%;overflow:hidden;border-radius:8px;border:thin solid var(--border);background-color:var(--card)}.z-table-container.z-hide-horizontal-border th,.z-table-container.z-hide-horizontal-border td{border-bottom:none!important;border-top:none!important}.z-table-container.z-hide-vertical-border th,.z-table-container.z-hide-vertical-border td{border-left:none!important}table{width:fit-content;min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:14px}.z-table-toolbar .z-settings-btn{transition:all .15s ease}.z-table-toolbar .z-settings-btn:hover{border-color:var(--muted-foreground)}.z-table-cell-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;-webkit-user-select:text;user-select:text}.z-thead-wrapper{flex-shrink:0;background:var(--muted);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.z-thead-wrapper::-webkit-scrollbar{display:none}.z-thead-wrapper th{height:auto;padding:8px 12px;text-align:left;vertical-align:middle;font-weight:500;color:var(--foreground);white-space:nowrap;overflow:hidden;background:var(--muted);border-left:thin solid var(--border);border-bottom:thin solid var(--border);-webkit-user-select:none;user-select:none}.z-thead-wrapper th.z-at-left-edge{border-left:none}.z-thead-wrapper th[colspan]{text-align:center;background:var(--muted);font-weight:500;color:var(--foreground)}.z-thead-wrapper.z-shadow-header{box-shadow:0 1px 3px #00000014;position:relative;z-index:15}.z-thead-wrapper.z-shadow-header:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d}.z-tbody-wrapper{flex:1;min-height:100px;display:flex;flex-direction:column}.z-tbody-scrollbar{flex:1;height:100%}.z-empty-state,.z-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:100px;height:100%;color:var(--muted-foreground);font-size:.875rem;animation:z-fade-in .2s ease-out}.z-tbody-scrollbar,.z-tbody-scrollbar table{animation:z-fade-in .2s ease-out}@keyframes z-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.z-tbody-wrapper tr{transition:background-color .15s ease}.z-tbody-wrapper tr:hover,.z-tbody-wrapper tr:hover td[style*=sticky]{background-color:var(--muted)}.z-tbody-wrapper tr.z-pinned-top td.z-sticky-left,.z-tbody-wrapper tr.z-pinned-top td.z-sticky-right,.z-tbody-wrapper tr.z-pinned-bottom td.z-sticky-left,.z-tbody-wrapper tr.z-pinned-bottom td.z-sticky-right{z-index:3}.z-tbody-wrapper tr.z-shadow-bottom{box-shadow:0 1px 3px #00000014!important;position:relative;z-index:15}.z-tbody-wrapper tr.z-shadow-bottom:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d!important}.z-tbody-wrapper tr.z-shadow-top{box-shadow:0 -2px 4px #0000000d!important;position:relative;z-index:15}.z-tbody-wrapper tr.z-shadow-top:where(.dark,.dark *){box-shadow:0 -2px 4px #0003!important}.z-tbody-wrapper td{padding:8px 12px;height:40px;vertical-align:middle;color:var(--foreground);white-space:nowrap;overflow:hidden;background:var(--card);border-left:thin solid var(--border);border-bottom:thin solid var(--border);box-sizing:border-box}.z-tbody-wrapper tbody.z-has-vertical-scroll td.z-at-bottom,.z-tbody-wrapper tbody.z-last-row-touches-bottom td.z-at-bottom{border-bottom:none}.z-tbody-wrapper td.z-at-left-edge{border-left:none}.z-tbody-wrapper td i{color:var(--muted-foreground);font-style:italic}.z-tbody-wrapper td[rowspan]{vertical-align:top;padding-top:12px}.z-tbody-wrapper td.z-row-hover{background-color:var(--muted)!important}.z-tbody-wrapper td.z-col-select,.z-tbody-wrapper td.z-col-expand,.z-tbody-wrapper td.z-col-actions{padding:8px 4px!important;text-align:center}.z-tbody-wrapper tr.z-child-row td.z-col-select:first-child,.z-tbody-wrapper tr.z-child-row td.z-col-expand:first-child,.z-tbody-wrapper tr.z-child-row td.z-col-actions:first-child{padding-left:0!important}.z-virtual-scroll-inner{position:relative;width:100%}.z-virtual-row{position:absolute;top:0;left:0;width:100%}tr.z-child-row td:first-child{padding-left:12px!important}tbody tr.z-selected,tbody tr.z-selected td{background-color:color-mix(in srgb,var(--primary) 15%,transparent)!important}tbody tr.z-selected:hover,tbody tr.z-selected:hover td{background-color:color-mix(in srgb,var(--primary) 20%,transparent)!important}tbody tr.z-indeterminate-selected,tbody tr.z-indeterminate-selected td{background-color:color-mix(in srgb,var(--primary) 10%,transparent)!important}tbody tr.z-indeterminate-selected:hover,tbody tr.z-indeterminate-selected:hover td{background-color:color-mix(in srgb,var(--primary) 15%,transparent)!important}tbody tr.z-pinned-top td{background-color:var(--card)!important}tbody tr.z-pinned-top:hover{background-color:var(--muted)}tbody tr.z-pinned-top:hover td{background-color:var(--muted)!important}tbody tr.z-pinned-bottom td{background-color:var(--card)!important}tbody tr.z-pinned-bottom:hover{background-color:var(--muted)}tbody tr.z-pinned-bottom:hover td,tr.z-expanded-row td{background-color:var(--muted)!important}thead th{position:relative}thead th .z-resizer{position:absolute;right:0;top:0;height:100%;width:8px;background:transparent;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;z-index:5}thead th .z-resizer:after{content:\"\";position:absolute;right:0;top:0;height:100%;width:3px;background:#0000001a;opacity:0;transition:opacity .2s ease}thead th .z-resizer:after:where(.dark,.dark *){background:#ffffff1a}thead th .z-resizer:hover:after{opacity:1;background:var(--primary);width:3px}thead th .z-resizer.z-is-resizing:after{opacity:1;background:var(--primary);width:3px}thead th .z-resizer.z-resizer-left{right:auto;left:0}thead th .z-resizer.z-resizer-left:after{right:auto;left:0}.z-thead-wrapper th.z-sticky-left,.z-thead-wrapper th.z-sticky-right,.z-tbody-wrapper th.z-sticky-left,.z-tbody-wrapper th.z-sticky-right,.z-tfoot-wrapper th.z-sticky-left,.z-tfoot-wrapper th.z-sticky-right{background-color:var(--muted);z-index:1;transform:translateZ(0);backface-visibility:hidden}.z-thead-wrapper td.z-sticky-left,.z-thead-wrapper td.z-sticky-right,.z-tbody-wrapper td.z-sticky-left,.z-tbody-wrapper td.z-sticky-right,.z-tfoot-wrapper td.z-sticky-left,.z-tfoot-wrapper td.z-sticky-right{background-color:var(--card);z-index:1;transform:translateZ(0);backface-visibility:hidden}.z-thead-wrapper th.z-sticky-left-last,.z-thead-wrapper td.z-sticky-left-last,.z-tbody-wrapper th.z-sticky-left-last,.z-tbody-wrapper td.z-sticky-left-last,.z-tfoot-wrapper th.z-sticky-left-last,.z-tfoot-wrapper td.z-sticky-left-last{position:relative;overflow:visible}.z-thead-wrapper th.z-sticky-left-last:after,.z-thead-wrapper td.z-sticky-left-last:after,.z-tbody-wrapper th.z-sticky-left-last:after,.z-tbody-wrapper td.z-sticky-left-last:after,.z-tfoot-wrapper th.z-sticky-left-last:after,.z-tfoot-wrapper td.z-sticky-left-last:after{content:\"\";position:absolute;top:0;bottom:0;right:-30px;width:30px;pointer-events:none;box-shadow:inset 10px 0 8px -8px #0000001a;z-index:10;opacity:0;transition:opacity .2s ease}.z-thead-wrapper.z-scroll-left th.z-sticky-left-last:after,.z-thead-wrapper.z-scroll-left td.z-sticky-left-last:after,.z-tbody-wrapper.z-scroll-left th.z-sticky-left-last:after,.z-tbody-wrapper.z-scroll-left td.z-sticky-left-last:after,.z-tfoot-wrapper.z-scroll-left th.z-sticky-left-last:after,.z-tfoot-wrapper.z-scroll-left td.z-sticky-left-last:after{opacity:1}.z-thead-wrapper th.z-sticky-right-first,.z-thead-wrapper td.z-sticky-right-first,.z-tbody-wrapper th.z-sticky-right-first,.z-tbody-wrapper td.z-sticky-right-first,.z-tfoot-wrapper th.z-sticky-right-first,.z-tfoot-wrapper td.z-sticky-right-first{position:relative;overflow:visible}.z-thead-wrapper th.z-sticky-right-first:before,.z-thead-wrapper td.z-sticky-right-first:before,.z-tbody-wrapper th.z-sticky-right-first:before,.z-tbody-wrapper td.z-sticky-right-first:before,.z-tfoot-wrapper th.z-sticky-right-first:before,.z-tfoot-wrapper td.z-sticky-right-first:before{content:\"\";position:absolute;top:0;bottom:0;left:-30px;width:30px;pointer-events:none;box-shadow:inset -10px 0 8px -8px #0000001a;z-index:10;opacity:0;transition:opacity .2s ease}.z-thead-wrapper.z-scroll-right th.z-sticky-right-first,.z-thead-wrapper.z-scroll-right td.z-sticky-right-first,.z-tbody-wrapper.z-scroll-right th.z-sticky-right-first,.z-tbody-wrapper.z-scroll-right td.z-sticky-right-first,.z-tfoot-wrapper.z-scroll-right th.z-sticky-right-first,.z-tfoot-wrapper.z-scroll-right td.z-sticky-right-first{border-left:none}.z-thead-wrapper.z-scroll-right th.z-sticky-right-first:before,.z-thead-wrapper.z-scroll-right td.z-sticky-right-first:before,.z-tbody-wrapper.z-scroll-right th.z-sticky-right-first:before,.z-tbody-wrapper.z-scroll-right td.z-sticky-right-first:before,.z-tfoot-wrapper.z-scroll-right th.z-sticky-right-first:before,.z-tfoot-wrapper.z-scroll-right td.z-sticky-right-first:before{opacity:1}.z-thead-wrapper th.z-sticky-right-last,.z-tfoot-wrapper th.z-sticky-right-last{position:relative}.z-thead-wrapper th.z-sticky-right-last:after,.z-tfoot-wrapper th.z-sticky-right-last:after{content:\"\";position:absolute;top:0;bottom:0;right:-30px;width:30px;background:var(--muted);pointer-events:none}.z-tfoot-wrapper{flex-shrink:0;background:var(--muted);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.z-tfoot-wrapper::-webkit-scrollbar{display:none}.z-tfoot-wrapper th{height:auto;padding:8px 12px;text-align:left;vertical-align:middle;font-weight:500;font-size:12px;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.5px;background:var(--muted);border-left:thin solid var(--border);border-top:thin solid var(--border)}.z-tfoot-wrapper th.z-at-left-edge{border-left:none}.z-tfoot-wrapper.z-shadow-footer{box-shadow:0 -2px 4px #0000000d;position:relative;z-index:15}.z-tfoot-wrapper.z-shadow-footer:where(.dark,.dark *){box-shadow:0 -2px 4px #0003}.z-pin-btn{padding:2px 4px;border-radius:4px;color:var(--muted-foreground);transition:all .15s ease}.z-pin-btn:hover{background-color:var(--muted);color:var(--foreground)}.z-pin-btn.z-pin-btn-active{color:var(--primary);background-color:var(--primary)}.z-pin-btn.z-pin-btn-active:hover{background-color:var(--primary);opacity:.8}.z-row-pin-trigger{opacity:1}.z-row-pin-trigger.text-primary{color:var(--primary)}.z-header-pin-trigger{opacity:1}.z-header-pin-trigger.text-primary{color:var(--primary)}th{overflow:hidden}th .z-header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th .z-header-text-wrapper{transition:background-color .15s ease;border-radius:4px;min-width:0;overflow:hidden;flex-shrink:1}th .z-header-text-wrapper.z-has-options:hover{background-color:color-mix(in srgb,var(--foreground) 8%,transparent)}th .z-header-text-wrapper.z-has-options:active{background-color:color-mix(in srgb,var(--foreground) 12%,transparent)}.cdk-drag-preview,.z-drag-preview{box-shadow:0 5px 20px #0003;border-radius:6px;background-color:var(--card);border:1px solid var(--primary);z-index:10000!important;pointer-events:none}.cdk-drag-preview:where(.dark,.dark *),.z-drag-preview:where(.dark,.dark *){box-shadow:0 5px 20px #00000080}.cdk-drag-placeholder{background-color:color-mix(in srgb,var(--primary) 10%,transparent);border:2px dashed var(--primary);border-radius:6px}.cdk-drag-animating{transition:transform .1s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder){transition:transform .1s cubic-bezier(0,0,.2,1)}.z-drag-item.cdk-drag-dragging{transition:none!important}.z-column-drop-list{min-height:50px}:host-context(.dark) .z-thead-wrapper.z-scroll-left th.z-sticky-left-last,:host-context(.dark) .z-thead-wrapper.z-scroll-left td.z-sticky-left-last,:host-context(.dark) .z-tbody-wrapper.z-scroll-left th.z-sticky-left-last,:host-context(.dark) .z-tbody-wrapper.z-scroll-left td.z-sticky-left-last,:host-context(.dark) .z-tfoot-wrapper.z-scroll-left th.z-sticky-left-last,:host-context(.dark) .z-tfoot-wrapper.z-scroll-left td.z-sticky-left-last{border-right:1px solid var(--border)}:host-context(.dark) .z-thead-wrapper.z-scroll-right th.z-sticky-right-first,:host-context(.dark) .z-thead-wrapper.z-scroll-right td.z-sticky-right-first,:host-context(.dark) .z-tbody-wrapper.z-scroll-right th.z-sticky-right-first,:host-context(.dark) .z-tbody-wrapper.z-scroll-right td.z-sticky-right-first,:host-context(.dark) .z-tfoot-wrapper.z-scroll-right th.z-sticky-right-first,:host-context(.dark) .z-tfoot-wrapper.z-scroll-right td.z-sticky-right-first{border-left:1px solid var(--border)}.z-table-settings-drawer input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:1rem;height:1rem;border:thin solid var(--input);border-radius:.25rem;background-color:var(--background);cursor:pointer;position:relative;transition:all .2s ease}.z-table-settings-drawer input[type=checkbox]:hover{border-color:var(--primary)}.z-table-settings-drawer input[type=checkbox]:checked{background-color:var(--primary);border-color:var(--primary)}.z-table-settings-drawer input[type=checkbox]:checked:after{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:.375rem;height:.625rem;border:solid var(--primary-foreground);border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.z-table-settings-drawer input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ZCheckboxComponent, selector: "z-checkbox", inputs: ["class", "zType", "zSize", "zLabel", "zText", "zDisabled", "zIndeterminate", "zValue", "zOptions", "zOrientation", "zCheckAll", "zCheckAllText", "zChecked", "zGroupValue"], outputs: ["zCheckedChange", "zGroupValueChange", "zChange", "zGroupChange", "zControl"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest"], outputs: ["zOnSearch", "zOnChange", "zControl"], exportAs: ["zInput"] }, { kind: "component", type: ZLoadingComponent, selector: "z-loading", inputs: ["class", "zSpinner", "zSize", "zColor", "zText", "zOverlay", "zOverlayType", "zFullscreen", "zLoading"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "component", type: ZDrawerComponent, selector: "z-drawer", inputs: ["class", "zVisible", "zTitle", "zDescription", "zWidth", "zHeight", "zPlacement", "zClosable", "zMaskClosable", "zHideFooter", "zOkText", "zCancelText", "zOkDestructive", "zOkDisabled", "zLoading", "zOverlay", "zShadow", "zShape", "zContentLoading", "zSkeletonRows"], outputs: ["zOnOk", "zOnCancel", "zVisibleChange"], exportAs: ["zDrawer"] }, { kind: "component", type: ZPaginationComponent, selector: "z-pagination", inputs: ["zPageIndex", "zPageSize", "zTotal", "zPageSizeOptions", "zShowSizeChanger", "zShowQuickJumper", "zShowTotal", "zSimple", "zSize", "zDisabled", "zTotalLabel", "zPerPageLabel", "zGoToLabel"], outputs: ["zPageIndexChange", "zPageSizeChange", "zOnPageChange"] }, { kind: "component", type: ZTableFilterComponent, selector: "z-table-filter", inputs: ["zColumn", "zTable"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl"], exportAs: ["zPopover"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "directive", type: ZTableResizerDirective, selector: "[z-table-resizer],[zTableResizer]", inputs: ["zTableResizer"] }, { kind: "directive", type: ZTableRowHoverDirective, selector: "[z-table-row-hover], [zTableRowHover]", inputs: ["zTableRowHover"] }, { kind: "component", type: ZTableIconTextComponent, selector: "z-table-icon-text", inputs: ["zText", "zTooltip", "zTriggerElement"] }, { kind: "component", type: ZTableActionsComponent, selector: "z-table-actions", inputs: ["zConfig", "zRow", "zRowId", "zDropdownButtonSize"], outputs: ["zActionClick"] }, { kind: "pipe", type: ZTableIsTemplateRefPipe, name: "zTableIsTemplateRef" }, { kind: "pipe", type: ZTableHasIconPipe, name: "zTableHasIcon" }, { kind: "pipe", type: ZTableCellBottomPipe, name: "zTableCellBottom" }, { kind: "pipe", type: ZTableCellConfigPipe, name: "zTableCellConfig" }, { kind: "pipe", type: ZTableCellOffsetPipe, name: "zTableCellOffset" }, { kind: "pipe", type: ZTableColumnConfigPipe, name: "zTableColumnConfig" }, { kind: "pipe", type: ZTableColumnHeaderPipe, name: "zTableColumnHeader" }, { kind: "pipe", type: ZTableColumnParentsPipe, name: "zTableColumnParents" }, { kind: "pipe", type: ZTableFooterContentPipe, name: "zTableFooterContent" }, { kind: "pipe", type: ZTableHeaderPinPipe, name: "zTableHeaderPin" }, { kind: "pipe", type: ZTablePinningStylesPipe, name: "zTablePinningStyles" }, { kind: "pipe", type: ZTableRowPipe, name: "zTableRow" }, { kind: "pipe", type: ZTableSpanPipe, name: "zTableSpan" }, { kind: "pipe", type: ZTableFooterRenderPipe, name: "zTableFooterRender" }, { kind: "pipe", type: ZTableHeaderRenderPipe, name: "zTableHeaderRender" }, { kind: "pipe", type: ZTableBodyCellRenderPipe, name: "zTableBodyCellRender" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZTableComponent, isStandalone: true, selector: "z-table", inputs: { zConfig: { classPropertyName: "zConfig", publicName: "zConfig", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zKey: { classPropertyName: "zKey", publicName: "zKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zChange: "zChange", zControl: "zControl" }, host: { classAttribute: "z-table block relative py-1" }, providers: [TranslatePipe], viewQueries: [{ propertyName: "theadWrapper", first: true, predicate: ["theadWrapper"], descendants: true, isSignal: true }, { propertyName: "tbodyContainer", first: true, predicate: ["tbodyContainer"], descendants: true, isSignal: true }, { propertyName: "tbodyWrapper", first: true, predicate: ["tbodyWrapper"], descendants: true, isSignal: true }, { propertyName: "tbodyScrollbar", first: true, predicate: ["tbodyWrapper"], descendants: true, isSignal: true }, { propertyName: "tfootWrapper", first: true, predicate: ["tfootWrapper"], descendants: true, isSignal: true }, { propertyName: "expandedRowTemplate", first: true, predicate: ["expandedRowTemplate"], descendants: true, isSignal: true }], exportAs: ["zTable"], ngImport: i0, template: "<!-- Toolbar: Search & Settings -->\n@if (isSearchEnabled() || zConfig().enableSettings) {\n  <div class=\"z-table-toolbar mb-2 flex items-center justify-between gap-4\">\n    <!-- Search -->\n    @if (isSearchEnabled()) {\n      @let config = searchConfig();\n      <z-input\n        [class]=\"config?.width ?? 'w-64'\"\n        [zSize]=\"config?.size ?? 'sm'\"\n        [zPlaceholder]=\"config?.placeholder ?? 'i18n_z_ui_table_search' | translate\"\n        [zSearch]=\"true\"\n        [zDebounce]=\"config?.debounceTime ?? 300\"\n        (zOnSearch)=\"onSearchChange($event)\" />\n    } @else {\n      <div></div>\n    }\n\n    <!-- Settings Button -->\n    @if (zConfig().enableSettings) {\n      <z-button zType=\"outline\" zSize=\"sm\" zTypeIcon=\"lucideSettings\" (click)=\"openSettingsDrawer()\">\n        {{ 'i18n_z_ui_table_settings' | translate }}\n      </z-button>\n    }\n  </div>\n}\n\n<div\n  class=\"z-table-container shadow-xs\"\n  [class.z-hide-horizontal-border]=\"!showHorizontalBorder()\"\n  [class.z-hide-vertical-border]=\"!showVerticalBorder()\"\n  [style.max-height]=\"zConfig().maxHeight\"\n  [style.min-height]=\"zConfig().minHeight\">\n  <!-- Shared colgroup template -->\n  <ng-template #colGroupTpl>\n    <colgroup>\n      @for (column of orderedLeafColumns(); track column.id) {\n        @if (column.getIsVisible()) {\n          <col [style.width]=\"'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n      }\n    </colgroup>\n  </ng-template>\n\n  <!-- Header table -->\n  <div\n    class=\"z-thead-wrapper shadow-xs\"\n    [class.z-shadow-header]=\"shouldHeaderShowShadow()\"\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\"\n    #theadWrapper>\n    <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n      <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n      <thead>\n        @for (headerGroup of orderedHeaderGroups(); track headerGroup.id) {\n          <tr>\n            @for (header of headerGroup.headers; track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: headerGroup.headers : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [ngStyle]=\"header.column | zTablePinningStyles: header : 'header' : table : zConfig().columns : columnSizingInfo()\"\n                  [class]=\"\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass') +\n                    ' ' +\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass')\n                  \"\n                  [style]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\"\n                  [class.z-sticky-left]=\"header.column.getIsPinned() === 'left'\"\n                  [class.z-sticky-right]=\"header.column.getIsPinned() === 'right'\"\n                  [class.z-sticky-left-last]=\"header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns\"\n                  [class.z-sticky-right-first]=\"header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns\"\n                  [class.z-sticky-right-last]=\"header | zTableCellPin: 'isLastRightPinned' : zConfig().columns\"\n                  [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                  [class.z-col-select]=\"header.column.id === 'select'\"\n                  [class.z-col-expand]=\"header.column.id === 'expand'\"\n                  [class.z-col-actions]=\"\n                    header.column.id === 'actions' || header.column.id === actionColumnInfo()?.columnId\n                  \"\n                  [attr.rowspan]=\"rowSpan\"\n                  [attr.colspan]=\"header | zTableSpan: zConfig().columns : 'headerColSpan'\">\n                  @if (header.column.id === 'select') {\n                    <!-- Header Checkbox -->\n                    <div class=\"flex items-center justify-center\">\n                      <z-checkbox\n                        zSize=\"sm\"\n                        [zChecked]=\"table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\"\n                        (zChange)=\"table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <!-- Expand All Button -->\n                    <div class=\"flex items-center justify-center\">\n                      <button\n                        type=\"button\"\n                        (click)=\"table.toggleAllRowsExpanded()\"\n                        class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                        <z-icon\n                          zType=\"lucideChevronRight\"\n                          zSize=\"14\"\n                          class=\"transition-transform duration-200\"\n                          [class.rotate-90]=\"table.getIsSomeRowsExpanded()\" />\n                      </button>\n                    </div>\n                  } @else {\n                    <!-- Header Content with Sort and Pin -->\n                    <div\n                      class=\"flex w-full items-center gap-1\"\n                      [class.justify-center]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                        'text-center'\n                      \"\n                      [class.justify-end]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') === 'text-right'\n                      \">\n                      <!-- Column Options Popover Template -->\n                      @let columnEnableOrdering =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableOrdering';\n                      @let columnEnablePinning =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enablePinning';\n                      @let effectiveEnableOrdering = columnEnableOrdering || zConfig().enableColumnOrdering;\n                      @let effectiveEnablePinning = columnEnablePinning || zConfig().enableColumnPinning;\n                      <ng-template #colOptionsPopoverContent>\n                        <div class=\"flex flex-col gap-0.5 p-0.5\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_left' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isLastMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_right' | translate }}</span>\n                            </button>\n                          }\n                          @if (effectiveEnableOrdering && header.column.getCanPin() && effectiveEnablePinning) {\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                          }\n                          @if (header.column.getCanPin() && effectiveEnablePinning) {\n                            @if (header.column.getIsPinned() !== 'left') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'right') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned()) {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                        </div>\n                      </ng-template>\n\n                      <!-- Header Text with Popover Trigger -->\n                      @let hasColumnOptions =\n                        (header.column.getCanPin() && effectiveEnablePinning) || effectiveEnableOrdering;\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded px-1.5 py-1\"\n                        [class.cursor-pointer]=\"hasColumnOptions\"\n                        [class.z-has-options]=\"hasColumnOptions\"\n                        [attr.z-popover]=\"hasColumnOptions ? '' : null\"\n                        #colOptionsPopover=\"zPopover\"\n                        #headerTextWrapper\n                        z-popover\n                        [zPopoverContent]=\"hasColumnOptions ? colOptionsPopoverContent : null\"\n                        zTrigger=\"click\"\n                        zPosition=\"bottom\"\n                        [zOffset]=\"5\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \">\n                              <ng-container\n                                *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                            </div>\n                          } @else if (headerContent | zTableHasIcon) {\n                            <z-table-icon-text\n                              class=\"min-w-0 truncate\"\n                              [zText]=\"headerContent\"\n                              [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \" />\n                          } @else {\n                            <span\n                              class=\"z-table-cell-text\"\n                              z-tooltip\n                              [zContent]=\"\n                                (header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip') ||\n                                headerContent\n                              \"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [innerHTML]=\"headerContent | translate | zSafeHtml\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        <!-- Dropdown indicator when has options (between text and sort icon) -->\n                        @if (hasColumnOptions) {\n                          <z-icon\n                            zType=\"lucideChevronDown\"\n                            zSize=\"12\"\n                            class=\"text-muted-foreground shrink-0 opacity-50\" />\n                        }\n                      </div>\n                      <!-- Sort Icon (outside wrapper, no hover background) -->\n                      @if (header.column.getCanSort() && !hasBodyRowSpan()) {\n                        <span\n                          class=\"z-sort-icon shrink-0 cursor-pointer text-gray-500 hover:text-gray-700\"\n                          (click)=\"handleSort($event, header.column.getToggleSortingHandler())\">\n                          @if (header.column.getIsSorted() === 'asc') {\n                            <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                          } @else if (header.column.getIsSorted() === 'desc') {\n                            <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                          } @else {\n                            <z-icon zType=\"lucideArrowDownUp\" zSize=\"12\" class=\"opacity-30\" />\n                          }\n                        </span>\n                      }\n                    </div>\n                  }\n                  <!-- Column Filter -->\n                  @if (header.column.getCanFilter() && hasFiltering()) {\n                    <div class=\"mt-1\">\n                      <z-table-filter [zColumn]=\"$any(header.column)\" [zTable]=\"$any(table)\" />\n                    </div>\n                  }\n                  <!-- Column Resizer -->\n                  @if (\n                    header.column.id !== 'select' &&\n                    header.column.id !== 'expand' &&\n                    zConfig().enableColumnResizing !== false\n                  ) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"\n                        header.column.getIsPinned() === 'right' || header.column.getIsLastColumn()\n                      \"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n          </tr>\n        }\n      </thead>\n    </table>\n  </div>\n\n  <!-- Body table -->\n  <div\n    class=\"z-tbody-wrapper relative\"\n    #tbodyContainer\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\">\n    @if (zLoading() || isProcessing()) {\n      <!-- Loading State -->\n      @if (zConfig().useSkeleton) {\n        <!-- Skeleton Loading -->\n        <div class=\"animate-in fade-in flex h-full flex-col duration-200\">\n          @for (i of skeletonRows(); track $index; let last = $last) {\n            <div\n              class=\"border-border box-border flex flex-1 flex-col items-start justify-center gap-1.5 px-2\"\n              [class.border-b]=\"!last\">\n              <z-skeleton zType=\"bar\" zWidth=\"100%\" zHeight=\"22px\" zRadius=\"4px\" />\n              <z-skeleton zType=\"bar\" zWidth=\"50%\" zHeight=\"14px\" zRadius=\"4px\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <!-- Spinner Loading -->\n        <div class=\"z-loading-state\">\n          <z-loading [zLoading]=\"true\" zSize=\"lg\" [zText]=\"'i18n_z_ui_table_loading' | translate\" />\n        </div>\n      }\n    } @else if (isEmpty()) {\n      <div class=\"z-empty-state\">\n        @if (isNoSearchResults()) {\n          <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"'i18n_z_ui_table_no_results' | translate\" />\n        } @else {\n          <z-empty zIcon=\"lucidePackageOpen\" zSize=\"sm\" [zMessage]=\"'i18n_z_ui_table_no_data' | translate\" />\n        }\n      </div>\n    } @else {\n      <ng-scrollbar class=\"z-tbody-scrollbar\" #tbodyWrapper track=\"all\" (scroll)=\"onTbodyScroll($event)\">\n        @if (isVirtual()) {\n          <!-- Virtual Scroll Mode -->\n          <div\n            class=\"z-virtual-scroll-inner\"\n            [style.height.px]=\"virtualizer.getTotalSize()\"\n            [style.min-width.px]=\"table.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let groupRows = dynamicGroupRows()[virtualItem.index] || [];\n              <div\n                class=\"z-virtual-row\"\n                [style.height.px]=\"dynamicGroupHeights()[virtualItem.index] ?? groupSize() * virtualRowHeight()\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\">\n                <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n                  <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n                  <tbody\n                    [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n                    [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n                    @for (row of groupRows; track row.id) {\n                      <tr\n                        z-table-row-hover\n                        [style.height.px]=\"virtualRowHeight()\"\n                        [class.z-child-row]=\"row.depth > 0\"\n                        [class.z-selected]=\"row.getIsSelected()\"\n                        [class.z-indeterminate-selected]=\"row.getIsSomeSelected() && !row.getIsSelected()\">\n                        @for (cell of row.getVisibleCells(); track cell.id) {\n                          @let shouldRenderRowSpan =\n                            cell | zTableSpan: zConfig().columns : 'shouldRender' : table.getRowModel().rows;\n                          @let shouldRenderColSpan =\n                            cell | zTableCellRender: row.getVisibleCells() : zConfig().columns : 'body';\n                          @if (shouldRenderRowSpan && shouldRenderColSpan) {\n                            <td\n                              [ngStyle]=\"\n                                cell.column\n                                  | zTablePinningStyles: cell : 'body' : row.getVisibleCells() : zConfig().columns : columnSizingInfo()\n                              \"\n                              [class.z-sticky-left]=\"cell.column.getIsPinned() === 'left'\"\n                              [class.z-sticky-right]=\"cell.column.getIsPinned() === 'right'\"\n                              [class.z-sticky-left-last]=\"\n                                cell.column.getIsPinned() === 'left' && cell.column.getIsLastColumn('left')\n                              \"\n                              [class.z-sticky-right-first]=\"\n                                cell.column.getIsPinned() === 'right' && cell.column.getIsFirstColumn('right')\n                              \"\n                              [class.z-sticky-right-last]=\"\n                                cell.column.getIsPinned() === 'right' && cell.column.getIsLastColumn('right')\n                              \"\n                              [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                              [class.z-col-select]=\"cell.column.id === 'select'\"\n                              [class.z-col-expand]=\"cell.column.id === 'expand'\"\n                              [class.z-col-actions]=\"cell.column.id === actionColumnInfo()?.columnId\"\n                              [class.z-at-bottom]=\"\n                                cell | zTableCellBottom: zConfig().columns : table.getRowModel().rows\n                              \"\n                              [attr.rowspan]=\"\n                                cell | zTableSpan: zConfig().columns : 'cellRowSpan' : table.getRowModel().rows\n                              \"\n                              [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan'\"\n                              [class]=\"cell | zTableCellConfig: zConfig().columns : 'cellClass'\"\n                              [style]=\"cell | zTableCellConfig: zConfig().columns : 'cellStyle'\">\n                              @if (cell.column.id === 'select') {\n                                <!-- Row Checkbox -->\n                                <div class=\"flex items-center justify-center\">\n                                  <z-checkbox\n                                    zSize=\"sm\"\n                                    [zChecked]=\"cell.row.getIsSelected()\"\n                                    [zIndeterminate]=\"cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\"\n                                    [zDisabled]=\"!cell.row.getCanSelect()\"\n                                    (zChange)=\"cell.row.toggleSelected()\" />\n                                </div>\n                              } @else if (cell.column.id === 'expand') {\n                                <!-- Expand Button -->\n                                <div class=\"flex items-center justify-center\">\n                                  @if (cell.row.subRows && cell.row.subRows.length > 0) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.toggleExpanded()\"\n                                      class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                                      <z-icon\n                                        zType=\"lucideChevronRight\"\n                                        zSize=\"14\"\n                                        class=\"transition-transform duration-200\"\n                                        [class.rotate-90]=\"cell.row.getIsExpanded()\" />\n                                    </button>\n                                  }\n                                </div>\n                              } @else if (cell.column.id === actionColumnInfo()?.columnId && actionColumnInfo()) {\n                                <z-table-actions\n                                  [zConfig]=\"$any(actionColumnInfo()!.config)\"\n                                  [zRow]=\"cell.row.original\"\n                                  [zRowId]=\"cell.row.id\"\n                                  (zActionClick)=\"onActionClick($event)\" />\n                              } @else {\n                                <ng-container\n                                  *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellContent\">\n                                  @if (cellContent | zTableIsTemplateRef) {\n                                    <!-- TemplateRef rendering -->\n                                    <div\n                                      [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                      [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\">\n                                      <ng-container\n                                        *ngTemplateOutlet=\"cellContent; context: { $implicit: cell.getContext() }\" />\n                                    </div>\n                                  } @else if (cellContent | zTableHasIcon) {\n                                    <!-- Icon syntax rendering -->\n                                    <z-table-icon-text\n                                      [zText]=\"cellContent\"\n                                      [zTooltip]=\"cell | zTableCellConfig: zConfig().columns : 'contentTooltip'\"\n                                      [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                      [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\" />\n                                  } @else {\n                                    <!-- Default/innerHTML rendering -->\n                                    <div\n                                      class=\"z-table-cell-text\"\n                                      z-tooltip\n                                      [zContent]=\"\n                                        (cell | zTableCellConfig: zConfig().columns : 'contentTooltip') || cellContent\n                                      \"\n                                      [innerHTML]=\"cellContent | translate | zSafeHtml\"\n                                      [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                      [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"></div>\n                                  }\n                                </ng-container>\n                              }\n                            </td>\n                          }\n                        }\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Normal Scroll Mode -->\n          <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n            <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n            <tbody\n              [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n              [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n              <!-- Row Template -->\n              <ng-template #rowTemplate let-row>\n                <tr\n                  z-table-row-hover\n                  [attr.data-row-id]=\"row.id\"\n                  [ngStyle]=\"row | zTableRow: table : 'pinningStyles' : virtualRowHeight()\"\n                  [class.z-child-row]=\"row.depth > 0\"\n                  [class.z-selected]=\"row.getIsSelected()\"\n                  [class.z-indeterminate-selected]=\"row.getIsSomeSelected() && !row.getIsSelected()\"\n                  [class.z-pinned-top]=\"row.getIsPinned() === 'top'\"\n                  [class.z-pinned-bottom]=\"row.getIsPinned() === 'bottom'\"\n                  [class.z-shadow-bottom]=\"\n                    showHeaderFooterShadow() &&\n                    row.getIsPinned() === 'top' &&\n                    (row | zTableRow: table : 'isLastTopPinned')\n                  \"\n                  [class.z-shadow-top]=\"\n                    showHeaderFooterShadow() &&\n                    row.getIsPinned() === 'bottom' &&\n                    (row | zTableRow: table : 'isFirstBottomPinned')\n                  \"\n                  [attr.data-depth]=\"row.depth\">\n                  @for (cell of row.getVisibleCells(); track cell.id) {\n                    @let shouldRenderRowSpan =\n                      cell | zTableSpan: zConfig().columns : 'shouldRender' : table.getRowModel().rows;\n                    @let shouldRenderColSpan = cell | zTableCellRender: row.getVisibleCells() : zConfig().columns : 'body';\n                    @if (shouldRenderRowSpan && shouldRenderColSpan) {\n                      <td\n                        [ngStyle]=\"\n                          cell.column | zTablePinningStyles: cell : 'body' : row.getVisibleCells() : zConfig().columns : columnSizingInfo()\n                        \"\n                        [class]=\"cell | zTableCellConfig: zConfig().columns : 'cellClass'\"\n                        [style]=\"cell | zTableCellConfig: zConfig().columns : 'cellStyle'\"\n                        [class.z-sticky-left]=\"cell.column.getIsPinned() === 'left'\"\n                        [class.z-sticky-right]=\"cell.column.getIsPinned() === 'right'\"\n                        [class.z-sticky-left-last]=\"\n                          cell.column.getIsPinned() === 'left' && cell.column.getIsLastColumn('left')\n                        \"\n                        [class.z-sticky-right-first]=\"\n                          cell.column.getIsPinned() === 'right' && cell.column.getIsFirstColumn('right')\n                        \"\n                        [class.z-sticky-right-last]=\"\n                          cell.column.getIsPinned() === 'right' && cell.column.getIsLastColumn('right')\n                        \"\n                        [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                        [class.z-col-select]=\"cell.column.id === 'select'\"\n                        [class.z-col-expand]=\"cell.column.id === 'expand'\"\n                        [class.z-col-actions]=\"\n                          cell.column.id === 'actions' || cell.column.id === actionColumnInfo()?.columnId\n                        \"\n                        [class.z-at-bottom]=\"cell | zTableCellBottom: zConfig().columns : table.getRowModel().rows\"\n                        [attr.rowspan]=\"cell | zTableSpan: zConfig().columns : 'cellRowSpan' : table.getRowModel().rows\"\n                        [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan'\">\n                        @if (cell.column.id === 'select') {\n                          <!-- Row Checkbox with Pin Button -->\n                          <div class=\"flex items-center justify-center gap-1\">\n                            <z-checkbox\n                              zSize=\"sm\"\n                              [zChecked]=\"cell.row.getIsSelected()\"\n                              [zIndeterminate]=\"cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\"\n                              [zDisabled]=\"!cell.row.getCanSelect()\"\n                              (zChange)=\"cell.row.toggleSelected()\" />\n                            @if (zConfig().enableRowPinning && cell.row.depth === 0 && !hasBodyRowSpan()) {\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            }\n                          </div>\n                        } @else if (cell.column.id === 'expand') {\n                          <!-- Expand Button with Row Pin Popover -->\n                          <div class=\"flex items-center justify-center gap-1\">\n                            @if (cell.row.subRows && cell.row.subRows.length > 0) {\n                              <button\n                                type=\"button\"\n                                (click)=\"cell.row.toggleExpanded()\"\n                                class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                                <z-icon\n                                  zType=\"lucideChevronRight\"\n                                  zSize=\"14\"\n                                  class=\"transition-transform duration-200\"\n                                  [class.rotate-90]=\"cell.row.getIsExpanded()\" />\n                              </button>\n                            }\n                            @if (\n                              zConfig().enableRowPinning &&\n                              cell.row.depth === 0 &&\n                              !(cell.row.subRows && cell.row.subRows.length > 0) &&\n                              !hasBodyRowSpan()\n                            ) {\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            }\n                          </div>\n                        } @else if (cell.column.id === 'actions') {\n                          <!-- Actions Column - Row Pin Only (for parent rows) -->\n                          @if (cell.row.depth === 0 && !hasBodyRowSpan()) {\n                            <div class=\"flex items-center justify-center\">\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            </div>\n                          }\n                        } @else if (cell.column.id === actionColumnInfo()?.columnId && actionColumnInfo()) {\n                          <z-table-actions\n                            [zConfig]=\"$any(actionColumnInfo()!.config)\"\n                            [zRow]=\"cell.row.original\"\n                            [zRowId]=\"cell.row.id\"\n                            (zActionClick)=\"onActionClick($event)\" />\n                        } @else {\n                          <ng-container\n                            *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellContent\">\n                            @if (cellContent | zTableIsTemplateRef) {\n                              <!-- TemplateRef rendering -->\n                              <div\n                                [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\">\n                                <ng-container\n                                  *ngTemplateOutlet=\"cellContent; context: { $implicit: cell.getContext() }\" />\n                              </div>\n                            } @else if (cellContent | zTableHasIcon) {\n                              <!-- Icon syntax rendering -->\n                              <z-table-icon-text\n                                [zText]=\"cellContent\"\n                                [zTooltip]=\"cell | zTableCellConfig: zConfig().columns : 'contentTooltip'\"\n                                [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\" />\n                            } @else {\n                              <!-- Default/innerHTML rendering -->\n                              <div\n                                class=\"z-table-cell-text\"\n                                z-tooltip\n                                [zContent]=\"\n                                  (cell | zTableCellConfig: zConfig().columns : 'contentTooltip') || cellContent\n                                \"\n                                [innerHTML]=\"cellContent | translate | zSafeHtml\"\n                                [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"></div>\n                            }\n                          </ng-container>\n                        }\n                      </td>\n                    }\n                  }\n                </tr>\n\n                <!-- Expanded Row Detail -->\n                @if (row.getIsExpanded() && row.depth === 0 && !row.subRows?.length && zConfig().expandedRowTemplate) {\n                  <tr class=\"z-expanded-row\">\n                    <td [attr.colspan]=\"row.getVisibleCells().length\" class=\"p-0\">\n                      <ng-container *ngTemplateOutlet=\"zConfig().expandedRowTemplate!; context: { $implicit: row }\" />\n                    </td>\n                  </tr>\n                }\n              </ng-template>\n\n              <!-- Render Top Pinned Rows (hidden when filtered data is empty) -->\n              @if (!isEmpty()) {\n                @for (row of table.getTopRows(); track row.id) {\n                  <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n                }\n              }\n\n              <!-- Render Center Rows -->\n              @for (row of table.getCenterRows(); track row.id) {\n                <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n              }\n\n              <!-- Render Bottom Pinned Rows (hidden when filtered data is empty) -->\n              @if (!isEmpty()) {\n                @for (row of bottomRowsReversed(); track row.id) {\n                  <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n                }\n              }\n            </tbody>\n          </table>\n        }\n      </ng-scrollbar>\n    }\n    <!-- end @else -->\n  </div>\n\n  <!-- Footer table -->\n  @if (hasFooter()) {\n    <div\n      class=\"z-tfoot-wrapper\"\n      [class.z-shadow-footer]=\"shouldFooterShowShadow()\"\n      [class.z-scroll-left]=\"hasScrollLeft()\"\n      [class.z-scroll-right]=\"hasScrollRight()\"\n      #tfootWrapper>\n      <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n        <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n        <tfoot>\n          @for (footerGroup of orderedFooterGroups(); track footerGroup.id) {\n            @if (footerGroup | zTableFooterContent: zConfig().columns) {\n              <tr>\n                @for (footer of footerGroup.headers; track footer.id) {\n                  @let rowSpan = footer | zTableSpan: zConfig().columns : 'footerRowSpan';\n                  @let shouldRender = footer | zTableCellRender: footerGroup.headers : zConfig().columns : 'footer';\n                  @if (rowSpan && shouldRender) {\n                    <th\n                      [ngStyle]=\"footer.column | zTablePinningStyles: footer : 'footer' : table : zConfig().columns : columnSizingInfo()\"\n                      [class]=\"\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerClass') +\n                        ' ' +\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass')\n                      \"\n                      [style]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerStyle'\"\n                      [class.z-sticky-left]=\"footer.column.getIsPinned() === 'left'\"\n                      [class.z-sticky-right]=\"footer.column.getIsPinned() === 'right'\"\n                      [class.z-sticky-left-last]=\"\n                        footer | zTableCellPin: 'isLastLeftPinned' : zConfig().columns : 'footer'\n                      \"\n                      [class.z-sticky-right-first]=\"\n                        footer | zTableCellPin: 'isFirstRightPinned' : zConfig().columns : 'footer'\n                      \"\n                      [class.z-sticky-right-last]=\"\n                        footer | zTableCellPin: 'isLastRightPinned' : zConfig().columns : 'footer'\n                      \"\n                      [class.z-at-left-edge]=\"footer | zTableCellOffset: orderedLeafColumns()\"\n                      [attr.rowspan]=\"rowSpan\"\n                      [attr.colspan]=\"footer | zTableSpan: zConfig().columns : 'footerColSpan'\">\n                      @let configFooterContent =\n                        footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContent';\n                      @if (footer.column.columnDef.footer) {\n                        <ng-container\n                          *flexRender=\"footer.column.columnDef.footer; props: footer.getContext(); let footerContent\">\n                          <div\n                            class=\"flex w-full items-center\"\n                            [class.justify-center]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                              'text-center'\n                            \"\n                            [class.justify-end]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                              'text-right'\n                            \">\n                            @if (footerContent | zTableIsTemplateRef) {\n                              <!-- TemplateRef rendering -->\n                              <div\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \">\n                                <ng-container\n                                  *ngTemplateOutlet=\"footerContent; context: { $implicit: footer.getContext() }\" />\n                              </div>\n                            } @else if (footerContent | zTableHasIcon) {\n                              <!-- Icon syntax rendering -->\n                              <z-table-icon-text\n                                [zText]=\"footerContent\"\n                                [zTooltip]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip'\"\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \" />\n                            } @else {\n                              <!-- Default/string rendering -->\n                              <span\n                                class=\"z-table-cell-text\"\n                                z-tooltip\n                                [zContent]=\"\n                                  (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip') ||\n                                  footerContent\n                                \"\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \">\n                                {{ footerContent | translate }}\n                              </span>\n                            }\n                          </div>\n                        </ng-container>\n                      } @else if (configFooterContent) {\n                        <!-- Fallback for group columns without TanStack footer -->\n                        <div\n                          class=\"flex w-full items-center\"\n                          [class.justify-center]=\"\n                            (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                            'text-center'\n                          \"\n                          [class.justify-end]=\"\n                            (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                            'text-right'\n                          \">\n                          <span\n                            class=\"z-table-cell-text\"\n                            z-tooltip\n                            [zContent]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip') ||\n                              $any(configFooterContent)\n                            \"\n                            [ngClass]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\"\n                            [ngStyle]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\">\n                            {{ $any(configFooterContent) | translate }}\n                          </span>\n                        </div>\n                      }\n                    </th>\n                  }\n                }\n              </tr>\n            }\n          }\n        </tfoot>\n      </table>\n    </div>\n  }\n</div>\n\n<!-- Pagination -->\n@if (zConfig().enablePagination && zConfig().pagination?.enabled !== false) {\n  @let totalRows = table.getFilteredRowModel().rows.length;\n  <div class=\"mt-4 flex items-center justify-between gap-4\">\n    <div class=\"text-sm text-gray-500\">\n      {{\n        ('i18n_z_ui_table_total_rows' | translate).replace(\n          '{total}',\n          zConfig().totalCount?.toString() || totalRows.toString()\n        )\n      }}\n    </div>\n    <z-pagination\n      [zTotal]=\"zConfig().totalCount ?? totalRows\"\n      [(zPageIndex)]=\"pagination().pageIndex\"\n      [(zPageSize)]=\"pagination().pageSize\"\n      [zPageSizeOptions]=\"zConfig().pagination?.pageSizeOptions ?? [10, 20, 50, 100]\"\n      [zShowSizeChanger]=\"zConfig().pagination?.showSizeChanger ?? true\"\n      [zShowQuickJumper]=\"zConfig().pagination?.showQuickJumper ?? false\"\n      [zShowTotal]=\"false\"\n      [zDisabled]=\"zConfig().pagination?.disabled || zLoading() || isProcessing()\"\n      (zOnPageChange)=\"onPageChange($event)\" />\n  </div>\n}\n\n<!-- Settings Drawer -->\n<z-drawer\n  [(zVisible)]=\"showSettingsDrawer\"\n  [zTitle]=\"'i18n_z_ui_table_settings_title' | translate\"\n  zPlacement=\"right\"\n  zWidth=\"500px\"\n  [zShadow]=\"true\"\n  [zOkText]=\"null\"\n  [zCancelText]=\"'i18n_z_ui_drawer_close' | translate\">\n  <div class=\"z-table-settings-drawer px-4\">\n    <!-- Display Settings -->\n    <div class=\"mb-4\">\n      <h4 class=\"text-foreground mb-2 text-sm font-semibold\">{{ 'i18n_z_ui_table_display_settings' | translate }}</h4>\n      <p class=\"text-muted-foreground mb-3 text-xs\">{{ 'i18n_z_ui_table_display_settings_desc' | translate }}</p>\n      <div class=\"grid grid-cols-2 gap-x-4 gap-y-3\">\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showHorizontalBorder()\"\n          [zText]=\"'i18n_z_ui_table_horizontal_border' | translate\"\n          (zChange)=\"showHorizontalBorder.set(!showHorizontalBorder())\" />\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showVerticalBorder()\"\n          [zText]=\"'i18n_z_ui_table_vertical_border' | translate\"\n          (zChange)=\"showVerticalBorder.set(!showVerticalBorder())\" />\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showHeaderFooterShadow()\"\n          [zText]=\"'i18n_z_ui_table_header_footer_shadow' | translate\"\n          (zChange)=\"showHeaderFooterShadow.set(!showHeaderFooterShadow())\" />\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-border my-4 border-t\"></div>\n\n    <!-- Unified Column Settings -->\n    @if (zConfig().enableSettings) {\n      <div class=\"mb-4\">\n        <h4 class=\"text-foreground mb-2 text-sm font-semibold\">{{ 'i18n_z_ui_table_column_settings' | translate }}</h4>\n        <p class=\"text-muted-foreground mb-3 text-xs\">{{ 'i18n_z_ui_table_column_settings_desc' | translate }}</p>\n\n        <!-- Unpinned Columns (Draggable) -->\n        <div\n          cdkDropList\n          #columnDropList=\"cdkDropList\"\n          (cdkDropListDropped)=\"onPendingColumnDrop($event)\"\n          class=\"z-column-drop-list space-y-1.5\">\n          @for (columnId of columnOrder(); track columnId; let i = $index) {\n            @if (columnId !== 'expand' && columnId !== 'select') {\n              @let column = table.getColumn(columnId);\n              @let isPinned = column?.getIsPinned();\n              @let isVisible = columnVisibility()[columnId] !== false;\n              @let canPin = column?.getCanPin() !== false && zConfig().enableColumnPinning;\n              @if (!isPinned) {\n                <div\n                  cdkDrag\n                  [cdkDragData]=\"columnId\"\n                  cdkDragLockAxis=\"y\"\n                  cdkDragBoundary=\".z-column-drop-list\"\n                  cdkDragPreviewClass=\"z-drag-preview\"\n                  class=\"z-drag-item border-border bg-card hover:border-primary flex cursor-grab items-center gap-2 rounded border px-2 py-1.5 text-sm active:cursor-grabbing\"\n                  [class.opacity-60]=\"!isVisible\">\n                  <!-- Drag Handle -->\n                  <z-icon\n                    cdkDragHandle\n                    zType=\"lucideGripVertical\"\n                    zSize=\"14\"\n                    class=\"text-muted-foreground shrink-0 cursor-grab active:cursor-grabbing\" />\n\n                  <!-- Visibility Checkbox -->\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isVisible\"\n                    (change)=\"onToggleColumnVisibility(columnId)\"\n                    (mousedown)=\"$event.stopPropagation()\"\n                    class=\"border-input h-4 w-4 shrink-0 cursor-pointer rounded\" />\n\n                  <!-- Column Name -->\n                  <span class=\"flex min-w-0 flex-1 flex-col\">\n                    <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                      {{ columnId | zTableColumnHeader: zConfig().columns | translate }}\n                    </span>\n                    @let parents = columnId | zTableColumnParents: zConfig().columns;\n                    @if (parents) {\n                      <span class=\"text-muted-foreground truncate text-[10px]\">({{ parents | translate }})</span>\n                    }\n                  </span>\n\n                  <!-- Pin Buttons -->\n                  @if (canPin) {\n                    <div class=\"flex shrink-0 items-center gap-0.5\" (mousedown)=\"$event.stopPropagation()\">\n                      <button\n                        type=\"button\"\n                        [disabled]=\"!isVisible\"\n                        (click)=\"onToggleColumnPin(columnId, 'left')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                        title=\"Pin Left\">\n                        <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                      </button>\n                      <button\n                        type=\"button\"\n                        [disabled]=\"!isVisible\"\n                        (click)=\"onToggleColumnPin(columnId, 'right')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                        title=\"Pin Right\">\n                        <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                      </button>\n                    </div>\n                  }\n                </div>\n              }\n            }\n          }\n        </div>\n\n        <!-- Pinned Columns Section -->\n        @if (zConfig().enableColumnPinning) {\n          @if (pinnedColumnIds().length > 0) {\n            <div class=\"border-border mt-4 border-t pt-4\">\n              <h5 class=\"text-muted-foreground mb-2 text-xs font-medium\">\n                {{ 'i18n_z_ui_table_pinned_columns' | translate }}\n              </h5>\n              <div class=\"space-y-1.5\">\n                @for (columnId of pinnedColumnIds(); track columnId) {\n                  @let column = table.getColumn(columnId);\n                  @let isPinned = column?.getIsPinned();\n                  @let isVisible = columnVisibility()[columnId] !== false;\n                  <div\n                    class=\"border-border bg-muted/30 flex items-center gap-2 rounded border px-2 py-1.5 text-sm\"\n                    [class.opacity-60]=\"!isVisible\">\n                    <!-- Pin Icon -->\n                    <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"text-primary shrink-0\" />\n\n                    <!-- Visibility Checkbox -->\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"isVisible\"\n                      (change)=\"onToggleColumnVisibility(columnId)\"\n                      class=\"border-input h-4 w-4 shrink-0 cursor-pointer rounded\" />\n\n                    <!-- Column Name -->\n                    <span class=\"flex min-w-0 flex-1 flex-col\">\n                      <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                        {{ columnId | zTableColumnHeader: zConfig().columns | translate }}\n                      </span>\n                      @let pinnedParents = columnId | zTableColumnParents: zConfig().columns;\n                      @if (pinnedParents) {\n                        <span class=\"text-muted-foreground truncate text-[10px]\">\n                          ({{ pinnedParents | translate }})\n                        </span>\n                      }\n                    </span>\n\n                    <!-- Position Badge -->\n                    <span class=\"bg-primary/10 text-primary shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium\">\n                      {{\n                        isPinned === 'left'\n                          ? ('i18n_z_ui_table_left' | translate)\n                          : ('i18n_z_ui_table_right' | translate)\n                      }}\n                    </span>\n\n                    <!-- Unpin Button -->\n                    <button\n                      type=\"button\"\n                      (click)=\"onToggleColumnPin(columnId, isPinned === 'left' ? 'left' : 'right')\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground cursor-pointer rounded p-1 text-xs transition-colors\"\n                      title=\"Unpin\">\n                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        }\n      </div>\n    }\n  </div>\n</z-drawer>\n", styles: [":host{display:flex;flex-direction:column;height:100%;--scrollbar-track-thickness: 7px;--scrollbar-track-color: transparent;--scrollbar-thumb-shape: 3px}.z-table-container{display:flex;flex-direction:column;position:relative;width:100%;height:100%;overflow:hidden;border-radius:8px;border:thin solid var(--border);background-color:var(--card)}.z-table-container.z-hide-horizontal-border th,.z-table-container.z-hide-horizontal-border td{border-bottom:none!important;border-top:none!important}.z-table-container.z-hide-vertical-border th,.z-table-container.z-hide-vertical-border td{border-left:none!important}table{width:fit-content;min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:14px}.z-table-toolbar .z-settings-btn{transition:all .15s ease}.z-table-toolbar .z-settings-btn:hover{border-color:var(--muted-foreground)}.z-table-cell-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;-webkit-user-select:text;user-select:text}.z-thead-wrapper{flex-shrink:0;background:var(--muted);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.z-thead-wrapper::-webkit-scrollbar{display:none}.z-thead-wrapper th{height:auto;padding:8px 12px;text-align:left;vertical-align:middle;font-weight:500;color:var(--foreground);white-space:nowrap;overflow:hidden;background:var(--muted);border-left:thin solid var(--border);border-bottom:thin solid var(--border);-webkit-user-select:none;user-select:none}.z-thead-wrapper th.z-at-left-edge{border-left:none}.z-thead-wrapper th[colspan]{text-align:center;background:var(--muted);font-weight:500;color:var(--foreground)}.z-thead-wrapper.z-shadow-header{box-shadow:0 1px 3px #00000014;position:relative;z-index:15}.z-thead-wrapper.z-shadow-header:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d}.z-tbody-wrapper{flex:1;min-height:100px;display:flex;flex-direction:column}.z-tbody-scrollbar{flex:1;height:100%}.z-empty-state,.z-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:100px;height:100%;color:var(--muted-foreground);font-size:.875rem;animation:z-fade-in .2s ease-out}.z-tbody-scrollbar,.z-tbody-scrollbar table{animation:z-fade-in .2s ease-out}@keyframes z-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.z-tbody-wrapper tr{transition:background-color .15s ease}.z-tbody-wrapper tr:hover,.z-tbody-wrapper tr:hover td[style*=sticky]{background-color:var(--muted)}.z-tbody-wrapper tr.z-pinned-top td.z-sticky-left,.z-tbody-wrapper tr.z-pinned-top td.z-sticky-right,.z-tbody-wrapper tr.z-pinned-bottom td.z-sticky-left,.z-tbody-wrapper tr.z-pinned-bottom td.z-sticky-right{z-index:3}.z-tbody-wrapper tr.z-shadow-bottom{box-shadow:0 1px 3px #00000014!important;position:relative;z-index:15}.z-tbody-wrapper tr.z-shadow-bottom:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d!important}.z-tbody-wrapper tr.z-shadow-top{box-shadow:0 -2px 4px #0000000d!important;position:relative;z-index:15}.z-tbody-wrapper tr.z-shadow-top:where(.dark,.dark *){box-shadow:0 -2px 4px #0003!important}.z-tbody-wrapper td{padding:8px 12px;height:40px;vertical-align:middle;color:var(--foreground);white-space:nowrap;overflow:hidden;background:var(--card);border-left:thin solid var(--border);border-bottom:thin solid var(--border);box-sizing:border-box}.z-tbody-wrapper tbody.z-has-vertical-scroll td.z-at-bottom,.z-tbody-wrapper tbody.z-last-row-touches-bottom td.z-at-bottom{border-bottom:none}.z-tbody-wrapper td.z-at-left-edge{border-left:none}.z-tbody-wrapper td i{color:var(--muted-foreground);font-style:italic}.z-tbody-wrapper td[rowspan]{vertical-align:top;padding-top:12px}.z-tbody-wrapper td.z-row-hover{background-color:var(--muted)!important}.z-tbody-wrapper td.z-col-select,.z-tbody-wrapper td.z-col-expand,.z-tbody-wrapper td.z-col-actions{padding:8px 4px!important;text-align:center}.z-tbody-wrapper tr.z-child-row td.z-col-select:first-child,.z-tbody-wrapper tr.z-child-row td.z-col-expand:first-child,.z-tbody-wrapper tr.z-child-row td.z-col-actions:first-child{padding-left:0!important}.z-virtual-scroll-inner{position:relative;width:100%}.z-virtual-row{position:absolute;top:0;left:0;width:100%}tr.z-child-row td:first-child{padding-left:12px!important}tbody tr.z-selected,tbody tr.z-selected td{background-color:color-mix(in srgb,var(--primary) 15%,transparent)!important}tbody tr.z-selected:hover,tbody tr.z-selected:hover td{background-color:color-mix(in srgb,var(--primary) 20%,transparent)!important}tbody tr.z-indeterminate-selected,tbody tr.z-indeterminate-selected td{background-color:color-mix(in srgb,var(--primary) 10%,transparent)!important}tbody tr.z-indeterminate-selected:hover,tbody tr.z-indeterminate-selected:hover td{background-color:color-mix(in srgb,var(--primary) 15%,transparent)!important}tbody tr.z-pinned-top td{background-color:var(--card)!important}tbody tr.z-pinned-top:hover{background-color:var(--muted)}tbody tr.z-pinned-top:hover td{background-color:var(--muted)!important}tbody tr.z-pinned-bottom td{background-color:var(--card)!important}tbody tr.z-pinned-bottom:hover{background-color:var(--muted)}tbody tr.z-pinned-bottom:hover td,tr.z-expanded-row td{background-color:var(--muted)!important}thead th{position:relative}thead th .z-resizer{position:absolute;right:0;top:0;height:100%;width:8px;background:transparent;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;z-index:5}thead th .z-resizer:after{content:\"\";position:absolute;right:0;top:0;height:100%;width:3px;background:#0000001a;opacity:0;transition:opacity .2s ease}thead th .z-resizer:after:where(.dark,.dark *){background:#ffffff1a}thead th .z-resizer:hover:after{opacity:1;background:var(--primary);width:3px}thead th .z-resizer.z-is-resizing:after{opacity:1;background:var(--primary);width:3px}thead th .z-resizer.z-resizer-left{right:auto;left:0}thead th .z-resizer.z-resizer-left:after{right:auto;left:0}.z-thead-wrapper th.z-sticky-left,.z-thead-wrapper th.z-sticky-right,.z-tbody-wrapper th.z-sticky-left,.z-tbody-wrapper th.z-sticky-right,.z-tfoot-wrapper th.z-sticky-left,.z-tfoot-wrapper th.z-sticky-right{background-color:var(--muted);z-index:1;transform:translateZ(0);backface-visibility:hidden}.z-thead-wrapper td.z-sticky-left,.z-thead-wrapper td.z-sticky-right,.z-tbody-wrapper td.z-sticky-left,.z-tbody-wrapper td.z-sticky-right,.z-tfoot-wrapper td.z-sticky-left,.z-tfoot-wrapper td.z-sticky-right{background-color:var(--card);z-index:1;transform:translateZ(0);backface-visibility:hidden}.z-thead-wrapper th.z-sticky-left-last,.z-thead-wrapper td.z-sticky-left-last,.z-tbody-wrapper th.z-sticky-left-last,.z-tbody-wrapper td.z-sticky-left-last,.z-tfoot-wrapper th.z-sticky-left-last,.z-tfoot-wrapper td.z-sticky-left-last{position:relative;overflow:visible}.z-thead-wrapper th.z-sticky-left-last:after,.z-thead-wrapper td.z-sticky-left-last:after,.z-tbody-wrapper th.z-sticky-left-last:after,.z-tbody-wrapper td.z-sticky-left-last:after,.z-tfoot-wrapper th.z-sticky-left-last:after,.z-tfoot-wrapper td.z-sticky-left-last:after{content:\"\";position:absolute;top:0;bottom:0;right:-30px;width:30px;pointer-events:none;box-shadow:inset 10px 0 8px -8px #0000001a;z-index:10;opacity:0;transition:opacity .2s ease}:host-context(.dark) .z-thead-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-thead-wrapper td.z-sticky-left-last:after,:host-context(.dark) .z-tbody-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-tbody-wrapper td.z-sticky-left-last:after,:host-context(.dark) .z-tfoot-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-tfoot-wrapper td.z-sticky-left-last:after{box-shadow:inset 10px 0 10px -8px #00000080}.z-thead-wrapper.z-scroll-left th.z-sticky-left-last:after,.z-thead-wrapper.z-scroll-left td.z-sticky-left-last:after,.z-tbody-wrapper.z-scroll-left th.z-sticky-left-last:after,.z-tbody-wrapper.z-scroll-left td.z-sticky-left-last:after,.z-tfoot-wrapper.z-scroll-left th.z-sticky-left-last:after,.z-tfoot-wrapper.z-scroll-left td.z-sticky-left-last:after{opacity:1}.z-thead-wrapper th.z-sticky-right-first,.z-thead-wrapper td.z-sticky-right-first,.z-tbody-wrapper th.z-sticky-right-first,.z-tbody-wrapper td.z-sticky-right-first,.z-tfoot-wrapper th.z-sticky-right-first,.z-tfoot-wrapper td.z-sticky-right-first{position:relative;overflow:visible}.z-thead-wrapper th.z-sticky-right-first:before,.z-thead-wrapper td.z-sticky-right-first:before,.z-tbody-wrapper th.z-sticky-right-first:before,.z-tbody-wrapper td.z-sticky-right-first:before,.z-tfoot-wrapper th.z-sticky-right-first:before,.z-tfoot-wrapper td.z-sticky-right-first:before{content:\"\";position:absolute;top:0;bottom:0;left:-30px;width:30px;pointer-events:none;box-shadow:inset -10px 0 8px -8px #0000001a;z-index:10;opacity:0;transition:opacity .2s ease}:host-context(.dark) .z-thead-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-thead-wrapper td.z-sticky-right-first:before,:host-context(.dark) .z-tbody-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-tbody-wrapper td.z-sticky-right-first:before,:host-context(.dark) .z-tfoot-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-tfoot-wrapper td.z-sticky-right-first:before{box-shadow:inset -10px 0 10px -8px #00000080}.z-thead-wrapper.z-scroll-right th.z-sticky-right-first,.z-thead-wrapper.z-scroll-right td.z-sticky-right-first,.z-tbody-wrapper.z-scroll-right th.z-sticky-right-first,.z-tbody-wrapper.z-scroll-right td.z-sticky-right-first,.z-tfoot-wrapper.z-scroll-right th.z-sticky-right-first,.z-tfoot-wrapper.z-scroll-right td.z-sticky-right-first{border-left:none}.z-thead-wrapper.z-scroll-right th.z-sticky-right-first:before,.z-thead-wrapper.z-scroll-right td.z-sticky-right-first:before,.z-tbody-wrapper.z-scroll-right th.z-sticky-right-first:before,.z-tbody-wrapper.z-scroll-right td.z-sticky-right-first:before,.z-tfoot-wrapper.z-scroll-right th.z-sticky-right-first:before,.z-tfoot-wrapper.z-scroll-right td.z-sticky-right-first:before{opacity:1}.z-thead-wrapper th.z-sticky-right-last,.z-tfoot-wrapper th.z-sticky-right-last{position:relative}.z-thead-wrapper th.z-sticky-right-last:after,.z-tfoot-wrapper th.z-sticky-right-last:after{content:\"\";position:absolute;top:0;bottom:0;right:-30px;width:30px;background:var(--muted);pointer-events:none}.z-tfoot-wrapper{flex-shrink:0;background:var(--muted);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.z-tfoot-wrapper::-webkit-scrollbar{display:none}.z-tfoot-wrapper th{height:auto;padding:8px 12px;text-align:left;vertical-align:middle;font-weight:500;font-size:12px;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.5px;background:var(--muted);border-left:thin solid var(--border);border-top:thin solid var(--border)}.z-tfoot-wrapper th.z-at-left-edge{border-left:none}.z-tfoot-wrapper.z-shadow-footer{box-shadow:0 -2px 4px #0000000d;position:relative;z-index:15}.z-tfoot-wrapper.z-shadow-footer:where(.dark,.dark *){box-shadow:0 -2px 4px #0003}.z-pin-btn{padding:2px 4px;border-radius:4px;color:var(--muted-foreground);transition:all .15s ease}.z-pin-btn:hover{background-color:var(--muted);color:var(--foreground)}.z-pin-btn.z-pin-btn-active{color:var(--primary);background-color:var(--primary)}.z-pin-btn.z-pin-btn-active:hover{background-color:var(--primary);opacity:.8}.z-row-pin-trigger{opacity:1}.z-row-pin-trigger.text-primary{color:var(--primary)}.z-header-pin-trigger{opacity:1}.z-header-pin-trigger.text-primary{color:var(--primary)}th{overflow:hidden}th .z-header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th .z-header-text-wrapper{transition:background-color .15s ease;border-radius:4px;min-width:0;overflow:hidden;flex-shrink:1}th .z-header-text-wrapper.z-has-options:hover{background-color:color-mix(in srgb,var(--foreground) 8%,transparent)}th .z-header-text-wrapper.z-has-options:active{background-color:color-mix(in srgb,var(--foreground) 12%,transparent)}.cdk-drag-preview,.z-drag-preview{box-shadow:0 5px 20px #0003;border-radius:6px;background-color:var(--card);border:1px solid var(--primary);z-index:10000!important;pointer-events:none}.cdk-drag-preview:where(.dark,.dark *),.z-drag-preview:where(.dark,.dark *){box-shadow:0 5px 20px #00000080}.cdk-drag-placeholder{background-color:color-mix(in srgb,var(--primary) 10%,transparent);border:2px dashed var(--primary);border-radius:6px}.cdk-drag-animating{transition:transform .1s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder){transition:transform .1s cubic-bezier(0,0,.2,1)}.z-drag-item.cdk-drag-dragging{transition:none!important}.z-column-drop-list{min-height:50px}:host-context(.dark) .z-thead-wrapper.z-scroll-left th.z-sticky-left-last,:host-context(.dark) .z-thead-wrapper.z-scroll-left td.z-sticky-left-last,:host-context(.dark) .z-tbody-wrapper.z-scroll-left th.z-sticky-left-last,:host-context(.dark) .z-tbody-wrapper.z-scroll-left td.z-sticky-left-last,:host-context(.dark) .z-tfoot-wrapper.z-scroll-left th.z-sticky-left-last,:host-context(.dark) .z-tfoot-wrapper.z-scroll-left td.z-sticky-left-last{border-right:1px solid var(--border)}:host-context(.dark) .z-thead-wrapper.z-scroll-right th.z-sticky-right-first,:host-context(.dark) .z-thead-wrapper.z-scroll-right td.z-sticky-right-first,:host-context(.dark) .z-tbody-wrapper.z-scroll-right th.z-sticky-right-first,:host-context(.dark) .z-tbody-wrapper.z-scroll-right td.z-sticky-right-first,:host-context(.dark) .z-tfoot-wrapper.z-scroll-right th.z-sticky-right-first,:host-context(.dark) .z-tfoot-wrapper.z-scroll-right td.z-sticky-right-first{border-left:1px solid var(--border)}.z-table-settings-drawer input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:1rem;height:1rem;border:thin solid var(--input);border-radius:.25rem;background-color:var(--background);cursor:pointer;position:relative;transition:all .2s ease}.z-table-settings-drawer input[type=checkbox]:hover{border-color:var(--primary)}.z-table-settings-drawer input[type=checkbox]:checked{background-color:var(--primary);border-color:var(--primary)}.z-table-settings-drawer input[type=checkbox]:checked:after{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:.375rem;height:.625rem;border:solid var(--primary-foreground);border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.z-table-settings-drawer input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ZCheckboxComponent, selector: "z-checkbox", inputs: ["class", "zType", "zSize", "zLabel", "zText", "zDisabled", "zIndeterminate", "zValue", "zOptions", "zOrientation", "zCheckAll", "zCheckAllText", "zChecked", "zGroupValue"], outputs: ["zCheckedChange", "zGroupValueChange", "zChange", "zGroupChange", "zControl"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest"], outputs: ["zOnSearch", "zOnChange", "zControl"], exportAs: ["zInput"] }, { kind: "component", type: ZLoadingComponent, selector: "z-loading", inputs: ["class", "zSpinner", "zSize", "zColor", "zText", "zOverlay", "zOverlayType", "zFullscreen", "zLoading"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "component", type: ZDrawerComponent, selector: "z-drawer", inputs: ["class", "zVisible", "zTitle", "zDescription", "zWidth", "zHeight", "zPlacement", "zClosable", "zMaskClosable", "zHideFooter", "zOkText", "zCancelText", "zOkDestructive", "zOkDisabled", "zLoading", "zOverlay", "zShadow", "zShape", "zContentLoading", "zSkeletonRows"], outputs: ["zOnOk", "zOnCancel", "zVisibleChange"], exportAs: ["zDrawer"] }, { kind: "component", type: ZPaginationComponent, selector: "z-pagination", inputs: ["zPageIndex", "zPageSize", "zTotal", "zPageSizeOptions", "zShowSizeChanger", "zShowQuickJumper", "zShowTotal", "zSimple", "zSize", "zDisabled", "zTotalLabel", "zPerPageLabel", "zGoToLabel"], outputs: ["zPageIndexChange", "zPageSizeChange", "zOnPageChange"] }, { kind: "component", type: ZTableFilterComponent, selector: "z-table-filter", inputs: ["zColumn", "zTable"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl"], exportAs: ["zPopover"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "directive", type: ZTableResizeDirective, selector: "[z-table-resize],[zTableResize]", inputs: ["zTableResize"] }, { kind: "directive", type: ZTableRowHoverDirective, selector: "[z-table-row-hover], [zTableRowHover]", inputs: ["zTableRowHover"] }, { kind: "component", type: ZTableIconTextComponent, selector: "z-table-icon-text", inputs: ["zText", "zTooltip", "zTriggerElement"] }, { kind: "component", type: ZTableActionsComponent, selector: "z-table-actions", inputs: ["zConfig", "zRow", "zRowId", "zDropdownButtonSize"], outputs: ["zActionClick"] }, { kind: "pipe", type: ZTableIsTemplateRefPipe, name: "zTableIsTemplateRef" }, { kind: "pipe", type: ZTableHasIconPipe, name: "zTableHasIcon" }, { kind: "pipe", type: ZTableCellBottomPipe, name: "zTableCellBottom" }, { kind: "pipe", type: ZTableCellConfigPipe, name: "zTableCellConfig" }, { kind: "pipe", type: ZTableCellOffsetPipe, name: "zTableCellOffset" }, { kind: "pipe", type: ZTableCellPinPipe, name: "zTableCellPin" }, { kind: "pipe", type: ZTableColumnConfigPipe, name: "zTableColumnConfig" }, { kind: "pipe", type: ZTableColumnHeaderPipe, name: "zTableColumnHeader" }, { kind: "pipe", type: ZTableColumnParentsPipe, name: "zTableColumnParents" }, { kind: "pipe", type: ZTableFooterContentPipe, name: "zTableFooterContent" }, { kind: "pipe", type: ZTablePinningStylesPipe, name: "zTablePinningStyles" }, { kind: "pipe", type: ZTableRowPipe, name: "zTableRow" }, { kind: "pipe", type: ZTableSpanPipe, name: "zTableSpan" }, { kind: "pipe", type: ZTableCellRenderPipe, name: "zTableCellRender" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableComponent, decorators: [{
             type: Component,
@@ -3334,31 +3442,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         ZPopoverDirective,
                         ZButtonComponent,
                         ZTooltipDirective,
-                        ZTableResizerDirective,
+                        ZTableResizeDirective,
                         ZTableRowHoverDirective,
                         ZTableIsTemplateRefPipe,
                         ZTableHasIconPipe,
                         ZTableCellBottomPipe,
                         ZTableCellConfigPipe,
                         ZTableCellOffsetPipe,
+                        ZTableCellPinPipe,
                         ZTableColumnConfigPipe,
                         ZTableColumnHeaderPipe,
                         ZTableColumnParentsPipe,
                         ZTableFooterContentPipe,
-                        ZTableHeaderPinPipe,
                         ZTablePinningStylesPipe,
                         ZTableRowPipe,
                         ZTableSpanPipe,
-                        ZTableFooterRenderPipe,
-                        ZTableHeaderRenderPipe,
-                        ZTableBodyCellRenderPipe,
+                        ZTableCellRenderPipe,
                         ZTableIconTextComponent,
                         ZTableActionsComponent,
                         ZSafeHtmlPipe,
                         TranslatePipe,
                     ], standalone: true, providers: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'z-table block relative py-1',
-                    }, exportAs: 'zTable', template: "<!-- Toolbar: Search & Settings -->\n@if (isSearchEnabled() || zConfig().enableSettings) {\n  <div class=\"z-table-toolbar mb-2 flex items-center justify-between gap-4\">\n    <!-- Search -->\n    @if (isSearchEnabled()) {\n      @let config = searchConfig();\n      <z-input\n        [class]=\"config?.width ?? 'w-64'\"\n        [zSize]=\"config?.size ?? 'sm'\"\n        [zPlaceholder]=\"config?.placeholder ?? 'i18n_z_ui_table_search' | translate\"\n        [zSearch]=\"true\"\n        [zDebounce]=\"config?.debounceTime ?? 300\"\n        (zOnSearch)=\"onSearchChange($event)\" />\n    } @else {\n      <div></div>\n    }\n\n    <!-- Settings Button -->\n    @if (zConfig().enableSettings) {\n      <z-button zType=\"outline\" zSize=\"sm\" zTypeIcon=\"lucideSettings\" (click)=\"openSettingsDrawer()\">\n        {{ 'i18n_z_ui_table_settings' | translate }}\n      </z-button>\n    }\n  </div>\n}\n\n<div\n  class=\"z-table-container shadow-xs\"\n  [class.z-hide-horizontal-border]=\"!showHorizontalBorder()\"\n  [class.z-hide-vertical-border]=\"!showVerticalBorder()\"\n  [style.max-height]=\"zConfig().maxHeight\"\n  [style.min-height]=\"zConfig().minHeight\">\n  <!-- Shared colgroup template -->\n  <ng-template #colGroupTpl>\n    <colgroup>\n      @for (column of orderedLeafColumns(); track column.id) {\n        @if (column.getIsVisible()) {\n          <col [style.width]=\"'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n      }\n    </colgroup>\n  </ng-template>\n\n  <!-- Header table -->\n  <div\n    class=\"z-thead-wrapper shadow-xs\"\n    [class.z-shadow-header]=\"shouldHeaderShowShadow()\"\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\"\n    #theadWrapper>\n    <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n      <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n      <thead>\n        @for (headerGroup of orderedHeaderGroups(); track headerGroup.id) {\n          <tr>\n            @for (header of headerGroup.headers; track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableHeaderRender: headerGroup.headers : zConfig().columns;\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [ngStyle]=\"header.column | zTablePinningStyles: header : 'header' : table : zConfig().columns\"\n                  [class]=\"\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass') +\n                    ' ' +\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass')\n                  \"\n                  [style]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\"\n                  [class.z-sticky-left]=\"header.column.getIsPinned() === 'left'\"\n                  [class.z-sticky-right]=\"header.column.getIsPinned() === 'right'\"\n                  [class.z-sticky-left-last]=\"header | zTableHeaderPin: 'isLastLeftPinned' : zConfig().columns\"\n                  [class.z-sticky-right-first]=\"header | zTableHeaderPin: 'isFirstRightPinned' : zConfig().columns\"\n                  [class.z-sticky-right-last]=\"header | zTableHeaderPin: 'isLastRightPinned' : zConfig().columns\"\n                  [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                  [class.z-col-select]=\"header.column.id === 'select'\"\n                  [class.z-col-expand]=\"header.column.id === 'expand'\"\n                  [class.z-col-actions]=\"\n                    header.column.id === 'actions' || header.column.id === actionColumnInfo()?.columnId\n                  \"\n                  [attr.rowspan]=\"rowSpan\"\n                  [attr.colspan]=\"header | zTableSpan: zConfig().columns : 'headerColSpan'\">\n                  @if (header.column.id === 'select') {\n                    <!-- Header Checkbox -->\n                    <div class=\"flex items-center justify-center\">\n                      <z-checkbox\n                        zSize=\"sm\"\n                        [zChecked]=\"table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\"\n                        (zChange)=\"table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <!-- Expand All Button -->\n                    <div class=\"flex items-center justify-center\">\n                      <button\n                        type=\"button\"\n                        (click)=\"table.toggleAllRowsExpanded()\"\n                        class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                        <z-icon\n                          zType=\"lucideChevronRight\"\n                          zSize=\"14\"\n                          class=\"transition-transform duration-200\"\n                          [class.rotate-90]=\"table.getIsSomeRowsExpanded()\" />\n                      </button>\n                    </div>\n                  } @else {\n                    <!-- Header Content with Sort and Pin -->\n                    <div\n                      class=\"flex w-full items-center gap-1\"\n                      [class.justify-center]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                        'text-center'\n                      \"\n                      [class.justify-end]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') === 'text-right'\n                      \">\n                      <!-- Column Options Popover Template -->\n                      @let columnEnableOrdering =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableOrdering';\n                      @let columnEnablePinning =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enablePinning';\n                      @let effectiveEnableOrdering = columnEnableOrdering || zConfig().enableColumnOrdering;\n                      @let effectiveEnablePinning = columnEnablePinning || zConfig().enableColumnPinning;\n                      <ng-template #colOptionsPopoverContent>\n                        <div class=\"flex flex-col gap-0.5 p-0.5\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_left' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isLastMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_right' | translate }}</span>\n                            </button>\n                          }\n                          @if (effectiveEnableOrdering && header.column.getCanPin() && effectiveEnablePinning) {\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                          }\n                          @if (header.column.getCanPin() && effectiveEnablePinning) {\n                            @if (header.column.getIsPinned() !== 'left') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'right') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned()) {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                        </div>\n                      </ng-template>\n\n                      <!-- Header Text with Popover Trigger -->\n                      @let hasColumnOptions =\n                        (header.column.getCanPin() && effectiveEnablePinning) || effectiveEnableOrdering;\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded px-1.5 py-1\"\n                        [class.cursor-pointer]=\"hasColumnOptions\"\n                        [class.z-has-options]=\"hasColumnOptions\"\n                        [attr.z-popover]=\"hasColumnOptions ? '' : null\"\n                        #colOptionsPopover=\"zPopover\"\n                        #headerTextWrapper\n                        z-popover\n                        [zPopoverContent]=\"hasColumnOptions ? colOptionsPopoverContent : null\"\n                        zTrigger=\"click\"\n                        zPosition=\"bottom\"\n                        [zOffset]=\"5\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \">\n                              <ng-container\n                                *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                            </div>\n                          } @else if (headerContent | zTableHasIcon) {\n                            <z-table-icon-text\n                              class=\"min-w-0 truncate\"\n                              [zText]=\"headerContent\"\n                              [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \" />\n                          } @else {\n                            <span\n                              class=\"z-table-cell-text\"\n                              z-tooltip\n                              [zContent]=\"\n                                (header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip') ||\n                                headerContent\n                              \"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [innerHTML]=\"headerContent | translate | zSafeHtml\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        <!-- Dropdown indicator when has options (between text and sort icon) -->\n                        @if (hasColumnOptions) {\n                          <z-icon\n                            zType=\"lucideChevronDown\"\n                            zSize=\"12\"\n                            class=\"text-muted-foreground shrink-0 opacity-50\" />\n                        }\n                      </div>\n                      <!-- Sort Icon (outside wrapper, no hover background) -->\n                      @if (header.column.getCanSort() && !hasBodyRowSpan()) {\n                        <span\n                          class=\"z-sort-icon shrink-0 cursor-pointer text-gray-500 hover:text-gray-700\"\n                          (click)=\"handleSort($event, header.column.getToggleSortingHandler())\">\n                          @if (header.column.getIsSorted() === 'asc') {\n                            <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                          } @else if (header.column.getIsSorted() === 'desc') {\n                            <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                          } @else {\n                            <z-icon zType=\"lucideArrowDownUp\" zSize=\"12\" class=\"opacity-30\" />\n                          }\n                        </span>\n                      }\n                    </div>\n                  }\n                  <!-- Column Filter -->\n                  @if (header.column.getCanFilter() && hasFiltering()) {\n                    <div class=\"mt-1\">\n                      <z-table-filter [zColumn]=\"$any(header.column)\" [zTable]=\"$any(table)\" />\n                    </div>\n                  }\n                  <!-- Column Resizer -->\n                  @if (\n                    header.column.id !== 'select' &&\n                    header.column.id !== 'expand' &&\n                    zConfig().enableColumnResizing !== false\n                  ) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"\n                        header.column.getIsPinned() === 'right' || header.column.getIsLastColumn()\n                      \"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResizer]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n          </tr>\n        }\n      </thead>\n    </table>\n  </div>\n\n  <!-- Body table -->\n  <div\n    class=\"z-tbody-wrapper relative\"\n    #tbodyContainer\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\">\n    @if (zLoading() || isProcessing()) {\n      <!-- Loading State -->\n      @if (zConfig().useSkeleton) {\n        <!-- Skeleton Loading -->\n        <div class=\"animate-in fade-in flex h-full flex-col duration-200\">\n          @for (i of skeletonRows(); track $index; let last = $last) {\n            <div\n              class=\"border-border box-border flex flex-1 flex-col items-start justify-center gap-1.5 px-2\"\n              [class.border-b]=\"!last\">\n              <z-skeleton zType=\"bar\" zWidth=\"100%\" zHeight=\"22px\" zRadius=\"4px\" />\n              <z-skeleton zType=\"bar\" zWidth=\"50%\" zHeight=\"14px\" zRadius=\"4px\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <!-- Spinner Loading -->\n        <div class=\"z-loading-state\">\n          <z-loading [zLoading]=\"true\" zSize=\"lg\" [zText]=\"'i18n_z_ui_table_loading' | translate\" />\n        </div>\n      }\n    } @else if (isEmpty()) {\n      <div class=\"z-empty-state\">\n        @if (isNoSearchResults()) {\n          <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"'i18n_z_ui_table_no_results' | translate\" />\n        } @else {\n          <z-empty zIcon=\"lucidePackageOpen\" zSize=\"sm\" [zMessage]=\"'i18n_z_ui_table_no_data' | translate\" />\n        }\n      </div>\n    } @else {\n      <ng-scrollbar class=\"z-tbody-scrollbar\" #tbodyWrapper track=\"all\" (scroll)=\"onTbodyScroll($event)\">\n        @if (isVirtual()) {\n          <!-- Virtual Scroll Mode -->\n          <div\n            class=\"z-virtual-scroll-inner\"\n            [style.height.px]=\"virtualizer.getTotalSize()\"\n            [style.min-width.px]=\"table.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let groupRows = dynamicGroupRows()[virtualItem.index] || [];\n              <div\n                class=\"z-virtual-row\"\n                [style.height.px]=\"dynamicGroupHeights()[virtualItem.index] ?? groupSize() * virtualRowHeight()\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\">\n                <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n                  <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n                  <tbody\n                    [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n                    [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n                    @for (row of groupRows; track row.id) {\n                      <tr\n                        z-table-row-hover\n                        [style.height.px]=\"virtualRowHeight()\"\n                        [class.z-child-row]=\"row.depth > 0\"\n                        [class.z-selected]=\"row.getIsSelected()\"\n                        [class.z-indeterminate-selected]=\"row.getIsSomeSelected() && !row.getIsSelected()\">\n                        @for (cell of row.getVisibleCells(); track cell.id) {\n                          @let shouldRenderRowSpan =\n                            cell | zTableSpan: zConfig().columns : 'shouldRender' : table.getRowModel().rows;\n                          @let shouldRenderColSpan =\n                            cell | zTableBodyCellRender: row.getVisibleCells() : zConfig().columns;\n                          @if (shouldRenderRowSpan && shouldRenderColSpan) {\n                            <td\n                              [ngStyle]=\"\n                                cell.column\n                                  | zTablePinningStyles: cell : 'body' : row.getVisibleCells() : zConfig().columns\n                              \"\n                              [class.z-sticky-left]=\"cell.column.getIsPinned() === 'left'\"\n                              [class.z-sticky-right]=\"cell.column.getIsPinned() === 'right'\"\n                              [class.z-sticky-left-last]=\"\n                                cell.column.getIsPinned() === 'left' && cell.column.getIsLastColumn('left')\n                              \"\n                              [class.z-sticky-right-first]=\"\n                                cell.column.getIsPinned() === 'right' && cell.column.getIsFirstColumn('right')\n                              \"\n                              [class.z-sticky-right-last]=\"\n                                cell.column.getIsPinned() === 'right' && cell.column.getIsLastColumn('right')\n                              \"\n                              [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                              [class.z-col-select]=\"cell.column.id === 'select'\"\n                              [class.z-col-expand]=\"cell.column.id === 'expand'\"\n                              [class.z-col-actions]=\"cell.column.id === actionColumnInfo()?.columnId\"\n                              [class.z-at-bottom]=\"\n                                cell | zTableCellBottom: zConfig().columns : table.getRowModel().rows\n                              \"\n                              [attr.rowspan]=\"\n                                cell | zTableSpan: zConfig().columns : 'cellRowSpan' : table.getRowModel().rows\n                              \"\n                              [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan'\"\n                              [class]=\"cell | zTableCellConfig: zConfig().columns : 'cellClass'\"\n                              [style]=\"cell | zTableCellConfig: zConfig().columns : 'cellStyle'\">\n                              @if (cell.column.id === 'select') {\n                                <!-- Row Checkbox -->\n                                <div class=\"flex items-center justify-center\">\n                                  <z-checkbox\n                                    zSize=\"sm\"\n                                    [zChecked]=\"cell.row.getIsSelected()\"\n                                    [zIndeterminate]=\"cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\"\n                                    [zDisabled]=\"!cell.row.getCanSelect()\"\n                                    (zChange)=\"cell.row.toggleSelected()\" />\n                                </div>\n                              } @else if (cell.column.id === 'expand') {\n                                <!-- Expand Button -->\n                                <div class=\"flex items-center justify-center\">\n                                  @if (cell.row.subRows && cell.row.subRows.length > 0) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.toggleExpanded()\"\n                                      class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                                      <z-icon\n                                        zType=\"lucideChevronRight\"\n                                        zSize=\"14\"\n                                        class=\"transition-transform duration-200\"\n                                        [class.rotate-90]=\"cell.row.getIsExpanded()\" />\n                                    </button>\n                                  }\n                                </div>\n                              } @else if (cell.column.id === actionColumnInfo()?.columnId && actionColumnInfo()) {\n                                <z-table-actions\n                                  [zConfig]=\"$any(actionColumnInfo()!.config)\"\n                                  [zRow]=\"cell.row.original\"\n                                  [zRowId]=\"cell.row.id\"\n                                  (zActionClick)=\"onActionClick($event)\" />\n                              } @else {\n                                <ng-container\n                                  *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellContent\">\n                                  @if (cellContent | zTableIsTemplateRef) {\n                                    <!-- TemplateRef rendering -->\n                                    <div\n                                      [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                      [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\">\n                                      <ng-container\n                                        *ngTemplateOutlet=\"cellContent; context: { $implicit: cell.getContext() }\" />\n                                    </div>\n                                  } @else if (cellContent | zTableHasIcon) {\n                                    <!-- Icon syntax rendering -->\n                                    <z-table-icon-text\n                                      [zText]=\"cellContent\"\n                                      [zTooltip]=\"cell | zTableCellConfig: zConfig().columns : 'contentTooltip'\"\n                                      [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                      [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\" />\n                                  } @else {\n                                    <!-- Default/innerHTML rendering -->\n                                    <div\n                                      class=\"z-table-cell-text\"\n                                      z-tooltip\n                                      [zContent]=\"\n                                        (cell | zTableCellConfig: zConfig().columns : 'contentTooltip') || cellContent\n                                      \"\n                                      [innerHTML]=\"cellContent | translate | zSafeHtml\"\n                                      [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                      [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"></div>\n                                  }\n                                </ng-container>\n                              }\n                            </td>\n                          }\n                        }\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Normal Scroll Mode -->\n          <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n            <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n            <tbody\n              [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n              [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n              <!-- Row Template -->\n              <ng-template #rowTemplate let-row>\n                <tr\n                  z-table-row-hover\n                  [attr.data-row-id]=\"row.id\"\n                  [ngStyle]=\"row | zTableRow: table : 'pinningStyles' : virtualRowHeight()\"\n                  [class.z-child-row]=\"row.depth > 0\"\n                  [class.z-selected]=\"row.getIsSelected()\"\n                  [class.z-indeterminate-selected]=\"row.getIsSomeSelected() && !row.getIsSelected()\"\n                  [class.z-pinned-top]=\"row.getIsPinned() === 'top'\"\n                  [class.z-pinned-bottom]=\"row.getIsPinned() === 'bottom'\"\n                  [class.z-shadow-bottom]=\"\n                    showHeaderFooterShadow() &&\n                    row.getIsPinned() === 'top' &&\n                    (row | zTableRow: table : 'isLastTopPinned')\n                  \"\n                  [class.z-shadow-top]=\"\n                    showHeaderFooterShadow() &&\n                    row.getIsPinned() === 'bottom' &&\n                    (row | zTableRow: table : 'isFirstBottomPinned')\n                  \"\n                  [attr.data-depth]=\"row.depth\">\n                  @for (cell of row.getVisibleCells(); track cell.id) {\n                    @let shouldRenderRowSpan =\n                      cell | zTableSpan: zConfig().columns : 'shouldRender' : table.getRowModel().rows;\n                    @let shouldRenderColSpan = cell | zTableBodyCellRender: row.getVisibleCells() : zConfig().columns;\n                    @if (shouldRenderRowSpan && shouldRenderColSpan) {\n                      <td\n                        [ngStyle]=\"\n                          cell.column | zTablePinningStyles: cell : 'body' : row.getVisibleCells() : zConfig().columns\n                        \"\n                        [class]=\"cell | zTableCellConfig: zConfig().columns : 'cellClass'\"\n                        [style]=\"cell | zTableCellConfig: zConfig().columns : 'cellStyle'\"\n                        [class.z-sticky-left]=\"cell.column.getIsPinned() === 'left'\"\n                        [class.z-sticky-right]=\"cell.column.getIsPinned() === 'right'\"\n                        [class.z-sticky-left-last]=\"\n                          cell.column.getIsPinned() === 'left' && cell.column.getIsLastColumn('left')\n                        \"\n                        [class.z-sticky-right-first]=\"\n                          cell.column.getIsPinned() === 'right' && cell.column.getIsFirstColumn('right')\n                        \"\n                        [class.z-sticky-right-last]=\"\n                          cell.column.getIsPinned() === 'right' && cell.column.getIsLastColumn('right')\n                        \"\n                        [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                        [class.z-col-select]=\"cell.column.id === 'select'\"\n                        [class.z-col-expand]=\"cell.column.id === 'expand'\"\n                        [class.z-col-actions]=\"\n                          cell.column.id === 'actions' || cell.column.id === actionColumnInfo()?.columnId\n                        \"\n                        [class.z-at-bottom]=\"cell | zTableCellBottom: zConfig().columns : table.getRowModel().rows\"\n                        [attr.rowspan]=\"cell | zTableSpan: zConfig().columns : 'cellRowSpan' : table.getRowModel().rows\"\n                        [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan'\">\n                        @if (cell.column.id === 'select') {\n                          <!-- Row Checkbox with Pin Button -->\n                          <div class=\"flex items-center justify-center gap-1\">\n                            <z-checkbox\n                              zSize=\"sm\"\n                              [zChecked]=\"cell.row.getIsSelected()\"\n                              [zIndeterminate]=\"cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\"\n                              [zDisabled]=\"!cell.row.getCanSelect()\"\n                              (zChange)=\"cell.row.toggleSelected()\" />\n                            @if (zConfig().enableRowPinning && cell.row.depth === 0 && !hasBodyRowSpan()) {\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            }\n                          </div>\n                        } @else if (cell.column.id === 'expand') {\n                          <!-- Expand Button with Row Pin Popover -->\n                          <div class=\"flex items-center justify-center gap-1\">\n                            @if (cell.row.subRows && cell.row.subRows.length > 0) {\n                              <button\n                                type=\"button\"\n                                (click)=\"cell.row.toggleExpanded()\"\n                                class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                                <z-icon\n                                  zType=\"lucideChevronRight\"\n                                  zSize=\"14\"\n                                  class=\"transition-transform duration-200\"\n                                  [class.rotate-90]=\"cell.row.getIsExpanded()\" />\n                              </button>\n                            }\n                            @if (\n                              zConfig().enableRowPinning &&\n                              cell.row.depth === 0 &&\n                              !(cell.row.subRows && cell.row.subRows.length > 0) &&\n                              !hasBodyRowSpan()\n                            ) {\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            }\n                          </div>\n                        } @else if (cell.column.id === 'actions') {\n                          <!-- Actions Column - Row Pin Only (for parent rows) -->\n                          @if (cell.row.depth === 0 && !hasBodyRowSpan()) {\n                            <div class=\"flex items-center justify-center\">\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            </div>\n                          }\n                        } @else if (cell.column.id === actionColumnInfo()?.columnId && actionColumnInfo()) {\n                          <z-table-actions\n                            [zConfig]=\"$any(actionColumnInfo()!.config)\"\n                            [zRow]=\"cell.row.original\"\n                            [zRowId]=\"cell.row.id\"\n                            (zActionClick)=\"onActionClick($event)\" />\n                        } @else {\n                          <ng-container\n                            *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellContent\">\n                            @if (cellContent | zTableIsTemplateRef) {\n                              <!-- TemplateRef rendering -->\n                              <div\n                                [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\">\n                                <ng-container\n                                  *ngTemplateOutlet=\"cellContent; context: { $implicit: cell.getContext() }\" />\n                              </div>\n                            } @else if (cellContent | zTableHasIcon) {\n                              <!-- Icon syntax rendering -->\n                              <z-table-icon-text\n                                [zText]=\"cellContent\"\n                                [zTooltip]=\"cell | zTableCellConfig: zConfig().columns : 'contentTooltip'\"\n                                [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\" />\n                            } @else {\n                              <!-- Default/innerHTML rendering -->\n                              <div\n                                class=\"z-table-cell-text\"\n                                z-tooltip\n                                [zContent]=\"\n                                  (cell | zTableCellConfig: zConfig().columns : 'contentTooltip') || cellContent\n                                \"\n                                [innerHTML]=\"cellContent | translate | zSafeHtml\"\n                                [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"></div>\n                            }\n                          </ng-container>\n                        }\n                      </td>\n                    }\n                  }\n                </tr>\n\n                <!-- Expanded Row Detail -->\n                @if (row.getIsExpanded() && row.depth === 0 && !row.subRows?.length && zConfig().expandedRowTemplate) {\n                  <tr class=\"z-expanded-row\">\n                    <td [attr.colspan]=\"row.getVisibleCells().length\" class=\"p-0\">\n                      <ng-container *ngTemplateOutlet=\"zConfig().expandedRowTemplate!; context: { $implicit: row }\" />\n                    </td>\n                  </tr>\n                }\n              </ng-template>\n\n              <!-- Render Top Pinned Rows (hidden when filtered data is empty) -->\n              @if (!isEmpty()) {\n                @for (row of table.getTopRows(); track row.id) {\n                  <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n                }\n              }\n\n              <!-- Render Center Rows -->\n              @for (row of table.getCenterRows(); track row.id) {\n                <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n              }\n\n              <!-- Render Bottom Pinned Rows (hidden when filtered data is empty) -->\n              @if (!isEmpty()) {\n                @for (row of bottomRowsReversed(); track row.id) {\n                  <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n                }\n              }\n            </tbody>\n          </table>\n        }\n      </ng-scrollbar>\n    }\n    <!-- end @else -->\n  </div>\n\n  <!-- Footer table -->\n  @if (hasFooter()) {\n    <div\n      class=\"z-tfoot-wrapper\"\n      [class.z-shadow-footer]=\"shouldFooterShowShadow()\"\n      [class.z-scroll-left]=\"hasScrollLeft()\"\n      [class.z-scroll-right]=\"hasScrollRight()\"\n      #tfootWrapper>\n      <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n        <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n        <tfoot>\n          @for (footerGroup of orderedFooterGroups(); track footerGroup.id) {\n            @if (footerGroup | zTableFooterContent: zConfig().columns) {\n              <tr>\n                @for (footer of footerGroup.headers; track footer.id) {\n                  @let rowSpan = footer | zTableSpan: zConfig().columns : 'footerRowSpan';\n                  @let shouldRender = footer | zTableFooterRender: footerGroup.headers : zConfig().columns;\n                  @if (rowSpan && shouldRender) {\n                    <th\n                      [ngStyle]=\"footer.column | zTablePinningStyles: footer : 'header' : table : zConfig().columns\"\n                      [class]=\"\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerClass') +\n                        ' ' +\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass')\n                      \"\n                      [style]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerStyle'\"\n                      [class.z-sticky-left]=\"footer.column.getIsPinned() === 'left'\"\n                      [class.z-sticky-right]=\"footer.column.getIsPinned() === 'right'\"\n                      [class.z-sticky-left-last]=\"footer | zTableHeaderPin: 'isLastLeftPinned' : zConfig().columns\"\n                      [class.z-sticky-right-first]=\"footer | zTableHeaderPin: 'isFirstRightPinned' : zConfig().columns\"\n                      [class.z-sticky-right-last]=\"footer | zTableHeaderPin: 'isLastRightPinned' : zConfig().columns\"\n                      [class.z-at-left-edge]=\"footer | zTableCellOffset: orderedLeafColumns()\"\n                      [attr.rowspan]=\"rowSpan\"\n                      [attr.colspan]=\"footer | zTableSpan: zConfig().columns : 'footerColSpan'\">\n                      @let configFooterContent =\n                        footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContent';\n                      @if (footer.column.columnDef.footer) {\n                        <ng-container\n                          *flexRender=\"footer.column.columnDef.footer; props: footer.getContext(); let footerContent\">\n                          <div\n                            class=\"flex w-full items-center\"\n                            [class.justify-center]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                              'text-center'\n                            \"\n                            [class.justify-end]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                              'text-right'\n                            \">\n                            @if (footerContent | zTableIsTemplateRef) {\n                              <!-- TemplateRef rendering -->\n                              <div\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \">\n                                <ng-container\n                                  *ngTemplateOutlet=\"footerContent; context: { $implicit: footer.getContext() }\" />\n                              </div>\n                            } @else if (footerContent | zTableHasIcon) {\n                              <!-- Icon syntax rendering -->\n                              <z-table-icon-text\n                                [zText]=\"footerContent\"\n                                [zTooltip]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip'\"\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \" />\n                            } @else {\n                              <!-- Default/string rendering -->\n                              <span\n                                class=\"z-table-cell-text\"\n                                z-tooltip\n                                [zContent]=\"\n                                  (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip') ||\n                                  footerContent\n                                \"\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \">\n                                {{ footerContent | translate }}\n                              </span>\n                            }\n                          </div>\n                        </ng-container>\n                      } @else if (configFooterContent) {\n                        <!-- Fallback for group columns without TanStack footer -->\n                        <div\n                          class=\"flex w-full items-center\"\n                          [class.justify-center]=\"\n                            (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                            'text-center'\n                          \"\n                          [class.justify-end]=\"\n                            (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                            'text-right'\n                          \">\n                          <span\n                            class=\"z-table-cell-text\"\n                            z-tooltip\n                            [zContent]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip') ||\n                              $any(configFooterContent)\n                            \"\n                            [ngClass]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\"\n                            [ngStyle]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\">\n                            {{ $any(configFooterContent) | translate }}\n                          </span>\n                        </div>\n                      }\n                    </th>\n                  }\n                }\n              </tr>\n            }\n          }\n        </tfoot>\n      </table>\n    </div>\n  }\n</div>\n\n<!-- Pagination -->\n@if (zConfig().enablePagination && zConfig().pagination?.enabled !== false) {\n  @let totalRows = table.getFilteredRowModel().rows.length;\n  <div class=\"mt-4 flex items-center justify-between gap-4\">\n    <div class=\"text-sm text-gray-500\">\n      {{\n        ('i18n_z_ui_table_total_rows' | translate).replace(\n          '{total}',\n          zConfig().totalCount?.toString() || totalRows.toString()\n        )\n      }}\n    </div>\n    <z-pagination\n      [zTotal]=\"zConfig().totalCount ?? totalRows\"\n      [(zPageIndex)]=\"pagination().pageIndex\"\n      [(zPageSize)]=\"pagination().pageSize\"\n      [zPageSizeOptions]=\"zConfig().pagination?.pageSizeOptions ?? [10, 20, 50, 100]\"\n      [zShowSizeChanger]=\"zConfig().pagination?.showSizeChanger ?? true\"\n      [zShowQuickJumper]=\"zConfig().pagination?.showQuickJumper ?? false\"\n      [zShowTotal]=\"false\"\n      [zDisabled]=\"zConfig().pagination?.disabled || zLoading() || isProcessing()\"\n      (zOnPageChange)=\"onPageChange($event)\" />\n  </div>\n}\n\n<!-- Settings Drawer -->\n<z-drawer\n  [(zVisible)]=\"showSettingsDrawer\"\n  [zTitle]=\"'i18n_z_ui_table_settings_title' | translate\"\n  zPlacement=\"right\"\n  zWidth=\"500px\"\n  [zShadow]=\"true\"\n  [zOkText]=\"null\"\n  [zCancelText]=\"'i18n_z_ui_drawer_close' | translate\">\n  <div class=\"z-table-settings-drawer px-4\">\n    <!-- Display Settings -->\n    <div class=\"mb-4\">\n      <h4 class=\"text-foreground mb-2 text-sm font-semibold\">{{ 'i18n_z_ui_table_display_settings' | translate }}</h4>\n      <p class=\"text-muted-foreground mb-3 text-xs\">{{ 'i18n_z_ui_table_display_settings_desc' | translate }}</p>\n      <div class=\"grid grid-cols-2 gap-x-4 gap-y-3\">\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showHorizontalBorder()\"\n          [zText]=\"'i18n_z_ui_table_horizontal_border' | translate\"\n          (zChange)=\"showHorizontalBorder.set(!showHorizontalBorder())\" />\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showVerticalBorder()\"\n          [zText]=\"'i18n_z_ui_table_vertical_border' | translate\"\n          (zChange)=\"showVerticalBorder.set(!showVerticalBorder())\" />\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showHeaderFooterShadow()\"\n          [zText]=\"'i18n_z_ui_table_header_footer_shadow' | translate\"\n          (zChange)=\"showHeaderFooterShadow.set(!showHeaderFooterShadow())\" />\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-border my-4 border-t\"></div>\n\n    <!-- Unified Column Settings -->\n    @if (zConfig().enableSettings) {\n      <div class=\"mb-4\">\n        <h4 class=\"text-foreground mb-2 text-sm font-semibold\">{{ 'i18n_z_ui_table_column_settings' | translate }}</h4>\n        <p class=\"text-muted-foreground mb-3 text-xs\">{{ 'i18n_z_ui_table_column_settings_desc' | translate }}</p>\n\n        <!-- Unpinned Columns (Draggable) -->\n        <div\n          cdkDropList\n          #columnDropList=\"cdkDropList\"\n          (cdkDropListDropped)=\"onPendingColumnDrop($event)\"\n          class=\"z-column-drop-list space-y-1.5\">\n          @for (columnId of columnOrder(); track columnId; let i = $index) {\n            @if (columnId !== 'expand' && columnId !== 'select') {\n              @let column = table.getColumn(columnId);\n              @let isPinned = column?.getIsPinned();\n              @let isVisible = columnVisibility()[columnId] !== false;\n              @let canPin = column?.getCanPin() !== false && zConfig().enableColumnPinning;\n              @if (!isPinned) {\n                <div\n                  cdkDrag\n                  [cdkDragData]=\"columnId\"\n                  cdkDragLockAxis=\"y\"\n                  cdkDragBoundary=\".z-column-drop-list\"\n                  cdkDragPreviewClass=\"z-drag-preview\"\n                  class=\"z-drag-item border-border bg-card hover:border-primary flex cursor-grab items-center gap-2 rounded border px-2 py-1.5 text-sm active:cursor-grabbing\"\n                  [class.opacity-60]=\"!isVisible\">\n                  <!-- Drag Handle -->\n                  <z-icon\n                    cdkDragHandle\n                    zType=\"lucideGripVertical\"\n                    zSize=\"14\"\n                    class=\"text-muted-foreground shrink-0 cursor-grab active:cursor-grabbing\" />\n\n                  <!-- Visibility Checkbox -->\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isVisible\"\n                    (change)=\"onToggleColumnVisibility(columnId)\"\n                    (mousedown)=\"$event.stopPropagation()\"\n                    class=\"border-input h-4 w-4 shrink-0 cursor-pointer rounded\" />\n\n                  <!-- Column Name -->\n                  <span class=\"flex min-w-0 flex-1 flex-col\">\n                    <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                      {{ columnId | zTableColumnHeader: zConfig().columns | translate }}\n                    </span>\n                    @let parents = columnId | zTableColumnParents: zConfig().columns;\n                    @if (parents) {\n                      <span class=\"text-muted-foreground truncate text-[10px]\">({{ parents | translate }})</span>\n                    }\n                  </span>\n\n                  <!-- Pin Buttons -->\n                  @if (canPin) {\n                    <div class=\"flex shrink-0 items-center gap-0.5\" (mousedown)=\"$event.stopPropagation()\">\n                      <button\n                        type=\"button\"\n                        [disabled]=\"!isVisible\"\n                        (click)=\"onToggleColumnPin(columnId, 'left')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                        title=\"Pin Left\">\n                        <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                      </button>\n                      <button\n                        type=\"button\"\n                        [disabled]=\"!isVisible\"\n                        (click)=\"onToggleColumnPin(columnId, 'right')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                        title=\"Pin Right\">\n                        <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                      </button>\n                    </div>\n                  }\n                </div>\n              }\n            }\n          }\n        </div>\n\n        <!-- Pinned Columns Section -->\n        @if (zConfig().enableColumnPinning) {\n          @if (pinnedColumnIds().length > 0) {\n            <div class=\"border-border mt-4 border-t pt-4\">\n              <h5 class=\"text-muted-foreground mb-2 text-xs font-medium\">\n                {{ 'i18n_z_ui_table_pinned_columns' | translate }}\n              </h5>\n              <div class=\"space-y-1.5\">\n                @for (columnId of pinnedColumnIds(); track columnId) {\n                  @let column = table.getColumn(columnId);\n                  @let isPinned = column?.getIsPinned();\n                  @let isVisible = columnVisibility()[columnId] !== false;\n                  <div\n                    class=\"border-border bg-muted/30 flex items-center gap-2 rounded border px-2 py-1.5 text-sm\"\n                    [class.opacity-60]=\"!isVisible\">\n                    <!-- Pin Icon -->\n                    <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"text-primary shrink-0\" />\n\n                    <!-- Visibility Checkbox -->\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"isVisible\"\n                      (change)=\"onToggleColumnVisibility(columnId)\"\n                      class=\"border-input h-4 w-4 shrink-0 cursor-pointer rounded\" />\n\n                    <!-- Column Name -->\n                    <span class=\"flex min-w-0 flex-1 flex-col\">\n                      <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                        {{ columnId | zTableColumnHeader: zConfig().columns | translate }}\n                      </span>\n                      @let pinnedParents = columnId | zTableColumnParents: zConfig().columns;\n                      @if (pinnedParents) {\n                        <span class=\"text-muted-foreground truncate text-[10px]\">\n                          ({{ pinnedParents | translate }})\n                        </span>\n                      }\n                    </span>\n\n                    <!-- Position Badge -->\n                    <span class=\"bg-primary/10 text-primary shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium\">\n                      {{\n                        isPinned === 'left'\n                          ? ('i18n_z_ui_table_left' | translate)\n                          : ('i18n_z_ui_table_right' | translate)\n                      }}\n                    </span>\n\n                    <!-- Unpin Button -->\n                    <button\n                      type=\"button\"\n                      (click)=\"onToggleColumnPin(columnId, isPinned === 'left' ? 'left' : 'right')\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground cursor-pointer rounded p-1 text-xs transition-colors\"\n                      title=\"Unpin\">\n                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        }\n      </div>\n    }\n  </div>\n</z-drawer>\n", styles: [":host{display:flex;flex-direction:column;height:100%;--scrollbar-track-thickness: 7px;--scrollbar-track-color: transparent;--scrollbar-thumb-shape: 3px}.z-table-container{display:flex;flex-direction:column;position:relative;width:100%;height:100%;overflow:hidden;border-radius:8px;border:thin solid var(--border);background-color:var(--card)}.z-table-container.z-hide-horizontal-border th,.z-table-container.z-hide-horizontal-border td{border-bottom:none!important;border-top:none!important}.z-table-container.z-hide-vertical-border th,.z-table-container.z-hide-vertical-border td{border-left:none!important}table{width:fit-content;min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:14px}.z-table-toolbar .z-settings-btn{transition:all .15s ease}.z-table-toolbar .z-settings-btn:hover{border-color:var(--muted-foreground)}.z-table-cell-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;-webkit-user-select:text;user-select:text}.z-thead-wrapper{flex-shrink:0;background:var(--muted);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.z-thead-wrapper::-webkit-scrollbar{display:none}.z-thead-wrapper th{height:auto;padding:8px 12px;text-align:left;vertical-align:middle;font-weight:500;color:var(--foreground);white-space:nowrap;overflow:hidden;background:var(--muted);border-left:thin solid var(--border);border-bottom:thin solid var(--border);-webkit-user-select:none;user-select:none}.z-thead-wrapper th.z-at-left-edge{border-left:none}.z-thead-wrapper th[colspan]{text-align:center;background:var(--muted);font-weight:500;color:var(--foreground)}.z-thead-wrapper.z-shadow-header{box-shadow:0 1px 3px #00000014;position:relative;z-index:15}.z-thead-wrapper.z-shadow-header:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d}.z-tbody-wrapper{flex:1;min-height:100px;display:flex;flex-direction:column}.z-tbody-scrollbar{flex:1;height:100%}.z-empty-state,.z-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:100px;height:100%;color:var(--muted-foreground);font-size:.875rem;animation:z-fade-in .2s ease-out}.z-tbody-scrollbar,.z-tbody-scrollbar table{animation:z-fade-in .2s ease-out}@keyframes z-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.z-tbody-wrapper tr{transition:background-color .15s ease}.z-tbody-wrapper tr:hover,.z-tbody-wrapper tr:hover td[style*=sticky]{background-color:var(--muted)}.z-tbody-wrapper tr.z-pinned-top td.z-sticky-left,.z-tbody-wrapper tr.z-pinned-top td.z-sticky-right,.z-tbody-wrapper tr.z-pinned-bottom td.z-sticky-left,.z-tbody-wrapper tr.z-pinned-bottom td.z-sticky-right{z-index:3}.z-tbody-wrapper tr.z-shadow-bottom{box-shadow:0 1px 3px #00000014!important;position:relative;z-index:15}.z-tbody-wrapper tr.z-shadow-bottom:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d!important}.z-tbody-wrapper tr.z-shadow-top{box-shadow:0 -2px 4px #0000000d!important;position:relative;z-index:15}.z-tbody-wrapper tr.z-shadow-top:where(.dark,.dark *){box-shadow:0 -2px 4px #0003!important}.z-tbody-wrapper td{padding:8px 12px;height:40px;vertical-align:middle;color:var(--foreground);white-space:nowrap;overflow:hidden;background:var(--card);border-left:thin solid var(--border);border-bottom:thin solid var(--border);box-sizing:border-box}.z-tbody-wrapper tbody.z-has-vertical-scroll td.z-at-bottom,.z-tbody-wrapper tbody.z-last-row-touches-bottom td.z-at-bottom{border-bottom:none}.z-tbody-wrapper td.z-at-left-edge{border-left:none}.z-tbody-wrapper td i{color:var(--muted-foreground);font-style:italic}.z-tbody-wrapper td[rowspan]{vertical-align:top;padding-top:12px}.z-tbody-wrapper td.z-row-hover{background-color:var(--muted)!important}.z-tbody-wrapper td.z-col-select,.z-tbody-wrapper td.z-col-expand,.z-tbody-wrapper td.z-col-actions{padding:8px 4px!important;text-align:center}.z-tbody-wrapper tr.z-child-row td.z-col-select:first-child,.z-tbody-wrapper tr.z-child-row td.z-col-expand:first-child,.z-tbody-wrapper tr.z-child-row td.z-col-actions:first-child{padding-left:0!important}.z-virtual-scroll-inner{position:relative;width:100%}.z-virtual-row{position:absolute;top:0;left:0;width:100%}tr.z-child-row td:first-child{padding-left:12px!important}tbody tr.z-selected,tbody tr.z-selected td{background-color:color-mix(in srgb,var(--primary) 15%,transparent)!important}tbody tr.z-selected:hover,tbody tr.z-selected:hover td{background-color:color-mix(in srgb,var(--primary) 20%,transparent)!important}tbody tr.z-indeterminate-selected,tbody tr.z-indeterminate-selected td{background-color:color-mix(in srgb,var(--primary) 10%,transparent)!important}tbody tr.z-indeterminate-selected:hover,tbody tr.z-indeterminate-selected:hover td{background-color:color-mix(in srgb,var(--primary) 15%,transparent)!important}tbody tr.z-pinned-top td{background-color:var(--card)!important}tbody tr.z-pinned-top:hover{background-color:var(--muted)}tbody tr.z-pinned-top:hover td{background-color:var(--muted)!important}tbody tr.z-pinned-bottom td{background-color:var(--card)!important}tbody tr.z-pinned-bottom:hover{background-color:var(--muted)}tbody tr.z-pinned-bottom:hover td,tr.z-expanded-row td{background-color:var(--muted)!important}thead th{position:relative}thead th .z-resizer{position:absolute;right:0;top:0;height:100%;width:8px;background:transparent;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;z-index:5}thead th .z-resizer:after{content:\"\";position:absolute;right:0;top:0;height:100%;width:3px;background:#0000001a;opacity:0;transition:opacity .2s ease}thead th .z-resizer:after:where(.dark,.dark *){background:#ffffff1a}thead th .z-resizer:hover:after{opacity:1;background:var(--primary);width:3px}thead th .z-resizer.z-is-resizing:after{opacity:1;background:var(--primary);width:3px}thead th .z-resizer.z-resizer-left{right:auto;left:0}thead th .z-resizer.z-resizer-left:after{right:auto;left:0}.z-thead-wrapper th.z-sticky-left,.z-thead-wrapper th.z-sticky-right,.z-tbody-wrapper th.z-sticky-left,.z-tbody-wrapper th.z-sticky-right,.z-tfoot-wrapper th.z-sticky-left,.z-tfoot-wrapper th.z-sticky-right{background-color:var(--muted);z-index:1;transform:translateZ(0);backface-visibility:hidden}.z-thead-wrapper td.z-sticky-left,.z-thead-wrapper td.z-sticky-right,.z-tbody-wrapper td.z-sticky-left,.z-tbody-wrapper td.z-sticky-right,.z-tfoot-wrapper td.z-sticky-left,.z-tfoot-wrapper td.z-sticky-right{background-color:var(--card);z-index:1;transform:translateZ(0);backface-visibility:hidden}.z-thead-wrapper th.z-sticky-left-last,.z-thead-wrapper td.z-sticky-left-last,.z-tbody-wrapper th.z-sticky-left-last,.z-tbody-wrapper td.z-sticky-left-last,.z-tfoot-wrapper th.z-sticky-left-last,.z-tfoot-wrapper td.z-sticky-left-last{position:relative;overflow:visible}.z-thead-wrapper th.z-sticky-left-last:after,.z-thead-wrapper td.z-sticky-left-last:after,.z-tbody-wrapper th.z-sticky-left-last:after,.z-tbody-wrapper td.z-sticky-left-last:after,.z-tfoot-wrapper th.z-sticky-left-last:after,.z-tfoot-wrapper td.z-sticky-left-last:after{content:\"\";position:absolute;top:0;bottom:0;right:-30px;width:30px;pointer-events:none;box-shadow:inset 10px 0 8px -8px #0000001a;z-index:10;opacity:0;transition:opacity .2s ease}.z-thead-wrapper.z-scroll-left th.z-sticky-left-last:after,.z-thead-wrapper.z-scroll-left td.z-sticky-left-last:after,.z-tbody-wrapper.z-scroll-left th.z-sticky-left-last:after,.z-tbody-wrapper.z-scroll-left td.z-sticky-left-last:after,.z-tfoot-wrapper.z-scroll-left th.z-sticky-left-last:after,.z-tfoot-wrapper.z-scroll-left td.z-sticky-left-last:after{opacity:1}.z-thead-wrapper th.z-sticky-right-first,.z-thead-wrapper td.z-sticky-right-first,.z-tbody-wrapper th.z-sticky-right-first,.z-tbody-wrapper td.z-sticky-right-first,.z-tfoot-wrapper th.z-sticky-right-first,.z-tfoot-wrapper td.z-sticky-right-first{position:relative;overflow:visible}.z-thead-wrapper th.z-sticky-right-first:before,.z-thead-wrapper td.z-sticky-right-first:before,.z-tbody-wrapper th.z-sticky-right-first:before,.z-tbody-wrapper td.z-sticky-right-first:before,.z-tfoot-wrapper th.z-sticky-right-first:before,.z-tfoot-wrapper td.z-sticky-right-first:before{content:\"\";position:absolute;top:0;bottom:0;left:-30px;width:30px;pointer-events:none;box-shadow:inset -10px 0 8px -8px #0000001a;z-index:10;opacity:0;transition:opacity .2s ease}.z-thead-wrapper.z-scroll-right th.z-sticky-right-first,.z-thead-wrapper.z-scroll-right td.z-sticky-right-first,.z-tbody-wrapper.z-scroll-right th.z-sticky-right-first,.z-tbody-wrapper.z-scroll-right td.z-sticky-right-first,.z-tfoot-wrapper.z-scroll-right th.z-sticky-right-first,.z-tfoot-wrapper.z-scroll-right td.z-sticky-right-first{border-left:none}.z-thead-wrapper.z-scroll-right th.z-sticky-right-first:before,.z-thead-wrapper.z-scroll-right td.z-sticky-right-first:before,.z-tbody-wrapper.z-scroll-right th.z-sticky-right-first:before,.z-tbody-wrapper.z-scroll-right td.z-sticky-right-first:before,.z-tfoot-wrapper.z-scroll-right th.z-sticky-right-first:before,.z-tfoot-wrapper.z-scroll-right td.z-sticky-right-first:before{opacity:1}.z-thead-wrapper th.z-sticky-right-last,.z-tfoot-wrapper th.z-sticky-right-last{position:relative}.z-thead-wrapper th.z-sticky-right-last:after,.z-tfoot-wrapper th.z-sticky-right-last:after{content:\"\";position:absolute;top:0;bottom:0;right:-30px;width:30px;background:var(--muted);pointer-events:none}.z-tfoot-wrapper{flex-shrink:0;background:var(--muted);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.z-tfoot-wrapper::-webkit-scrollbar{display:none}.z-tfoot-wrapper th{height:auto;padding:8px 12px;text-align:left;vertical-align:middle;font-weight:500;font-size:12px;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.5px;background:var(--muted);border-left:thin solid var(--border);border-top:thin solid var(--border)}.z-tfoot-wrapper th.z-at-left-edge{border-left:none}.z-tfoot-wrapper.z-shadow-footer{box-shadow:0 -2px 4px #0000000d;position:relative;z-index:15}.z-tfoot-wrapper.z-shadow-footer:where(.dark,.dark *){box-shadow:0 -2px 4px #0003}.z-pin-btn{padding:2px 4px;border-radius:4px;color:var(--muted-foreground);transition:all .15s ease}.z-pin-btn:hover{background-color:var(--muted);color:var(--foreground)}.z-pin-btn.z-pin-btn-active{color:var(--primary);background-color:var(--primary)}.z-pin-btn.z-pin-btn-active:hover{background-color:var(--primary);opacity:.8}.z-row-pin-trigger{opacity:1}.z-row-pin-trigger.text-primary{color:var(--primary)}.z-header-pin-trigger{opacity:1}.z-header-pin-trigger.text-primary{color:var(--primary)}th{overflow:hidden}th .z-header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th .z-header-text-wrapper{transition:background-color .15s ease;border-radius:4px;min-width:0;overflow:hidden;flex-shrink:1}th .z-header-text-wrapper.z-has-options:hover{background-color:color-mix(in srgb,var(--foreground) 8%,transparent)}th .z-header-text-wrapper.z-has-options:active{background-color:color-mix(in srgb,var(--foreground) 12%,transparent)}.cdk-drag-preview,.z-drag-preview{box-shadow:0 5px 20px #0003;border-radius:6px;background-color:var(--card);border:1px solid var(--primary);z-index:10000!important;pointer-events:none}.cdk-drag-preview:where(.dark,.dark *),.z-drag-preview:where(.dark,.dark *){box-shadow:0 5px 20px #00000080}.cdk-drag-placeholder{background-color:color-mix(in srgb,var(--primary) 10%,transparent);border:2px dashed var(--primary);border-radius:6px}.cdk-drag-animating{transition:transform .1s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder){transition:transform .1s cubic-bezier(0,0,.2,1)}.z-drag-item.cdk-drag-dragging{transition:none!important}.z-column-drop-list{min-height:50px}:host-context(.dark) .z-thead-wrapper.z-scroll-left th.z-sticky-left-last,:host-context(.dark) .z-thead-wrapper.z-scroll-left td.z-sticky-left-last,:host-context(.dark) .z-tbody-wrapper.z-scroll-left th.z-sticky-left-last,:host-context(.dark) .z-tbody-wrapper.z-scroll-left td.z-sticky-left-last,:host-context(.dark) .z-tfoot-wrapper.z-scroll-left th.z-sticky-left-last,:host-context(.dark) .z-tfoot-wrapper.z-scroll-left td.z-sticky-left-last{border-right:1px solid var(--border)}:host-context(.dark) .z-thead-wrapper.z-scroll-right th.z-sticky-right-first,:host-context(.dark) .z-thead-wrapper.z-scroll-right td.z-sticky-right-first,:host-context(.dark) .z-tbody-wrapper.z-scroll-right th.z-sticky-right-first,:host-context(.dark) .z-tbody-wrapper.z-scroll-right td.z-sticky-right-first,:host-context(.dark) .z-tfoot-wrapper.z-scroll-right th.z-sticky-right-first,:host-context(.dark) .z-tfoot-wrapper.z-scroll-right td.z-sticky-right-first{border-left:1px solid var(--border)}.z-table-settings-drawer input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:1rem;height:1rem;border:thin solid var(--input);border-radius:.25rem;background-color:var(--background);cursor:pointer;position:relative;transition:all .2s ease}.z-table-settings-drawer input[type=checkbox]:hover{border-color:var(--primary)}.z-table-settings-drawer input[type=checkbox]:checked{background-color:var(--primary);border-color:var(--primary)}.z-table-settings-drawer input[type=checkbox]:checked:after{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:.375rem;height:.625rem;border:solid var(--primary-foreground);border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.z-table-settings-drawer input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}\n"] }]
+                    }, exportAs: 'zTable', template: "<!-- Toolbar: Search & Settings -->\n@if (isSearchEnabled() || zConfig().enableSettings) {\n  <div class=\"z-table-toolbar mb-2 flex items-center justify-between gap-4\">\n    <!-- Search -->\n    @if (isSearchEnabled()) {\n      @let config = searchConfig();\n      <z-input\n        [class]=\"config?.width ?? 'w-64'\"\n        [zSize]=\"config?.size ?? 'sm'\"\n        [zPlaceholder]=\"config?.placeholder ?? 'i18n_z_ui_table_search' | translate\"\n        [zSearch]=\"true\"\n        [zDebounce]=\"config?.debounceTime ?? 300\"\n        (zOnSearch)=\"onSearchChange($event)\" />\n    } @else {\n      <div></div>\n    }\n\n    <!-- Settings Button -->\n    @if (zConfig().enableSettings) {\n      <z-button zType=\"outline\" zSize=\"sm\" zTypeIcon=\"lucideSettings\" (click)=\"openSettingsDrawer()\">\n        {{ 'i18n_z_ui_table_settings' | translate }}\n      </z-button>\n    }\n  </div>\n}\n\n<div\n  class=\"z-table-container shadow-xs\"\n  [class.z-hide-horizontal-border]=\"!showHorizontalBorder()\"\n  [class.z-hide-vertical-border]=\"!showVerticalBorder()\"\n  [style.max-height]=\"zConfig().maxHeight\"\n  [style.min-height]=\"zConfig().minHeight\">\n  <!-- Shared colgroup template -->\n  <ng-template #colGroupTpl>\n    <colgroup>\n      @for (column of orderedLeafColumns(); track column.id) {\n        @if (column.getIsVisible()) {\n          <col [style.width]=\"'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n      }\n    </colgroup>\n  </ng-template>\n\n  <!-- Header table -->\n  <div\n    class=\"z-thead-wrapper shadow-xs\"\n    [class.z-shadow-header]=\"shouldHeaderShowShadow()\"\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\"\n    #theadWrapper>\n    <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n      <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n      <thead>\n        @for (headerGroup of orderedHeaderGroups(); track headerGroup.id) {\n          <tr>\n            @for (header of headerGroup.headers; track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: headerGroup.headers : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [ngStyle]=\"header.column | zTablePinningStyles: header : 'header' : table : zConfig().columns : columnSizingInfo()\"\n                  [class]=\"\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass') +\n                    ' ' +\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass')\n                  \"\n                  [style]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\"\n                  [class.z-sticky-left]=\"header.column.getIsPinned() === 'left'\"\n                  [class.z-sticky-right]=\"header.column.getIsPinned() === 'right'\"\n                  [class.z-sticky-left-last]=\"header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns\"\n                  [class.z-sticky-right-first]=\"header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns\"\n                  [class.z-sticky-right-last]=\"header | zTableCellPin: 'isLastRightPinned' : zConfig().columns\"\n                  [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                  [class.z-col-select]=\"header.column.id === 'select'\"\n                  [class.z-col-expand]=\"header.column.id === 'expand'\"\n                  [class.z-col-actions]=\"\n                    header.column.id === 'actions' || header.column.id === actionColumnInfo()?.columnId\n                  \"\n                  [attr.rowspan]=\"rowSpan\"\n                  [attr.colspan]=\"header | zTableSpan: zConfig().columns : 'headerColSpan'\">\n                  @if (header.column.id === 'select') {\n                    <!-- Header Checkbox -->\n                    <div class=\"flex items-center justify-center\">\n                      <z-checkbox\n                        zSize=\"sm\"\n                        [zChecked]=\"table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\"\n                        (zChange)=\"table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <!-- Expand All Button -->\n                    <div class=\"flex items-center justify-center\">\n                      <button\n                        type=\"button\"\n                        (click)=\"table.toggleAllRowsExpanded()\"\n                        class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                        <z-icon\n                          zType=\"lucideChevronRight\"\n                          zSize=\"14\"\n                          class=\"transition-transform duration-200\"\n                          [class.rotate-90]=\"table.getIsSomeRowsExpanded()\" />\n                      </button>\n                    </div>\n                  } @else {\n                    <!-- Header Content with Sort and Pin -->\n                    <div\n                      class=\"flex w-full items-center gap-1\"\n                      [class.justify-center]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                        'text-center'\n                      \"\n                      [class.justify-end]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') === 'text-right'\n                      \">\n                      <!-- Column Options Popover Template -->\n                      @let columnEnableOrdering =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableOrdering';\n                      @let columnEnablePinning =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enablePinning';\n                      @let effectiveEnableOrdering = columnEnableOrdering || zConfig().enableColumnOrdering;\n                      @let effectiveEnablePinning = columnEnablePinning || zConfig().enableColumnPinning;\n                      <ng-template #colOptionsPopoverContent>\n                        <div class=\"flex flex-col gap-0.5 p-0.5\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_left' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isLastMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_right' | translate }}</span>\n                            </button>\n                          }\n                          @if (effectiveEnableOrdering && header.column.getCanPin() && effectiveEnablePinning) {\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                          }\n                          @if (header.column.getCanPin() && effectiveEnablePinning) {\n                            @if (header.column.getIsPinned() !== 'left') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'right') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned()) {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                        </div>\n                      </ng-template>\n\n                      <!-- Header Text with Popover Trigger -->\n                      @let hasColumnOptions =\n                        (header.column.getCanPin() && effectiveEnablePinning) || effectiveEnableOrdering;\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded px-1.5 py-1\"\n                        [class.cursor-pointer]=\"hasColumnOptions\"\n                        [class.z-has-options]=\"hasColumnOptions\"\n                        [attr.z-popover]=\"hasColumnOptions ? '' : null\"\n                        #colOptionsPopover=\"zPopover\"\n                        #headerTextWrapper\n                        z-popover\n                        [zPopoverContent]=\"hasColumnOptions ? colOptionsPopoverContent : null\"\n                        zTrigger=\"click\"\n                        zPosition=\"bottom\"\n                        [zOffset]=\"5\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \">\n                              <ng-container\n                                *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                            </div>\n                          } @else if (headerContent | zTableHasIcon) {\n                            <z-table-icon-text\n                              class=\"min-w-0 truncate\"\n                              [zText]=\"headerContent\"\n                              [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \" />\n                          } @else {\n                            <span\n                              class=\"z-table-cell-text\"\n                              z-tooltip\n                              [zContent]=\"\n                                (header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip') ||\n                                headerContent\n                              \"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [innerHTML]=\"headerContent | translate | zSafeHtml\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        <!-- Dropdown indicator when has options (between text and sort icon) -->\n                        @if (hasColumnOptions) {\n                          <z-icon\n                            zType=\"lucideChevronDown\"\n                            zSize=\"12\"\n                            class=\"text-muted-foreground shrink-0 opacity-50\" />\n                        }\n                      </div>\n                      <!-- Sort Icon (outside wrapper, no hover background) -->\n                      @if (header.column.getCanSort() && !hasBodyRowSpan()) {\n                        <span\n                          class=\"z-sort-icon shrink-0 cursor-pointer text-gray-500 hover:text-gray-700\"\n                          (click)=\"handleSort($event, header.column.getToggleSortingHandler())\">\n                          @if (header.column.getIsSorted() === 'asc') {\n                            <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                          } @else if (header.column.getIsSorted() === 'desc') {\n                            <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                          } @else {\n                            <z-icon zType=\"lucideArrowDownUp\" zSize=\"12\" class=\"opacity-30\" />\n                          }\n                        </span>\n                      }\n                    </div>\n                  }\n                  <!-- Column Filter -->\n                  @if (header.column.getCanFilter() && hasFiltering()) {\n                    <div class=\"mt-1\">\n                      <z-table-filter [zColumn]=\"$any(header.column)\" [zTable]=\"$any(table)\" />\n                    </div>\n                  }\n                  <!-- Column Resizer -->\n                  @if (\n                    header.column.id !== 'select' &&\n                    header.column.id !== 'expand' &&\n                    zConfig().enableColumnResizing !== false\n                  ) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"\n                        header.column.getIsPinned() === 'right' || header.column.getIsLastColumn()\n                      \"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n          </tr>\n        }\n      </thead>\n    </table>\n  </div>\n\n  <!-- Body table -->\n  <div\n    class=\"z-tbody-wrapper relative\"\n    #tbodyContainer\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\">\n    @if (zLoading() || isProcessing()) {\n      <!-- Loading State -->\n      @if (zConfig().useSkeleton) {\n        <!-- Skeleton Loading -->\n        <div class=\"animate-in fade-in flex h-full flex-col duration-200\">\n          @for (i of skeletonRows(); track $index; let last = $last) {\n            <div\n              class=\"border-border box-border flex flex-1 flex-col items-start justify-center gap-1.5 px-2\"\n              [class.border-b]=\"!last\">\n              <z-skeleton zType=\"bar\" zWidth=\"100%\" zHeight=\"22px\" zRadius=\"4px\" />\n              <z-skeleton zType=\"bar\" zWidth=\"50%\" zHeight=\"14px\" zRadius=\"4px\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <!-- Spinner Loading -->\n        <div class=\"z-loading-state\">\n          <z-loading [zLoading]=\"true\" zSize=\"lg\" [zText]=\"'i18n_z_ui_table_loading' | translate\" />\n        </div>\n      }\n    } @else if (isEmpty()) {\n      <div class=\"z-empty-state\">\n        @if (isNoSearchResults()) {\n          <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"'i18n_z_ui_table_no_results' | translate\" />\n        } @else {\n          <z-empty zIcon=\"lucidePackageOpen\" zSize=\"sm\" [zMessage]=\"'i18n_z_ui_table_no_data' | translate\" />\n        }\n      </div>\n    } @else {\n      <ng-scrollbar class=\"z-tbody-scrollbar\" #tbodyWrapper track=\"all\" (scroll)=\"onTbodyScroll($event)\">\n        @if (isVirtual()) {\n          <!-- Virtual Scroll Mode -->\n          <div\n            class=\"z-virtual-scroll-inner\"\n            [style.height.px]=\"virtualizer.getTotalSize()\"\n            [style.min-width.px]=\"table.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let groupRows = dynamicGroupRows()[virtualItem.index] || [];\n              <div\n                class=\"z-virtual-row\"\n                [style.height.px]=\"dynamicGroupHeights()[virtualItem.index] ?? groupSize() * virtualRowHeight()\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\">\n                <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n                  <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n                  <tbody\n                    [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n                    [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n                    @for (row of groupRows; track row.id) {\n                      <tr\n                        z-table-row-hover\n                        [style.height.px]=\"virtualRowHeight()\"\n                        [class.z-child-row]=\"row.depth > 0\"\n                        [class.z-selected]=\"row.getIsSelected()\"\n                        [class.z-indeterminate-selected]=\"row.getIsSomeSelected() && !row.getIsSelected()\">\n                        @for (cell of row.getVisibleCells(); track cell.id) {\n                          @let shouldRenderRowSpan =\n                            cell | zTableSpan: zConfig().columns : 'shouldRender' : table.getRowModel().rows;\n                          @let shouldRenderColSpan =\n                            cell | zTableCellRender: row.getVisibleCells() : zConfig().columns : 'body';\n                          @if (shouldRenderRowSpan && shouldRenderColSpan) {\n                            <td\n                              [ngStyle]=\"\n                                cell.column\n                                  | zTablePinningStyles: cell : 'body' : row.getVisibleCells() : zConfig().columns : columnSizingInfo()\n                              \"\n                              [class.z-sticky-left]=\"cell.column.getIsPinned() === 'left'\"\n                              [class.z-sticky-right]=\"cell.column.getIsPinned() === 'right'\"\n                              [class.z-sticky-left-last]=\"\n                                cell.column.getIsPinned() === 'left' && cell.column.getIsLastColumn('left')\n                              \"\n                              [class.z-sticky-right-first]=\"\n                                cell.column.getIsPinned() === 'right' && cell.column.getIsFirstColumn('right')\n                              \"\n                              [class.z-sticky-right-last]=\"\n                                cell.column.getIsPinned() === 'right' && cell.column.getIsLastColumn('right')\n                              \"\n                              [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                              [class.z-col-select]=\"cell.column.id === 'select'\"\n                              [class.z-col-expand]=\"cell.column.id === 'expand'\"\n                              [class.z-col-actions]=\"cell.column.id === actionColumnInfo()?.columnId\"\n                              [class.z-at-bottom]=\"\n                                cell | zTableCellBottom: zConfig().columns : table.getRowModel().rows\n                              \"\n                              [attr.rowspan]=\"\n                                cell | zTableSpan: zConfig().columns : 'cellRowSpan' : table.getRowModel().rows\n                              \"\n                              [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan'\"\n                              [class]=\"cell | zTableCellConfig: zConfig().columns : 'cellClass'\"\n                              [style]=\"cell | zTableCellConfig: zConfig().columns : 'cellStyle'\">\n                              @if (cell.column.id === 'select') {\n                                <!-- Row Checkbox -->\n                                <div class=\"flex items-center justify-center\">\n                                  <z-checkbox\n                                    zSize=\"sm\"\n                                    [zChecked]=\"cell.row.getIsSelected()\"\n                                    [zIndeterminate]=\"cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\"\n                                    [zDisabled]=\"!cell.row.getCanSelect()\"\n                                    (zChange)=\"cell.row.toggleSelected()\" />\n                                </div>\n                              } @else if (cell.column.id === 'expand') {\n                                <!-- Expand Button -->\n                                <div class=\"flex items-center justify-center\">\n                                  @if (cell.row.subRows && cell.row.subRows.length > 0) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.toggleExpanded()\"\n                                      class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                                      <z-icon\n                                        zType=\"lucideChevronRight\"\n                                        zSize=\"14\"\n                                        class=\"transition-transform duration-200\"\n                                        [class.rotate-90]=\"cell.row.getIsExpanded()\" />\n                                    </button>\n                                  }\n                                </div>\n                              } @else if (cell.column.id === actionColumnInfo()?.columnId && actionColumnInfo()) {\n                                <z-table-actions\n                                  [zConfig]=\"$any(actionColumnInfo()!.config)\"\n                                  [zRow]=\"cell.row.original\"\n                                  [zRowId]=\"cell.row.id\"\n                                  (zActionClick)=\"onActionClick($event)\" />\n                              } @else {\n                                <ng-container\n                                  *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellContent\">\n                                  @if (cellContent | zTableIsTemplateRef) {\n                                    <!-- TemplateRef rendering -->\n                                    <div\n                                      [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                      [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\">\n                                      <ng-container\n                                        *ngTemplateOutlet=\"cellContent; context: { $implicit: cell.getContext() }\" />\n                                    </div>\n                                  } @else if (cellContent | zTableHasIcon) {\n                                    <!-- Icon syntax rendering -->\n                                    <z-table-icon-text\n                                      [zText]=\"cellContent\"\n                                      [zTooltip]=\"cell | zTableCellConfig: zConfig().columns : 'contentTooltip'\"\n                                      [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                      [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\" />\n                                  } @else {\n                                    <!-- Default/innerHTML rendering -->\n                                    <div\n                                      class=\"z-table-cell-text\"\n                                      z-tooltip\n                                      [zContent]=\"\n                                        (cell | zTableCellConfig: zConfig().columns : 'contentTooltip') || cellContent\n                                      \"\n                                      [innerHTML]=\"cellContent | translate | zSafeHtml\"\n                                      [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                      [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"></div>\n                                  }\n                                </ng-container>\n                              }\n                            </td>\n                          }\n                        }\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Normal Scroll Mode -->\n          <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n            <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n            <tbody\n              [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n              [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n              <!-- Row Template -->\n              <ng-template #rowTemplate let-row>\n                <tr\n                  z-table-row-hover\n                  [attr.data-row-id]=\"row.id\"\n                  [ngStyle]=\"row | zTableRow: table : 'pinningStyles' : virtualRowHeight()\"\n                  [class.z-child-row]=\"row.depth > 0\"\n                  [class.z-selected]=\"row.getIsSelected()\"\n                  [class.z-indeterminate-selected]=\"row.getIsSomeSelected() && !row.getIsSelected()\"\n                  [class.z-pinned-top]=\"row.getIsPinned() === 'top'\"\n                  [class.z-pinned-bottom]=\"row.getIsPinned() === 'bottom'\"\n                  [class.z-shadow-bottom]=\"\n                    showHeaderFooterShadow() &&\n                    row.getIsPinned() === 'top' &&\n                    (row | zTableRow: table : 'isLastTopPinned')\n                  \"\n                  [class.z-shadow-top]=\"\n                    showHeaderFooterShadow() &&\n                    row.getIsPinned() === 'bottom' &&\n                    (row | zTableRow: table : 'isFirstBottomPinned')\n                  \"\n                  [attr.data-depth]=\"row.depth\">\n                  @for (cell of row.getVisibleCells(); track cell.id) {\n                    @let shouldRenderRowSpan =\n                      cell | zTableSpan: zConfig().columns : 'shouldRender' : table.getRowModel().rows;\n                    @let shouldRenderColSpan = cell | zTableCellRender: row.getVisibleCells() : zConfig().columns : 'body';\n                    @if (shouldRenderRowSpan && shouldRenderColSpan) {\n                      <td\n                        [ngStyle]=\"\n                          cell.column | zTablePinningStyles: cell : 'body' : row.getVisibleCells() : zConfig().columns : columnSizingInfo()\n                        \"\n                        [class]=\"cell | zTableCellConfig: zConfig().columns : 'cellClass'\"\n                        [style]=\"cell | zTableCellConfig: zConfig().columns : 'cellStyle'\"\n                        [class.z-sticky-left]=\"cell.column.getIsPinned() === 'left'\"\n                        [class.z-sticky-right]=\"cell.column.getIsPinned() === 'right'\"\n                        [class.z-sticky-left-last]=\"\n                          cell.column.getIsPinned() === 'left' && cell.column.getIsLastColumn('left')\n                        \"\n                        [class.z-sticky-right-first]=\"\n                          cell.column.getIsPinned() === 'right' && cell.column.getIsFirstColumn('right')\n                        \"\n                        [class.z-sticky-right-last]=\"\n                          cell.column.getIsPinned() === 'right' && cell.column.getIsLastColumn('right')\n                        \"\n                        [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                        [class.z-col-select]=\"cell.column.id === 'select'\"\n                        [class.z-col-expand]=\"cell.column.id === 'expand'\"\n                        [class.z-col-actions]=\"\n                          cell.column.id === 'actions' || cell.column.id === actionColumnInfo()?.columnId\n                        \"\n                        [class.z-at-bottom]=\"cell | zTableCellBottom: zConfig().columns : table.getRowModel().rows\"\n                        [attr.rowspan]=\"cell | zTableSpan: zConfig().columns : 'cellRowSpan' : table.getRowModel().rows\"\n                        [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan'\">\n                        @if (cell.column.id === 'select') {\n                          <!-- Row Checkbox with Pin Button -->\n                          <div class=\"flex items-center justify-center gap-1\">\n                            <z-checkbox\n                              zSize=\"sm\"\n                              [zChecked]=\"cell.row.getIsSelected()\"\n                              [zIndeterminate]=\"cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\"\n                              [zDisabled]=\"!cell.row.getCanSelect()\"\n                              (zChange)=\"cell.row.toggleSelected()\" />\n                            @if (zConfig().enableRowPinning && cell.row.depth === 0 && !hasBodyRowSpan()) {\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            }\n                          </div>\n                        } @else if (cell.column.id === 'expand') {\n                          <!-- Expand Button with Row Pin Popover -->\n                          <div class=\"flex items-center justify-center gap-1\">\n                            @if (cell.row.subRows && cell.row.subRows.length > 0) {\n                              <button\n                                type=\"button\"\n                                (click)=\"cell.row.toggleExpanded()\"\n                                class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                                <z-icon\n                                  zType=\"lucideChevronRight\"\n                                  zSize=\"14\"\n                                  class=\"transition-transform duration-200\"\n                                  [class.rotate-90]=\"cell.row.getIsExpanded()\" />\n                              </button>\n                            }\n                            @if (\n                              zConfig().enableRowPinning &&\n                              cell.row.depth === 0 &&\n                              !(cell.row.subRows && cell.row.subRows.length > 0) &&\n                              !hasBodyRowSpan()\n                            ) {\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            }\n                          </div>\n                        } @else if (cell.column.id === 'actions') {\n                          <!-- Actions Column - Row Pin Only (for parent rows) -->\n                          @if (cell.row.depth === 0 && !hasBodyRowSpan()) {\n                            <div class=\"flex items-center justify-center\">\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            </div>\n                          }\n                        } @else if (cell.column.id === actionColumnInfo()?.columnId && actionColumnInfo()) {\n                          <z-table-actions\n                            [zConfig]=\"$any(actionColumnInfo()!.config)\"\n                            [zRow]=\"cell.row.original\"\n                            [zRowId]=\"cell.row.id\"\n                            (zActionClick)=\"onActionClick($event)\" />\n                        } @else {\n                          <ng-container\n                            *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellContent\">\n                            @if (cellContent | zTableIsTemplateRef) {\n                              <!-- TemplateRef rendering -->\n                              <div\n                                [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\">\n                                <ng-container\n                                  *ngTemplateOutlet=\"cellContent; context: { $implicit: cell.getContext() }\" />\n                              </div>\n                            } @else if (cellContent | zTableHasIcon) {\n                              <!-- Icon syntax rendering -->\n                              <z-table-icon-text\n                                [zText]=\"cellContent\"\n                                [zTooltip]=\"cell | zTableCellConfig: zConfig().columns : 'contentTooltip'\"\n                                [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\" />\n                            } @else {\n                              <!-- Default/innerHTML rendering -->\n                              <div\n                                class=\"z-table-cell-text\"\n                                z-tooltip\n                                [zContent]=\"\n                                  (cell | zTableCellConfig: zConfig().columns : 'contentTooltip') || cellContent\n                                \"\n                                [innerHTML]=\"cellContent | translate | zSafeHtml\"\n                                [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"></div>\n                            }\n                          </ng-container>\n                        }\n                      </td>\n                    }\n                  }\n                </tr>\n\n                <!-- Expanded Row Detail -->\n                @if (row.getIsExpanded() && row.depth === 0 && !row.subRows?.length && zConfig().expandedRowTemplate) {\n                  <tr class=\"z-expanded-row\">\n                    <td [attr.colspan]=\"row.getVisibleCells().length\" class=\"p-0\">\n                      <ng-container *ngTemplateOutlet=\"zConfig().expandedRowTemplate!; context: { $implicit: row }\" />\n                    </td>\n                  </tr>\n                }\n              </ng-template>\n\n              <!-- Render Top Pinned Rows (hidden when filtered data is empty) -->\n              @if (!isEmpty()) {\n                @for (row of table.getTopRows(); track row.id) {\n                  <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n                }\n              }\n\n              <!-- Render Center Rows -->\n              @for (row of table.getCenterRows(); track row.id) {\n                <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n              }\n\n              <!-- Render Bottom Pinned Rows (hidden when filtered data is empty) -->\n              @if (!isEmpty()) {\n                @for (row of bottomRowsReversed(); track row.id) {\n                  <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n                }\n              }\n            </tbody>\n          </table>\n        }\n      </ng-scrollbar>\n    }\n    <!-- end @else -->\n  </div>\n\n  <!-- Footer table -->\n  @if (hasFooter()) {\n    <div\n      class=\"z-tfoot-wrapper\"\n      [class.z-shadow-footer]=\"shouldFooterShowShadow()\"\n      [class.z-scroll-left]=\"hasScrollLeft()\"\n      [class.z-scroll-right]=\"hasScrollRight()\"\n      #tfootWrapper>\n      <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n        <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n        <tfoot>\n          @for (footerGroup of orderedFooterGroups(); track footerGroup.id) {\n            @if (footerGroup | zTableFooterContent: zConfig().columns) {\n              <tr>\n                @for (footer of footerGroup.headers; track footer.id) {\n                  @let rowSpan = footer | zTableSpan: zConfig().columns : 'footerRowSpan';\n                  @let shouldRender = footer | zTableCellRender: footerGroup.headers : zConfig().columns : 'footer';\n                  @if (rowSpan && shouldRender) {\n                    <th\n                      [ngStyle]=\"footer.column | zTablePinningStyles: footer : 'footer' : table : zConfig().columns : columnSizingInfo()\"\n                      [class]=\"\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerClass') +\n                        ' ' +\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass')\n                      \"\n                      [style]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerStyle'\"\n                      [class.z-sticky-left]=\"footer.column.getIsPinned() === 'left'\"\n                      [class.z-sticky-right]=\"footer.column.getIsPinned() === 'right'\"\n                      [class.z-sticky-left-last]=\"\n                        footer | zTableCellPin: 'isLastLeftPinned' : zConfig().columns : 'footer'\n                      \"\n                      [class.z-sticky-right-first]=\"\n                        footer | zTableCellPin: 'isFirstRightPinned' : zConfig().columns : 'footer'\n                      \"\n                      [class.z-sticky-right-last]=\"\n                        footer | zTableCellPin: 'isLastRightPinned' : zConfig().columns : 'footer'\n                      \"\n                      [class.z-at-left-edge]=\"footer | zTableCellOffset: orderedLeafColumns()\"\n                      [attr.rowspan]=\"rowSpan\"\n                      [attr.colspan]=\"footer | zTableSpan: zConfig().columns : 'footerColSpan'\">\n                      @let configFooterContent =\n                        footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContent';\n                      @if (footer.column.columnDef.footer) {\n                        <ng-container\n                          *flexRender=\"footer.column.columnDef.footer; props: footer.getContext(); let footerContent\">\n                          <div\n                            class=\"flex w-full items-center\"\n                            [class.justify-center]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                              'text-center'\n                            \"\n                            [class.justify-end]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                              'text-right'\n                            \">\n                            @if (footerContent | zTableIsTemplateRef) {\n                              <!-- TemplateRef rendering -->\n                              <div\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \">\n                                <ng-container\n                                  *ngTemplateOutlet=\"footerContent; context: { $implicit: footer.getContext() }\" />\n                              </div>\n                            } @else if (footerContent | zTableHasIcon) {\n                              <!-- Icon syntax rendering -->\n                              <z-table-icon-text\n                                [zText]=\"footerContent\"\n                                [zTooltip]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip'\"\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \" />\n                            } @else {\n                              <!-- Default/string rendering -->\n                              <span\n                                class=\"z-table-cell-text\"\n                                z-tooltip\n                                [zContent]=\"\n                                  (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip') ||\n                                  footerContent\n                                \"\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \">\n                                {{ footerContent | translate }}\n                              </span>\n                            }\n                          </div>\n                        </ng-container>\n                      } @else if (configFooterContent) {\n                        <!-- Fallback for group columns without TanStack footer -->\n                        <div\n                          class=\"flex w-full items-center\"\n                          [class.justify-center]=\"\n                            (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                            'text-center'\n                          \"\n                          [class.justify-end]=\"\n                            (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                            'text-right'\n                          \">\n                          <span\n                            class=\"z-table-cell-text\"\n                            z-tooltip\n                            [zContent]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip') ||\n                              $any(configFooterContent)\n                            \"\n                            [ngClass]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\"\n                            [ngStyle]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\">\n                            {{ $any(configFooterContent) | translate }}\n                          </span>\n                        </div>\n                      }\n                    </th>\n                  }\n                }\n              </tr>\n            }\n          }\n        </tfoot>\n      </table>\n    </div>\n  }\n</div>\n\n<!-- Pagination -->\n@if (zConfig().enablePagination && zConfig().pagination?.enabled !== false) {\n  @let totalRows = table.getFilteredRowModel().rows.length;\n  <div class=\"mt-4 flex items-center justify-between gap-4\">\n    <div class=\"text-sm text-gray-500\">\n      {{\n        ('i18n_z_ui_table_total_rows' | translate).replace(\n          '{total}',\n          zConfig().totalCount?.toString() || totalRows.toString()\n        )\n      }}\n    </div>\n    <z-pagination\n      [zTotal]=\"zConfig().totalCount ?? totalRows\"\n      [(zPageIndex)]=\"pagination().pageIndex\"\n      [(zPageSize)]=\"pagination().pageSize\"\n      [zPageSizeOptions]=\"zConfig().pagination?.pageSizeOptions ?? [10, 20, 50, 100]\"\n      [zShowSizeChanger]=\"zConfig().pagination?.showSizeChanger ?? true\"\n      [zShowQuickJumper]=\"zConfig().pagination?.showQuickJumper ?? false\"\n      [zShowTotal]=\"false\"\n      [zDisabled]=\"zConfig().pagination?.disabled || zLoading() || isProcessing()\"\n      (zOnPageChange)=\"onPageChange($event)\" />\n  </div>\n}\n\n<!-- Settings Drawer -->\n<z-drawer\n  [(zVisible)]=\"showSettingsDrawer\"\n  [zTitle]=\"'i18n_z_ui_table_settings_title' | translate\"\n  zPlacement=\"right\"\n  zWidth=\"500px\"\n  [zShadow]=\"true\"\n  [zOkText]=\"null\"\n  [zCancelText]=\"'i18n_z_ui_drawer_close' | translate\">\n  <div class=\"z-table-settings-drawer px-4\">\n    <!-- Display Settings -->\n    <div class=\"mb-4\">\n      <h4 class=\"text-foreground mb-2 text-sm font-semibold\">{{ 'i18n_z_ui_table_display_settings' | translate }}</h4>\n      <p class=\"text-muted-foreground mb-3 text-xs\">{{ 'i18n_z_ui_table_display_settings_desc' | translate }}</p>\n      <div class=\"grid grid-cols-2 gap-x-4 gap-y-3\">\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showHorizontalBorder()\"\n          [zText]=\"'i18n_z_ui_table_horizontal_border' | translate\"\n          (zChange)=\"showHorizontalBorder.set(!showHorizontalBorder())\" />\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showVerticalBorder()\"\n          [zText]=\"'i18n_z_ui_table_vertical_border' | translate\"\n          (zChange)=\"showVerticalBorder.set(!showVerticalBorder())\" />\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showHeaderFooterShadow()\"\n          [zText]=\"'i18n_z_ui_table_header_footer_shadow' | translate\"\n          (zChange)=\"showHeaderFooterShadow.set(!showHeaderFooterShadow())\" />\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-border my-4 border-t\"></div>\n\n    <!-- Unified Column Settings -->\n    @if (zConfig().enableSettings) {\n      <div class=\"mb-4\">\n        <h4 class=\"text-foreground mb-2 text-sm font-semibold\">{{ 'i18n_z_ui_table_column_settings' | translate }}</h4>\n        <p class=\"text-muted-foreground mb-3 text-xs\">{{ 'i18n_z_ui_table_column_settings_desc' | translate }}</p>\n\n        <!-- Unpinned Columns (Draggable) -->\n        <div\n          cdkDropList\n          #columnDropList=\"cdkDropList\"\n          (cdkDropListDropped)=\"onPendingColumnDrop($event)\"\n          class=\"z-column-drop-list space-y-1.5\">\n          @for (columnId of columnOrder(); track columnId; let i = $index) {\n            @if (columnId !== 'expand' && columnId !== 'select') {\n              @let column = table.getColumn(columnId);\n              @let isPinned = column?.getIsPinned();\n              @let isVisible = columnVisibility()[columnId] !== false;\n              @let canPin = column?.getCanPin() !== false && zConfig().enableColumnPinning;\n              @if (!isPinned) {\n                <div\n                  cdkDrag\n                  [cdkDragData]=\"columnId\"\n                  cdkDragLockAxis=\"y\"\n                  cdkDragBoundary=\".z-column-drop-list\"\n                  cdkDragPreviewClass=\"z-drag-preview\"\n                  class=\"z-drag-item border-border bg-card hover:border-primary flex cursor-grab items-center gap-2 rounded border px-2 py-1.5 text-sm active:cursor-grabbing\"\n                  [class.opacity-60]=\"!isVisible\">\n                  <!-- Drag Handle -->\n                  <z-icon\n                    cdkDragHandle\n                    zType=\"lucideGripVertical\"\n                    zSize=\"14\"\n                    class=\"text-muted-foreground shrink-0 cursor-grab active:cursor-grabbing\" />\n\n                  <!-- Visibility Checkbox -->\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isVisible\"\n                    (change)=\"onToggleColumnVisibility(columnId)\"\n                    (mousedown)=\"$event.stopPropagation()\"\n                    class=\"border-input h-4 w-4 shrink-0 cursor-pointer rounded\" />\n\n                  <!-- Column Name -->\n                  <span class=\"flex min-w-0 flex-1 flex-col\">\n                    <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                      {{ columnId | zTableColumnHeader: zConfig().columns | translate }}\n                    </span>\n                    @let parents = columnId | zTableColumnParents: zConfig().columns;\n                    @if (parents) {\n                      <span class=\"text-muted-foreground truncate text-[10px]\">({{ parents | translate }})</span>\n                    }\n                  </span>\n\n                  <!-- Pin Buttons -->\n                  @if (canPin) {\n                    <div class=\"flex shrink-0 items-center gap-0.5\" (mousedown)=\"$event.stopPropagation()\">\n                      <button\n                        type=\"button\"\n                        [disabled]=\"!isVisible\"\n                        (click)=\"onToggleColumnPin(columnId, 'left')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                        title=\"Pin Left\">\n                        <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                      </button>\n                      <button\n                        type=\"button\"\n                        [disabled]=\"!isVisible\"\n                        (click)=\"onToggleColumnPin(columnId, 'right')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                        title=\"Pin Right\">\n                        <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                      </button>\n                    </div>\n                  }\n                </div>\n              }\n            }\n          }\n        </div>\n\n        <!-- Pinned Columns Section -->\n        @if (zConfig().enableColumnPinning) {\n          @if (pinnedColumnIds().length > 0) {\n            <div class=\"border-border mt-4 border-t pt-4\">\n              <h5 class=\"text-muted-foreground mb-2 text-xs font-medium\">\n                {{ 'i18n_z_ui_table_pinned_columns' | translate }}\n              </h5>\n              <div class=\"space-y-1.5\">\n                @for (columnId of pinnedColumnIds(); track columnId) {\n                  @let column = table.getColumn(columnId);\n                  @let isPinned = column?.getIsPinned();\n                  @let isVisible = columnVisibility()[columnId] !== false;\n                  <div\n                    class=\"border-border bg-muted/30 flex items-center gap-2 rounded border px-2 py-1.5 text-sm\"\n                    [class.opacity-60]=\"!isVisible\">\n                    <!-- Pin Icon -->\n                    <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"text-primary shrink-0\" />\n\n                    <!-- Visibility Checkbox -->\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"isVisible\"\n                      (change)=\"onToggleColumnVisibility(columnId)\"\n                      class=\"border-input h-4 w-4 shrink-0 cursor-pointer rounded\" />\n\n                    <!-- Column Name -->\n                    <span class=\"flex min-w-0 flex-1 flex-col\">\n                      <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                        {{ columnId | zTableColumnHeader: zConfig().columns | translate }}\n                      </span>\n                      @let pinnedParents = columnId | zTableColumnParents: zConfig().columns;\n                      @if (pinnedParents) {\n                        <span class=\"text-muted-foreground truncate text-[10px]\">\n                          ({{ pinnedParents | translate }})\n                        </span>\n                      }\n                    </span>\n\n                    <!-- Position Badge -->\n                    <span class=\"bg-primary/10 text-primary shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium\">\n                      {{\n                        isPinned === 'left'\n                          ? ('i18n_z_ui_table_left' | translate)\n                          : ('i18n_z_ui_table_right' | translate)\n                      }}\n                    </span>\n\n                    <!-- Unpin Button -->\n                    <button\n                      type=\"button\"\n                      (click)=\"onToggleColumnPin(columnId, isPinned === 'left' ? 'left' : 'right')\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground cursor-pointer rounded p-1 text-xs transition-colors\"\n                      title=\"Unpin\">\n                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        }\n      </div>\n    }\n  </div>\n</z-drawer>\n", styles: [":host{display:flex;flex-direction:column;height:100%;--scrollbar-track-thickness: 7px;--scrollbar-track-color: transparent;--scrollbar-thumb-shape: 3px}.z-table-container{display:flex;flex-direction:column;position:relative;width:100%;height:100%;overflow:hidden;border-radius:8px;border:thin solid var(--border);background-color:var(--card)}.z-table-container.z-hide-horizontal-border th,.z-table-container.z-hide-horizontal-border td{border-bottom:none!important;border-top:none!important}.z-table-container.z-hide-vertical-border th,.z-table-container.z-hide-vertical-border td{border-left:none!important}table{width:fit-content;min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:14px}.z-table-toolbar .z-settings-btn{transition:all .15s ease}.z-table-toolbar .z-settings-btn:hover{border-color:var(--muted-foreground)}.z-table-cell-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;-webkit-user-select:text;user-select:text}.z-thead-wrapper{flex-shrink:0;background:var(--muted);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.z-thead-wrapper::-webkit-scrollbar{display:none}.z-thead-wrapper th{height:auto;padding:8px 12px;text-align:left;vertical-align:middle;font-weight:500;color:var(--foreground);white-space:nowrap;overflow:hidden;background:var(--muted);border-left:thin solid var(--border);border-bottom:thin solid var(--border);-webkit-user-select:none;user-select:none}.z-thead-wrapper th.z-at-left-edge{border-left:none}.z-thead-wrapper th[colspan]{text-align:center;background:var(--muted);font-weight:500;color:var(--foreground)}.z-thead-wrapper.z-shadow-header{box-shadow:0 1px 3px #00000014;position:relative;z-index:15}.z-thead-wrapper.z-shadow-header:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d}.z-tbody-wrapper{flex:1;min-height:100px;display:flex;flex-direction:column}.z-tbody-scrollbar{flex:1;height:100%}.z-empty-state,.z-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:100px;height:100%;color:var(--muted-foreground);font-size:.875rem;animation:z-fade-in .2s ease-out}.z-tbody-scrollbar,.z-tbody-scrollbar table{animation:z-fade-in .2s ease-out}@keyframes z-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.z-tbody-wrapper tr{transition:background-color .15s ease}.z-tbody-wrapper tr:hover,.z-tbody-wrapper tr:hover td[style*=sticky]{background-color:var(--muted)}.z-tbody-wrapper tr.z-pinned-top td.z-sticky-left,.z-tbody-wrapper tr.z-pinned-top td.z-sticky-right,.z-tbody-wrapper tr.z-pinned-bottom td.z-sticky-left,.z-tbody-wrapper tr.z-pinned-bottom td.z-sticky-right{z-index:3}.z-tbody-wrapper tr.z-shadow-bottom{box-shadow:0 1px 3px #00000014!important;position:relative;z-index:15}.z-tbody-wrapper tr.z-shadow-bottom:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d!important}.z-tbody-wrapper tr.z-shadow-top{box-shadow:0 -2px 4px #0000000d!important;position:relative;z-index:15}.z-tbody-wrapper tr.z-shadow-top:where(.dark,.dark *){box-shadow:0 -2px 4px #0003!important}.z-tbody-wrapper td{padding:8px 12px;height:40px;vertical-align:middle;color:var(--foreground);white-space:nowrap;overflow:hidden;background:var(--card);border-left:thin solid var(--border);border-bottom:thin solid var(--border);box-sizing:border-box}.z-tbody-wrapper tbody.z-has-vertical-scroll td.z-at-bottom,.z-tbody-wrapper tbody.z-last-row-touches-bottom td.z-at-bottom{border-bottom:none}.z-tbody-wrapper td.z-at-left-edge{border-left:none}.z-tbody-wrapper td i{color:var(--muted-foreground);font-style:italic}.z-tbody-wrapper td[rowspan]{vertical-align:top;padding-top:12px}.z-tbody-wrapper td.z-row-hover{background-color:var(--muted)!important}.z-tbody-wrapper td.z-col-select,.z-tbody-wrapper td.z-col-expand,.z-tbody-wrapper td.z-col-actions{padding:8px 4px!important;text-align:center}.z-tbody-wrapper tr.z-child-row td.z-col-select:first-child,.z-tbody-wrapper tr.z-child-row td.z-col-expand:first-child,.z-tbody-wrapper tr.z-child-row td.z-col-actions:first-child{padding-left:0!important}.z-virtual-scroll-inner{position:relative;width:100%}.z-virtual-row{position:absolute;top:0;left:0;width:100%}tr.z-child-row td:first-child{padding-left:12px!important}tbody tr.z-selected,tbody tr.z-selected td{background-color:color-mix(in srgb,var(--primary) 15%,transparent)!important}tbody tr.z-selected:hover,tbody tr.z-selected:hover td{background-color:color-mix(in srgb,var(--primary) 20%,transparent)!important}tbody tr.z-indeterminate-selected,tbody tr.z-indeterminate-selected td{background-color:color-mix(in srgb,var(--primary) 10%,transparent)!important}tbody tr.z-indeterminate-selected:hover,tbody tr.z-indeterminate-selected:hover td{background-color:color-mix(in srgb,var(--primary) 15%,transparent)!important}tbody tr.z-pinned-top td{background-color:var(--card)!important}tbody tr.z-pinned-top:hover{background-color:var(--muted)}tbody tr.z-pinned-top:hover td{background-color:var(--muted)!important}tbody tr.z-pinned-bottom td{background-color:var(--card)!important}tbody tr.z-pinned-bottom:hover{background-color:var(--muted)}tbody tr.z-pinned-bottom:hover td,tr.z-expanded-row td{background-color:var(--muted)!important}thead th{position:relative}thead th .z-resizer{position:absolute;right:0;top:0;height:100%;width:8px;background:transparent;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;z-index:5}thead th .z-resizer:after{content:\"\";position:absolute;right:0;top:0;height:100%;width:3px;background:#0000001a;opacity:0;transition:opacity .2s ease}thead th .z-resizer:after:where(.dark,.dark *){background:#ffffff1a}thead th .z-resizer:hover:after{opacity:1;background:var(--primary);width:3px}thead th .z-resizer.z-is-resizing:after{opacity:1;background:var(--primary);width:3px}thead th .z-resizer.z-resizer-left{right:auto;left:0}thead th .z-resizer.z-resizer-left:after{right:auto;left:0}.z-thead-wrapper th.z-sticky-left,.z-thead-wrapper th.z-sticky-right,.z-tbody-wrapper th.z-sticky-left,.z-tbody-wrapper th.z-sticky-right,.z-tfoot-wrapper th.z-sticky-left,.z-tfoot-wrapper th.z-sticky-right{background-color:var(--muted);z-index:1;transform:translateZ(0);backface-visibility:hidden}.z-thead-wrapper td.z-sticky-left,.z-thead-wrapper td.z-sticky-right,.z-tbody-wrapper td.z-sticky-left,.z-tbody-wrapper td.z-sticky-right,.z-tfoot-wrapper td.z-sticky-left,.z-tfoot-wrapper td.z-sticky-right{background-color:var(--card);z-index:1;transform:translateZ(0);backface-visibility:hidden}.z-thead-wrapper th.z-sticky-left-last,.z-thead-wrapper td.z-sticky-left-last,.z-tbody-wrapper th.z-sticky-left-last,.z-tbody-wrapper td.z-sticky-left-last,.z-tfoot-wrapper th.z-sticky-left-last,.z-tfoot-wrapper td.z-sticky-left-last{position:relative;overflow:visible}.z-thead-wrapper th.z-sticky-left-last:after,.z-thead-wrapper td.z-sticky-left-last:after,.z-tbody-wrapper th.z-sticky-left-last:after,.z-tbody-wrapper td.z-sticky-left-last:after,.z-tfoot-wrapper th.z-sticky-left-last:after,.z-tfoot-wrapper td.z-sticky-left-last:after{content:\"\";position:absolute;top:0;bottom:0;right:-30px;width:30px;pointer-events:none;box-shadow:inset 10px 0 8px -8px #0000001a;z-index:10;opacity:0;transition:opacity .2s ease}:host-context(.dark) .z-thead-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-thead-wrapper td.z-sticky-left-last:after,:host-context(.dark) .z-tbody-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-tbody-wrapper td.z-sticky-left-last:after,:host-context(.dark) .z-tfoot-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-tfoot-wrapper td.z-sticky-left-last:after{box-shadow:inset 10px 0 10px -8px #00000080}.z-thead-wrapper.z-scroll-left th.z-sticky-left-last:after,.z-thead-wrapper.z-scroll-left td.z-sticky-left-last:after,.z-tbody-wrapper.z-scroll-left th.z-sticky-left-last:after,.z-tbody-wrapper.z-scroll-left td.z-sticky-left-last:after,.z-tfoot-wrapper.z-scroll-left th.z-sticky-left-last:after,.z-tfoot-wrapper.z-scroll-left td.z-sticky-left-last:after{opacity:1}.z-thead-wrapper th.z-sticky-right-first,.z-thead-wrapper td.z-sticky-right-first,.z-tbody-wrapper th.z-sticky-right-first,.z-tbody-wrapper td.z-sticky-right-first,.z-tfoot-wrapper th.z-sticky-right-first,.z-tfoot-wrapper td.z-sticky-right-first{position:relative;overflow:visible}.z-thead-wrapper th.z-sticky-right-first:before,.z-thead-wrapper td.z-sticky-right-first:before,.z-tbody-wrapper th.z-sticky-right-first:before,.z-tbody-wrapper td.z-sticky-right-first:before,.z-tfoot-wrapper th.z-sticky-right-first:before,.z-tfoot-wrapper td.z-sticky-right-first:before{content:\"\";position:absolute;top:0;bottom:0;left:-30px;width:30px;pointer-events:none;box-shadow:inset -10px 0 8px -8px #0000001a;z-index:10;opacity:0;transition:opacity .2s ease}:host-context(.dark) .z-thead-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-thead-wrapper td.z-sticky-right-first:before,:host-context(.dark) .z-tbody-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-tbody-wrapper td.z-sticky-right-first:before,:host-context(.dark) .z-tfoot-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-tfoot-wrapper td.z-sticky-right-first:before{box-shadow:inset -10px 0 10px -8px #00000080}.z-thead-wrapper.z-scroll-right th.z-sticky-right-first,.z-thead-wrapper.z-scroll-right td.z-sticky-right-first,.z-tbody-wrapper.z-scroll-right th.z-sticky-right-first,.z-tbody-wrapper.z-scroll-right td.z-sticky-right-first,.z-tfoot-wrapper.z-scroll-right th.z-sticky-right-first,.z-tfoot-wrapper.z-scroll-right td.z-sticky-right-first{border-left:none}.z-thead-wrapper.z-scroll-right th.z-sticky-right-first:before,.z-thead-wrapper.z-scroll-right td.z-sticky-right-first:before,.z-tbody-wrapper.z-scroll-right th.z-sticky-right-first:before,.z-tbody-wrapper.z-scroll-right td.z-sticky-right-first:before,.z-tfoot-wrapper.z-scroll-right th.z-sticky-right-first:before,.z-tfoot-wrapper.z-scroll-right td.z-sticky-right-first:before{opacity:1}.z-thead-wrapper th.z-sticky-right-last,.z-tfoot-wrapper th.z-sticky-right-last{position:relative}.z-thead-wrapper th.z-sticky-right-last:after,.z-tfoot-wrapper th.z-sticky-right-last:after{content:\"\";position:absolute;top:0;bottom:0;right:-30px;width:30px;background:var(--muted);pointer-events:none}.z-tfoot-wrapper{flex-shrink:0;background:var(--muted);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.z-tfoot-wrapper::-webkit-scrollbar{display:none}.z-tfoot-wrapper th{height:auto;padding:8px 12px;text-align:left;vertical-align:middle;font-weight:500;font-size:12px;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.5px;background:var(--muted);border-left:thin solid var(--border);border-top:thin solid var(--border)}.z-tfoot-wrapper th.z-at-left-edge{border-left:none}.z-tfoot-wrapper.z-shadow-footer{box-shadow:0 -2px 4px #0000000d;position:relative;z-index:15}.z-tfoot-wrapper.z-shadow-footer:where(.dark,.dark *){box-shadow:0 -2px 4px #0003}.z-pin-btn{padding:2px 4px;border-radius:4px;color:var(--muted-foreground);transition:all .15s ease}.z-pin-btn:hover{background-color:var(--muted);color:var(--foreground)}.z-pin-btn.z-pin-btn-active{color:var(--primary);background-color:var(--primary)}.z-pin-btn.z-pin-btn-active:hover{background-color:var(--primary);opacity:.8}.z-row-pin-trigger{opacity:1}.z-row-pin-trigger.text-primary{color:var(--primary)}.z-header-pin-trigger{opacity:1}.z-header-pin-trigger.text-primary{color:var(--primary)}th{overflow:hidden}th .z-header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th .z-header-text-wrapper{transition:background-color .15s ease;border-radius:4px;min-width:0;overflow:hidden;flex-shrink:1}th .z-header-text-wrapper.z-has-options:hover{background-color:color-mix(in srgb,var(--foreground) 8%,transparent)}th .z-header-text-wrapper.z-has-options:active{background-color:color-mix(in srgb,var(--foreground) 12%,transparent)}.cdk-drag-preview,.z-drag-preview{box-shadow:0 5px 20px #0003;border-radius:6px;background-color:var(--card);border:1px solid var(--primary);z-index:10000!important;pointer-events:none}.cdk-drag-preview:where(.dark,.dark *),.z-drag-preview:where(.dark,.dark *){box-shadow:0 5px 20px #00000080}.cdk-drag-placeholder{background-color:color-mix(in srgb,var(--primary) 10%,transparent);border:2px dashed var(--primary);border-radius:6px}.cdk-drag-animating{transition:transform .1s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder){transition:transform .1s cubic-bezier(0,0,.2,1)}.z-drag-item.cdk-drag-dragging{transition:none!important}.z-column-drop-list{min-height:50px}:host-context(.dark) .z-thead-wrapper.z-scroll-left th.z-sticky-left-last,:host-context(.dark) .z-thead-wrapper.z-scroll-left td.z-sticky-left-last,:host-context(.dark) .z-tbody-wrapper.z-scroll-left th.z-sticky-left-last,:host-context(.dark) .z-tbody-wrapper.z-scroll-left td.z-sticky-left-last,:host-context(.dark) .z-tfoot-wrapper.z-scroll-left th.z-sticky-left-last,:host-context(.dark) .z-tfoot-wrapper.z-scroll-left td.z-sticky-left-last{border-right:1px solid var(--border)}:host-context(.dark) .z-thead-wrapper.z-scroll-right th.z-sticky-right-first,:host-context(.dark) .z-thead-wrapper.z-scroll-right td.z-sticky-right-first,:host-context(.dark) .z-tbody-wrapper.z-scroll-right th.z-sticky-right-first,:host-context(.dark) .z-tbody-wrapper.z-scroll-right td.z-sticky-right-first,:host-context(.dark) .z-tfoot-wrapper.z-scroll-right th.z-sticky-right-first,:host-context(.dark) .z-tfoot-wrapper.z-scroll-right td.z-sticky-right-first{border-left:1px solid var(--border)}.z-table-settings-drawer input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:1rem;height:1rem;border:thin solid var(--input);border-radius:.25rem;background-color:var(--background);cursor:pointer;position:relative;transition:all .2s ease}.z-table-settings-drawer input[type=checkbox]:hover{border-color:var(--primary)}.z-table-settings-drawer input[type=checkbox]:checked{background-color:var(--primary);border-color:var(--primary)}.z-table-settings-drawer input[type=checkbox]:checked:after{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:.375rem;height:.625rem;border:solid var(--primary-foreground);border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.z-table-settings-drawer input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [], propDecorators: { zConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zConfig", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "zKey", required: false }] }], zChange: [{ type: i0.Output, args: ["zChange"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], theadWrapper: [{ type: i0.ViewChild, args: ['theadWrapper', { isSignal: true }] }], tbodyContainer: [{ type: i0.ViewChild, args: ['tbodyContainer', { isSignal: true }] }], tbodyWrapper: [{ type: i0.ViewChild, args: ['tbodyWrapper', { isSignal: true }] }], tbodyScrollbar: [{ type: i0.ViewChild, args: ['tbodyWrapper', { isSignal: true }] }], tfootWrapper: [{ type: i0.ViewChild, args: ['tfootWrapper', { isSignal: true }] }], expandedRowTemplate: [{ type: i0.ViewChild, args: ['expandedRowTemplate', { isSignal: true }] }] } });
 
 /**