@shival99/z-ui 1.0.1 → 1.0.3

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

@@ -0,0 +1,2628 @@
+import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, inject, ElementRef, Renderer2, Directive, Pipe, TemplateRef, computed, ChangeDetectionStrategy, Component, output, DestroyRef, NgZone, signal, viewChild, untracked, effect, afterNextRender } from '@angular/core';
+import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
+import { ZCheckboxComponent } from '@shival99/z-ui/components/z-checkbox';
+import { ZDrawerComponent } from '@shival99/z-ui/components/z-drawer';
+import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
+import { ZInputComponent } from '@shival99/z-ui/components/z-input';
+import { ZLoadingComponent } from '@shival99/z-ui/components/z-loading';
+import { ZPaginationComponent } from '@shival99/z-ui/components/z-pagination';
+import { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';
+import { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';
+import { ZSafeHtmlPipe } from '@shival99/z-ui/pipes';
+import { ZCacheService } from '@shival99/z-ui/services';
+import { createAngularTable, getFacetedMinMaxValues, getFacetedUniqueValues, getFacetedRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, getExpandedRowModel, getCoreRowModel, FlexRenderDirective } from '@tanstack/angular-table';
+import { injectVirtualizer } from '@tanstack/angular-virtual';
+import { NgScrollbar } from 'ngx-scrollbar';
+import { explicitEffect } from 'ngxtension/explicit-effect';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { ZSelectComponent } from '@shival99/z-ui/components/z-select';
+
+class ZTableRowHoverDirective {
+    zTableRowHover = input(null, ...(ngDevMode ? [{ debugName: "zTableRowHover" }] : []));
+    _elementRef = inject((ElementRef));
+    _renderer = inject(Renderer2);
+    onMouseEnter() {
+        this._handleHover(true);
+    }
+    onMouseLeave() {
+        this._handleHover(false);
+    }
+    _handleHover(isHover) {
+        const row = this._elementRef.nativeElement;
+        const table = this.zTableRowHover() || this._findParentTable(row);
+        if (!table) {
+            return;
+        }
+        const cellsInCurrentRow = Array.from(row.children);
+        cellsInCurrentRow.forEach(cell => {
+            this._toggleCellHover(cell, isHover);
+        });
+        const tbody = table.querySelector('tbody');
+        if (!tbody) {
+            return;
+        }
+        const allRows = Array.from(tbody.querySelectorAll('tr'));
+        const currentRowIndex = allRows.indexOf(row);
+        if (currentRowIndex === -1) {
+            return;
+        }
+        const grid = [];
+        for (let rowIdx = 0; rowIdx < allRows.length; rowIdx++) {
+            const r = allRows[rowIdx];
+            const cellsInRow = Array.from(r.children);
+            cellsInRow.forEach(cell => {
+                const rowSpan = parseInt(cell.getAttribute('rowspan') || '1', 10);
+                const rowEnd = rowIdx + rowSpan - 1;
+                grid.push({
+                    cell,
+                    rowStart: rowIdx,
+                    rowEnd: rowEnd,
+                });
+            });
+        }
+        grid.forEach(item => {
+            const coverCurrentRow = item.rowStart < currentRowIndex && item.rowEnd >= currentRowIndex;
+            if (!coverCurrentRow) {
+                return;
+            }
+            this._toggleCellHover(item.cell, isHover);
+        });
+    }
+    _toggleCellHover(cell, isHover) {
+        if (isHover) {
+            this._renderer.addClass(cell, 'z-row-hover');
+            return;
+        }
+        this._renderer.removeClass(cell, 'z-row-hover');
+    }
+    _findParentTable(element) {
+        let current = element.parentElement;
+        while (current) {
+            if (current.tagName === 'TABLE') {
+                return current;
+            }
+            current = current.parentElement;
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableRowHoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: ZTableRowHoverDirective, isStandalone: true, selector: "[z-table-row-hover], [zTableRowHover]", inputs: { zTableRowHover: { classPropertyName: "zTableRowHover", publicName: "zTableRowHover", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableRowHoverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[z-table-row-hover], [zTableRowHover]',
+                    standalone: true,
+                    host: {
+                        '(mouseenter)': 'onMouseEnter()',
+                        '(mouseleave)': 'onMouseLeave()',
+                    },
+                }]
+        }], propDecorators: { zTableRowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTableRowHover", required: false }] }] } });
+
+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_DEBOUNCE_TIME = 150;
+
+const isHeaderConfig = (config) => {
+    if (!config || typeof config !== 'object') {
+        return false;
+    }
+    return config.constructor === Object;
+};
+const isBodyConfig = (config) => {
+    if (!config || typeof config !== 'object') {
+        return false;
+    }
+    return config.constructor === Object;
+};
+const isFooterConfig = (config) => {
+    if (!config || typeof config !== 'object') {
+        return false;
+    }
+    return config.constructor === Object;
+};
+const getHeaderConfig = (col) => {
+    const empty = {
+        content: undefined,
+        class: undefined,
+        style: undefined,
+        align: undefined,
+        tooltip: undefined,
+        rowSpan: undefined,
+        colSpan: undefined,
+    };
+    if (!col) {
+        return empty;
+    }
+    if (!isHeaderConfig(col.header)) {
+        return { ...empty, content: col.header };
+    }
+    return {
+        content: col.header.content,
+        class: col.header.class,
+        style: col.header.style,
+        align: col.header.align,
+        tooltip: col.header.tooltip,
+        rowSpan: col.header.rowSpan,
+        colSpan: col.header.colSpan,
+    };
+};
+const getBodyConfig = (col, ctx) => {
+    const empty = {
+        content: undefined,
+        class: undefined,
+        style: undefined,
+        align: undefined,
+        rowSpan: undefined,
+        colSpan: undefined,
+        contentClass: undefined,
+        contentStyle: undefined,
+        tooltip: undefined,
+    };
+    if (!col) {
+        return empty;
+    }
+    if (!isBodyConfig(col.body)) {
+        return { ...empty, content: col.body };
+    }
+    const { body } = col;
+    const rowSpan = typeof body.rowSpan === 'function' && ctx ? body.rowSpan(ctx) : body.rowSpan;
+    const colSpan = typeof body.colSpan === 'function' && ctx ? body.colSpan(ctx) : body.colSpan;
+    const classValue = typeof body.class === 'function' && ctx ? body.class(ctx) : body.class;
+    const styleValue = typeof body.style === 'function' && ctx ? body.style(ctx) : body.style;
+    const contentClass = typeof body.contentClass === 'function' && ctx ? body.contentClass(ctx) : body.contentClass;
+    const contentStyle = typeof body.contentStyle === 'function' && ctx ? body.contentStyle(ctx) : body.contentStyle;
+    const tooltip = typeof body.tooltip === 'function' && ctx ? body.tooltip(ctx) : body.tooltip;
+    return {
+        content: body.content,
+        class: classValue,
+        style: styleValue,
+        align: body.align,
+        rowSpan: typeof rowSpan === 'number' ? rowSpan : undefined,
+        colSpan: typeof colSpan === 'number' ? colSpan : undefined,
+        contentClass,
+        contentStyle: contentStyle,
+        tooltip,
+    };
+};
+const getFooterConfig = (col) => {
+    const empty = {
+        content: undefined,
+        class: undefined,
+        style: undefined,
+        align: undefined,
+        tooltip: undefined,
+        rowSpan: undefined,
+        colSpan: undefined,
+    };
+    if (!col) {
+        return empty;
+    }
+    if (!isFooterConfig(col.footer)) {
+        return { ...empty, content: col.footer };
+    }
+    return {
+        content: col.footer.content,
+        class: col.footer.class,
+        style: col.footer.style,
+        align: col.footer.align,
+        tooltip: col.footer.tooltip,
+        rowSpan: col.footer.rowSpan,
+        colSpan: col.footer.colSpan,
+    };
+};
+const getHeaderContent = (col) => getHeaderConfig(col).content;
+const getBodyContent = (col) => {
+    if (!col?.body) {
+        return undefined;
+    }
+    return isBodyConfig(col.body) ? col.body.content : col.body;
+};
+const getFooterContent = (col) => getFooterConfig(col).content;
+const getBodyRowSpan = (col, ctx) => getBodyConfig(col, ctx).rowSpan;
+const getBodyColSpan = (col, ctx) => getBodyConfig(col, ctx).colSpan;
+const getHeaderRowSpan = (col) => getHeaderConfig(col).rowSpan;
+const getHeaderColSpan = (col) => getHeaderConfig(col).colSpan;
+const getFooterRowSpan = (col) => getFooterConfig(col).rowSpan;
+const getFooterColSpan = (col) => getFooterConfig(col).colSpan;
+function parseIconString(content) {
+    if (!content || typeof content !== 'string') {
+        return [{ type: 'text', value: content || '' }];
+    }
+    const parts = [];
+    const iconRegex = /\[icon:([^\]]+)\]/g;
+    let lastIndex = 0;
+    let match;
+    while ((match = iconRegex.exec(content)) !== null) {
+        if (match.index > lastIndex) {
+            const textPart = content.slice(lastIndex, match.index);
+            if (textPart) {
+                parts.push({ type: 'text', value: textPart });
+            }
+        }
+        const iconContent = match[1];
+        const attrs = iconContent.split('|');
+        const iconName = attrs[0];
+        const iconPart = { type: 'icon', value: iconName };
+        for (let i = 1; i < attrs.length; i++) {
+            const [key, val] = attrs[i].split(':');
+            if (key === 'size') {
+                iconPart.size = parseInt(val, 10);
+            }
+            if (key === 'class') {
+                iconPart.class = val;
+            }
+            if (key === 'strokeWidth') {
+                iconPart.strokeWidth = parseFloat(val);
+            }
+        }
+        parts.push(iconPart);
+        lastIndex = match.index + match[0].length;
+    }
+    if (lastIndex < content.length) {
+        parts.push({ type: 'text', value: content.slice(lastIndex) });
+    }
+    return parts.length > 0 ? parts : [{ type: 'text', value: content }];
+}
+function stripIconSyntax(content) {
+    if (!content || typeof content !== 'string') {
+        return content || '';
+    }
+    return content.replace(/\[icon:[^\]]+\]/g, '').trim();
+}
+function hasIconSyntax(content) {
+    if (!content || typeof content !== 'string') {
+        return false;
+    }
+    return /\[icon:[^\]]+\]/.test(content);
+}
+const findColumnConfig = (columnId, columns) => {
+    for (const col of columns) {
+        if (col.id === columnId) {
+            return col;
+        }
+        if (col.columns) {
+            const found = findColumnConfig(columnId, col.columns);
+            if (found) {
+                return found;
+            }
+        }
+    }
+    return undefined;
+};
+const deepestHeader = (header) => {
+    let last = header;
+    while (true) {
+        const next = last.isPlaceholder && last.colSpan === 1 && last.subHeaders.length === 1 ? last.subHeaders[0] : null;
+        if (!next) {
+            return last === header ? null : last;
+        }
+        last = next;
+    }
+};
+const tableHeaderRowSpan = (header) => {
+    const deepest = deepestHeader(header);
+    const rowSpan = (deepest ? deepest.depth - header.depth : 0) + 1;
+    const above = header.depth - header.column.depth;
+    return above > 1 ? null : rowSpan;
+};
+const calculateCellRowSpan = (cell, columnConfig, allRows) => {
+    if (!columnConfig?.body || !isBodyConfig(columnConfig.body)) {
+        return null;
+    }
+    const rowSpanValue = columnConfig.body.rowSpan;
+    if (!rowSpanValue) {
+        return null;
+    }
+    if (typeof rowSpanValue === 'function') {
+        const rowSpan = rowSpanValue(cell.getContext());
+        return rowSpan > 1 ? rowSpan : null;
+    }
+    if (rowSpanValue > 1) {
+        const currentRowId = cell.row.id;
+        const filteredIndex = allRows.findIndex(r => r.id === currentRowId);
+        if (filteredIndex === -1) {
+            return null;
+        }
+        if (filteredIndex % rowSpanValue !== 0) {
+            return null;
+        }
+        const remainingRows = allRows.length - filteredIndex;
+        const actualRowSpan = Math.min(rowSpanValue, remainingRows);
+        return actualRowSpan > 1 ? actualRowSpan : null;
+    }
+    return null;
+};
+const calculateCellColSpan = (cell, columnConfig) => {
+    if (!columnConfig?.body || !isBodyConfig(columnConfig.body)) {
+        return null;
+    }
+    const colSpanValue = columnConfig.body.colSpan;
+    if (!colSpanValue) {
+        return null;
+    }
+    const colSpan = typeof colSpanValue === 'function' ? colSpanValue(cell.getContext()) : colSpanValue;
+    return colSpan > 1 ? colSpan : null;
+};
+const calculateHeaderRowSpan = (header, columnConfig, columns) => {
+    const configRowSpan = getHeaderRowSpan(columnConfig);
+    if (configRowSpan !== undefined && configRowSpan !== null) {
+        return configRowSpan;
+    }
+    if (columns && header.column.parent) {
+        const parentConfig = findColumnConfig(header.column.parent.id, columns);
+        const parentRowSpan = getHeaderRowSpan(parentConfig);
+        if (parentRowSpan && parentRowSpan >= 2) {
+            return null;
+        }
+    }
+    const deepest = deepestHeader(header);
+    const rowSpan = (deepest ? deepest.depth - header.depth : 0) + 1;
+    const above = header.depth - header.column.depth;
+    return above > 1 ? null : rowSpan;
+};
+const calculateHeaderColSpan = (header, columnConfig) => {
+    const configColSpan = getHeaderColSpan(columnConfig);
+    if (configColSpan !== undefined && configColSpan !== null) {
+        return configColSpan;
+    }
+    return header.colSpan > 1 ? header.colSpan : null;
+};
+const calculateFooterRowSpan = (header, columnConfig) => {
+    const configRowSpan = getFooterRowSpan(columnConfig);
+    if (configRowSpan !== undefined && configRowSpan !== null) {
+        return configRowSpan;
+    }
+    const footerContent = getFooterContent(columnConfig);
+    if (footerContent !== undefined) {
+        return 1;
+    }
+    if (header.colSpan > 1) {
+        return 1;
+    }
+    return 1;
+};
+const calculateFooterColSpan = (header, columnConfig) => {
+    const configColSpan = getFooterColSpan(columnConfig);
+    if (configColSpan !== undefined && configColSpan !== null) {
+        return configColSpan;
+    }
+    return header.colSpan > 1 ? header.colSpan : null;
+};
+const shouldCellRenderUtil = (cell, columnConfig, allRows) => {
+    if (!columnConfig?.body || !isBodyConfig(columnConfig.body)) {
+        return true;
+    }
+    const rowSpanValue = columnConfig.body.rowSpan;
+    if (!rowSpanValue) {
+        return true;
+    }
+    if (typeof rowSpanValue === 'function') {
+        const rowSpan = rowSpanValue(cell.getContext());
+        return rowSpan !== 0;
+    }
+    if (rowSpanValue > 1) {
+        const currentRowId = cell.row.id;
+        const filteredIndex = allRows.findIndex(r => r.id === currentRowId);
+        if (filteredIndex === -1) {
+            return true;
+        }
+        return filteredIndex % rowSpanValue === 0;
+    }
+    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 currentIndex = allHeaders.findIndex(h => h.id === header.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 = getFooterColSpan(prevConfig);
+        if (prevColSpan && prevColSpan > 1) {
+            if (i + prevColSpan > currentIndex) {
+                return false;
+            }
+        }
+    }
+    return true;
+};
+const shouldHeaderRender = (header, allHeaders, columns) => {
+    const currentIndex = allHeaders.findIndex(h => h.id === header.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;
+            }
+        }
+    }
+    return true;
+};
+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;
+    const resolveHeaderOrFooter = (content) => {
+        if (!content) {
+            return undefined;
+        }
+        if (typeof content === 'string' || typeof content === 'number') {
+            return String(content);
+        }
+        if (typeof content === 'function') {
+            return content;
+        }
+        return undefined;
+    };
+    const columnDef = {
+        id: config.id,
+        size: config.size,
+        minSize: config.minSize ?? Z_DEFAULT_COLUMN_MIN_SIZE,
+        maxSize: config.maxSize,
+        enableSorting: sortConfig?.enabled ?? false,
+        enableColumnFilter: filterConfig?.enabled ?? false,
+        enableResizing: config.enableResizing,
+        enablePinning: config.enablePinning,
+        enableHiding: config.enableHiding,
+        filterType: filterConfig?.type,
+        filterOptions: filterConfig?.options,
+    };
+    if (config.accessorKey) {
+        columnDef.accessorKey = config.accessorKey;
+    }
+    if (config.accessorFn) {
+        columnDef.accessorFn = config.accessorFn;
+    }
+    columnDef.header = resolveHeaderOrFooter(getHeaderContent(config));
+    const bodyContent = getBodyContent(config);
+    if (typeof bodyContent === 'string' || typeof bodyContent === 'number') {
+        columnDef.cell = () => bodyContent;
+    }
+    if (typeof bodyContent === 'function') {
+        columnDef.cell = bodyContent;
+    }
+    columnDef.footer = resolveHeaderOrFooter(getFooterContent(config));
+    if (sortConfig?.sortFn) {
+        columnDef.sortingFn = sortConfig.sortFn;
+    }
+    if (filterConfig?.filterFn) {
+        columnDef.filterFn = filterConfig.filterFn;
+    }
+    if (filterConfig?.type === 'select') {
+        columnDef.filterFn = (row, columnId, filterValue) => {
+            if (!filterValue || (Array.isArray(filterValue) && filterValue.length === 0)) {
+                return true;
+            }
+            const cellValue = row.getValue(columnId);
+            if (Array.isArray(filterValue)) {
+                return filterValue.includes(cellValue);
+            }
+            return cellValue === filterValue;
+        };
+    }
+    if (config.columns && config.columns.length > 0) {
+        columnDef.columns = config.columns.map(subConfig => columnConfigToColumnDef(subConfig));
+    }
+    return columnDef;
+}
+
+const Z_TABLE_BODY_ALIGN_MAP = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+};
+class ZTableCellConfigPipe {
+    transform(cell, columns, property) {
+        const columnConfig = findColumnConfig(cell.column.id, columns);
+        const bodyConfig = getBodyConfig(columnConfig, cell.getContext());
+        switch (property) {
+            case 'cellClass':
+                return this._getCellClass(bodyConfig);
+            case 'cellStyle':
+                return bodyConfig.style || {};
+            case 'contentClass':
+                return bodyConfig.contentClass || '';
+            case 'contentStyle':
+                return bodyConfig.contentStyle || {};
+            case 'contentTooltip':
+                return bodyConfig.tooltip || '';
+            default:
+                return '';
+        }
+    }
+    _getCellClass(bodyConfig) {
+        const classes = [];
+        if (bodyConfig.align) {
+            const alignClass = Z_TABLE_BODY_ALIGN_MAP[bodyConfig.align];
+            if (alignClass) {
+                classes.push(alignClass);
+            }
+        }
+        if (bodyConfig.class) {
+            classes.push(bodyConfig.class);
+        }
+        return classes.join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableCellConfigPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZTableCellConfigPipe, isStandalone: true, name: "zTableCellConfig" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableCellConfigPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zTableCellConfig',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
+class ZTableCellOffsetPipe {
+    /**
+     * Calculate if a cell/header is at the left edge (offset = 0)
+     * Returns true if the cell should have no border-left (it's at the leftmost position)
+     */
+    transform(item, orderedColumns) {
+        const columnId = item.column.id;
+        // Find the index of this column in the ordered columns list
+        const columnIndex = orderedColumns.findIndex(col => col.id === columnId);
+        // If it's the first column (index 0), it's at the left edge
+        if (columnIndex === 0) {
+            return true;
+        }
+        // For headers with colSpan, check if any of its leaf columns is the first
+        if ('getLeafHeaders' in item) {
+            const header = item;
+            const leafHeaders = header.getLeafHeaders();
+            for (const leaf of leafHeaders) {
+                const leafIndex = orderedColumns.findIndex(col => col.id === leaf.column.id);
+                if (leafIndex === 0) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableCellOffsetPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZTableCellOffsetPipe, isStandalone: true, name: "zTableCellOffset" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableCellOffsetPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zTableCellOffset',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
+const Z_TABLE_ALIGN_MAP = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+};
+class ZTableColumnConfigPipe {
+    transform(columnId, columns, property) {
+        const columnConfig = findColumnConfig(columnId, columns);
+        switch (property) {
+            case 'headerClass': {
+                const headerConfig = getHeaderConfig(columnConfig);
+                return headerConfig.class || '';
+            }
+            case 'headerStyle': {
+                const headerConfig = getHeaderConfig(columnConfig);
+                return headerConfig.style || {};
+            }
+            case 'headerTooltip': {
+                const headerConfig = getHeaderConfig(columnConfig);
+                return headerConfig.tooltip || '';
+            }
+            case 'headerAlignClass': {
+                const headerConfig = getHeaderConfig(columnConfig);
+                return headerConfig.align ? Z_TABLE_ALIGN_MAP[headerConfig.align] || '' : '';
+            }
+            case 'footerClass': {
+                const footerConfig = getFooterConfig(columnConfig);
+                return footerConfig.class || '';
+            }
+            case 'footerStyle': {
+                const footerConfig = getFooterConfig(columnConfig);
+                return footerConfig.style || {};
+            }
+            case 'footerTooltip': {
+                const footerConfig = getFooterConfig(columnConfig);
+                return footerConfig.tooltip || '';
+            }
+            case 'footerAlignClass': {
+                const footerConfig = getFooterConfig(columnConfig);
+                return footerConfig.align ? Z_TABLE_ALIGN_MAP[footerConfig.align] || '' : '';
+            }
+            case 'hasBodyRowSpan':
+                return columnConfig ? isBodyConfig(columnConfig.body) && columnConfig.body.rowSpan !== undefined : false;
+            case 'footerContent': {
+                const footerConfig = getFooterConfig(columnConfig);
+                return footerConfig.content || '';
+            }
+            default:
+                return '';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableColumnConfigPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZTableColumnConfigPipe, isStandalone: true, name: "zTableColumnConfig" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableColumnConfigPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zTableColumnConfig',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
+class ZTableColumnHeaderPipe {
+    transform(columnId, columns) {
+        const columnConfig = findColumnConfig(columnId, columns);
+        if (!columnConfig) {
+            return columnId;
+        }
+        const headerConfig = getHeaderConfig(columnConfig);
+        if (typeof headerConfig.content === 'string') {
+            return stripIconSyntax(headerConfig.content);
+        }
+        return columnId;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableColumnHeaderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZTableColumnHeaderPipe, isStandalone: true, name: "zTableColumnHeader" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableColumnHeaderPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zTableColumnHeader',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
+class ZTableColumnParentsPipe {
+    transform(columnId, columns) {
+        const parents = [];
+        this._findParents(columnId, columns, parents);
+        return parents.length > 0 ? parents.join(' › ') : '';
+    }
+    _findParents(columnId, columns, parents, currentParents = []) {
+        for (const col of columns) {
+            if (col.id === columnId) {
+                parents.push(...currentParents);
+                return true;
+            }
+            if (col.columns && col.columns.length > 0) {
+                const parentName = this._getColumnName(col);
+                const found = this._findParents(columnId, col.columns, parents, [...currentParents, parentName]);
+                if (found) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    _getColumnName(col) {
+        const headerConfig = getHeaderConfig(col);
+        if (typeof headerConfig.content === 'string') {
+            return stripIconSyntax(headerConfig.content);
+        }
+        return col.id;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableColumnParentsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZTableColumnParentsPipe, isStandalone: true, name: "zTableColumnParents" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableColumnParentsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zTableColumnParents',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
+class ZTableFooterContentPipe {
+    transform(footerGroup, columns) {
+        return footerGroup.headers.some(header => {
+            const columnConfig = findColumnConfig(header.column.id, columns);
+            return columnConfig?.footer !== undefined;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableFooterContentPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZTableFooterContentPipe, isStandalone: true, name: "zTableFooterContent" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableFooterContentPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zTableFooterContent',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
+class ZTableHasIconPipe {
+    transform(content) {
+        if (typeof content !== 'string') {
+            return false;
+        }
+        return hasIconSyntax(content);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableHasIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZTableHasIconPipe, isStandalone: true, name: "zTableHasIcon" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableHasIconPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zTableHasIcon',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
+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) {
+        if (type === 'body') {
+            const allCells = Array.isArray(tableOrCells) ? tableOrCells : undefined;
+            return this._getBodyPinningStyles(column, item, allCells, columns || []);
+        }
+        if (type === 'header' && item && tableOrCells && !Array.isArray(tableOrCells)) {
+            return this._getHeaderPinningStyles(column, item, tableOrCells, columns || []);
+        }
+        return {};
+    }
+    _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;
+            }
+        }
+        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;
+            }
+        }
+        return {
+            left: isPinned === 'left' ? `${leftOffset}px` : undefined,
+            right: isPinned === 'right' ? `${rightOffset}px` : undefined,
+            position: isPinned ? 'sticky' : 'relative',
+            zIndex: isPinned ? 1 : 0,
+        };
+    }
+    _getHeaderPinningStyles(column, headerCurrent, table, columns) {
+        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;
+                }
+            }
+            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);
+            }
+        }
+        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,
+        };
+    }
+    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" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTablePinningStylesPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zTablePinningStyles',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
+class ZTableRowPipe {
+    transform(row, table, property, virtualRowHeight) {
+        switch (property) {
+            case 'isLastTopPinned':
+                return this._isLastTopPinnedRow(row, table);
+            case 'isFirstBottomPinned':
+                return this._isFirstBottomPinnedRow(row, table);
+            case 'pinningStyles':
+                return this._getRowPinningStyles(row, table, virtualRowHeight ?? 40);
+            default:
+                return false;
+        }
+    }
+    _isLastTopPinnedRow(row, table) {
+        const topRows = table.getTopRows();
+        if (topRows.length === 0) {
+            return false;
+        }
+        return row.getPinnedIndex() === topRows.length - 1;
+    }
+    _isFirstBottomPinnedRow(row, table) {
+        const bottomRows = table.getBottomRows();
+        if (bottomRows.length === 0) {
+            return false;
+        }
+        return row.getPinnedIndex() === bottomRows.length - 1;
+    }
+    _getRowPinningStyles(row, table, virtualRowHeight) {
+        const pinned = row.getIsPinned();
+        if (!pinned) {
+            return {};
+        }
+        const pinnedIndex = row.getPinnedIndex();
+        const defaultHeight = virtualRowHeight + 2;
+        if (pinned === 'top') {
+            let offset = 0;
+            const topRows = table.getTopRows();
+            for (let i = 0; i < pinnedIndex; i++) {
+                const rowEl = document.querySelector(`tr[data-row-id="${topRows[i].id}"]`);
+                offset += rowEl ? rowEl.getBoundingClientRect().height : defaultHeight;
+            }
+            return { position: 'sticky', top: `${offset}px`, zIndex: 2 };
+        }
+        if (pinned === 'bottom') {
+            let offset = 0;
+            const bottomRows = table.getBottomRows();
+            for (let i = 0; i < pinnedIndex; i++) {
+                const rowEl = document.querySelector(`tr[data-row-id="${bottomRows[i].id}"]`);
+                offset += rowEl ? rowEl.getBoundingClientRect().height : defaultHeight;
+            }
+            return { position: 'sticky', bottom: `${offset}px`, zIndex: 2 };
+        }
+        return {};
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableRowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZTableRowPipe, isStandalone: true, name: "zTableRow" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableRowPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zTableRow',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
+class ZTableSpanPipe {
+    transform(item, columns, property, allRows) {
+        const columnConfig = findColumnConfig(item.column.id, columns);
+        switch (property) {
+            case 'cellRowSpan':
+                return calculateCellRowSpan(item, columnConfig, allRows ?? []);
+            case 'cellColSpan':
+                return calculateCellColSpan(item, columnConfig);
+            case 'headerRowSpan':
+                return calculateHeaderRowSpan(item, columnConfig, columns);
+            case 'headerColSpan':
+                return calculateHeaderColSpan(item, columnConfig);
+            case 'footerRowSpan':
+                return calculateFooterRowSpan(item, columnConfig);
+            case 'footerColSpan':
+                return calculateFooterColSpan(item, columnConfig);
+            case 'shouldRender':
+                return shouldCellRenderUtil(item, columnConfig, allRows ?? []);
+            default:
+                return null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableSpanPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZTableSpanPipe, isStandalone: true, name: "zTableSpan" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableSpanPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zTableSpan',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
+class ZTableIsTemplateRefPipe {
+    transform(value) {
+        return value instanceof TemplateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableIsTemplateRefPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZTableIsTemplateRefPipe, isStandalone: true, name: "zTableIsTemplateRef" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableIsTemplateRefPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zTableIsTemplateRef',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
+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,
+                }]
+        }] });
+
+class ZTableFilterComponent {
+    zColumn = input.required(...(ngDevMode ? [{ debugName: "zColumn" }] : []));
+    zTable = input.required(...(ngDevMode ? [{ debugName: "zTable" }] : []));
+    _debounceTimeout = null;
+    _debounceMs = 300;
+    _columnDef = computed(() => this.zColumn().columnDef, ...(ngDevMode ? [{ debugName: "_columnDef" }] : []));
+    filterType = computed(() => this._columnDef().filterType, ...(ngDevMode ? [{ debugName: "filterType" }] : []));
+    columnFilterValue = computed(() => this.zColumn().getFilterValue(), ...(ngDevMode ? [{ debugName: "columnFilterValue" }] : []));
+    minValue = computed(() => this.zColumn().getFacetedMinMaxValues()?.[0] ?? '', ...(ngDevMode ? [{ debugName: "minValue" }] : []));
+    maxValue = computed(() => this.zColumn().getFacetedMinMaxValues()?.[1] ?? '', ...(ngDevMode ? [{ debugName: "maxValue" }] : []));
+    rangeMinValue = computed(() => {
+        const value = this.columnFilterValue();
+        if (!Array.isArray(value)) {
+            return '';
+        }
+        return value[0] ?? '';
+    }, ...(ngDevMode ? [{ debugName: "rangeMinValue" }] : []));
+    rangeMaxValue = computed(() => {
+        const value = this.columnFilterValue();
+        if (!Array.isArray(value)) {
+            return '';
+        }
+        return value[1] ?? '';
+    }, ...(ngDevMode ? [{ debugName: "rangeMaxValue" }] : []));
+    selectOptions = computed(() => {
+        const columnDef = this._columnDef();
+        const allOption = { label: 'All', value: '' };
+        if (columnDef.filterOptions && columnDef.filterOptions.length > 0) {
+            return [allOption, ...columnDef.filterOptions];
+        }
+        const uniqueValues = Array.from(this.zColumn().getFacetedUniqueValues().keys()).sort().slice(0, 5000);
+        return [allOption, ...uniqueValues.map(v => ({ label: String(v), value: String(v) }))];
+    }, ...(ngDevMode ? [{ debugName: "selectOptions" }] : []));
+    ngOnDestroy() {
+        if (this._debounceTimeout) {
+            clearTimeout(this._debounceTimeout);
+        }
+    }
+    onMinChangeDebounced(value) {
+        this._debounce(() => {
+            const numValue = value === null || value === '' ? undefined : Number(value);
+            this.zColumn().setFilterValue((old) => [numValue, old?.[1]]);
+        });
+    }
+    onMaxChangeDebounced(value) {
+        this._debounce(() => {
+            const numValue = value === null || value === '' ? undefined : Number(value);
+            this.zColumn().setFilterValue((old) => [old?.[0], numValue]);
+        });
+    }
+    onTextChangeDebounced(value) {
+        this._debounce(() => {
+            this.zColumn().setFilterValue(value);
+        });
+    }
+    onSelectChange(value) {
+        if (typeof value === 'object' && value !== null && 'value' in value) {
+            this.zColumn().setFilterValue(value.value || undefined);
+            return;
+        }
+        this.zColumn().setFilterValue(value || undefined);
+    }
+    _debounce(fn) {
+        if (this._debounceTimeout) {
+            clearTimeout(this._debounceTimeout);
+        }
+        this._debounceTimeout = setTimeout(fn, this._debounceMs);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZTableFilterComponent, isStandalone: true, selector: "z-table-filter", inputs: { zColumn: { classPropertyName: "zColumn", publicName: "zColumn", isSignal: true, isRequired: true, transformFunction: null }, zTable: { classPropertyName: "zTable", publicName: "zTable", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "z-table-filter block" }, ngImport: i0, template: `
+    @switch (filterType()) {
+      @case ('range') {
+        <div class="flex gap-1">
+          <z-input
+            zType="number"
+            zSize="sm"
+            zPlaceholder="Min"
+            [ngModel]="rangeMinValue()"
+            (ngModelChange)="onMinChangeDebounced($event)"
+            class="min-w-0 flex-1"
+          />
+          <z-input
+            zType="number"
+            zSize="sm"
+            zPlaceholder="Max"
+            [ngModel]="rangeMaxValue()"
+            (ngModelChange)="onMaxChangeDebounced($event)"
+            class="min-w-0 flex-1"
+          />
+        </div>
+      }
+      @case ('select') {
+        <z-select
+          zSize="sm"
+          [zOptions]="selectOptions()"
+          [ngModel]="columnFilterValue()?.toString() ?? ''"
+          zPlaceholder="All"
+          (ngModelChange)="onSelectChange($event)"
+          class="w-full min-w-0"
+        />
+      }
+      @case ('number') {
+        <z-input
+          zType="number"
+          zSize="sm"
+          zAllowClear
+          zPlaceholder="Search..."
+          [ngModel]="columnFilterValue()?.toString() ?? ''"
+          (ngModelChange)="onTextChangeDebounced($event)"
+          class="w-full"
+        />
+      }
+      @default {
+        <z-input
+          zType="text"
+          zSize="sm"
+          zAllowClear
+          zPlaceholder="Search..."
+          [ngModel]="(columnFilterValue() ?? '').toString()"
+          (ngModelChange)="onTextChangeDebounced($event)"
+          class="w-full"
+        />
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: ZSelectComponent, selector: "z-select", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zPrefix", "zAllowClear", "zWrap", "zShowSearch", "zPlaceholderSearch", "zDebounce", "zNotFoundText", "zEmptyText", "zEmptyIcon", "zMaxTagCount", "zDropdownMaxHeight", "zOptionHeight", "zVirtualScroll", "zShowAction", "zOptions", "zKey", "zSearchServer", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zSelectedTemplate", "zOptionTemplate", "zActionTemplate", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zValidators"], outputs: ["zOnSearch", "zOnLoadMore", "zControl"], exportAs: ["zSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableFilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'z-table-filter',
+                    imports: [FormsModule, ZInputComponent, ZSelectComponent],
+                    standalone: true,
+                    template: `
+    @switch (filterType()) {
+      @case ('range') {
+        <div class="flex gap-1">
+          <z-input
+            zType="number"
+            zSize="sm"
+            zPlaceholder="Min"
+            [ngModel]="rangeMinValue()"
+            (ngModelChange)="onMinChangeDebounced($event)"
+            class="min-w-0 flex-1"
+          />
+          <z-input
+            zType="number"
+            zSize="sm"
+            zPlaceholder="Max"
+            [ngModel]="rangeMaxValue()"
+            (ngModelChange)="onMaxChangeDebounced($event)"
+            class="min-w-0 flex-1"
+          />
+        </div>
+      }
+      @case ('select') {
+        <z-select
+          zSize="sm"
+          [zOptions]="selectOptions()"
+          [ngModel]="columnFilterValue()?.toString() ?? ''"
+          zPlaceholder="All"
+          (ngModelChange)="onSelectChange($event)"
+          class="w-full min-w-0"
+        />
+      }
+      @case ('number') {
+        <z-input
+          zType="number"
+          zSize="sm"
+          zAllowClear
+          zPlaceholder="Search..."
+          [ngModel]="columnFilterValue()?.toString() ?? ''"
+          (ngModelChange)="onTextChangeDebounced($event)"
+          class="w-full"
+        />
+      }
+      @default {
+        <z-input
+          zType="text"
+          zSize="sm"
+          zAllowClear
+          zPlaceholder="Search..."
+          [ngModel]="(columnFilterValue() ?? '').toString()"
+          (ngModelChange)="onTextChangeDebounced($event)"
+          class="w-full"
+        />
+      }
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'z-table-filter block',
+                    },
+                }]
+        }], propDecorators: { zColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "zColumn", required: true }] }], zTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTable", required: true }] }] } });
+
+class ZTableIconTextComponent {
+    zText = input('', ...(ngDevMode ? [{ debugName: "zText" }] : []));
+    zTooltip = input('', ...(ngDevMode ? [{ debugName: "zTooltip" }] : []));
+    hostEl = inject(ElementRef).nativeElement;
+    parts = computed(() => parseIconString(this.zText()), ...(ngDevMode ? [{ debugName: "parts" }] : []));
+    tooltipContent = computed(() => {
+        const tooltip = this.zTooltip();
+        if (tooltip) {
+            if (typeof tooltip === 'string') {
+                return stripIconSyntax(tooltip);
+            }
+            if (tooltip.content && typeof tooltip.content === 'string') {
+                return stripIconSyntax(tooltip.content);
+            }
+        }
+        return stripIconSyntax(this.zText());
+    }, ...(ngDevMode ? [{ debugName: "tooltipContent" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableIconTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZTableIconTextComponent, isStandalone: true, selector: "z-table-icon-text", inputs: { zText: { classPropertyName: "zText", publicName: "zText", isSignal: true, isRequired: false, transformFunction: null }, zTooltip: { classPropertyName: "zTooltip", publicName: "zTooltip", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span class="z-table-icon-text-inner">
+      @for (part of parts(); track $index) {
+        @if (part.type === 'icon') {
+          <z-icon
+            class="shrink-0"
+            [zType]="$any(part.value)"
+            [zSize]="$any(part.size ?? 14)"
+            [zStrokeWidth]="part.strokeWidth ?? 1.5"
+            [ngClass]="part.class ?? ''"
+          />
+        } @else {
+          <span
+            class="truncate select-text"
+            z-tooltip
+            [zContent]="tooltipContent()"
+            [zTriggerElement]="hostEl"
+            [innerHTML]="part.value | zSafeHtml"
+          ></span>
+        }
+      }
+    </span>
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;min-width:0;max-width:100%}.z-table-icon-text-inner{display:inline-flex;align-items:center;gap:4px;line-height:1.2;min-width:0;max-width:100%}span.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { 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: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableIconTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'z-table-icon-text', imports: [NgClass, ZIconComponent, ZTooltipDirective, ZSafeHtmlPipe], standalone: true, template: `
+    <span class="z-table-icon-text-inner">
+      @for (part of parts(); track $index) {
+        @if (part.type === 'icon') {
+          <z-icon
+            class="shrink-0"
+            [zType]="$any(part.value)"
+            [zSize]="$any(part.size ?? 14)"
+            [zStrokeWidth]="part.strokeWidth ?? 1.5"
+            [ngClass]="part.class ?? ''"
+          />
+        } @else {
+          <span
+            class="truncate select-text"
+            z-tooltip
+            [zContent]="tooltipContent()"
+            [zTriggerElement]="hostEl"
+            [innerHTML]="part.value | zSafeHtml"
+          ></span>
+        }
+      }
+    </span>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;align-items:center;min-width:0;max-width:100%}.z-table-icon-text-inner{display:inline-flex;align-items:center;gap:4px;line-height:1.2;min-width:0;max-width:100%}span.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+        }], propDecorators: { zText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zText", required: false }] }], zTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTooltip", required: false }] }] } });
+
+/* eslint-disable @stylistic/indent */
+class ZTableComponent {
+    zConfig = input({ data: [], columns: [], mode: 'local' }, ...(ngDevMode ? [{ debugName: "zConfig" }] : []));
+    zLoading = input(false, ...(ngDevMode ? [{ debugName: "zLoading" }] : []));
+    zKey = input('', ...(ngDevMode ? [{ debugName: "zKey" }] : []));
+    zChange = output();
+    zControl = output();
+    _destroyRef = inject(DestroyRef);
+    _ngZone = inject(NgZone);
+    _isSyncingScroll = signal(false, ...(ngDevMode ? [{ debugName: "_isSyncingScroll" }] : []));
+    _savedScrollLeft = signal(0, ...(ngDevMode ? [{ debugName: "_savedScrollLeft" }] : []));
+    _resizeObserver = null;
+    _settingsDebounceTimeout = null;
+    _filterEmitDebounceTimeout = null;
+    isProcessing = signal(false, ...(ngDevMode ? [{ debugName: "isProcessing" }] : []));
+    theadWrapper = viewChild('theadWrapper', ...(ngDevMode ? [{ debugName: "theadWrapper" }] : []));
+    tbodyContainer = viewChild('tbodyContainer', ...(ngDevMode ? [{ debugName: "tbodyContainer" }] : []));
+    tbodyWrapper = viewChild('tbodyWrapper', ...(ngDevMode ? [{ debugName: "tbodyWrapper" }] : []));
+    tbodyScrollbar = viewChild('tbodyWrapper', ...(ngDevMode ? [{ debugName: "tbodyScrollbar" }] : []));
+    tfootWrapper = viewChild('tfootWrapper', ...(ngDevMode ? [{ debugName: "tfootWrapper" }] : []));
+    expandedRowTemplate = viewChild('expandedRowTemplate', ...(ngDevMode ? [{ debugName: "expandedRowTemplate" }] : []));
+    columnPinning = signal({ left: [], right: [] }, ...(ngDevMode ? [{ debugName: "columnPinning" }] : []));
+    columnVisibility = signal({}, ...(ngDevMode ? [{ debugName: "columnVisibility" }] : []));
+    columnOrder = signal([], ...(ngDevMode ? [{ debugName: "columnOrder" }] : []));
+    expanded = signal({}, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    rowSelection = signal({}, ...(ngDevMode ? [{ debugName: "rowSelection" }] : []));
+    rowPinning = signal({ top: [], bottom: [] }, ...(ngDevMode ? [{ debugName: "rowPinning" }] : []));
+    columnFilters = signal([], ...(ngDevMode ? [{ debugName: "columnFilters" }] : []));
+    globalFilter = signal('', ...(ngDevMode ? [{ debugName: "globalFilter" }] : []));
+    pagination = signal({ pageIndex: 1, pageSize: 10 }, ...(ngDevMode ? [{ debugName: "pagination" }] : []));
+    sorting = signal([], ...(ngDevMode ? [{ debugName: "sorting" }] : []));
+    _tanstackPagination = computed(() => ({
+        ...this.pagination(),
+        pageIndex: Math.max(0, this.pagination().pageIndex - 1),
+    }), ...(ngDevMode ? [{ debugName: "_tanstackPagination" }] : []));
+    hasVerticalScroll = signal(false, ...(ngDevMode ? [{ debugName: "hasVerticalScroll" }] : []));
+    hasHorizontalScroll = signal(false, ...(ngDevMode ? [{ debugName: "hasHorizontalScroll" }] : []));
+    showSettingsDrawer = signal(false, ...(ngDevMode ? [{ debugName: "showSettingsDrawer" }] : []));
+    showHorizontalBorder = signal(true, ...(ngDevMode ? [{ debugName: "showHorizontalBorder" }] : []));
+    showVerticalBorder = signal(true, ...(ngDevMode ? [{ debugName: "showVerticalBorder" }] : []));
+    showHeaderFooterShadow = signal(true, ...(ngDevMode ? [{ debugName: "showHeaderFooterShadow" }] : []));
+    hasScrollLeft = signal(false, ...(ngDevMode ? [{ debugName: "hasScrollLeft" }] : []));
+    hasScrollRight = signal(false, ...(ngDevMode ? [{ debugName: "hasScrollRight" }] : []));
+    _columnPinVersion = signal(0, ...(ngDevMode ? [{ debugName: "_columnPinVersion" }] : []));
+    _dataForceUpdate = signal(0, ...(ngDevMode ? [{ debugName: "_dataForceUpdate" }] : []));
+    pinnedColumnIds = computed(() => {
+        this._columnPinVersion();
+        return this.columnOrder().filter(id => {
+            if (id === 'expand' || id === 'select') {
+                return false;
+            }
+            const column = this.table.getColumn(id);
+            return column && column.getIsPinned();
+        });
+    }, ...(ngDevMode ? [{ debugName: "pinnedColumnIds" }] : []));
+    pendingVisibleColumns = signal([], ...(ngDevMode ? [{ debugName: "pendingVisibleColumns" }] : []));
+    pendingColumnOrder = signal([], ...(ngDevMode ? [{ debugName: "pendingColumnOrder" }] : []));
+    pendingShowHeaderFooterShadow = signal(true, ...(ngDevMode ? [{ debugName: "pendingShowHeaderFooterShadow" }] : []));
+    hasBodyRowSpan = computed(() => {
+        const columns = this.zConfig().columns ?? [];
+        const checkRowSpan = (col) => {
+            if (isBodyConfig(col.body) && col.body.rowSpan !== undefined) {
+                return true;
+            }
+            if (col.columns?.length) {
+                return col.columns.some(c => checkRowSpan(c));
+            }
+            return false;
+        };
+        return columns.some(c => checkRowSpan(c));
+    }, ...(ngDevMode ? [{ debugName: "hasBodyRowSpan" }] : []));
+    hasSelectColumn = computed(() => {
+        const columns = this.zConfig().columns ?? [];
+        return columns.some(c => c.id === 'select');
+    }, ...(ngDevMode ? [{ debugName: "hasSelectColumn" }] : []));
+    hasExpandColumn = computed(() => {
+        const columns = this.zConfig().columns ?? [];
+        return columns.some(c => c.id === 'expand');
+    }, ...(ngDevMode ? [{ debugName: "hasExpandColumn" }] : []));
+    hasFiltering = computed(() => {
+        const columns = this.zConfig().columns ?? [];
+        const checkFilter = (col) => {
+            const filterConfig = typeof col.filter === 'boolean' ? { enabled: col.filter } : col.filter;
+            if (filterConfig?.enabled) {
+                return true;
+            }
+            if (col.columns?.length) {
+                return col.columns.some(c => checkFilter(c));
+            }
+            return false;
+        };
+        return columns.some(c => checkFilter(c));
+    }, ...(ngDevMode ? [{ debugName: "hasFiltering" }] : []));
+    hasSorting = computed(() => {
+        const columns = this.zConfig().columns ?? [];
+        const checkSorting = (col) => {
+            const sortConfig = typeof col.sort === 'boolean' ? { enabled: col.sort } : col.sort;
+            if (sortConfig?.enabled) {
+                return true;
+            }
+            if (col.columns?.length) {
+                return col.columns.some(c => checkSorting(c));
+            }
+            return false;
+        };
+        return columns.some(c => checkSorting(c));
+    }, ...(ngDevMode ? [{ debugName: "hasSorting" }] : []));
+    _data = computed(() => {
+        this._dataForceUpdate();
+        return this.zConfig().data ?? [];
+    }, ...(ngDevMode ? [{ debugName: "_data" }] : []));
+    _columns = computed(() => {
+        let cols = this.zConfig().columns ?? [];
+        cols = this._filterVisibleColumns(cols);
+        if (this.hasBodyRowSpan()) {
+            cols = cols.filter(c => c.id !== 'expand');
+        }
+        const hasExpandColumn = cols.some(c => c.id === 'expand');
+        const hasSelectColumn = cols.some(c => c.id === 'select');
+        const needsActionsColumn = this.zConfig().enableRowPinning && !hasExpandColumn && !hasSelectColumn && !this.hasBodyRowSpan();
+        if (needsActionsColumn) {
+            cols = [
+                {
+                    id: 'actions',
+                    header: '',
+                    cell: '',
+                    size: 30,
+                    minSize: 30,
+                    maxSize: 30,
+                    enableSorting: false,
+                    enableFiltering: false,
+                    enableResizing: false,
+                    enableHiding: false,
+                },
+                ...cols,
+            ];
+        }
+        return cols.map(c => {
+            const colDef = columnConfigToColumnDef(c);
+            if (colDef.id === 'select') {
+                colDef.size = 50;
+                colDef.minSize = 50;
+                colDef.maxSize = 50;
+                colDef.enableResizing = false;
+            }
+            if (colDef.id === 'expand' || colDef.id === 'actions') {
+                colDef.size = 50;
+                colDef.minSize = 50;
+                colDef.maxSize = 50;
+                colDef.enableResizing = false;
+            }
+            return colDef;
+        });
+    }, ...(ngDevMode ? [{ debugName: "_columns" }] : []));
+    isVirtual = computed(() => {
+        const { virtual } = this.zConfig();
+        if (!virtual) {
+            return false;
+        }
+        if (typeof virtual === 'boolean') {
+            return virtual;
+        }
+        return virtual.enabled;
+    }, ...(ngDevMode ? [{ debugName: "isVirtual" }] : []));
+    _virtualConfig = computed(() => {
+        const { virtual } = this.zConfig();
+        if (!virtual || typeof virtual === 'boolean') {
+            return {
+                enabled: !!virtual,
+                rowHeight: Z_DEFAULT_ROW_HEIGHT,
+                overscan: Z_DEFAULT_VIRTUAL_OVERSCAN,
+                groupSize: Z_DEFAULT_GROUP_SIZE,
+            };
+        }
+        return {
+            enabled: virtual.enabled,
+            rowHeight: virtual.rowHeight ?? Z_DEFAULT_ROW_HEIGHT,
+            overscan: virtual.overscan ?? Z_DEFAULT_VIRTUAL_OVERSCAN,
+            groupSize: virtual.groupSize ?? Z_DEFAULT_GROUP_SIZE,
+        };
+    }, ...(ngDevMode ? [{ debugName: "_virtualConfig" }] : []));
+    virtualRowHeight = computed(() => this._virtualConfig().rowHeight ?? Z_DEFAULT_ROW_HEIGHT, ...(ngDevMode ? [{ debugName: "virtualRowHeight" }] : []));
+    groupSize = computed(() => this._virtualConfig().groupSize ?? Z_DEFAULT_GROUP_SIZE, ...(ngDevMode ? [{ debugName: "groupSize" }] : []));
+    groupHeight = computed(() => this.groupSize() * this.virtualRowHeight(), ...(ngDevMode ? [{ debugName: "groupHeight" }] : []));
+    dynamicGroups = computed(() => {
+        if (!this.isVirtual()) {
+            return [];
+        }
+        this.columnFilters();
+        this.globalFilter();
+        this.sorting();
+        this.pagination();
+        const rows = untracked(() => this.table.getRowModel().rows);
+        const rowHeight = this.virtualRowHeight();
+        const groups = [];
+        let i = 0;
+        while (i < rows.length) {
+            const startIndex = i;
+            let maxRowSpan = 1;
+            const row = rows[i];
+            const cells = untracked(() => row.getAllCells());
+            for (const cell of cells) {
+                const columnConfig = this._findColumnConfig(cell.column.id);
+                const rowSpanValue = getBodyRowSpan(columnConfig, cell.getContext());
+                if (rowSpanValue && rowSpanValue > maxRowSpan) {
+                    maxRowSpan = rowSpanValue;
+                }
+            }
+            const groupRowCount = Math.max(1, maxRowSpan);
+            const endIndex = Math.min(i + groupRowCount - 1, rows.length - 1);
+            groups.push({
+                startIndex,
+                endIndex,
+                rowCount: endIndex - startIndex + 1,
+                height: (endIndex - startIndex + 1) * rowHeight,
+            });
+            i = endIndex + 1;
+        }
+        return groups;
+    }, ...(ngDevMode ? [{ debugName: "dynamicGroups" }] : []));
+    hasFooter = computed(() => {
+        const columns = this.zConfig().columns ?? [];
+        const checkFooter = (col) => {
+            if (col.footer) {
+                return true;
+            }
+            if (col.columns?.length) {
+                return col.columns.some(c => checkFooter(c));
+            }
+            return false;
+        };
+        return columns.some(c => checkFooter(c));
+    }, ...(ngDevMode ? [{ debugName: "hasFooter" }] : []));
+    isEmpty = computed(() => this.table.getRowModel().rows.length === 0, ...(ngDevMode ? [{ debugName: "isEmpty" }] : []));
+    isEmptyData = computed(() => this._data().length === 0, ...(ngDevMode ? [{ debugName: "isEmptyData" }] : []));
+    isNoSearchResults = computed(() => {
+        const isServerMode = this.zConfig().mode === 'server';
+        const hasActiveFilter = this.globalFilter().trim() !== '' || this.columnFilters().length > 0;
+        const noFilteredResults = this.isEmpty();
+        if (isServerMode) {
+            const totalCount = this.zConfig().totalCount ?? 0;
+            const hasPotentialData = totalCount > 0 || hasActiveFilter;
+            return hasPotentialData && noFilteredResults && hasActiveFilter;
+        }
+        const hasSourceData = this._data().length > 0;
+        return hasSourceData && noFilteredResults && hasActiveFilter;
+    }, ...(ngDevMode ? [{ debugName: "isNoSearchResults" }] : []));
+    orderedLeafColumns = computed(() => {
+        const leftCols = this.table.getLeftLeafColumns();
+        const centerCols = this.table.getCenterLeafColumns();
+        const rightCols = this.table.getRightLeafColumns();
+        return [...leftCols, ...centerCols, ...rightCols];
+    }, ...(ngDevMode ? [{ debugName: "orderedLeafColumns" }] : []));
+    orderedHeaderGroups = computed(() => {
+        void this.columnPinning();
+        void this.columnOrder();
+        const leftGroups = this.table.getLeftHeaderGroups();
+        const centerGroups = this.table.getCenterHeaderGroups();
+        const rightGroups = this.table.getRightHeaderGroups();
+        const maxRows = Math.max(leftGroups.length, centerGroups.length, rightGroups.length);
+        const result = [];
+        for (let i = 0; i < maxRows; i++) {
+            const leftHeaders = leftGroups[i]?.headers ?? [];
+            const centerHeaders = centerGroups[i]?.headers ?? [];
+            const rightHeaders = rightGroups[i]?.headers ?? [];
+            result.push({
+                id: `row-${i}`,
+                headers: [...leftHeaders, ...centerHeaders, ...rightHeaders],
+            });
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "orderedHeaderGroups" }] : []));
+    orderedFooterGroups = computed(() => {
+        void this.columnPinning();
+        void this.columnOrder();
+        const leftGroups = this.table.getLeftFooterGroups();
+        const centerGroups = this.table.getCenterFooterGroups();
+        const rightGroups = this.table.getRightFooterGroups();
+        const maxRows = Math.max(leftGroups.length, centerGroups.length, rightGroups.length);
+        const result = [];
+        for (let i = 0; i < maxRows; i++) {
+            const leftHeaders = leftGroups[i]?.headers ?? [];
+            const centerHeaders = centerGroups[i]?.headers ?? [];
+            const rightHeaders = rightGroups[i]?.headers ?? [];
+            const depth = leftGroups[i]?.depth ?? centerGroups[i]?.depth ?? rightGroups[i]?.depth ?? i;
+            result.push({
+                id: `footer-row-${i}`,
+                depth,
+                headers: [...leftHeaders, ...centerHeaders, ...rightHeaders],
+            });
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "orderedFooterGroups" }] : []));
+    bottomRowsReversed = computed(() => [...this.table.getBottomRows()].reverse(), ...(ngDevMode ? [{ debugName: "bottomRowsReversed" }] : []));
+    totalWidth = computed(() => {
+        const columns = this.table.getAllLeafColumns();
+        return columns.reduce((sum, col) => sum + col.getSize(), 0);
+    }, ...(ngDevMode ? [{ debugName: "totalWidth" }] : []));
+    shouldHeaderShowShadow = computed(() => this.showHeaderFooterShadow() && this.table.getTopRows().length === 0, ...(ngDevMode ? [{ debugName: "shouldHeaderShowShadow" }] : []));
+    shouldFooterShowShadow = computed(() => this.showHeaderFooterShadow() && this.table.getBottomRows().length === 0, ...(ngDevMode ? [{ debugName: "shouldFooterShowShadow" }] : []));
+    dynamicGroupRows = computed(() => {
+        const rows = this.table.getRowModel().rows;
+        const groups = this.dynamicGroups();
+        const size = this.groupSize();
+        const result = [];
+        if (groups.length > 0) {
+            for (const group of groups) {
+                result.push(rows.slice(group.startIndex, group.endIndex + 1));
+            }
+            return result;
+        }
+        const totalGroups = Math.ceil(rows.length / size);
+        for (let i = 0; i < totalGroups; i++) {
+            const startIndex = i * size;
+            const endIndex = Math.min(startIndex + size, rows.length);
+            result.push(rows.slice(startIndex, endIndex));
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "dynamicGroupRows" }] : []));
+    dynamicGroupHeights = computed(() => {
+        const groups = this.dynamicGroups();
+        const rowHeight = this.virtualRowHeight();
+        const defaultHeight = this.groupSize() * rowHeight;
+        if (groups.length > 0) {
+            return groups.map(group => group.height);
+        }
+        const rows = this.table.getRowModel().rows;
+        const size = this.groupSize();
+        const totalGroups = Math.ceil(rows.length / size);
+        return Array(totalGroups).fill(defaultHeight);
+    }, ...(ngDevMode ? [{ debugName: "dynamicGroupHeights" }] : []));
+    columnSizing = computed(() => this.table.getState().columnSizing, ...(ngDevMode ? [{ debugName: "columnSizing" }] : []));
+    columnSizingInfo = computed(() => this.table.getState().columnSizingInfo, ...(ngDevMode ? [{ debugName: "columnSizingInfo" }] : []));
+    columnSizeVars = computed(() => {
+        void this.columnSizing();
+        void this.columnSizingInfo();
+        void this.columnOrder();
+        void this.columnVisibility();
+        void this.columnPinning();
+        void this._columns();
+        const headers = untracked(() => this.table.getFlatHeaders());
+        const colSizes = {};
+        for (const header of headers) {
+            colSizes[`--header-${header.id}-size`] = header.getSize();
+            colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
+        }
+        return colSizes;
+    }, ...(ngDevMode ? [{ debugName: "columnSizeVars" }] : []));
+    table = createAngularTable(() => {
+        const config = this.zConfig();
+        const isServerMode = config.mode === 'server';
+        const pageSize = this.pagination().pageSize || 10;
+        const pageCount = isServerMode && config.totalRows ? Math.ceil(config.totalRows / pageSize) : undefined;
+        return {
+            data: this._data(),
+            columns: this._columns(),
+            getCoreRowModel: getCoreRowModel(),
+            getExpandedRowModel: this.hasExpandColumn() ? getExpandedRowModel() : undefined,
+            getFilteredRowModel: !isServerMode && this.hasFiltering() ? getFilteredRowModel() : undefined,
+            getSortedRowModel: !isServerMode && this.hasSorting() ? getSortedRowModel() : undefined,
+            getPaginationRowModel: !isServerMode && config.enablePagination ? getPaginationRowModel() : undefined,
+            getFacetedRowModel: !isServerMode && this.hasFiltering() ? getFacetedRowModel() : undefined,
+            getFacetedUniqueValues: !isServerMode && this.hasFiltering() ? getFacetedUniqueValues() : undefined,
+            getFacetedMinMaxValues: !isServerMode && this.hasFiltering() ? getFacetedMinMaxValues() : undefined,
+            manualFiltering: isServerMode,
+            manualSorting: isServerMode,
+            manualPagination: isServerMode,
+            pageCount: pageCount,
+            columnResizeMode: 'onChange',
+            enableRowSelection: this.hasSelectColumn(),
+            enableSubRowSelection: this.hasSelectColumn() && !!config.getSubRows,
+            enableRowPinning: config.enableRowPinning ?? false,
+            enableMultiSort: config.enableMultiSort ?? false,
+            keepPinnedRows: true,
+            getRowId: config.getRowId
+                ? (originalRow, index, parent) => config.getRowId?.(originalRow, index, parent?.original, this._data()) ?? `${index}`
+                : (_row, index) => `${index}`,
+            getSubRows: config.getSubRows
+                ? (originalRow, index) => config.getSubRows?.(originalRow, index, undefined, this._data())
+                : undefined,
+            getRowCanExpand: config.getRowCanExpand ?? (() => true),
+            state: {
+                columnPinning: this.columnPinning(),
+                columnVisibility: this.columnVisibility(),
+                columnOrder: this.columnOrder(),
+                expanded: this.expanded(),
+                rowSelection: this.rowSelection(),
+                rowPinning: this.rowPinning(),
+                columnFilters: this.columnFilters(),
+                globalFilter: this.globalFilter(),
+                pagination: this._tanstackPagination(),
+                sorting: this.sorting(),
+            },
+            onColumnPinningChange: updater => {
+                const newState = typeof updater === 'function' ? updater(this.columnPinning()) : updater;
+                this.columnPinning.set(newState);
+            },
+            onColumnVisibilityChange: updater => {
+                const newState = typeof updater === 'function' ? updater(this.columnVisibility()) : updater;
+                this.columnVisibility.set(newState);
+            },
+            onColumnOrderChange: updater => {
+                const newState = typeof updater === 'function' ? updater(this.columnOrder()) : updater;
+                this.columnOrder.set(newState);
+            },
+            onExpandedChange: updater => {
+                const newState = typeof updater === 'function' ? updater(this.expanded()) : updater;
+                this.expanded.set(newState);
+                this.zChange.emit({
+                    type: 'expand',
+                    data: { expanded: newState },
+                });
+            },
+            onRowSelectionChange: updater => {
+                const currentState = this.rowSelection();
+                const newState = typeof updater === 'function' ? updater(currentState) : updater;
+                this._handleRowSelectionWithParents(newState);
+            },
+            onColumnFiltersChange: updater => {
+                const newState = typeof updater === 'function' ? updater(this.columnFilters()) : updater;
+                this._runAsyncStateUpdate(() => {
+                    this.columnFilters.set(newState);
+                    if (this.zConfig().mode !== 'server') {
+                        this.pagination.update(p => ({ ...p, pageIndex: 1 }));
+                    }
+                    this._emitFilterChangeDebounced(newState, this.globalFilter());
+                });
+            },
+            onGlobalFilterChange: updater => {
+                const newState = typeof updater === 'function' ? updater(this.globalFilter()) : updater;
+                this._runAsyncStateUpdate(() => {
+                    this.globalFilter.set(newState);
+                    if (this.zConfig().mode !== 'server') {
+                        this.pagination.update(p => ({ ...p, pageIndex: 1 }));
+                    }
+                    this._emitFilterChangeDebounced(this.columnFilters(), newState);
+                });
+            },
+            onPaginationChange: updater => {
+                const newState = typeof updater === 'function' ? updater(this._tanstackPagination()) : updater;
+                const adjustedState = { ...newState, pageIndex: newState.pageIndex + 1 };
+                this.pagination.set(adjustedState);
+                this.zChange.emit({
+                    type: 'page',
+                    data: { pageIndex: adjustedState.pageIndex, pageSize: adjustedState.pageSize, emitType: 'auto' },
+                });
+            },
+            onSortingChange: updater => {
+                const newState = typeof updater === 'function' ? updater(this.sorting()) : updater;
+                this._runAsyncStateUpdate(() => {
+                    this.sorting.set(newState);
+                    if (this.zConfig().mode !== 'server') {
+                        this.pagination.update(p => ({ ...p, pageIndex: 1 }));
+                    }
+                    this.zChange.emit({ type: 'sort', data: { sorting: newState } });
+                });
+            },
+            onRowPinningChange: updater => {
+                const newState = typeof updater === 'function' ? updater(this.rowPinning()) : updater;
+                this.rowPinning.set(newState);
+            },
+            meta: {
+                updateData: (rowIndex, columnId, value) => {
+                    const row = this.table.getRowModel().rows[rowIndex];
+                    if (row) {
+                        this.zChange.emit({
+                            type: 'cellClick',
+                            data: {
+                                row: row.original,
+                                rowId: row.id,
+                                columnId,
+                                value,
+                            },
+                        });
+                    }
+                },
+            },
+            debugTable: false,
+        };
+    });
+    _virtualGroupCount = computed(() => {
+        if (!this.isVirtual()) {
+            return 0;
+        }
+        const totalRows = untracked(() => this.table.getRowModel().rows.length);
+        return Math.ceil(totalRows / this.groupSize());
+    }, ...(ngDevMode ? [{ debugName: "_virtualGroupCount" }] : []));
+    virtualizer = injectVirtualizer(() => {
+        const groups = this.dynamicGroups();
+        const rowHeight = this.virtualRowHeight();
+        return {
+            scrollElement: this.tbodyWrapper()?.nativeElement,
+            count: groups.length > 0 ? groups.length : this._virtualGroupCount(),
+            estimateSize: (index) => {
+                if (groups.length > 0 && groups[index]) {
+                    return groups[index].height;
+                }
+                return rowHeight;
+            },
+            overscan: this._virtualConfig().overscan ?? Z_DEFAULT_VIRTUAL_OVERSCAN,
+        };
+    });
+    constructor() {
+        effect(() => {
+            const cfg = this.zConfig();
+            const initial = cfg.initialState;
+            untracked(() => {
+                if (initial) {
+                    if (initial.columnPinning) {
+                        this.columnPinning.set(initial.columnPinning);
+                    }
+                    if (initial.columnVisibility) {
+                        this.columnVisibility.set(initial.columnVisibility);
+                    }
+                    if (initial.sorting) {
+                        this.sorting.set(initial.sorting);
+                    }
+                    if (initial.columnFilters) {
+                        this.columnFilters.set(initial.columnFilters);
+                    }
+                    if (initial.globalFilter) {
+                        this.globalFilter.set(initial.globalFilter);
+                    }
+                    if (initial.expanded) {
+                        this.expanded.set(initial.expanded);
+                    }
+                    if (initial.rowSelection) {
+                        this.rowSelection.set(initial.rowSelection);
+                    }
+                    if (initial.rowPinning) {
+                        this.rowPinning.set(initial.rowPinning);
+                    }
+                    if (initial.pagination) {
+                        this.pagination.set(initial.pagination);
+                    }
+                }
+                this.showHeaderFooterShadow.set(cfg.showHeaderShadow ?? cfg.showFooterShadow ?? true);
+                const cols = cfg.columns ?? [];
+                const leftPinned = [...(initial?.columnPinning?.left ?? [])];
+                const rightPinned = [...(initial?.columnPinning?.right ?? [])];
+                const collectPinnedColumns = (columns) => {
+                    for (const col of columns) {
+                        if (col.pinned === 'left' && !leftPinned.includes(col.id)) {
+                            leftPinned.push(col.id);
+                        }
+                        if (col.pinned === 'right' && !rightPinned.includes(col.id)) {
+                            rightPinned.push(col.id);
+                        }
+                        if (col.columns) {
+                            collectPinnedColumns(col.columns);
+                        }
+                    }
+                };
+                collectPinnedColumns(cols);
+                if (leftPinned.length > 0 || rightPinned.length > 0) {
+                    this.columnPinning.set({ left: leftPinned, right: rightPinned });
+                }
+            });
+        });
+        effect(() => {
+            const cfg = this.zConfig();
+            if (cfg.enableRowPinning && !this.hasBodyRowSpan()) {
+                const cols = cfg.columns ?? [];
+                const hasSelect = cols.some(c => c.id === 'select');
+                const hasExpand = cols.some(c => c.id === 'expand');
+                untracked(() => {
+                    const currentPinning = this.columnPinning();
+                    const leftPinned = [...(currentPinning.left || [])];
+                    if (hasSelect && !leftPinned.includes('select')) {
+                        leftPinned.unshift('select');
+                        this.columnPinning.set({ ...currentPinning, left: leftPinned });
+                    }
+                    if (!hasSelect && !hasExpand && !leftPinned.includes('actions')) {
+                        leftPinned.unshift('actions');
+                        this.columnPinning.set({ ...currentPinning, left: leftPinned });
+                    }
+                });
+            }
+        });
+        afterNextRender(() => {
+            const containerEl = this.tbodyContainer()?.nativeElement;
+            if (containerEl && !this._resizeObserver) {
+                this._resizeObserver = new ResizeObserver(() => {
+                    this._checkVerticalScroll();
+                    this._checkHorizontalScroll();
+                });
+                this._resizeObserver.observe(containerEl);
+                this._destroyRef.onDestroy(() => {
+                    if (this._resizeObserver) {
+                        this._resizeObserver.disconnect();
+                        this._resizeObserver = null;
+                    }
+                });
+            }
+        });
+        explicitEffect([this.columnFilters, this.globalFilter, this.pagination, this.sorting], () => {
+            this._checkVerticalScroll();
+            this._checkHorizontalScroll();
+        });
+        explicitEffect([this.zLoading, this.isProcessing], () => {
+            const loading = this.zLoading();
+            const processing = this.isProcessing();
+            if (loading || processing) {
+                const wrapperEl = this.tbodyWrapper()?.nativeElement;
+                if (wrapperEl) {
+                    this._savedScrollLeft.set(wrapperEl.scrollLeft);
+                }
+                return;
+            }
+            setTimeout(() => {
+                const wrapperEl = this.tbodyWrapper()?.nativeElement;
+                if (wrapperEl) {
+                    wrapperEl.scrollTop = 0;
+                    wrapperEl.scrollLeft = this._savedScrollLeft();
+                }
+            }, 0);
+        });
+        explicitEffect([
+            this.columnOrder,
+            this.columnSizing,
+            this.columnPinning,
+            this.columnVisibility,
+            this.showHeaderFooterShadow,
+            this.showHorizontalBorder,
+            this.showVerticalBorder,
+        ], () => {
+            this._saveConfig();
+        }, { defer: true });
+    }
+    ngAfterViewInit() {
+        this._loadConfig();
+        setTimeout(() => {
+            this._checkVerticalScroll();
+            this._checkHorizontalScroll();
+        }, 100);
+        this.zControl.emit({
+            updateConfig: (config) => {
+                const current = this.zConfig();
+                Object.assign(current, config);
+            },
+            toggleSettings: () => {
+                this.showSettingsDrawer.set(!this.showSettingsDrawer());
+            },
+            resetFilters: () => {
+                this.columnFilters.set([]);
+                this.globalFilter.set('');
+            },
+            resetSorting: () => {
+                this.sorting.set([]);
+            },
+            addItem: (item) => {
+                const current = this.zConfig();
+                current.data = [...current.data, item];
+                this._dataForceUpdate.update(v => v + 1);
+            },
+            updateItem: (id, updates, fieldKey) => {
+                const current = this.zConfig();
+                current.data = current.data.map((row, index) => {
+                    const rowId = fieldKey
+                        ? row[fieldKey]
+                        : current.getRowId
+                            ? current.getRowId(row, index, undefined, current.data)
+                            : row['id'];
+                    return rowId === id ? { ...row, ...updates } : row;
+                });
+                this._dataForceUpdate.update(v => v + 1);
+            },
+            deleteItem: (id, fieldKey) => {
+                const current = this.zConfig();
+                current.data = current.data.filter((row, index) => {
+                    const rowId = fieldKey
+                        ? row[fieldKey]
+                        : current.getRowId
+                            ? current.getRowId(row, index, undefined, current.data)
+                            : row['id'];
+                    return rowId !== id;
+                });
+                this._dataForceUpdate.update(v => v + 1);
+            },
+            getItems: () => this.zConfig().data,
+        });
+    }
+    _handleRowSelectionWithParents(newState) {
+        const stateRecord = newState;
+        const finalState = { ...stateRecord };
+        const allRows = this.table.getRowModel().rows;
+        allRows.forEach(row => {
+            if (!row.subRows || row.subRows.length === 0) {
+                return;
+            }
+            const allChildrenSelected = row.subRows.every(child => finalState[child.id] === true);
+            if (allChildrenSelected) {
+                finalState[row.id] = true;
+                return;
+            }
+            const someChildrenSelected = row.subRows.some(child => finalState[child.id] === true);
+            if (!someChildrenSelected) {
+                delete finalState[row.id];
+            }
+        });
+        this.rowSelection.set(finalState);
+        this.zChange.emit({
+            type: 'select',
+            data: { selection: finalState },
+        });
+    }
+    _runAsyncStateUpdate(updateFn) {
+        const isServerMode = this.zConfig().mode === 'server';
+        if (isServerMode) {
+            updateFn();
+            return;
+        }
+        this.isProcessing.set(true);
+        setTimeout(() => {
+            updateFn();
+            this.isProcessing.set(false);
+        }, this.zConfig().debounceTime ?? Z_DEFAULT_DEBOUNCE_TIME);
+    }
+    _emitFilterChangeDebounced(filters, search) {
+        const isServerMode = this.zConfig().mode === 'server';
+        if (isServerMode) {
+            this.zChange.emit({
+                type: 'filter',
+                data: { filters, search },
+            });
+            return;
+        }
+        if (this._filterEmitDebounceTimeout) {
+            clearTimeout(this._filterEmitDebounceTimeout);
+        }
+        this._filterEmitDebounceTimeout = setTimeout(() => {
+            this.zChange.emit({
+                type: 'filter',
+                data: { filters, search },
+            });
+        }, 300);
+    }
+    _checkVerticalScroll() {
+        const tbodyWrapperEl = this.tbodyWrapper()?.nativeElement;
+        if (tbodyWrapperEl) {
+            const hasScroll = tbodyWrapperEl.scrollHeight > tbodyWrapperEl.clientHeight;
+            this.hasVerticalScroll.set(hasScroll);
+        }
+    }
+    _checkHorizontalScroll() {
+        const containerEl = this.tbodyContainer()?.nativeElement;
+        if (containerEl) {
+            const tableWidth = this.table.getTotalSize();
+            const containerWidth = containerEl.clientWidth;
+            const hasScroll = tableWidth > containerWidth;
+            this.hasHorizontalScroll.set(hasScroll);
+            const scrollableEl = this.tbodyWrapper()?.nativeElement;
+            if (scrollableEl) {
+                this._updateScrollShadowState(scrollableEl);
+            }
+        }
+    }
+    _updateScrollShadowState(element) {
+        const { scrollLeft, scrollWidth, clientWidth } = element;
+        const hasScrollLeft = scrollLeft > 0;
+        const hasRightPinned = this.hasRightPinnedColumns();
+        const isAtEnd = scrollLeft + clientWidth >= scrollWidth - 1;
+        const hasScrollRight = hasRightPinned && !isAtEnd;
+        this.hasScrollLeft.set(hasScrollLeft);
+        this.hasScrollRight.set(hasScrollRight);
+    }
+    hasRightPinnedColumns() {
+        return this.table.getRightLeafColumns().length > 0;
+    }
+    onTbodyScroll(event) {
+        if (this._isSyncingScroll()) {
+            return;
+        }
+        const target = event.target;
+        this._syncScrollLeft(target.scrollLeft);
+        this._updateScrollShadowState(target);
+    }
+    _syncScrollLeft(scrollLeft) {
+        untracked(() => {
+            this._isSyncingScroll.set(true);
+        });
+        const thead = this.theadWrapper()?.nativeElement;
+        const tbody = this.tbodyWrapper()?.nativeElement;
+        const tfoot = this.tfootWrapper()?.nativeElement;
+        if (thead) {
+            thead.scrollLeft = scrollLeft;
+        }
+        if (tbody) {
+            tbody.scrollLeft = scrollLeft;
+        }
+        if (tfoot) {
+            tfoot.scrollLeft = scrollLeft;
+        }
+        untracked(() => {
+            this._isSyncingScroll.set(false);
+        });
+    }
+    handleSort(event, handler) {
+        event.preventDefault();
+        if (this.zConfig().enableMultiSort) {
+            const multiSortEvent = new MouseEvent('click', { shiftKey: true });
+            handler?.(multiSortEvent);
+            return;
+        }
+        handler?.(event);
+    }
+    onColumnDrop(event) {
+        const allColumns = this.table.getAllLeafColumns();
+        const columnIds = allColumns.filter(c => c.id !== 'select' && c.id !== 'expand').map(c => c.id);
+        moveItemInArray(columnIds, event.previousIndex, event.currentIndex);
+        const finalOrder = ['select', 'expand', ...columnIds];
+        this.table.setColumnOrder(finalOrder);
+    }
+    onToggleAllColumns() {
+        this.table.toggleAllColumnsVisible();
+    }
+    onPageChange(event, emitType = 'user') {
+        if (emitType === 'user') {
+            this.isProcessing.set(true);
+            this._runAsyncStateUpdate(() => {
+                this.pagination.set({ pageIndex: event.pageIndex, pageSize: event.pageSize });
+                this.isProcessing.set(false);
+                this.zChange.emit({
+                    type: 'page',
+                    data: { ...event, emitType },
+                });
+            });
+            return;
+        }
+        this.pagination.set({ pageIndex: event.pageIndex, pageSize: event.pageSize });
+        this.zChange.emit({
+            type: 'page',
+            data: { ...event, emitType },
+        });
+    }
+    onSearchChange(value) {
+        const searchValue = value === null ? '' : String(value);
+        this.globalFilter.set(searchValue);
+        this._runAsyncStateUpdate(() => {
+            this.zChange.emit({
+                type: 'search',
+                data: {
+                    search: searchValue,
+                    filters: this.columnFilters(),
+                    sorting: this.sorting(),
+                    pagination: this.pagination(),
+                },
+            });
+        });
+    }
+    toggleHeaderFooterShadow() {
+        this.showHeaderFooterShadow.update(v => !v);
+    }
+    openSettingsDrawer() {
+        if (this.columnOrder().length === 0) {
+            this.columnOrder.set(this.table.getAllLeafColumns().map(col => col.id));
+        }
+        this.pendingVisibleColumns.set(this.table
+            .getAllLeafColumns()
+            .filter(col => col.getIsVisible())
+            .map(col => col.id));
+        this.pendingColumnOrder.set(this.columnOrder());
+        this.pendingShowHeaderFooterShadow.set(this.showHeaderFooterShadow());
+        this.showSettingsDrawer.set(true);
+    }
+    onPendingColumnDrop(event) {
+        const fullOrder = this.columnOrder();
+        const unpinnedColumns = fullOrder.filter(id => {
+            if (id === 'expand' || id === 'select') {
+                return false;
+            }
+            const column = this.table.getColumn(id);
+            return !column?.getIsPinned();
+        });
+        const movedItem = unpinnedColumns[event.previousIndex];
+        unpinnedColumns.splice(event.previousIndex, 1);
+        unpinnedColumns.splice(event.currentIndex, 0, movedItem);
+        const expandSelect = fullOrder.filter(id => id === 'expand' || id === 'select');
+        const pinnedLeft = fullOrder.filter(id => {
+            const col = this.table.getColumn(id);
+            return col?.getIsPinned() === 'left' && id !== 'expand' && id !== 'select';
+        });
+        const pinnedRight = fullOrder.filter(id => {
+            const col = this.table.getColumn(id);
+            return col?.getIsPinned() === 'right';
+        });
+        const newOrder = [...expandSelect, ...pinnedLeft, ...unpinnedColumns, ...pinnedRight];
+        this.columnOrder.set(newOrder);
+    }
+    onVisibleColumnsChange(values) {
+        if (values.length >= 2) {
+            this.pendingVisibleColumns.set(values.map(v => String(v)));
+        }
+    }
+    onToggleColumnVisibility(columnId) {
+        const currentVisibility = this.columnVisibility();
+        const isVisible = currentVisibility[columnId] !== false;
+        const allColumnIds = this.columnOrder().filter(id => id !== 'expand' && id !== 'select');
+        const visibleCount = allColumnIds.filter(id => currentVisibility[id] !== false).length;
+        if (isVisible) {
+            if (visibleCount <= 2) {
+                return;
+            }
+        }
+        if (this._settingsDebounceTimeout) {
+            clearTimeout(this._settingsDebounceTimeout);
+        }
+        this._settingsDebounceTimeout = setTimeout(() => {
+            this.columnVisibility.set({ ...this.columnVisibility(), [columnId]: !isVisible });
+        }, 100);
+    }
+    onToggleColumnPin(columnId, position) {
+        const column = this.table.getColumn(columnId);
+        if (!column) {
+            return;
+        }
+        const currentPin = column.getIsPinned();
+        const newPosition = currentPin === position ? false : position;
+        if (this._settingsDebounceTimeout) {
+            clearTimeout(this._settingsDebounceTimeout);
+        }
+        this._settingsDebounceTimeout = setTimeout(() => {
+            column.pin(newPosition);
+            if (newPosition) {
+                const columnConfig = this._findColumnConfig(columnId);
+                if (columnConfig) {
+                    const colSpan = getHeaderColSpan(columnConfig);
+                    if (colSpan && colSpan > 1) {
+                        const allColumns = this.table.getAllLeafColumns();
+                        const currentIdx = allColumns.findIndex(c => c.id === columnId);
+                        if (currentIdx !== -1) {
+                            for (let i = 1; i < colSpan && currentIdx + i < allColumns.length; i++) {
+                                const coveredColumn = allColumns[currentIdx + i];
+                                coveredColumn.pin(newPosition);
+                            }
+                        }
+                    }
+                }
+            }
+            this._columnPinVersion.update(v => v + 1);
+            this._checkHorizontalScroll();
+        }, 100);
+    }
+    handleColumnPin(columnId, position) {
+        const column = this.table.getColumn(columnId);
+        if (!column) {
+            return;
+        }
+        column.pin(position);
+        if (position) {
+            const columnConfig = this._findColumnConfig(columnId);
+            if (columnConfig) {
+                const colSpan = getHeaderColSpan(columnConfig);
+                if (colSpan && colSpan > 1) {
+                    const allColumns = this.table.getAllLeafColumns();
+                    const currentIdx = allColumns.findIndex(c => c.id === columnId);
+                    if (currentIdx !== -1) {
+                        for (let i = 1; i < colSpan && currentIdx + i < allColumns.length; i++) {
+                            const coveredColumn = allColumns[currentIdx + i];
+                            coveredColumn.pin(position);
+                        }
+                    }
+                }
+            }
+        }
+        this._columnPinVersion.update(v => v + 1);
+        this._checkHorizontalScroll();
+    }
+    _saveConfig() {
+        const key = this.zKey();
+        if (!key) {
+            return;
+        }
+        const config = {
+            columnOrder: this.columnOrder(),
+            columnSizing: this.columnSizing(),
+            columnPinning: {
+                left: this.columnPinning().left,
+                right: this.columnPinning().right,
+            },
+            columnVisibility: this.columnVisibility(),
+            showHeaderFooterShadow: this.showHeaderFooterShadow(),
+            showHorizontalBorder: this.showHorizontalBorder(),
+            showVerticalBorder: this.showVerticalBorder(),
+        };
+        try {
+            ZCacheService.set(`table-config-${key}`, config);
+        }
+        catch (error) {
+            console.error('Failed to save table config:', error);
+        }
+    }
+    _loadConfig() {
+        const key = this.zKey();
+        if (!key) {
+            return;
+        }
+        try {
+            const config = ZCacheService.get(`table-config-${key}`);
+            if (!config) {
+                return;
+            }
+            if (config.columnOrder && config.columnOrder.length > 0) {
+                this.columnOrder.set(config.columnOrder);
+            }
+            if (config.columnSizing) {
+                this.table.setColumnSizing(config.columnSizing);
+            }
+            if (config.columnPinning) {
+                this.columnPinning.set(config.columnPinning);
+            }
+            if (config.columnVisibility) {
+                this.columnVisibility.set(config.columnVisibility);
+            }
+            if (typeof config.showHeaderFooterShadow === 'boolean') {
+                this.showHeaderFooterShadow.set(config.showHeaderFooterShadow);
+            }
+            if (typeof config.showHorizontalBorder === 'boolean') {
+                this.showHorizontalBorder.set(config.showHorizontalBorder);
+            }
+            if (typeof config.showVerticalBorder === 'boolean') {
+                this.showVerticalBorder.set(config.showVerticalBorder);
+            }
+        }
+        catch (error) {
+            console.error('Failed to load table config:', error);
+        }
+    }
+    _findColumnConfig(columnId) {
+        const findInColumns = (columns) => {
+            for (const col of columns) {
+                if (col.id === columnId) {
+                    return col;
+                }
+                if (col.columns) {
+                    const found = findInColumns(col.columns);
+                    if (found) {
+                        return found;
+                    }
+                }
+            }
+            return undefined;
+        };
+        return findInColumns(this.zConfig().columns);
+    }
+    _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" }, 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 (zConfig().enableSearch || zConfig().enableSettings) {\n  <div class=\"z-table-toolbar mb-2 flex items-center justify-between gap-4\">\n    <!-- Search -->\n    @if (zConfig().enableSearch) {\n      <z-input\n        class=\"w-64\"\n        zSize=\"sm\"\n        zPlaceholder=\"Search...\"\n        [zSearch]=\"true\"\n        [zDebounce]=\"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()\">Settings</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]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass'\"\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]=\"header.column.id === 'actions'\"\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 if (header.column.id === 'actions') {\n                    <!-- Empty header for actions column -->\n                    <div class=\"flex items-center justify-center\"></div>\n                  } @else {\n                    <!-- Header Content with Sort and Pin -->\n                    <div class=\"flex w-full items-center gap-1\">\n                      <!-- Header Text -->\n                      <div\n                        class=\"flex min-w-0 flex-1 items-center gap-1.5\"\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') ===\n                          'text-right'\n                        \">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <!-- TemplateRef rendering -->\n                            <ng-container\n                              *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                          } @else if (headerContent | zTableHasIcon) {\n                            <!-- Icon syntax rendering -->\n                            <z-table-icon-text\n                              class=\"min-w-0 truncate\"\n                              [zText]=\"headerContent\"\n                              [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\" />\n                          } @else {\n                            <!-- Default/innerHTML rendering -->\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                              [innerHTML]=\"headerContent | zSafeHtml\"></span>\n                          }\n                        </ng-container>\n                        <!-- Sort Icon (clickable) - hidden when table has rowSpan columns -->\n                        @if (header.column.getCanSort() && !hasBodyRowSpan()) {\n                          <span\n                            class=\"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 Pin Popover -->\n                      @if (header.column.getCanPin() && zConfig().enableColumnPinning) {\n                        <ng-template #colPinPopoverContent>\n                          <div class=\"flex flex-col gap-0.5 p-0.5\">\n                            @if (header.column.getIsPinned() !== 'left') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colPinPopover.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=\"lucideChevronLeft\" zSize=\"12\" />\n                                <span>Pin left</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'right') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colPinPopover.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=\"lucideChevronRight\" zSize=\"12\" />\n                                <span>Pin right</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned()) {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, false); colPinPopover.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>Unpin</span>\n                              </button>\n                            }\n                          </div>\n                        </ng-template>\n                        <button\n                          type=\"button\"\n                          z-popover\n                          #colPinPopover=\"zPopover\"\n                          [zPopoverContent]=\"colPinPopoverContent\"\n                          zTrigger=\"click\"\n                          zPosition=\"bottom-right\"\n                          [zOffset]=\"3\"\n                          class=\"z-header-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex shrink-0 cursor-pointer items-center justify-center rounded p-1\"\n                          [class.text-primary]=\"header.column.getIsPinned()\">\n                          <z-icon zType=\"lucideEllipsis\" zSize=\"12\" class=\"rotate-90\" />\n                        </button>\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                      (mousedown)=\"header.getResizeHandler()($event)\"\n                      (touchstart)=\"header.getResizeHandler()($event)\"></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      <div class=\"z-loading-state\">\n        <z-loading [zLoading]=\"true\" zSize=\"lg\" zText=\"Loading...\" />\n      </div>\n    } @else if (isEmpty()) {\n      <div class=\"z-empty-state\">\n        @if (isNoSearchResults()) {\n          <!-- No search results -->\n          <z-icon zType=\"lucideSearchX\" zSize=\"40\" class=\"text-muted-foreground/50\" />\n          <p class=\"text-muted-foreground text-sm\">No results found</p>\n        } @else {\n          <!-- Empty data -->\n          <z-icon zType=\"lucidePackageOpen\" zSize=\"40\" class=\"text-muted-foreground/50\" />\n          <p class=\"text-muted-foreground text-sm\">No data</p>\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 [class.z-has-vertical-scroll]=\"hasVerticalScroll()\">\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                              [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 {\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 | 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 [class.z-has-vertical-scroll]=\"hasVerticalScroll()\">\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]=\"cell.column.id === 'actions'\"\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>Pin top</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>Pin bottom</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>Unpin</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>Pin top</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>Pin bottom</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>Unpin</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>Pin top</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>Pin bottom</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>Unpin</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 {\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 {\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 | 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                              <ng-container\n                                *ngTemplateOutlet=\"footerContent; context: { $implicit: footer.getContext() }\" />\n                            } @else if (footerContent | zTableHasIcon) {\n                              <!-- Icon syntax rendering -->\n                              <z-table-icon-text\n                                [zText]=\"footerContent\"\n                                [zTooltip]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip'\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                                {{ footerContent }}\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                            {{ configFooterContent }}\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  @let totalLabel = zConfig().pagination?.totalLabel ?? '{total} total rows';\n  <div class=\"mt-4 flex items-center justify-between gap-4\">\n    <div class=\"text-sm text-gray-500\">\n      {{ totalLabel.replace('{total}', zConfig().totalCount?.toString() || totalRows.toString()) }}\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=\"Table Settings\"\n  zPlacement=\"right\"\n  zWidth=\"500px\"\n  [zShadow]=\"true\"\n  [zOkText]=\"null\"\n  zCancelText=\"Close\">\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\">Display Settings</h4>\n      <p class=\"text-muted-foreground mb-3 text-xs\">Customize table appearance</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=\"Horizontal Border\"\n          (zChange)=\"showHorizontalBorder.set(!showHorizontalBorder())\" />\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showVerticalBorder()\"\n          zText=\"Vertical Border\"\n          (zChange)=\"showVerticalBorder.set(!showVerticalBorder())\" />\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showHeaderFooterShadow()\"\n          zText=\"Header/Footer Shadow\"\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\">Column Settings</h4>\n        <p class=\"text-muted-foreground mb-3 text-xs\">Toggle visibility, drag to reorder, and pin columns</p>\n\n        <!-- Unpinned Columns (Draggable) -->\n        <div cdkDropList (cdkDropListDropped)=\"onPendingColumnDrop($event)\" class=\"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                  [cdkDragDisabled]=\"false\"\n                  class=\"border-border bg-card hover:border-primary flex cursor-move items-center gap-2 rounded border px-2 py-1.5 text-sm transition-all hover:shadow-sm\"\n                  [class.opacity-60]=\"!isVisible\">\n                  <!-- Drag Handle -->\n                  <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground 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 }}\n                    </span>\n                    @let parents = columnId | zTableColumnParents: zConfig().columns;\n                    @if (parents) {\n                      <span class=\"text-muted-foreground truncate text-[10px]\">({{ parents }})</span>\n                    }\n                  </span>\n\n                  <!-- Pin Buttons -->\n                  @if (canPin) {\n                    <div class=\"flex shrink-0 items-center gap-0.5\">\n                      <button\n                        type=\"button\"\n                        (click)=\"onToggleColumnPin(columnId, 'left')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors\"\n                        title=\"Pin Left\">\n                        <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                      </button>\n                      <button\n                        type=\"button\"\n                        (click)=\"onToggleColumnPin(columnId, 'right')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors\"\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\">Pinned Columns</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                    <!-- 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 }}\n                      </span>\n                      @let pinnedParents = columnId | zTableColumnParents: zConfig().columns;\n                      @if (pinnedParents) {\n                        <span class=\"text-muted-foreground truncate text-[10px]\">({{ pinnedParents }})</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                      {{ isPinned === 'left' ? 'LEFT' : 'RIGHT' }}\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{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:200px;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:200px;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 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:5px;background:#0000001a;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;opacity:0;transition:opacity .2s ease}thead th .z-resizer:where(.dark,.dark *){background:#ffffff1a}thead th .z-resizer:hover,thead th .z-resizer.z-is-resizing{opacity:1;background:var(--primary);opacity:.5}thead th .z-resizer.z-is-resizing{background:var(--primary);opacity:1}thead th .z-resizer.z-resizer-left{right:auto;left:0}thead th:hover .z-resizer{opacity:1}.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}.z-thead-wrapper th.z-sticky-left-last:after:where(.dark,.dark *),.z-thead-wrapper td.z-sticky-left-last:after:where(.dark,.dark *),.z-tbody-wrapper th.z-sticky-left-last:after:where(.dark,.dark *),.z-tbody-wrapper td.z-sticky-left-last:after:where(.dark,.dark *),.z-tfoot-wrapper th.z-sticky-left-last:after:where(.dark,.dark *),.z-tfoot-wrapper td.z-sticky-left-last:after:where(.dark,.dark *){box-shadow:inset 10px 0 8px -8px #0000004d}.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{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 th.z-sticky-right-first:before:where(.dark,.dark *),.z-thead-wrapper td.z-sticky-right-first:before:where(.dark,.dark *),.z-tbody-wrapper th.z-sticky-right-first:before:where(.dark,.dark *),.z-tbody-wrapper td.z-sticky-right-first:before:where(.dark,.dark *),.z-tfoot-wrapper th.z-sticky-right-first:before:where(.dark,.dark *),.z-tfoot-wrapper td.z-sticky-right-first:before:where(.dark,.dark *){box-shadow:inset -10px 0 8px -8px #0000004d}.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{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}.cdk-drag-preview{box-shadow:0 4px 12px #00000026;opacity:.9;border-radius:4px;background-color:var(--card);z-index:9999}.cdk-drag-preview:where(.dark,.dark *){box-shadow:0 4px 12px #0006}.cdk-drag-placeholder{opacity:.3;background-color:var(--muted);border:2px dashed var(--primary)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.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: 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: 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: ZTableRowHoverDirective, selector: "[z-table-row-hover], [zTableRowHover]", inputs: ["zTableRowHover"] }, { kind: "component", type: ZTableIconTextComponent, selector: "z-table-icon-text", inputs: ["zText", "zTooltip"] }, { kind: "pipe", type: ZTableIsTemplateRefPipe, name: "zTableIsTemplateRef" }, { kind: "pipe", type: ZTableHasIconPipe, name: "zTableHasIcon" }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'z-table', imports: [
+                        NgClass,
+                        NgStyle,
+                        NgTemplateOutlet,
+                        ScrollingModule,
+                        NgScrollbar,
+                        FlexRenderDirective,
+                        CdkDropList,
+                        CdkDrag,
+                        ZCheckboxComponent,
+                        ZIconComponent,
+                        ZInputComponent,
+                        ZLoadingComponent,
+                        ZDrawerComponent,
+                        ZPaginationComponent,
+                        ZTableFilterComponent,
+                        ZPopoverDirective,
+                        ZButtonComponent,
+                        ZTooltipDirective,
+                        ZTableRowHoverDirective,
+                        ZTableIsTemplateRefPipe,
+                        ZTableHasIconPipe,
+                        ZTableCellConfigPipe,
+                        ZTableCellOffsetPipe,
+                        ZTableColumnConfigPipe,
+                        ZTableColumnHeaderPipe,
+                        ZTableColumnParentsPipe,
+                        ZTableFooterContentPipe,
+                        ZTableHeaderPinPipe,
+                        ZTablePinningStylesPipe,
+                        ZTableRowPipe,
+                        ZTableSpanPipe,
+                        ZTableFooterRenderPipe,
+                        ZTableHeaderRenderPipe,
+                        ZTableBodyCellRenderPipe,
+                        ZTableIconTextComponent,
+                        ZSafeHtmlPipe,
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'z-table block relative',
+                    }, exportAs: 'zTable', template: "<!-- Toolbar: Search & Settings -->\n@if (zConfig().enableSearch || zConfig().enableSettings) {\n  <div class=\"z-table-toolbar mb-2 flex items-center justify-between gap-4\">\n    <!-- Search -->\n    @if (zConfig().enableSearch) {\n      <z-input\n        class=\"w-64\"\n        zSize=\"sm\"\n        zPlaceholder=\"Search...\"\n        [zSearch]=\"true\"\n        [zDebounce]=\"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()\">Settings</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]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass'\"\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]=\"header.column.id === 'actions'\"\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 if (header.column.id === 'actions') {\n                    <!-- Empty header for actions column -->\n                    <div class=\"flex items-center justify-center\"></div>\n                  } @else {\n                    <!-- Header Content with Sort and Pin -->\n                    <div class=\"flex w-full items-center gap-1\">\n                      <!-- Header Text -->\n                      <div\n                        class=\"flex min-w-0 flex-1 items-center gap-1.5\"\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') ===\n                          'text-right'\n                        \">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <!-- TemplateRef rendering -->\n                            <ng-container\n                              *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                          } @else if (headerContent | zTableHasIcon) {\n                            <!-- Icon syntax rendering -->\n                            <z-table-icon-text\n                              class=\"min-w-0 truncate\"\n                              [zText]=\"headerContent\"\n                              [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\" />\n                          } @else {\n                            <!-- Default/innerHTML rendering -->\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                              [innerHTML]=\"headerContent | zSafeHtml\"></span>\n                          }\n                        </ng-container>\n                        <!-- Sort Icon (clickable) - hidden when table has rowSpan columns -->\n                        @if (header.column.getCanSort() && !hasBodyRowSpan()) {\n                          <span\n                            class=\"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 Pin Popover -->\n                      @if (header.column.getCanPin() && zConfig().enableColumnPinning) {\n                        <ng-template #colPinPopoverContent>\n                          <div class=\"flex flex-col gap-0.5 p-0.5\">\n                            @if (header.column.getIsPinned() !== 'left') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colPinPopover.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=\"lucideChevronLeft\" zSize=\"12\" />\n                                <span>Pin left</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'right') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colPinPopover.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=\"lucideChevronRight\" zSize=\"12\" />\n                                <span>Pin right</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned()) {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, false); colPinPopover.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>Unpin</span>\n                              </button>\n                            }\n                          </div>\n                        </ng-template>\n                        <button\n                          type=\"button\"\n                          z-popover\n                          #colPinPopover=\"zPopover\"\n                          [zPopoverContent]=\"colPinPopoverContent\"\n                          zTrigger=\"click\"\n                          zPosition=\"bottom-right\"\n                          [zOffset]=\"3\"\n                          class=\"z-header-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex shrink-0 cursor-pointer items-center justify-center rounded p-1\"\n                          [class.text-primary]=\"header.column.getIsPinned()\">\n                          <z-icon zType=\"lucideEllipsis\" zSize=\"12\" class=\"rotate-90\" />\n                        </button>\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                      (mousedown)=\"header.getResizeHandler()($event)\"\n                      (touchstart)=\"header.getResizeHandler()($event)\"></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      <div class=\"z-loading-state\">\n        <z-loading [zLoading]=\"true\" zSize=\"lg\" zText=\"Loading...\" />\n      </div>\n    } @else if (isEmpty()) {\n      <div class=\"z-empty-state\">\n        @if (isNoSearchResults()) {\n          <!-- No search results -->\n          <z-icon zType=\"lucideSearchX\" zSize=\"40\" class=\"text-muted-foreground/50\" />\n          <p class=\"text-muted-foreground text-sm\">No results found</p>\n        } @else {\n          <!-- Empty data -->\n          <z-icon zType=\"lucidePackageOpen\" zSize=\"40\" class=\"text-muted-foreground/50\" />\n          <p class=\"text-muted-foreground text-sm\">No data</p>\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 [class.z-has-vertical-scroll]=\"hasVerticalScroll()\">\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                              [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 {\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 | 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 [class.z-has-vertical-scroll]=\"hasVerticalScroll()\">\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]=\"cell.column.id === 'actions'\"\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>Pin top</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>Pin bottom</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>Unpin</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>Pin top</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>Pin bottom</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>Unpin</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>Pin top</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>Pin bottom</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>Unpin</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 {\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 {\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 | 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                              <ng-container\n                                *ngTemplateOutlet=\"footerContent; context: { $implicit: footer.getContext() }\" />\n                            } @else if (footerContent | zTableHasIcon) {\n                              <!-- Icon syntax rendering -->\n                              <z-table-icon-text\n                                [zText]=\"footerContent\"\n                                [zTooltip]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip'\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                                {{ footerContent }}\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                            {{ configFooterContent }}\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  @let totalLabel = zConfig().pagination?.totalLabel ?? '{total} total rows';\n  <div class=\"mt-4 flex items-center justify-between gap-4\">\n    <div class=\"text-sm text-gray-500\">\n      {{ totalLabel.replace('{total}', zConfig().totalCount?.toString() || totalRows.toString()) }}\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=\"Table Settings\"\n  zPlacement=\"right\"\n  zWidth=\"500px\"\n  [zShadow]=\"true\"\n  [zOkText]=\"null\"\n  zCancelText=\"Close\">\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\">Display Settings</h4>\n      <p class=\"text-muted-foreground mb-3 text-xs\">Customize table appearance</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=\"Horizontal Border\"\n          (zChange)=\"showHorizontalBorder.set(!showHorizontalBorder())\" />\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showVerticalBorder()\"\n          zText=\"Vertical Border\"\n          (zChange)=\"showVerticalBorder.set(!showVerticalBorder())\" />\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showHeaderFooterShadow()\"\n          zText=\"Header/Footer Shadow\"\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\">Column Settings</h4>\n        <p class=\"text-muted-foreground mb-3 text-xs\">Toggle visibility, drag to reorder, and pin columns</p>\n\n        <!-- Unpinned Columns (Draggable) -->\n        <div cdkDropList (cdkDropListDropped)=\"onPendingColumnDrop($event)\" class=\"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                  [cdkDragDisabled]=\"false\"\n                  class=\"border-border bg-card hover:border-primary flex cursor-move items-center gap-2 rounded border px-2 py-1.5 text-sm transition-all hover:shadow-sm\"\n                  [class.opacity-60]=\"!isVisible\">\n                  <!-- Drag Handle -->\n                  <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground 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 }}\n                    </span>\n                    @let parents = columnId | zTableColumnParents: zConfig().columns;\n                    @if (parents) {\n                      <span class=\"text-muted-foreground truncate text-[10px]\">({{ parents }})</span>\n                    }\n                  </span>\n\n                  <!-- Pin Buttons -->\n                  @if (canPin) {\n                    <div class=\"flex shrink-0 items-center gap-0.5\">\n                      <button\n                        type=\"button\"\n                        (click)=\"onToggleColumnPin(columnId, 'left')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors\"\n                        title=\"Pin Left\">\n                        <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                      </button>\n                      <button\n                        type=\"button\"\n                        (click)=\"onToggleColumnPin(columnId, 'right')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors\"\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\">Pinned Columns</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                    <!-- 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 }}\n                      </span>\n                      @let pinnedParents = columnId | zTableColumnParents: zConfig().columns;\n                      @if (pinnedParents) {\n                        <span class=\"text-muted-foreground truncate text-[10px]\">({{ pinnedParents }})</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                      {{ isPinned === 'left' ? 'LEFT' : 'RIGHT' }}\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{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:200px;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:200px;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 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:5px;background:#0000001a;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;opacity:0;transition:opacity .2s ease}thead th .z-resizer:where(.dark,.dark *){background:#ffffff1a}thead th .z-resizer:hover,thead th .z-resizer.z-is-resizing{opacity:1;background:var(--primary);opacity:.5}thead th .z-resizer.z-is-resizing{background:var(--primary);opacity:1}thead th .z-resizer.z-resizer-left{right:auto;left:0}thead th:hover .z-resizer{opacity:1}.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}.z-thead-wrapper th.z-sticky-left-last:after:where(.dark,.dark *),.z-thead-wrapper td.z-sticky-left-last:after:where(.dark,.dark *),.z-tbody-wrapper th.z-sticky-left-last:after:where(.dark,.dark *),.z-tbody-wrapper td.z-sticky-left-last:after:where(.dark,.dark *),.z-tfoot-wrapper th.z-sticky-left-last:after:where(.dark,.dark *),.z-tfoot-wrapper td.z-sticky-left-last:after:where(.dark,.dark *){box-shadow:inset 10px 0 8px -8px #0000004d}.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{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 th.z-sticky-right-first:before:where(.dark,.dark *),.z-thead-wrapper td.z-sticky-right-first:before:where(.dark,.dark *),.z-tbody-wrapper th.z-sticky-right-first:before:where(.dark,.dark *),.z-tbody-wrapper td.z-sticky-right-first:before:where(.dark,.dark *),.z-tfoot-wrapper th.z-sticky-right-first:before:where(.dark,.dark *),.z-tfoot-wrapper td.z-sticky-right-first:before:where(.dark,.dark *){box-shadow:inset -10px 0 8px -8px #0000004d}.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{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}.cdk-drag-preview{box-shadow:0 4px 12px #00000026;opacity:.9;border-radius:4px;background-color:var(--card);z-index:9999}.cdk-drag-preview:where(.dark,.dark *){box-shadow:0 4px 12px #0006}.cdk-drag-placeholder{opacity:.3;background-color:var(--muted);border:2px dashed var(--primary)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.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 }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ZTableComponent, ZTableFilterComponent, ZTableIconTextComponent, columnConfigToColumnDef, findColumnConfig, getBodyConfig, getFooterConfig, getHeaderConfig, isBodyConfig, isFooterConfig, isHeaderConfig };
+//# sourceMappingURL=shival99-z-ui-components-z-table.mjs.map