@shival99/z-ui 1.1.15 → 1.1.17

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

@@ -2,7 +2,7 @@ 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 { input, output, computed, ChangeDetectionStrategy, Component, inject, ElementRef, Renderer2, Directive, NgZone, Pipe, TemplateRef, DestroyRef, signal, viewChild, untracked, effect, afterNextRender } from '@angular/core';
 import { TranslateService, TranslatePipe } from '@ngx-translate/core';
 import { injectVirtualizer } from '@shival99/angular-virtual';
 import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
@@ -21,94 +21,484 @@ import { ZCacheService } from '@shival99/z-ui/services';
 import { createAngularTable, getFacetedMinMaxValues, getFacetedUniqueValues, getFacetedRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, getExpandedRowModel, getCoreRowModel, FlexRenderDirective } from '@tanstack/angular-table';
 import { NgScrollbar } from 'ngx-scrollbar';
 import { explicitEffect } from 'ngxtension/explicit-effect';
+import { ZDropdownMenuComponent } from '@shival99/z-ui/components/z-dropdown-menu';
 import { toSignal } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import { ZCalendarComponent } from '@shival99/z-ui/components/z-calendar';
 import { ZSelectComponent } from '@shival99/z-ui/components/z-select';
 import { startWith } from 'rxjs';
 
-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 DEFAULT_MAX_VISIBLE = 3;
+const DEFAULT_DROPDOWN_BUTTON_SIZE = 'sm';
+class ZTableActionsComponent {
+    zConfig = input.required(...(ngDevMode ? [{ debugName: "zConfig" }] : []));
+    zRow = input.required(...(ngDevMode ? [{ debugName: "zRow" }] : []));
+    zRowId = input.required(...(ngDevMode ? [{ debugName: "zRowId" }] : []));
+    zDropdownButtonSize = input(DEFAULT_DROPDOWN_BUTTON_SIZE, ...(ngDevMode ? [{ debugName: "zDropdownButtonSize" }] : []));
+    zActionClick = output();
+    allActions = computed(() => {
+        const config = this.zConfig();
+        const row = this.zRow();
+        return config.actions.filter(action => {
+            if (typeof action.hidden === 'function') {
+                return !action.hidden(row);
+            }
+            return !action.hidden;
+        });
+    }, ...(ngDevMode ? [{ debugName: "allActions" }] : []));
+    shouldShowAsButtons = computed(() => {
+        const actions = this.allActions();
+        const maxVisible = this.zConfig().maxVisible ?? DEFAULT_MAX_VISIBLE;
+        return actions.length <= maxVisible;
+    }, ...(ngDevMode ? [{ debugName: "shouldShowAsButtons" }] : []));
+    actionStates = computed(() => {
+        const row = this.zRow();
+        const actions = this.allActions();
+        const states = {};
+        for (const action of actions) {
+            const isHidden = typeof action.hidden === 'function' ? action.hidden(row) : (action.hidden ?? false);
+            const isDisabled = typeof action.disabled === 'function' ? action.disabled(row) : (action.disabled ?? false);
+            states[action.key] = {
+                visible: !isHidden,
+                disabled: isDisabled,
+                tooltip: action.tooltip ?? '',
+            };
         }
-        const cellsInCurrentRow = Array.from(row.children);
-        cellsInCurrentRow.forEach(cell => {
-            this._toggleCellHover(cell, isHover);
+        return states;
+    }, ...(ngDevMode ? [{ debugName: "actionStates" }] : []));
+    dropdownItems = computed(() => {
+        const row = this.zRow();
+        return this.allActions().map(action => {
+            const isDisabled = typeof action.disabled === 'function' ? action.disabled(row) : (action.disabled ?? false);
+            return {
+                label: action.label ?? action.key,
+                icon: action.icon,
+                disabled: isDisabled,
+                class: action.class,
+                divide: action.divide,
+                onClick: () => this._emitActionClick(action),
+            };
         });
-        const tbody = table.querySelector('tbody');
-        if (!tbody) {
+    }, ...(ngDevMode ? [{ debugName: "dropdownItems" }] : []));
+    _onActionClick(action, event) {
+        event.stopPropagation();
+        const states = this.actionStates();
+        if (states[action.key]?.disabled) {
             return;
         }
-        const allRows = Array.from(tbody.querySelectorAll('tr'));
-        const currentRowIndex = allRows.indexOf(row);
-        if (currentRowIndex === -1) {
-            return;
+        this._emitActionClick(action);
+    }
+    _onDropdownItemClick(item) {
+        const action = this.allActions().find(a => (a.label ?? a.key) === item.label);
+        if (action) {
+            this._emitActionClick(action);
         }
-        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,
-                });
-            });
+    }
+    _emitActionClick(action) {
+        this.zActionClick.emit({
+            key: action.key,
+            row: this.zRow(),
+            rowId: this.zRowId(),
+            action,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZTableActionsComponent, isStandalone: true, selector: "z-table-actions", inputs: { zConfig: { classPropertyName: "zConfig", publicName: "zConfig", isSignal: true, isRequired: true, transformFunction: null }, zRow: { classPropertyName: "zRow", publicName: "zRow", isSignal: true, isRequired: true, transformFunction: null }, zRowId: { classPropertyName: "zRowId", publicName: "zRowId", isSignal: true, isRequired: true, transformFunction: null }, zDropdownButtonSize: { classPropertyName: "zDropdownButtonSize", publicName: "zDropdownButtonSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zActionClick: "zActionClick" }, ngImport: i0, template: `
+    <div class="z-table-actions flex items-center justify-center gap-1">
+      @if (shouldShowAsButtons()) {
+        @for (action of allActions(); track action.key) {
+          @if (actionStates()[action.key]?.visible) {
+            <button
+              type="button"
+              z-button
+              z-tooltip
+              [zType]="action.type ?? 'outline'"
+              [zSize]="action.size ?? 'sm'"
+              [zDisabled]="actionStates()[action.key]?.disabled ?? false"
+              [class]="action.class ?? ''"
+              [zContent]="actionStates()[action.key]?.tooltip ?? ''"
+              (click)="_onActionClick(action, $event)"
+            >
+              @if (action.icon && action.label) {
+                <div class="flex items-center gap-2">
+                  <z-icon [zType]="action.icon" zSize="14" />
+                  {{ action.label }}
+                </div>
+              } @else if (action.icon) {
+                <z-icon [zType]="action.icon" zSize="14" />
+              } @else if (action.label) {
+                {{ action.label }}
+              }
+            </button>
+          }
+        }
+      } @else {
+        <z-dropdown-menu
+          [zItems]="dropdownItems()"
+          zPosition="bottom-right"
+          [zButtonSize]="zDropdownButtonSize()"
+          [zMinWidth]="160"
+          (zOnItemClick)="_onDropdownItemClick($event)"
+        >
+          <button
+            type="button"
+            z-button
+            zTypeIcon="lucideEllipsis"
+            [zSize]="zDropdownButtonSize()"
+            zType="outline"
+            [zWave]="false"
+          ></button>
+        </z-dropdown-menu>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ 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: "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: "component", type: ZDropdownMenuComponent, selector: "z-dropdown-menu", inputs: ["zItems", "zLabel", "zIcon", "zButtonType", "zPosition", "zButtonSize", "zOffset", "zMinWidth", "zMaxWidth", "zDisabled"], outputs: ["zOnItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'z-table-actions', imports: [ZButtonComponent, ZIconComponent, ZTooltipDirective, ZDropdownMenuComponent], standalone: true, template: `
+    <div class="z-table-actions flex items-center justify-center gap-1">
+      @if (shouldShowAsButtons()) {
+        @for (action of allActions(); track action.key) {
+          @if (actionStates()[action.key]?.visible) {
+            <button
+              type="button"
+              z-button
+              z-tooltip
+              [zType]="action.type ?? 'outline'"
+              [zSize]="action.size ?? 'sm'"
+              [zDisabled]="actionStates()[action.key]?.disabled ?? false"
+              [class]="action.class ?? ''"
+              [zContent]="actionStates()[action.key]?.tooltip ?? ''"
+              (click)="_onActionClick(action, $event)"
+            >
+              @if (action.icon && action.label) {
+                <div class="flex items-center gap-2">
+                  <z-icon [zType]="action.icon" zSize="14" />
+                  {{ action.label }}
+                </div>
+              } @else if (action.icon) {
+                <z-icon [zType]="action.icon" zSize="14" />
+              } @else if (action.label) {
+                {{ action.label }}
+              }
+            </button>
+          }
+        }
+      } @else {
+        <z-dropdown-menu
+          [zItems]="dropdownItems()"
+          zPosition="bottom-right"
+          [zButtonSize]="zDropdownButtonSize()"
+          [zMinWidth]="160"
+          (zOnItemClick)="_onDropdownItemClick($event)"
+        >
+          <button
+            type="button"
+            z-button
+            zTypeIcon="lucideEllipsis"
+            [zSize]="zDropdownButtonSize()"
+            zType="outline"
+            [zWave]="false"
+          ></button>
+        </z-dropdown-menu>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { zConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zConfig", required: true }] }], zRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRow", required: true }] }], zRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRowId", required: true }] }], zDropdownButtonSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDropdownButtonSize", required: false }] }], zActionClick: [{ type: i0.Output, args: ["zActionClick"] }] } });
+
+class ZTableFilterComponent {
+    zColumn = input.required(...(ngDevMode ? [{ debugName: "zColumn" }] : []));
+    zTable = input.required(...(ngDevMode ? [{ debugName: "zTable" }] : []));
+    _translate = inject(TranslateService);
+    _currentLang = toSignal(this._translate.onLangChange.pipe(startWith({ lang: this._translate.currentLang })));
+    _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 '';
         }
-        grid.forEach(item => {
-            const coverCurrentRow = item.rowStart < currentRowIndex && item.rowEnd >= currentRowIndex;
-            if (!coverCurrentRow) {
-                return;
-            }
-            this._toggleCellHover(item.cell, isHover);
+        return value[0] ?? '';
+    }, ...(ngDevMode ? [{ debugName: "rangeMinValue" }] : []));
+    rangeMaxValue = computed(() => {
+        const value = this.columnFilterValue();
+        if (!Array.isArray(value)) {
+            return '';
+        }
+        return value[1] ?? '';
+    }, ...(ngDevMode ? [{ debugName: "rangeMaxValue" }] : []));
+    minPlaceholder = computed(() => {
+        this._currentLang();
+        return this._translate.instant('i18n_z_ui_table_filter_min');
+    }, ...(ngDevMode ? [{ debugName: "minPlaceholder" }] : []));
+    maxPlaceholder = computed(() => {
+        this._currentLang();
+        return this._translate.instant('i18n_z_ui_table_filter_max');
+    }, ...(ngDevMode ? [{ debugName: "maxPlaceholder" }] : []));
+    searchPlaceholder = computed(() => {
+        this._currentLang();
+        return this._translate.instant('i18n_z_ui_table_filter_search');
+    }, ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
+    allLabel = computed(() => {
+        this._currentLang();
+        return this._translate.instant('i18n_z_ui_table_filter_all');
+    }, ...(ngDevMode ? [{ debugName: "allLabel" }] : []));
+    datePlaceholder = computed(() => {
+        this._currentLang();
+        return this._translate.instant('i18n_z_ui_table_filter_date');
+    }, ...(ngDevMode ? [{ debugName: "datePlaceholder" }] : []));
+    dateRangePlaceholder = computed(() => {
+        this._currentLang();
+        return this._translate.instant('i18n_z_ui_table_filter_date_range');
+    }, ...(ngDevMode ? [{ debugName: "dateRangePlaceholder" }] : []));
+    dateValue = computed(() => {
+        const value = this.columnFilterValue();
+        if (value instanceof Date) {
+            return value;
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "dateValue" }] : []));
+    dateRangeValue = computed(() => {
+        const value = this.columnFilterValue();
+        if (value && typeof value === 'object' && 'start' in value && 'end' in value) {
+            return value;
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "dateRangeValue" }] : []));
+    selectOptions = computed(() => {
+        const columnDef = this._columnDef();
+        const allOption = { label: this.allLabel(), 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]]);
         });
     }
-    _toggleCellHover(cell, isHover) {
-        if (isHover) {
-            this._renderer.addClass(cell, 'z-row-hover');
+    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._renderer.removeClass(cell, 'z-row-hover');
+        this.zColumn().setFilterValue(value || undefined);
     }
-    _findParentTable(element) {
-        let current = element.parentElement;
-        while (current) {
-            if (current.tagName === 'TABLE') {
-                return current;
-            }
-            current = current.parentElement;
+    onDateChange(value) {
+        this.zColumn().setFilterValue(value || undefined);
+    }
+    onDateRangeChange(value) {
+        if (value && value.start && value.end) {
+            this.zColumn().setFilterValue(value);
+            return;
         }
-        return null;
+        this.zColumn().setFilterValue(undefined);
     }
-    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 });
+    _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]="minPlaceholder()"
+            [ngModel]="rangeMinValue()"
+            (ngModelChange)="onMinChangeDebounced($event)"
+            class="min-w-0 flex-1"
+          />
+          <z-input
+            zType="number"
+            zSize="sm"
+            [zPlaceholder]="maxPlaceholder()"
+            [ngModel]="rangeMaxValue()"
+            (ngModelChange)="onMaxChangeDebounced($event)"
+            class="min-w-0 flex-1"
+          />
+        </div>
+      }
+      @case ('date') {
+        <z-calendar
+          zMode="single"
+          zSize="sm"
+          zAllowClear
+          zValueType="date"
+          [zPlaceholder]="datePlaceholder()"
+          [ngModel]="dateValue()"
+          (ngModelChange)="onDateChange($event)"
+          class="w-full"
+        />
+      }
+      @case ('date-range') {
+        <z-calendar
+          zMode="range"
+          zSize="sm"
+          zAllowClear
+          zValueType="date"
+          [zPlaceholder]="dateRangePlaceholder()"
+          [ngModel]="dateRangeValue()"
+          (ngModelChange)="onDateRangeChange($event)"
+          class="w-full"
+        />
+      }
+      @case ('select') {
+        <z-select
+          zSize="sm"
+          [zOptions]="selectOptions()"
+          [ngModel]="columnFilterValue()?.toString() ?? ''"
+          [zPlaceholder]="allLabel()"
+          (ngModelChange)="onSelectChange($event)"
+          class="w-full min-w-0"
+        />
+      }
+      @case ('number') {
+        <z-input
+          zType="number"
+          zSize="sm"
+          zAllowClear
+          [zPlaceholder]="searchPlaceholder()"
+          [ngModel]="columnFilterValue()?.toString() ?? ''"
+          (ngModelChange)="onTextChangeDebounced($event)"
+          class="w-full"
+        />
+      }
+      @default {
+        <z-input
+          zType="text"
+          zSize="sm"
+          zAllowClear
+          [zPlaceholder]="searchPlaceholder()"
+          [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", "zTranslateLabels", "zKey", "zSearchServer", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zSelectedTemplate", "zOptionTemplate", "zActionTemplate", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zValidators"], outputs: ["zOnSearch", "zOnLoadMore", "zControl"], exportAs: ["zSelect"] }, { kind: "component", type: ZCalendarComponent, selector: "z-calendar", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zShowTime", "zTimeFormat", "zShowHour", "zShowMinute", "zShowSecond", "zQuickSelect", "zAllowClear", "zFormat", "zMinDate", "zMaxDate", "zValueType", "zValidators", "zLocale", "zShowOk", "zOkText", "zShowCancel", "zCancelText", "zDisabledDate"], outputs: ["zControl", "zChange"], exportAs: ["zCalendar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableRowHoverDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableFilterComponent, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[z-table-row-hover], [zTableRowHover]',
+                    selector: 'z-table-filter',
+                    imports: [FormsModule, ZInputComponent, ZSelectComponent, ZCalendarComponent],
                     standalone: true,
+                    template: `
+    @switch (filterType()) {
+      @case ('range') {
+        <div class="flex gap-1">
+          <z-input
+            zType="number"
+            zSize="sm"
+            [zPlaceholder]="minPlaceholder()"
+            [ngModel]="rangeMinValue()"
+            (ngModelChange)="onMinChangeDebounced($event)"
+            class="min-w-0 flex-1"
+          />
+          <z-input
+            zType="number"
+            zSize="sm"
+            [zPlaceholder]="maxPlaceholder()"
+            [ngModel]="rangeMaxValue()"
+            (ngModelChange)="onMaxChangeDebounced($event)"
+            class="min-w-0 flex-1"
+          />
+        </div>
+      }
+      @case ('date') {
+        <z-calendar
+          zMode="single"
+          zSize="sm"
+          zAllowClear
+          zValueType="date"
+          [zPlaceholder]="datePlaceholder()"
+          [ngModel]="dateValue()"
+          (ngModelChange)="onDateChange($event)"
+          class="w-full"
+        />
+      }
+      @case ('date-range') {
+        <z-calendar
+          zMode="range"
+          zSize="sm"
+          zAllowClear
+          zValueType="date"
+          [zPlaceholder]="dateRangePlaceholder()"
+          [ngModel]="dateRangeValue()"
+          (ngModelChange)="onDateRangeChange($event)"
+          class="w-full"
+        />
+      }
+      @case ('select') {
+        <z-select
+          zSize="sm"
+          [zOptions]="selectOptions()"
+          [ngModel]="columnFilterValue()?.toString() ?? ''"
+          [zPlaceholder]="allLabel()"
+          (ngModelChange)="onSelectChange($event)"
+          class="w-full min-w-0"
+        />
+      }
+      @case ('number') {
+        <z-input
+          zType="number"
+          zSize="sm"
+          zAllowClear
+          [zPlaceholder]="searchPlaceholder()"
+          [ngModel]="columnFilterValue()?.toString() ?? ''"
+          (ngModelChange)="onTextChangeDebounced($event)"
+          class="w-full"
+        />
+      }
+      @default {
+        <z-input
+          zType="text"
+          zSize="sm"
+          zAllowClear
+          [zPlaceholder]="searchPlaceholder()"
+          [ngModel]="(columnFilterValue() ?? '').toString()"
+          (ngModelChange)="onTextChangeDebounced($event)"
+          class="w-full"
+        />
+      }
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
-                        '(mouseenter)': 'onMouseEnter()',
-                        '(mouseleave)': 'onMouseLeave()',
+                        class: 'z-table-filter block',
                     },
                 }]
-        }], propDecorators: { zTableRowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTableRowHover", required: false }] }] } });
+        }], propDecorators: { zColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "zColumn", required: true }] }], zTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTable", required: true }] }] } });
 
 const Z_DEFAULT_ROW_HEIGHT = 40;
 const Z_DEFAULT_VIRTUAL_OVERSCAN = 5;
@@ -134,7 +524,7 @@ const isFooterConfig = (config) => {
     }
     return config.constructor === Object;
 };
-const getHeaderConfig = (col) => {
+const getHeaderOrFooterConfigInternal = (col, type) => {
     const empty = {
         content: undefined,
         class: undefined,
@@ -143,23 +533,31 @@ const getHeaderConfig = (col) => {
         tooltip: undefined,
         rowSpan: undefined,
         colSpan: undefined,
+        contentClass: undefined,
+        contentStyle: undefined,
     };
     if (!col) {
         return empty;
     }
-    if (!isHeaderConfig(col.header)) {
-        return { ...empty, content: col.header };
+    const config = type === 'header' ? col.header : col.footer;
+    const isConfigFn = type === 'header' ? isHeaderConfig : isFooterConfig;
+    if (!isConfigFn(config)) {
+        return { ...empty, content: config };
     }
+    const typedConfig = config;
     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,
+        content: typedConfig.content,
+        class: typedConfig.class,
+        style: typedConfig.style,
+        align: typedConfig.align,
+        tooltip: typedConfig.tooltip,
+        rowSpan: typedConfig.rowSpan,
+        colSpan: typedConfig.colSpan,
+        contentClass: typedConfig.contentClass,
+        contentStyle: typedConfig.contentStyle,
     };
 };
+const getHeaderConfig = (col) => getHeaderOrFooterConfigInternal(col, 'header');
 const getBodyConfig = (col, ctx) => {
     const empty = {
         content: undefined,
@@ -198,32 +596,7 @@ const getBodyConfig = (col, ctx) => {
         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 getFooterConfig = (col) => getHeaderOrFooterConfigInternal(col, 'footer');
 const getHeaderContent = (col) => getHeaderConfig(col).content;
 const getBodyContent = (col) => {
     if (!col?.body) {
@@ -542,6 +915,207 @@ function columnConfigToColumnDef(config) {
     return columnDef;
 }
 
+class ZTableIconTextComponent {
+    zText = input('', ...(ngDevMode ? [{ debugName: "zText" }] : []));
+    zTooltip = input('', ...(ngDevMode ? [{ debugName: "zTooltip" }] : []));
+    zTriggerElement = input(null, ...(ngDevMode ? [{ debugName: "zTriggerElement" }] : []));
+    _hostEl = inject(ElementRef).nativeElement;
+    triggerEl = computed(() => this.zTriggerElement() ?? this._hostEl, ...(ngDevMode ? [{ debugName: "triggerEl" }] : []));
+    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 }, zTriggerElement: { classPropertyName: "zTriggerElement", publicName: "zTriggerElement", 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]="triggerEl()"
+            [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]="triggerEl()"
+            [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 }] }], zTriggerElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTriggerElement", required: false }] }] } });
+
+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 }] }] } });
+
+class ZTableResizerDirective {
+    zTableResizer = input.required(...(ngDevMode ? [{ debugName: "zTableResizer" }] : []));
+    _elementRef = inject((ElementRef));
+    _ngZone = inject(NgZone);
+    _mousedownHandler = null;
+    _touchstartHandler = null;
+    ngAfterViewInit() {
+        const element = this._elementRef.nativeElement;
+        const header = this.zTableResizer();
+        this._mousedownHandler = (event) => {
+            const resizeHandler = header.getResizeHandler();
+            resizeHandler(event);
+        };
+        this._touchstartHandler = (event) => {
+            const resizeHandler = header.getResizeHandler();
+            resizeHandler(event);
+        };
+        // Run outside Angular zone for better performance
+        // Use passive: true for touchstart to improve scroll performance
+        // The TanStack resize handler manages touch events internally
+        this._ngZone.runOutsideAngular(() => {
+            element.addEventListener('mousedown', this._mousedownHandler);
+            element.addEventListener('touchstart', this._touchstartHandler, { passive: true });
+        });
+    }
+    ngOnDestroy() {
+        const element = this._elementRef.nativeElement;
+        if (this._mousedownHandler) {
+            element.removeEventListener('mousedown', this._mousedownHandler);
+            this._mousedownHandler = null;
+        }
+        if (this._touchstartHandler) {
+            element.removeEventListener('touchstart', this._touchstartHandler);
+            this._touchstartHandler = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableResizerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: ZTableResizerDirective, isStandalone: true, selector: "[z-table-resizer],[zTableResizer]", inputs: { zTableResizer: { classPropertyName: "zTableResizer", publicName: "zTableResizer", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableResizerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[z-table-resizer],[zTableResizer]',
+                    standalone: true,
+                }]
+        }], propDecorators: { zTableResizer: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTableResizer", required: true }] }] } });
+
 class ZTableCellBottomPipe {
     transform(cell, columns, allRows) {
         if (allRows.length === 0) {
@@ -702,6 +1276,22 @@ class ZTableColumnConfigPipe {
                 const headerConfig = getHeaderConfig(columnConfig);
                 return headerConfig.align ? Z_TABLE_ALIGN_MAP[headerConfig.align] || '' : '';
             }
+            case 'headerContentClass': {
+                const headerConfig = getHeaderConfig(columnConfig);
+                const { contentClass } = headerConfig;
+                if (typeof contentClass === 'function') {
+                    return '';
+                }
+                return contentClass || '';
+            }
+            case 'headerContentStyle': {
+                const headerConfig = getHeaderConfig(columnConfig);
+                const { contentStyle } = headerConfig;
+                if (typeof contentStyle === 'function') {
+                    return {};
+                }
+                return contentStyle || {};
+            }
             case 'footerClass': {
                 const footerConfig = getFooterConfig(columnConfig);
                 return footerConfig.class || '';
@@ -718,6 +1308,22 @@ class ZTableColumnConfigPipe {
                 const footerConfig = getFooterConfig(columnConfig);
                 return footerConfig.align ? Z_TABLE_ALIGN_MAP[footerConfig.align] || '' : '';
             }
+            case 'footerContentClass': {
+                const footerConfig = getFooterConfig(columnConfig);
+                const { contentClass } = footerConfig;
+                if (typeof contentClass === 'function') {
+                    return '';
+                }
+                return contentClass || '';
+            }
+            case 'footerContentStyle': {
+                const footerConfig = getFooterConfig(columnConfig);
+                const { contentStyle } = footerConfig;
+                if (typeof contentStyle === 'function') {
+                    return {};
+                }
+                return contentStyle || {};
+            }
             case 'hasBodyRowSpan':
                 return columnConfig ? isBodyConfig(columnConfig.body) && columnConfig.body.rowSpan !== undefined : false;
             case 'enableOrdering':
@@ -1196,399 +1802,116 @@ class ZTableRowPipe {
     }
     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" }] : []));
-    _translate = inject(TranslateService);
-    _currentLang = toSignal(this._translate.onLangChange.pipe(startWith({ lang: this._translate.currentLang })));
-    _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" }] : []));
-    minPlaceholder = computed(() => {
-        this._currentLang();
-        return this._translate.instant('i18n_z_ui_table_filter_min');
-    }, ...(ngDevMode ? [{ debugName: "minPlaceholder" }] : []));
-    maxPlaceholder = computed(() => {
-        this._currentLang();
-        return this._translate.instant('i18n_z_ui_table_filter_max');
-    }, ...(ngDevMode ? [{ debugName: "maxPlaceholder" }] : []));
-    searchPlaceholder = computed(() => {
-        this._currentLang();
-        return this._translate.instant('i18n_z_ui_table_filter_search');
-    }, ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
-    allLabel = computed(() => {
-        this._currentLang();
-        return this._translate.instant('i18n_z_ui_table_filter_all');
-    }, ...(ngDevMode ? [{ debugName: "allLabel" }] : []));
-    selectOptions = computed(() => {
-        const columnDef = this._columnDef();
-        const allOption = { label: this.allLabel(), 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]="minPlaceholder()"
-            [ngModel]="rangeMinValue()"
-            (ngModelChange)="onMinChangeDebounced($event)"
-            class="min-w-0 flex-1"
-          />
-          <z-input
-            zType="number"
-            zSize="sm"
-            [zPlaceholder]="maxPlaceholder()"
-            [ngModel]="rangeMaxValue()"
-            (ngModelChange)="onMaxChangeDebounced($event)"
-            class="min-w-0 flex-1"
-          />
-        </div>
-      }
-      @case ('select') {
-        <z-select
-          zSize="sm"
-          [zOptions]="selectOptions()"
-          [ngModel]="columnFilterValue()?.toString() ?? ''"
-          [zPlaceholder]="allLabel()"
-          (ngModelChange)="onSelectChange($event)"
-          class="w-full min-w-0"
-        />
-      }
-      @case ('number') {
-        <z-input
-          zType="number"
-          zSize="sm"
-          zAllowClear
-          [zPlaceholder]="searchPlaceholder()"
-          [ngModel]="columnFilterValue()?.toString() ?? ''"
-          (ngModelChange)="onTextChangeDebounced($event)"
-          class="w-full"
-        />
-      }
-      @default {
-        <z-input
-          zType="text"
-          zSize="sm"
-          zAllowClear
-          [zPlaceholder]="searchPlaceholder()"
-          [ngModel]="(columnFilterValue() ?? '').toString()"
-          (ngModelChange)="onTextChangeDebounced($event)"
-          class="w-full"
-        />
-      }
+}
+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;
+        }
     }
-  `, 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", "zTranslateLabels", "zKey", "zSearchServer", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zSelectedTemplate", "zOptionTemplate", "zActionTemplate", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zValidators"], outputs: ["zOnSearch", "zOnLoadMore", "zControl"], exportAs: ["zSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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: ZTableFilterComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableSpanPipe, decorators: [{
+            type: Pipe,
             args: [{
-                    selector: 'z-table-filter',
-                    imports: [FormsModule, ZInputComponent, ZSelectComponent],
+                    name: 'zTableSpan',
                     standalone: true,
-                    template: `
-    @switch (filterType()) {
-      @case ('range') {
-        <div class="flex gap-1">
-          <z-input
-            zType="number"
-            zSize="sm"
-            [zPlaceholder]="minPlaceholder()"
-            [ngModel]="rangeMinValue()"
-            (ngModelChange)="onMinChangeDebounced($event)"
-            class="min-w-0 flex-1"
-          />
-          <z-input
-            zType="number"
-            zSize="sm"
-            [zPlaceholder]="maxPlaceholder()"
-            [ngModel]="rangeMaxValue()"
-            (ngModelChange)="onMaxChangeDebounced($event)"
-            class="min-w-0 flex-1"
-          />
-        </div>
-      }
-      @case ('select') {
-        <z-select
-          zSize="sm"
-          [zOptions]="selectOptions()"
-          [ngModel]="columnFilterValue()?.toString() ?? ''"
-          [zPlaceholder]="allLabel()"
-          (ngModelChange)="onSelectChange($event)"
-          class="w-full min-w-0"
-        />
-      }
-      @case ('number') {
-        <z-input
-          zType="number"
-          zSize="sm"
-          zAllowClear
-          [zPlaceholder]="searchPlaceholder()"
-          [ngModel]="columnFilterValue()?.toString() ?? ''"
-          (ngModelChange)="onTextChangeDebounced($event)"
-          class="w-full"
-        />
-      }
-      @default {
-        <z-input
-          zType="text"
-          zSize="sm"
-          zAllowClear
-          [zPlaceholder]="searchPlaceholder()"
-          [ngModel]="(columnFilterValue() ?? '').toString()"
-          (ngModelChange)="onTextChangeDebounced($event)"
-          class="w-full"
-        />
-      }
+                    pure: true,
+                }]
+        }] });
+
+class ZTableIsTemplateRefPipe {
+    transform(value) {
+        return value instanceof TemplateRef;
     }
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        class: 'z-table-filter block',
-                    },
+    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,
                 }]
-        }], 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" }] : []));
-    zTriggerElement = input(null, ...(ngDevMode ? [{ debugName: "zTriggerElement" }] : []));
-    _hostEl = inject(ElementRef).nativeElement;
-    triggerEl = computed(() => this.zTriggerElement() ?? this._hostEl, ...(ngDevMode ? [{ debugName: "triggerEl" }] : []));
-    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 }, zTriggerElement: { classPropertyName: "zTriggerElement", publicName: "zTriggerElement", 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]="triggerEl()"
-            [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 });
+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: 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]="triggerEl()"
-            [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 }] }], zTriggerElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTriggerElement", required: false }] }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableBodyCellRenderPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zTableBodyCellRender',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
+class ZTableFooterRenderPipe {
+    transform(header, allHeaders, columns) {
+        return shouldFooterRender(header, allHeaders, columns);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableFooterRenderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZTableFooterRenderPipe, isStandalone: true, name: "zTableFooterRender" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableFooterRenderPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zTableFooterRender',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
+class ZTableHeaderRenderPipe {
+    transform(header, allHeaders, columns) {
+        return shouldHeaderRender(header, allHeaders, columns);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableHeaderRenderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZTableHeaderRenderPipe, isStandalone: true, name: "zTableHeaderRender" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableHeaderRenderPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zTableHeaderRender',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
 
 /* eslint-disable @stylistic/indent */
+const Z_TABLE_DEFAULT_ACTION_BUTTON_WIDTH = 32;
 class ZTableComponent {
     zConfig = input({ data: [], columns: [], mode: 'local' }, ...(ngDevMode ? [{ debugName: "zConfig" }] : []));
     zLoading = input(false, ...(ngDevMode ? [{ debugName: "zLoading" }] : []));
@@ -1596,7 +1919,6 @@ class ZTableComponent {
     zChange = output();
     zControl = output();
     _destroyRef = inject(DestroyRef);
-    _ngZone = inject(NgZone);
     _isSyncingScroll = signal(false, ...(ngDevMode ? [{ debugName: "_isSyncingScroll" }] : []));
     _savedScrollLeft = signal(0, ...(ngDevMode ? [{ debugName: "_savedScrollLeft" }] : []));
     _resizeObserver = null;
@@ -1668,6 +1990,43 @@ class ZTableComponent {
         const columns = this.zConfig().columns ?? [];
         return columns.some(c => c.id === 'expand');
     }, ...(ngDevMode ? [{ debugName: "hasExpandColumn" }] : []));
+    actionColumnInfo = computed(() => {
+        const columns = this.zConfig().columns ?? [];
+        const findActionColumn = (cols) => {
+            for (const col of cols) {
+                if (isBodyConfig(col.body) && col.body.actions && col.body.actions.actions?.length > 0) {
+                    return { columnId: col.id, config: col.body.actions };
+                }
+                if (col.columns?.length) {
+                    const found = findActionColumn(col.columns);
+                    if (found) {
+                        return found;
+                    }
+                }
+            }
+            return null;
+        };
+        const actionCol = findActionColumn(columns);
+        if (!actionCol) {
+            return null;
+        }
+        const { config } = actionCol;
+        const maxVisible = config.maxVisible ?? 3;
+        const totalActions = config.actions.filter(a => !a.hidden).length;
+        const visibleCount = Math.min(totalActions, maxVisible);
+        const hasOverflow = totalActions > maxVisible;
+        const buttonCount = hasOverflow ? visibleCount + 1 : visibleCount;
+        const buttonWidth = Z_TABLE_DEFAULT_ACTION_BUTTON_WIDTH;
+        const gap = 4;
+        const padding = 16;
+        const width = buttonCount * buttonWidth + (buttonCount - 1) * gap + padding;
+        return {
+            columnId: actionCol.columnId,
+            config: actionCol.config,
+            width,
+        };
+    }, ...(ngDevMode ? [{ debugName: "actionColumnInfo" }] : []));
+    hasActionColumn = computed(() => this.actionColumnInfo() !== null, ...(ngDevMode ? [{ debugName: "hasActionColumn" }] : []));
     hasFiltering = computed(() => {
         const columns = this.zConfig().columns ?? [];
         const checkFilter = (col) => {
@@ -1683,7 +2042,14 @@ class ZTableComponent {
         return columns.some(c => checkFilter(c));
     }, ...(ngDevMode ? [{ debugName: "hasFiltering" }] : []));
     hasSorting = computed(() => {
-        const columns = this.zConfig().columns ?? [];
+        const config = this.zConfig();
+        if (config.enableColumnSorting === false) {
+            return false;
+        }
+        if (config.enableColumnSorting === true) {
+            return true;
+        }
+        const columns = config.columns ?? [];
         const checkSorting = (col) => {
             const sortConfig = typeof col.sort === 'boolean' ? { enabled: col.sort } : col.sort;
             if (sortConfig?.enabled) {
@@ -1708,18 +2074,16 @@ class ZTableComponent {
         }
         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) {
+        const needsRowPinActionsColumn = this.zConfig().enableRowPinning && !hasExpandColumn && !hasSelectColumn && !this.hasBodyRowSpan();
+        if (needsRowPinActionsColumn) {
             cols = [
                 {
-                    id: 'actions',
+                    id: 'actionRowPin',
                     header: '',
                     cell: '',
                     size: 30,
                     minSize: 30,
                     maxSize: 30,
-                    enableSorting: false,
-                    enableFiltering: false,
                     enableResizing: false,
                     enableHiding: false,
                 },
@@ -1734,12 +2098,20 @@ class ZTableComponent {
                 colDef.maxSize = 50;
                 colDef.enableResizing = false;
             }
-            if (colDef.id === 'expand' || colDef.id === 'actions') {
+            if (colDef.id === 'expand' || colDef.id === 'actionRowPin') {
                 colDef.size = 50;
                 colDef.minSize = 50;
                 colDef.maxSize = 50;
                 colDef.enableResizing = false;
             }
+            const actionInfo = this.actionColumnInfo();
+            if (actionInfo && colDef.id === actionInfo.columnId) {
+                colDef.size = actionInfo.width;
+                colDef.minSize = actionInfo.width;
+                colDef.maxSize = actionInfo.width;
+                colDef.enableResizing = false;
+                colDef.enableSorting = false;
+            }
             return colDef;
         });
     }, ...(ngDevMode ? [{ debugName: "_columns" }] : []));
@@ -2484,6 +2856,12 @@ class ZTableComponent {
     toggleHeaderFooterShadow() {
         this.showHeaderFooterShadow.update(v => !v);
     }
+    onActionClick(event) {
+        this.zChange.emit({
+            type: 'action',
+            data: event,
+        });
+    }
     openSettingsDrawer() {
         if (this.columnOrder().length === 0) {
             this.columnOrder.set(this.table.getAllLeafColumns().map(col => col.id));
@@ -2736,7 +3114,7 @@ class ZTableComponent {
         });
     }
     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" }, providers: [TranslatePipe], viewQueries: [{ propertyName: "theadWrapper", first: true, predicate: ["theadWrapper"], descendants: true, isSignal: true }, { propertyName: "tbodyContainer", first: true, predicate: ["tbodyContainer"], descendants: true, isSignal: true }, { propertyName: "tbodyWrapper", first: true, predicate: ["tbodyWrapper"], descendants: true, isSignal: true }, { propertyName: "tbodyScrollbar", first: true, predicate: ["tbodyWrapper"], descendants: true, isSignal: true }, { propertyName: "tfootWrapper", first: true, predicate: ["tfootWrapper"], descendants: true, isSignal: true }, { propertyName: "expandedRowTemplate", first: true, predicate: ["expandedRowTemplate"], descendants: true, isSignal: true }], exportAs: ["zTable"], ngImport: i0, template: "<!-- Toolbar: Search & Settings -->\n@if (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]=\"'i18n_z_ui_table_search' | translate\"\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()\">\n        {{ 'i18n_z_ui_table_settings' | translate }}\n      </z-button>\n    }\n  </div>\n}\n\n<div\n  class=\"z-table-container shadow-xs\"\n  [class.z-hide-horizontal-border]=\"!showHorizontalBorder()\"\n  [class.z-hide-vertical-border]=\"!showVerticalBorder()\"\n  [style.max-height]=\"zConfig().maxHeight\"\n  [style.min-height]=\"zConfig().minHeight\">\n  <!-- Shared colgroup template -->\n  <ng-template #colGroupTpl>\n    <colgroup>\n      @for (column of orderedLeafColumns(); track column.id) {\n        @if (column.getIsVisible()) {\n          <col [style.width]=\"'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n      }\n    </colgroup>\n  </ng-template>\n\n  <!-- Header table -->\n  <div\n    class=\"z-thead-wrapper shadow-xs\"\n    [class.z-shadow-header]=\"shouldHeaderShowShadow()\"\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\"\n    #theadWrapper>\n    <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n      <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n      <thead>\n        @for (headerGroup of orderedHeaderGroups(); track headerGroup.id) {\n          <tr>\n            @for (header of headerGroup.headers; track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableHeaderRender: headerGroup.headers : zConfig().columns;\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [ngStyle]=\"header.column | zTablePinningStyles: header : 'header' : table : zConfig().columns\"\n                  [class]=\"\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass') +\n                    ' ' +\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass')\n                  \"\n                  [style]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\"\n                  [class.z-sticky-left]=\"header.column.getIsPinned() === 'left'\"\n                  [class.z-sticky-right]=\"header.column.getIsPinned() === 'right'\"\n                  [class.z-sticky-left-last]=\"header | zTableHeaderPin: 'isLastLeftPinned' : zConfig().columns\"\n                  [class.z-sticky-right-first]=\"header | zTableHeaderPin: 'isFirstRightPinned' : zConfig().columns\"\n                  [class.z-sticky-right-last]=\"header | zTableHeaderPin: 'isLastRightPinned' : zConfig().columns\"\n                  [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                  [class.z-col-select]=\"header.column.id === 'select'\"\n                  [class.z-col-expand]=\"header.column.id === 'expand'\"\n                  [class.z-col-actions]=\"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\n                      class=\"flex w-full items-center gap-1\"\n                      [class.justify-center]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                        'text-center'\n                      \"\n                      [class.justify-end]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') === 'text-right'\n                      \">\n                      <!-- Column Options Popover Template -->\n                      @let columnEnableOrdering =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableOrdering';\n                      @let columnEnablePinning =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enablePinning';\n                      <ng-template #colOptionsPopoverContent>\n                        <div class=\"flex flex-col gap-0.5 p-0.5\">\n                          @if (zConfig().enableColumnOrdering && columnEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_left' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isLastMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_right' | translate }}</span>\n                            </button>\n                          }\n                          @if (\n                            zConfig().enableColumnOrdering &&\n                            columnEnableOrdering &&\n                            header.column.getCanPin() &&\n                            zConfig().enableColumnPinning &&\n                            columnEnablePinning\n                          ) {\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                          }\n                          @if (header.column.getCanPin() && zConfig().enableColumnPinning && columnEnablePinning) {\n                            @if (header.column.getIsPinned() !== 'left') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'right') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned()) {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                        </div>\n                      </ng-template>\n\n                      <!-- Header Text with Popover Trigger -->\n                      @let hasColumnOptions =\n                        (header.column.getCanPin() && zConfig().enableColumnPinning && columnEnablePinning) ||\n                        (zConfig().enableColumnOrdering && columnEnableOrdering);\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded px-1.5 py-1\"\n                        [class.cursor-pointer]=\"hasColumnOptions\"\n                        [class.z-has-options]=\"hasColumnOptions\"\n                        [attr.z-popover]=\"hasColumnOptions ? '' : null\"\n                        #colOptionsPopover=\"zPopover\"\n                        #headerTextWrapper\n                        z-popover\n                        [zPopoverContent]=\"hasColumnOptions ? colOptionsPopoverContent : null\"\n                        zTrigger=\"click\"\n                        zPosition=\"bottom\"\n                        [zOffset]=\"5\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <ng-container\n                              *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                          } @else if (headerContent | zTableHasIcon) {\n                            <z-table-icon-text\n                              class=\"min-w-0 truncate\"\n                              [zText]=\"headerContent\"\n                              [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\"\n                              [zTriggerElement]=\"headerTextWrapper\" />\n                          } @else {\n                            <span\n                              class=\"z-table-cell-text\"\n                              z-tooltip\n                              [zContent]=\"\n                                (header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip') ||\n                                headerContent\n                              \"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [innerHTML]=\"headerContent | 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)=\"\n                              $event.stopPropagation(); handleSort($event, header.column.getToggleSortingHandler())\n                            \">\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                        <!-- Dropdown indicator when has options -->\n                        @if (hasColumnOptions) {\n                          <z-icon\n                            zType=\"lucideChevronDown\"\n                            zSize=\"12\"\n                            class=\"text-muted-foreground shrink-0 opacity-50\" />\n                        }\n                      </div>\n                    </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      @if (zConfig().useSkeleton) {\n        <!-- Skeleton Loading -->\n        <div class=\"z-skeleton-state\">\n          @for (i of skeletonRows(); track $index) {\n            <div class=\"z-skeleton-row\" [style.height.px]=\"virtualRowHeight()\">\n              <z-skeleton zType=\"bar\" zWidth=\"100%\" [zHeight]=\"virtualRowHeight() - 16 + 'px'\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <!-- Spinner Loading -->\n        <div class=\"z-loading-state\">\n          <z-loading [zLoading]=\"true\" zSize=\"lg\" [zText]=\"'i18n_z_ui_table_loading' | translate\" />\n        </div>\n      }\n    } @else if (isEmpty()) {\n      <div class=\"z-empty-state\">\n        @if (isNoSearchResults()) {\n          <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"'i18n_z_ui_table_no_results' | translate\" />\n        } @else {\n          <z-empty zIcon=\"lucidePackageOpen\" zSize=\"sm\" [zMessage]=\"'i18n_z_ui_table_no_data' | translate\" />\n        }\n      </div>\n    } @else {\n      <ng-scrollbar class=\"z-tbody-scrollbar\" #tbodyWrapper track=\"all\" (scroll)=\"onTbodyScroll($event)\">\n        @if (isVirtual()) {\n          <!-- Virtual Scroll Mode -->\n          <div\n            class=\"z-virtual-scroll-inner\"\n            [style.height.px]=\"virtualizer.getTotalSize()\"\n            [style.min-width.px]=\"table.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let groupRows = dynamicGroupRows()[virtualItem.index] || [];\n              <div\n                class=\"z-virtual-row\"\n                [style.height.px]=\"dynamicGroupHeights()[virtualItem.index] ?? groupSize() * virtualRowHeight()\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\">\n                <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n                  <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n                  <tbody\n                    [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n                    [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n                    @for (row of groupRows; track row.id) {\n                      <tr\n                        z-table-row-hover\n                        [style.height.px]=\"virtualRowHeight()\"\n                        [class.z-child-row]=\"row.depth > 0\"\n                        [class.z-selected]=\"row.getIsSelected()\"\n                        [class.z-indeterminate-selected]=\"row.getIsSomeSelected() && !row.getIsSelected()\">\n                        @for (cell of row.getVisibleCells(); track cell.id) {\n                          @let shouldRenderRowSpan =\n                            cell | zTableSpan: zConfig().columns : 'shouldRender' : table.getRowModel().rows;\n                          @let shouldRenderColSpan =\n                            cell | zTableBodyCellRender: row.getVisibleCells() : zConfig().columns;\n                          @if (shouldRenderRowSpan && shouldRenderColSpan) {\n                            <td\n                              [ngStyle]=\"\n                                cell.column\n                                  | zTablePinningStyles: cell : 'body' : row.getVisibleCells() : zConfig().columns\n                              \"\n                              [class.z-sticky-left]=\"cell.column.getIsPinned() === 'left'\"\n                              [class.z-sticky-right]=\"cell.column.getIsPinned() === 'right'\"\n                              [class.z-sticky-left-last]=\"\n                                cell.column.getIsPinned() === 'left' && cell.column.getIsLastColumn('left')\n                              \"\n                              [class.z-sticky-right-first]=\"\n                                cell.column.getIsPinned() === 'right' && cell.column.getIsFirstColumn('right')\n                              \"\n                              [class.z-sticky-right-last]=\"\n                                cell.column.getIsPinned() === 'right' && cell.column.getIsLastColumn('right')\n                              \"\n                              [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                              [class.z-col-select]=\"cell.column.id === 'select'\"\n                              [class.z-col-expand]=\"cell.column.id === 'expand'\"\n                              [class.z-at-bottom]=\"\n                                cell | zTableCellBottom: zConfig().columns : table.getRowModel().rows\n                              \"\n                              [attr.rowspan]=\"\n                                cell | zTableSpan: zConfig().columns : 'cellRowSpan' : table.getRowModel().rows\n                              \"\n                              [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan'\"\n                              [class]=\"cell | zTableCellConfig: zConfig().columns : 'cellClass'\"\n                              [style]=\"cell | zTableCellConfig: zConfig().columns : 'cellStyle'\">\n                              @if (cell.column.id === 'select') {\n                                <!-- Row Checkbox -->\n                                <div class=\"flex items-center justify-center\">\n                                  <z-checkbox\n                                    zSize=\"sm\"\n                                    [zChecked]=\"cell.row.getIsSelected()\"\n                                    [zIndeterminate]=\"cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\"\n                                    [zDisabled]=\"!cell.row.getCanSelect()\"\n                                    (zChange)=\"cell.row.toggleSelected()\" />\n                                </div>\n                              } @else if (cell.column.id === 'expand') {\n                                <!-- Expand Button -->\n                                <div class=\"flex items-center justify-center\">\n                                  @if (cell.row.subRows && cell.row.subRows.length > 0) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.toggleExpanded()\"\n                                      class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                                      <z-icon\n                                        zType=\"lucideChevronRight\"\n                                        zSize=\"14\"\n                                        class=\"transition-transform duration-200\"\n                                        [class.rotate-90]=\"cell.row.getIsExpanded()\" />\n                                    </button>\n                                  }\n                                </div>\n                              } @else {\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\n              [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n              [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n              <!-- Row Template -->\n              <ng-template #rowTemplate let-row>\n                <tr\n                  z-table-row-hover\n                  [attr.data-row-id]=\"row.id\"\n                  [ngStyle]=\"row | zTableRow: table : 'pinningStyles' : virtualRowHeight()\"\n                  [class.z-child-row]=\"row.depth > 0\"\n                  [class.z-selected]=\"row.getIsSelected()\"\n                  [class.z-indeterminate-selected]=\"row.getIsSomeSelected() && !row.getIsSelected()\"\n                  [class.z-pinned-top]=\"row.getIsPinned() === 'top'\"\n                  [class.z-pinned-bottom]=\"row.getIsPinned() === 'bottom'\"\n                  [class.z-shadow-bottom]=\"\n                    showHeaderFooterShadow() &&\n                    row.getIsPinned() === 'top' &&\n                    (row | zTableRow: table : 'isLastTopPinned')\n                  \"\n                  [class.z-shadow-top]=\"\n                    showHeaderFooterShadow() &&\n                    row.getIsPinned() === 'bottom' &&\n                    (row | zTableRow: table : 'isFirstBottomPinned')\n                  \"\n                  [attr.data-depth]=\"row.depth\">\n                  @for (cell of row.getVisibleCells(); track cell.id) {\n                    @let shouldRenderRowSpan =\n                      cell | zTableSpan: zConfig().columns : 'shouldRender' : table.getRowModel().rows;\n                    @let shouldRenderColSpan = cell | zTableBodyCellRender: row.getVisibleCells() : zConfig().columns;\n                    @if (shouldRenderRowSpan && shouldRenderColSpan) {\n                      <td\n                        [ngStyle]=\"\n                          cell.column | zTablePinningStyles: cell : 'body' : row.getVisibleCells() : zConfig().columns\n                        \"\n                        [class]=\"cell | zTableCellConfig: zConfig().columns : 'cellClass'\"\n                        [style]=\"cell | zTableCellConfig: zConfig().columns : 'cellStyle'\"\n                        [class.z-sticky-left]=\"cell.column.getIsPinned() === 'left'\"\n                        [class.z-sticky-right]=\"cell.column.getIsPinned() === 'right'\"\n                        [class.z-sticky-left-last]=\"\n                          cell.column.getIsPinned() === 'left' && cell.column.getIsLastColumn('left')\n                        \"\n                        [class.z-sticky-right-first]=\"\n                          cell.column.getIsPinned() === 'right' && cell.column.getIsFirstColumn('right')\n                        \"\n                        [class.z-sticky-right-last]=\"\n                          cell.column.getIsPinned() === 'right' && cell.column.getIsLastColumn('right')\n                        \"\n                        [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                        [class.z-col-select]=\"cell.column.id === 'select'\"\n                        [class.z-col-expand]=\"cell.column.id === 'expand'\"\n                        [class.z-col-actions]=\"cell.column.id === 'actions'\"\n                        [class.z-at-bottom]=\"cell | zTableCellBottom: zConfig().columns : table.getRowModel().rows\"\n                        [attr.rowspan]=\"cell | zTableSpan: zConfig().columns : 'cellRowSpan' : table.getRowModel().rows\"\n                        [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan'\">\n                        @if (cell.column.id === 'select') {\n                          <!-- Row Checkbox with Pin Button -->\n                          <div class=\"flex items-center justify-center gap-1\">\n                            <z-checkbox\n                              zSize=\"sm\"\n                              [zChecked]=\"cell.row.getIsSelected()\"\n                              [zIndeterminate]=\"cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\"\n                              [zDisabled]=\"!cell.row.getCanSelect()\"\n                              (zChange)=\"cell.row.toggleSelected()\" />\n                            @if (zConfig().enableRowPinning && cell.row.depth === 0 && !hasBodyRowSpan()) {\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            }\n                          </div>\n                        } @else if (cell.column.id === 'expand') {\n                          <!-- Expand Button with Row Pin Popover -->\n                          <div class=\"flex items-center justify-center gap-1\">\n                            @if (cell.row.subRows && cell.row.subRows.length > 0) {\n                              <button\n                                type=\"button\"\n                                (click)=\"cell.row.toggleExpanded()\"\n                                class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                                <z-icon\n                                  zType=\"lucideChevronRight\"\n                                  zSize=\"14\"\n                                  class=\"transition-transform duration-200\"\n                                  [class.rotate-90]=\"cell.row.getIsExpanded()\" />\n                              </button>\n                            }\n                            @if (\n                              zConfig().enableRowPinning &&\n                              cell.row.depth === 0 &&\n                              !(cell.row.subRows && cell.row.subRows.length > 0) &&\n                              !hasBodyRowSpan()\n                            ) {\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            }\n                          </div>\n                        } @else if (cell.column.id === 'actions') {\n                          <!-- Actions Column - Row Pin Only (for parent rows) -->\n                          @if (cell.row.depth === 0 && !hasBodyRowSpan()) {\n                            <div class=\"flex items-center justify-center\">\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            </div>\n                          }\n                        } @else {\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                <!-- 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  <div class=\"mt-4 flex items-center justify-between gap-4\">\n    <div class=\"text-sm text-gray-500\">\n      {{\n        ('i18n_z_ui_table_total_rows' | translate).replace(\n          '{total}',\n          zConfig().totalCount?.toString() || totalRows.toString()\n        )\n      }}\n    </div>\n    <z-pagination\n      [zTotal]=\"zConfig().totalCount ?? totalRows\"\n      [(zPageIndex)]=\"pagination().pageIndex\"\n      [(zPageSize)]=\"pagination().pageSize\"\n      [zPageSizeOptions]=\"zConfig().pagination?.pageSizeOptions ?? [10, 20, 50, 100]\"\n      [zShowSizeChanger]=\"zConfig().pagination?.showSizeChanger ?? true\"\n      [zShowQuickJumper]=\"zConfig().pagination?.showQuickJumper ?? false\"\n      [zShowTotal]=\"false\"\n      [zDisabled]=\"zConfig().pagination?.disabled || zLoading() || isProcessing()\"\n      (zOnPageChange)=\"onPageChange($event)\" />\n  </div>\n}\n\n<!-- Settings Drawer -->\n<z-drawer\n  [(zVisible)]=\"showSettingsDrawer\"\n  [zTitle]=\"'i18n_z_ui_table_settings_title' | translate\"\n  zPlacement=\"right\"\n  zWidth=\"500px\"\n  [zShadow]=\"true\"\n  [zOkText]=\"null\"\n  [zCancelText]=\"'i18n_z_ui_drawer_close' | translate\">\n  <div class=\"z-table-settings-drawer px-4\">\n    <!-- Display Settings -->\n    <div class=\"mb-4\">\n      <h4 class=\"text-foreground mb-2 text-sm font-semibold\">{{ 'i18n_z_ui_table_display_settings' | translate }}</h4>\n      <p class=\"text-muted-foreground mb-3 text-xs\">{{ 'i18n_z_ui_table_display_settings_desc' | translate }}</p>\n      <div class=\"grid grid-cols-2 gap-x-4 gap-y-3\">\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showHorizontalBorder()\"\n          [zText]=\"'i18n_z_ui_table_horizontal_border' | translate\"\n          (zChange)=\"showHorizontalBorder.set(!showHorizontalBorder())\" />\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showVerticalBorder()\"\n          [zText]=\"'i18n_z_ui_table_vertical_border' | translate\"\n          (zChange)=\"showVerticalBorder.set(!showVerticalBorder())\" />\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showHeaderFooterShadow()\"\n          [zText]=\"'i18n_z_ui_table_header_footer_shadow' | translate\"\n          (zChange)=\"showHeaderFooterShadow.set(!showHeaderFooterShadow())\" />\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-border my-4 border-t\"></div>\n\n    <!-- Unified Column Settings -->\n    @if (zConfig().enableSettings) {\n      <div class=\"mb-4\">\n        <h4 class=\"text-foreground mb-2 text-sm font-semibold\">{{ 'i18n_z_ui_table_column_settings' | translate }}</h4>\n        <p class=\"text-muted-foreground mb-3 text-xs\">{{ 'i18n_z_ui_table_column_settings_desc' | translate }}</p>\n\n        <!-- Unpinned Columns (Draggable) -->\n        <div\n          cdkDropList\n          #columnDropList=\"cdkDropList\"\n          (cdkDropListDropped)=\"onPendingColumnDrop($event)\"\n          class=\"z-column-drop-list space-y-1.5\">\n          @for (columnId of columnOrder(); track columnId; let i = $index) {\n            @if (columnId !== 'expand' && columnId !== 'select') {\n              @let column = table.getColumn(columnId);\n              @let isPinned = column?.getIsPinned();\n              @let isVisible = columnVisibility()[columnId] !== false;\n              @let canPin = column?.getCanPin() !== false && zConfig().enableColumnPinning;\n              @if (!isPinned) {\n                <div\n                  cdkDrag\n                  [cdkDragData]=\"columnId\"\n                  cdkDragLockAxis=\"y\"\n                  cdkDragBoundary=\".z-column-drop-list\"\n                  cdkDragPreviewClass=\"z-drag-preview\"\n                  class=\"z-drag-item border-border bg-card hover:border-primary flex cursor-grab items-center gap-2 rounded border px-2 py-1.5 text-sm active:cursor-grabbing\"\n                  [class.opacity-60]=\"!isVisible\">\n                  <!-- Drag Handle -->\n                  <z-icon\n                    cdkDragHandle\n                    zType=\"lucideGripVertical\"\n                    zSize=\"14\"\n                    class=\"text-muted-foreground shrink-0 cursor-grab active:cursor-grabbing\" />\n\n                  <!-- Visibility Checkbox -->\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isVisible\"\n                    (change)=\"onToggleColumnVisibility(columnId)\"\n                    (mousedown)=\"$event.stopPropagation()\"\n                    class=\"border-input h-4 w-4 shrink-0 cursor-pointer rounded\" />\n\n                  <!-- Column Name -->\n                  <span class=\"flex min-w-0 flex-1 flex-col\">\n                    <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                      {{ columnId | zTableColumnHeader: zConfig().columns }}\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\" (mousedown)=\"$event.stopPropagation()\">\n                      <button\n                        type=\"button\"\n                        [disabled]=\"!isVisible\"\n                        (click)=\"onToggleColumnPin(columnId, 'left')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                        title=\"Pin Left\">\n                        <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                      </button>\n                      <button\n                        type=\"button\"\n                        [disabled]=\"!isVisible\"\n                        (click)=\"onToggleColumnPin(columnId, 'right')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                        title=\"Pin Right\">\n                        <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                      </button>\n                    </div>\n                  }\n                </div>\n              }\n            }\n          }\n        </div>\n\n        <!-- Pinned Columns Section -->\n        @if (zConfig().enableColumnPinning) {\n          @if (pinnedColumnIds().length > 0) {\n            <div class=\"border-border mt-4 border-t pt-4\">\n              <h5 class=\"text-muted-foreground mb-2 text-xs font-medium\">\n                {{ 'i18n_z_ui_table_pinned_columns' | translate }}\n              </h5>\n              <div class=\"space-y-1.5\">\n                @for (columnId of pinnedColumnIds(); track columnId) {\n                  @let column = table.getColumn(columnId);\n                  @let isPinned = column?.getIsPinned();\n                  @let isVisible = columnVisibility()[columnId] !== false;\n                  <div\n                    class=\"border-border bg-muted/30 flex items-center gap-2 rounded border px-2 py-1.5 text-sm\"\n                    [class.opacity-60]=\"!isVisible\">\n                    <!-- Pin Icon -->\n                    <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"text-primary shrink-0\" />\n\n                    <!-- Visibility Checkbox -->\n                    <!-- 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                      {{\n                        isPinned === 'left'\n                          ? ('i18n_z_ui_table_left' | translate)\n                          : ('i18n_z_ui_table_right' | translate)\n                      }}\n                    </span>\n\n                    <!-- Unpin Button -->\n                    <button\n                      type=\"button\"\n                      (click)=\"onToggleColumnPin(columnId, isPinned === 'left' ? 'left' : 'right')\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground cursor-pointer rounded p-1 text-xs transition-colors\"\n                      title=\"Unpin\">\n                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        }\n      </div>\n    }\n  </div>\n</z-drawer>\n", styles: [":host{display:flex;flex-direction:column;height:100%;--scrollbar-track-thickness: 7px;--scrollbar-track-color: transparent;--scrollbar-thumb-shape: 3px}.z-table-container{display:flex;flex-direction:column;position:relative;width:100%;height:100%;overflow:hidden;border-radius:8px;border:thin solid var(--border);background-color:var(--card)}.z-table-container.z-hide-horizontal-border th,.z-table-container.z-hide-horizontal-border td{border-bottom:none!important;border-top:none!important}.z-table-container.z-hide-vertical-border th,.z-table-container.z-hide-vertical-border td{border-left:none!important}table{width:fit-content;min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:14px}.z-table-toolbar .z-settings-btn{transition:all .15s ease}.z-table-toolbar .z-settings-btn:hover{border-color:var(--muted-foreground)}.z-table-cell-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;-webkit-user-select:text;user-select:text}.z-thead-wrapper{flex-shrink:0;background:var(--muted);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.z-thead-wrapper::-webkit-scrollbar{display:none}.z-thead-wrapper th{height:auto;padding:8px 12px;text-align:left;vertical-align:middle;font-weight:500;color:var(--foreground);white-space:nowrap;overflow:hidden;background:var(--muted);border-left:thin solid var(--border);border-bottom:thin solid var(--border);-webkit-user-select:none;user-select:none}.z-thead-wrapper th.z-at-left-edge{border-left:none}.z-thead-wrapper th[colspan]{text-align:center;background:var(--muted);font-weight:500;color:var(--foreground)}.z-thead-wrapper.z-shadow-header{box-shadow:0 1px 3px #00000014;position:relative;z-index:15}.z-thead-wrapper.z-shadow-header:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d}.z-tbody-wrapper{flex:1;min-height:100px;display:flex;flex-direction:column}.z-tbody-scrollbar{flex:1;height:100%}.z-empty-state,.z-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:100px;height:100%;color:var(--muted-foreground);font-size:.875rem;animation:z-fade-in .2s ease-out}.z-skeleton-state{display:flex;flex-direction:column;min-height:200px;height:100%;padding:0;animation:z-fade-in .2s ease-out}.z-skeleton-state .z-skeleton-row{display:flex;align-items:center;padding:0 8px;border-bottom:thin solid var(--border);box-sizing:border-box}.z-skeleton-state .z-skeleton-row:last-child{border-bottom:none}.z-skeleton-state .z-skeleton-row z-skeleton{display:flex;align-items:center;width:100%;height:auto!important}.z-tbody-scrollbar,.z-tbody-scrollbar table{animation:z-fade-in .2s ease-out}@keyframes z-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.z-tbody-wrapper tr{transition:background-color .15s ease}.z-tbody-wrapper tr:hover,.z-tbody-wrapper tr:hover td[style*=sticky]{background-color:var(--muted)}.z-tbody-wrapper tr.z-pinned-top td.z-sticky-left,.z-tbody-wrapper tr.z-pinned-top td.z-sticky-right,.z-tbody-wrapper tr.z-pinned-bottom td.z-sticky-left,.z-tbody-wrapper tr.z-pinned-bottom td.z-sticky-right{z-index:3}.z-tbody-wrapper tr.z-shadow-bottom{box-shadow:0 1px 3px #00000014!important;position:relative;z-index:15}.z-tbody-wrapper tr.z-shadow-bottom:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d!important}.z-tbody-wrapper tr.z-shadow-top{box-shadow:0 -2px 4px #0000000d!important;position:relative;z-index:15}.z-tbody-wrapper tr.z-shadow-top:where(.dark,.dark *){box-shadow:0 -2px 4px #0003!important}.z-tbody-wrapper td{padding:8px 12px;height:40px;vertical-align:middle;color:var(--foreground);white-space:nowrap;overflow:hidden;background:var(--card);border-left:thin solid var(--border);border-bottom:thin solid var(--border);box-sizing:border-box}.z-tbody-wrapper tbody.z-has-vertical-scroll td.z-at-bottom,.z-tbody-wrapper tbody.z-last-row-touches-bottom td.z-at-bottom{border-bottom:none}.z-tbody-wrapper td.z-at-left-edge{border-left:none}.z-tbody-wrapper td i{color:var(--muted-foreground);font-style:italic}.z-tbody-wrapper td[rowspan]{vertical-align:top;padding-top:12px}.z-tbody-wrapper td.z-row-hover{background-color:var(--muted)!important}.z-tbody-wrapper td.z-col-select,.z-tbody-wrapper td.z-col-expand,.z-tbody-wrapper td.z-col-actions{padding:8px 4px!important;text-align:center}.z-tbody-wrapper tr.z-child-row td.z-col-select:first-child,.z-tbody-wrapper tr.z-child-row td.z-col-expand:first-child,.z-tbody-wrapper tr.z-child-row td.z-col-actions:first-child{padding-left:0!important}.z-virtual-scroll-inner{position:relative;width:100%}.z-virtual-row{position:absolute;top:0;left:0;width:100%}tr.z-child-row td:first-child{padding-left:12px!important}tbody tr.z-selected,tbody tr.z-selected td{background-color:color-mix(in srgb,var(--primary) 15%,transparent)!important}tbody tr.z-selected:hover,tbody tr.z-selected:hover td{background-color:color-mix(in srgb,var(--primary) 20%,transparent)!important}tbody tr.z-indeterminate-selected,tbody tr.z-indeterminate-selected td{background-color:color-mix(in srgb,var(--primary) 10%,transparent)!important}tbody tr.z-indeterminate-selected:hover,tbody tr.z-indeterminate-selected:hover td{background-color:color-mix(in srgb,var(--primary) 15%,transparent)!important}tbody tr.z-pinned-top td{background-color:var(--card)!important}tbody tr.z-pinned-top:hover{background-color:var(--muted)}tbody tr.z-pinned-top:hover td{background-color:var(--muted)!important}tbody tr.z-pinned-bottom td{background-color:var(--card)!important}tbody tr.z-pinned-bottom:hover{background-color:var(--muted)}tbody tr.z-pinned-bottom:hover td,tr.z-expanded-row td{background-color:var(--muted)!important}thead th{position:relative}thead th .z-resizer{position:absolute;right:0;top:0;height:100%;width:8px;background:transparent;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;z-index:5}thead th .z-resizer:after{content:\"\";position:absolute;right:0;top:0;height:100%;width:3px;background:#0000001a;opacity:0;transition:opacity .2s ease}thead th .z-resizer:after:where(.dark,.dark *){background:#ffffff1a}thead th .z-resizer:hover:after{opacity:1;background:var(--primary);width:3px}thead th .z-resizer.z-is-resizing:after{opacity:1;background:var(--primary);width:3px}thead th .z-resizer.z-resizer-left{right:auto;left:0}thead th .z-resizer.z-resizer-left:after{right:auto;left:0}.z-thead-wrapper th.z-sticky-left,.z-thead-wrapper th.z-sticky-right,.z-tbody-wrapper th.z-sticky-left,.z-tbody-wrapper th.z-sticky-right,.z-tfoot-wrapper th.z-sticky-left,.z-tfoot-wrapper th.z-sticky-right{background-color:var(--muted);z-index:1;transform:translateZ(0);backface-visibility:hidden}.z-thead-wrapper td.z-sticky-left,.z-thead-wrapper td.z-sticky-right,.z-tbody-wrapper td.z-sticky-left,.z-tbody-wrapper td.z-sticky-right,.z-tfoot-wrapper td.z-sticky-left,.z-tfoot-wrapper td.z-sticky-right{background-color:var(--card);z-index:1;transform:translateZ(0);backface-visibility:hidden}.z-thead-wrapper th.z-sticky-left-last,.z-thead-wrapper td.z-sticky-left-last,.z-tbody-wrapper th.z-sticky-left-last,.z-tbody-wrapper td.z-sticky-left-last,.z-tfoot-wrapper th.z-sticky-left-last,.z-tfoot-wrapper td.z-sticky-left-last{position:relative;overflow:visible}.z-thead-wrapper th.z-sticky-left-last:after,.z-thead-wrapper td.z-sticky-left-last:after,.z-tbody-wrapper th.z-sticky-left-last:after,.z-tbody-wrapper td.z-sticky-left-last:after,.z-tfoot-wrapper th.z-sticky-left-last:after,.z-tfoot-wrapper td.z-sticky-left-last:after{content:\"\";position:absolute;top:0;bottom:0;right:-30px;width:30px;pointer-events:none;box-shadow:inset 10px 0 8px -8px #0000001a;z-index:10}.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{flex-shrink:0;background:var(--muted);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.z-tfoot-wrapper::-webkit-scrollbar{display:none}.z-tfoot-wrapper th{height:auto;padding:8px 12px;text-align:left;vertical-align:middle;font-weight:500;font-size:12px;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.5px;background:var(--muted);border-left:thin solid var(--border);border-top:thin solid var(--border)}.z-tfoot-wrapper th.z-at-left-edge{border-left:none}.z-tfoot-wrapper.z-shadow-footer{box-shadow:0 -2px 4px #0000000d;position:relative;z-index:15}.z-tfoot-wrapper.z-shadow-footer:where(.dark,.dark *){box-shadow:0 -2px 4px #0003}.z-pin-btn{padding:2px 4px;border-radius:4px;color:var(--muted-foreground);transition:all .15s ease}.z-pin-btn:hover{background-color:var(--muted);color:var(--foreground)}.z-pin-btn.z-pin-btn-active{color:var(--primary);background-color:var(--primary)}.z-pin-btn.z-pin-btn-active:hover{background-color:var(--primary);opacity:.8}.z-row-pin-trigger{opacity:1}.z-row-pin-trigger.text-primary{color:var(--primary)}.z-header-pin-trigger{opacity:1}.z-header-pin-trigger.text-primary{color:var(--primary)}th{overflow:hidden}th .z-header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th .z-header-text-wrapper{transition:background-color .15s ease;border-radius:4px}th .z-header-text-wrapper.z-has-options:hover{background-color:color-mix(in srgb,var(--foreground) 8%,transparent)}th .z-header-text-wrapper.z-has-options:active{background-color:color-mix(in srgb,var(--foreground) 12%,transparent)}.cdk-drag-preview,.z-drag-preview{box-shadow:0 5px 20px #0003;border-radius:6px;background-color:var(--card);border:1px solid var(--primary);z-index:10000!important;pointer-events:none}.cdk-drag-preview:where(.dark,.dark *),.z-drag-preview:where(.dark,.dark *){box-shadow:0 5px 20px #00000080}.cdk-drag-placeholder{background-color:color-mix(in srgb,var(--primary) 10%,transparent);border:2px dashed var(--primary);border-radius:6px}.cdk-drag-animating{transition:transform .1s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder){transition:transform .1s cubic-bezier(0,0,.2,1)}.z-drag-item.cdk-drag-dragging{transition:none!important}.z-column-drop-list{min-height:50px}.z-table-settings-drawer input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:1rem;height:1rem;border:thin solid var(--input);border-radius:.25rem;background-color:var(--background);cursor:pointer;position:relative;transition:all .2s ease}.z-table-settings-drawer input[type=checkbox]:hover{border-color:var(--primary)}.z-table-settings-drawer input[type=checkbox]:checked{background-color:var(--primary);border-color:var(--primary)}.z-table-settings-drawer input[type=checkbox]:checked:after{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:.375rem;height:.625rem;border:solid var(--primary-foreground);border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.z-table-settings-drawer input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ZCheckboxComponent, selector: "z-checkbox", inputs: ["class", "zType", "zSize", "zLabel", "zText", "zDisabled", "zIndeterminate", "zValue", "zOptions", "zOrientation", "zCheckAll", "zCheckAllText", "zChecked", "zGroupValue"], outputs: ["zCheckedChange", "zGroupValueChange", "zChange", "zGroupChange", "zControl"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest"], outputs: ["zOnSearch", "zOnChange", "zControl"], exportAs: ["zInput"] }, { kind: "component", type: ZLoadingComponent, selector: "z-loading", inputs: ["class", "zSpinner", "zSize", "zColor", "zText", "zOverlay", "zOverlayType", "zFullscreen", "zLoading"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "component", type: ZDrawerComponent, selector: "z-drawer", inputs: ["class", "zVisible", "zTitle", "zDescription", "zWidth", "zHeight", "zPlacement", "zClosable", "zMaskClosable", "zHideFooter", "zOkText", "zCancelText", "zOkDestructive", "zOkDisabled", "zLoading", "zOverlay", "zShadow", "zShape", "zContentLoading", "zSkeletonRows"], outputs: ["zOnOk", "zOnCancel", "zVisibleChange"], exportAs: ["zDrawer"] }, { kind: "component", type: ZPaginationComponent, selector: "z-pagination", inputs: ["zPageIndex", "zPageSize", "zTotal", "zPageSizeOptions", "zShowSizeChanger", "zShowQuickJumper", "zShowTotal", "zSimple", "zSize", "zDisabled", "zTotalLabel", "zPerPageLabel", "zGoToLabel"], outputs: ["zPageIndexChange", "zPageSizeChange", "zOnPageChange"] }, { kind: "component", type: ZTableFilterComponent, selector: "z-table-filter", inputs: ["zColumn", "zTable"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl"], exportAs: ["zPopover"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "directive", type: ZTableRowHoverDirective, selector: "[z-table-row-hover], [zTableRowHover]", inputs: ["zTableRowHover"] }, { kind: "component", type: ZTableIconTextComponent, selector: "z-table-icon-text", inputs: ["zText", "zTooltip", "zTriggerElement"] }, { kind: "pipe", type: ZTableIsTemplateRefPipe, name: "zTableIsTemplateRef" }, { kind: "pipe", type: ZTableHasIconPipe, name: "zTableHasIcon" }, { kind: "pipe", type: ZTableCellBottomPipe, name: "zTableCellBottom" }, { kind: "pipe", type: ZTableCellConfigPipe, name: "zTableCellConfig" }, { kind: "pipe", type: ZTableCellOffsetPipe, name: "zTableCellOffset" }, { kind: "pipe", type: ZTableColumnConfigPipe, name: "zTableColumnConfig" }, { kind: "pipe", type: ZTableColumnHeaderPipe, name: "zTableColumnHeader" }, { kind: "pipe", type: ZTableColumnParentsPipe, name: "zTableColumnParents" }, { kind: "pipe", type: ZTableFooterContentPipe, name: "zTableFooterContent" }, { kind: "pipe", type: ZTableHeaderPinPipe, name: "zTableHeaderPin" }, { kind: "pipe", type: ZTablePinningStylesPipe, name: "zTablePinningStyles" }, { kind: "pipe", type: ZTableRowPipe, name: "zTableRow" }, { kind: "pipe", type: ZTableSpanPipe, name: "zTableSpan" }, { kind: "pipe", type: ZTableFooterRenderPipe, name: "zTableFooterRender" }, { kind: "pipe", type: ZTableHeaderRenderPipe, name: "zTableHeaderRender" }, { kind: "pipe", type: ZTableBodyCellRenderPipe, name: "zTableBodyCellRender" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZTableComponent, isStandalone: true, selector: "z-table", inputs: { zConfig: { classPropertyName: "zConfig", publicName: "zConfig", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zKey: { classPropertyName: "zKey", publicName: "zKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zChange: "zChange", zControl: "zControl" }, host: { classAttribute: "z-table block relative" }, providers: [TranslatePipe], viewQueries: [{ propertyName: "theadWrapper", first: true, predicate: ["theadWrapper"], descendants: true, isSignal: true }, { propertyName: "tbodyContainer", first: true, predicate: ["tbodyContainer"], descendants: true, isSignal: true }, { propertyName: "tbodyWrapper", first: true, predicate: ["tbodyWrapper"], descendants: true, isSignal: true }, { propertyName: "tbodyScrollbar", first: true, predicate: ["tbodyWrapper"], descendants: true, isSignal: true }, { propertyName: "tfootWrapper", first: true, predicate: ["tfootWrapper"], descendants: true, isSignal: true }, { propertyName: "expandedRowTemplate", first: true, predicate: ["expandedRowTemplate"], descendants: true, isSignal: true }], exportAs: ["zTable"], ngImport: i0, template: "<!-- Toolbar: Search & Settings -->\n@if (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]=\"'i18n_z_ui_table_search' | translate\"\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()\">\n        {{ 'i18n_z_ui_table_settings' | translate }}\n      </z-button>\n    }\n  </div>\n}\n\n<div\n  class=\"z-table-container shadow-xs\"\n  [class.z-hide-horizontal-border]=\"!showHorizontalBorder()\"\n  [class.z-hide-vertical-border]=\"!showVerticalBorder()\"\n  [style.max-height]=\"zConfig().maxHeight\"\n  [style.min-height]=\"zConfig().minHeight\">\n  <!-- Shared colgroup template -->\n  <ng-template #colGroupTpl>\n    <colgroup>\n      @for (column of orderedLeafColumns(); track column.id) {\n        @if (column.getIsVisible()) {\n          <col [style.width]=\"'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n      }\n    </colgroup>\n  </ng-template>\n\n  <!-- Header table -->\n  <div\n    class=\"z-thead-wrapper shadow-xs\"\n    [class.z-shadow-header]=\"shouldHeaderShowShadow()\"\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\"\n    #theadWrapper>\n    <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n      <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n      <thead>\n        @for (headerGroup of orderedHeaderGroups(); track headerGroup.id) {\n          <tr>\n            @for (header of headerGroup.headers; track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableHeaderRender: headerGroup.headers : zConfig().columns;\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [ngStyle]=\"header.column | zTablePinningStyles: header : 'header' : table : zConfig().columns\"\n                  [class]=\"\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass') +\n                    ' ' +\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass')\n                  \"\n                  [style]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\"\n                  [class.z-sticky-left]=\"header.column.getIsPinned() === 'left'\"\n                  [class.z-sticky-right]=\"header.column.getIsPinned() === 'right'\"\n                  [class.z-sticky-left-last]=\"header | zTableHeaderPin: 'isLastLeftPinned' : zConfig().columns\"\n                  [class.z-sticky-right-first]=\"header | zTableHeaderPin: 'isFirstRightPinned' : zConfig().columns\"\n                  [class.z-sticky-right-last]=\"header | zTableHeaderPin: 'isLastRightPinned' : zConfig().columns\"\n                  [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                  [class.z-col-select]=\"header.column.id === 'select'\"\n                  [class.z-col-expand]=\"header.column.id === 'expand'\"\n                  [class.z-col-actions]=\"\n                    header.column.id === 'actions' || header.column.id === actionColumnInfo()?.columnId\n                  \"\n                  [attr.rowspan]=\"rowSpan\"\n                  [attr.colspan]=\"header | zTableSpan: zConfig().columns : 'headerColSpan'\">\n                  @if (header.column.id === 'select') {\n                    <!-- Header Checkbox -->\n                    <div class=\"flex items-center justify-center\">\n                      <z-checkbox\n                        zSize=\"sm\"\n                        [zChecked]=\"table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\"\n                        (zChange)=\"table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <!-- Expand All Button -->\n                    <div class=\"flex items-center justify-center\">\n                      <button\n                        type=\"button\"\n                        (click)=\"table.toggleAllRowsExpanded()\"\n                        class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                        <z-icon\n                          zType=\"lucideChevronRight\"\n                          zSize=\"14\"\n                          class=\"transition-transform duration-200\"\n                          [class.rotate-90]=\"table.getIsSomeRowsExpanded()\" />\n                      </button>\n                    </div>\n                  } @else {\n                    <!-- Header Content with Sort and Pin -->\n                    <div\n                      class=\"flex w-full items-center gap-1\"\n                      [class.justify-center]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                        'text-center'\n                      \"\n                      [class.justify-end]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') === 'text-right'\n                      \">\n                      <!-- Column Options Popover Template -->\n                      @let columnEnableOrdering =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableOrdering';\n                      @let columnEnablePinning =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enablePinning';\n                      @let effectiveEnableOrdering = columnEnableOrdering || zConfig().enableColumnOrdering;\n                      @let effectiveEnablePinning = columnEnablePinning || zConfig().enableColumnPinning;\n                      <ng-template #colOptionsPopoverContent>\n                        <div class=\"flex flex-col gap-0.5 p-0.5\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_left' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isLastMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_right' | translate }}</span>\n                            </button>\n                          }\n                          @if (effectiveEnableOrdering && header.column.getCanPin() && effectiveEnablePinning) {\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                          }\n                          @if (header.column.getCanPin() && effectiveEnablePinning) {\n                            @if (header.column.getIsPinned() !== 'left') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'right') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned()) {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                        </div>\n                      </ng-template>\n\n                      <!-- Header Text with Popover Trigger -->\n                      @let hasColumnOptions =\n                        (header.column.getCanPin() && effectiveEnablePinning) || effectiveEnableOrdering;\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded px-1.5 py-1\"\n                        [class.cursor-pointer]=\"hasColumnOptions\"\n                        [class.z-has-options]=\"hasColumnOptions\"\n                        [attr.z-popover]=\"hasColumnOptions ? '' : null\"\n                        #colOptionsPopover=\"zPopover\"\n                        #headerTextWrapper\n                        z-popover\n                        [zPopoverContent]=\"hasColumnOptions ? colOptionsPopoverContent : null\"\n                        zTrigger=\"click\"\n                        zPosition=\"bottom\"\n                        [zOffset]=\"5\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \">\n                              <ng-container\n                                *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                            </div>\n                          } @else if (headerContent | zTableHasIcon) {\n                            <z-table-icon-text\n                              class=\"min-w-0 truncate\"\n                              [zText]=\"headerContent\"\n                              [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \" />\n                          } @else {\n                            <span\n                              class=\"z-table-cell-text\"\n                              z-tooltip\n                              [zContent]=\"\n                                (header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip') ||\n                                headerContent\n                              \"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [innerHTML]=\"headerContent | translate | zSafeHtml\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        <!-- Dropdown indicator when has options (between text and sort icon) -->\n                        @if (hasColumnOptions) {\n                          <z-icon\n                            zType=\"lucideChevronDown\"\n                            zSize=\"12\"\n                            class=\"text-muted-foreground shrink-0 opacity-50\" />\n                        }\n                      </div>\n                      <!-- Sort Icon (outside wrapper, no hover background) -->\n                      @if (header.column.getCanSort() && !hasBodyRowSpan()) {\n                        <span\n                          class=\"z-sort-icon shrink-0 cursor-pointer text-gray-500 hover:text-gray-700\"\n                          (click)=\"handleSort($event, header.column.getToggleSortingHandler())\">\n                          @if (header.column.getIsSorted() === 'asc') {\n                            <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                          } @else if (header.column.getIsSorted() === 'desc') {\n                            <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                          } @else {\n                            <z-icon zType=\"lucideArrowDownUp\" zSize=\"12\" class=\"opacity-30\" />\n                          }\n                        </span>\n                      }\n                    </div>\n                  }\n                  <!-- Column Filter -->\n                  @if (header.column.getCanFilter() && hasFiltering()) {\n                    <div class=\"mt-1\">\n                      <z-table-filter [zColumn]=\"$any(header.column)\" [zTable]=\"$any(table)\" />\n                    </div>\n                  }\n                  <!-- Column Resizer -->\n                  @if (\n                    header.column.id !== 'select' &&\n                    header.column.id !== 'expand' &&\n                    zConfig().enableColumnResizing !== false\n                  ) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"\n                        header.column.getIsPinned() === 'right' || header.column.getIsLastColumn()\n                      \"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResizer]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n          </tr>\n        }\n      </thead>\n    </table>\n  </div>\n\n  <!-- Body table -->\n  <div\n    class=\"z-tbody-wrapper relative\"\n    #tbodyContainer\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\">\n    @if (zLoading() || isProcessing()) {\n      <!-- Loading State -->\n      @if (zConfig().useSkeleton) {\n        <!-- Skeleton Loading -->\n        <div class=\"z-skeleton-state\">\n          @for (i of skeletonRows(); track $index) {\n            <div class=\"z-skeleton-row\" [style.height.px]=\"virtualRowHeight()\">\n              <z-skeleton zType=\"bar\" zWidth=\"100%\" [zHeight]=\"virtualRowHeight() - 16 + 'px'\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <!-- Spinner Loading -->\n        <div class=\"z-loading-state\">\n          <z-loading [zLoading]=\"true\" zSize=\"lg\" [zText]=\"'i18n_z_ui_table_loading' | translate\" />\n        </div>\n      }\n    } @else if (isEmpty()) {\n      <div class=\"z-empty-state\">\n        @if (isNoSearchResults()) {\n          <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"'i18n_z_ui_table_no_results' | translate\" />\n        } @else {\n          <z-empty zIcon=\"lucidePackageOpen\" zSize=\"sm\" [zMessage]=\"'i18n_z_ui_table_no_data' | translate\" />\n        }\n      </div>\n    } @else {\n      <ng-scrollbar class=\"z-tbody-scrollbar\" #tbodyWrapper track=\"all\" (scroll)=\"onTbodyScroll($event)\">\n        @if (isVirtual()) {\n          <!-- Virtual Scroll Mode -->\n          <div\n            class=\"z-virtual-scroll-inner\"\n            [style.height.px]=\"virtualizer.getTotalSize()\"\n            [style.min-width.px]=\"table.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let groupRows = dynamicGroupRows()[virtualItem.index] || [];\n              <div\n                class=\"z-virtual-row\"\n                [style.height.px]=\"dynamicGroupHeights()[virtualItem.index] ?? groupSize() * virtualRowHeight()\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\">\n                <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n                  <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n                  <tbody\n                    [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n                    [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n                    @for (row of groupRows; track row.id) {\n                      <tr\n                        z-table-row-hover\n                        [style.height.px]=\"virtualRowHeight()\"\n                        [class.z-child-row]=\"row.depth > 0\"\n                        [class.z-selected]=\"row.getIsSelected()\"\n                        [class.z-indeterminate-selected]=\"row.getIsSomeSelected() && !row.getIsSelected()\">\n                        @for (cell of row.getVisibleCells(); track cell.id) {\n                          @let shouldRenderRowSpan =\n                            cell | zTableSpan: zConfig().columns : 'shouldRender' : table.getRowModel().rows;\n                          @let shouldRenderColSpan =\n                            cell | zTableBodyCellRender: row.getVisibleCells() : zConfig().columns;\n                          @if (shouldRenderRowSpan && shouldRenderColSpan) {\n                            <td\n                              [ngStyle]=\"\n                                cell.column\n                                  | zTablePinningStyles: cell : 'body' : row.getVisibleCells() : zConfig().columns\n                              \"\n                              [class.z-sticky-left]=\"cell.column.getIsPinned() === 'left'\"\n                              [class.z-sticky-right]=\"cell.column.getIsPinned() === 'right'\"\n                              [class.z-sticky-left-last]=\"\n                                cell.column.getIsPinned() === 'left' && cell.column.getIsLastColumn('left')\n                              \"\n                              [class.z-sticky-right-first]=\"\n                                cell.column.getIsPinned() === 'right' && cell.column.getIsFirstColumn('right')\n                              \"\n                              [class.z-sticky-right-last]=\"\n                                cell.column.getIsPinned() === 'right' && cell.column.getIsLastColumn('right')\n                              \"\n                              [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                              [class.z-col-select]=\"cell.column.id === 'select'\"\n                              [class.z-col-expand]=\"cell.column.id === 'expand'\"\n                              [class.z-col-actions]=\"cell.column.id === actionColumnInfo()?.columnId\"\n                              [class.z-at-bottom]=\"\n                                cell | zTableCellBottom: zConfig().columns : table.getRowModel().rows\n                              \"\n                              [attr.rowspan]=\"\n                                cell | zTableSpan: zConfig().columns : 'cellRowSpan' : table.getRowModel().rows\n                              \"\n                              [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan'\"\n                              [class]=\"cell | zTableCellConfig: zConfig().columns : 'cellClass'\"\n                              [style]=\"cell | zTableCellConfig: zConfig().columns : 'cellStyle'\">\n                              @if (cell.column.id === 'select') {\n                                <!-- Row Checkbox -->\n                                <div class=\"flex items-center justify-center\">\n                                  <z-checkbox\n                                    zSize=\"sm\"\n                                    [zChecked]=\"cell.row.getIsSelected()\"\n                                    [zIndeterminate]=\"cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\"\n                                    [zDisabled]=\"!cell.row.getCanSelect()\"\n                                    (zChange)=\"cell.row.toggleSelected()\" />\n                                </div>\n                              } @else if (cell.column.id === 'expand') {\n                                <!-- Expand Button -->\n                                <div class=\"flex items-center justify-center\">\n                                  @if (cell.row.subRows && cell.row.subRows.length > 0) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.toggleExpanded()\"\n                                      class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                                      <z-icon\n                                        zType=\"lucideChevronRight\"\n                                        zSize=\"14\"\n                                        class=\"transition-transform duration-200\"\n                                        [class.rotate-90]=\"cell.row.getIsExpanded()\" />\n                                    </button>\n                                  }\n                                </div>\n                              } @else if (cell.column.id === actionColumnInfo()?.columnId && actionColumnInfo()) {\n                                <z-table-actions\n                                  [zConfig]=\"$any(actionColumnInfo()!.config)\"\n                                  [zRow]=\"cell.row.original\"\n                                  [zRowId]=\"cell.row.id\"\n                                  (zActionClick)=\"onActionClick($event)\" />\n                              } @else {\n                                <ng-container\n                                  *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellContent\">\n                                  @if (cellContent | zTableIsTemplateRef) {\n                                    <!-- TemplateRef rendering -->\n                                    <div\n                                      [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                      [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\">\n                                      <ng-container\n                                        *ngTemplateOutlet=\"cellContent; context: { $implicit: cell.getContext() }\" />\n                                    </div>\n                                  } @else if (cellContent | zTableHasIcon) {\n                                    <!-- Icon syntax rendering -->\n                                    <z-table-icon-text\n                                      [zText]=\"cellContent\"\n                                      [zTooltip]=\"cell | zTableCellConfig: zConfig().columns : 'contentTooltip'\"\n                                      [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                      [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\" />\n                                  } @else {\n                                    <!-- Default/innerHTML rendering -->\n                                    <div\n                                      class=\"z-table-cell-text\"\n                                      z-tooltip\n                                      [zContent]=\"\n                                        (cell | zTableCellConfig: zConfig().columns : 'contentTooltip') || cellContent\n                                      \"\n                                      [innerHTML]=\"cellContent | zSafeHtml\"\n                                      [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                      [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"></div>\n                                  }\n                                </ng-container>\n                              }\n                            </td>\n                          }\n                        }\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Normal Scroll Mode -->\n          <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n            <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n            <tbody\n              [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n              [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n              <!-- Row Template -->\n              <ng-template #rowTemplate let-row>\n                <tr\n                  z-table-row-hover\n                  [attr.data-row-id]=\"row.id\"\n                  [ngStyle]=\"row | zTableRow: table : 'pinningStyles' : virtualRowHeight()\"\n                  [class.z-child-row]=\"row.depth > 0\"\n                  [class.z-selected]=\"row.getIsSelected()\"\n                  [class.z-indeterminate-selected]=\"row.getIsSomeSelected() && !row.getIsSelected()\"\n                  [class.z-pinned-top]=\"row.getIsPinned() === 'top'\"\n                  [class.z-pinned-bottom]=\"row.getIsPinned() === 'bottom'\"\n                  [class.z-shadow-bottom]=\"\n                    showHeaderFooterShadow() &&\n                    row.getIsPinned() === 'top' &&\n                    (row | zTableRow: table : 'isLastTopPinned')\n                  \"\n                  [class.z-shadow-top]=\"\n                    showHeaderFooterShadow() &&\n                    row.getIsPinned() === 'bottom' &&\n                    (row | zTableRow: table : 'isFirstBottomPinned')\n                  \"\n                  [attr.data-depth]=\"row.depth\">\n                  @for (cell of row.getVisibleCells(); track cell.id) {\n                    @let shouldRenderRowSpan =\n                      cell | zTableSpan: zConfig().columns : 'shouldRender' : table.getRowModel().rows;\n                    @let shouldRenderColSpan = cell | zTableBodyCellRender: row.getVisibleCells() : zConfig().columns;\n                    @if (shouldRenderRowSpan && shouldRenderColSpan) {\n                      <td\n                        [ngStyle]=\"\n                          cell.column | zTablePinningStyles: cell : 'body' : row.getVisibleCells() : zConfig().columns\n                        \"\n                        [class]=\"cell | zTableCellConfig: zConfig().columns : 'cellClass'\"\n                        [style]=\"cell | zTableCellConfig: zConfig().columns : 'cellStyle'\"\n                        [class.z-sticky-left]=\"cell.column.getIsPinned() === 'left'\"\n                        [class.z-sticky-right]=\"cell.column.getIsPinned() === 'right'\"\n                        [class.z-sticky-left-last]=\"\n                          cell.column.getIsPinned() === 'left' && cell.column.getIsLastColumn('left')\n                        \"\n                        [class.z-sticky-right-first]=\"\n                          cell.column.getIsPinned() === 'right' && cell.column.getIsFirstColumn('right')\n                        \"\n                        [class.z-sticky-right-last]=\"\n                          cell.column.getIsPinned() === 'right' && cell.column.getIsLastColumn('right')\n                        \"\n                        [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                        [class.z-col-select]=\"cell.column.id === 'select'\"\n                        [class.z-col-expand]=\"cell.column.id === 'expand'\"\n                        [class.z-col-actions]=\"\n                          cell.column.id === 'actions' || cell.column.id === actionColumnInfo()?.columnId\n                        \"\n                        [class.z-at-bottom]=\"cell | zTableCellBottom: zConfig().columns : table.getRowModel().rows\"\n                        [attr.rowspan]=\"cell | zTableSpan: zConfig().columns : 'cellRowSpan' : table.getRowModel().rows\"\n                        [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan'\">\n                        @if (cell.column.id === 'select') {\n                          <!-- Row Checkbox with Pin Button -->\n                          <div class=\"flex items-center justify-center gap-1\">\n                            <z-checkbox\n                              zSize=\"sm\"\n                              [zChecked]=\"cell.row.getIsSelected()\"\n                              [zIndeterminate]=\"cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\"\n                              [zDisabled]=\"!cell.row.getCanSelect()\"\n                              (zChange)=\"cell.row.toggleSelected()\" />\n                            @if (zConfig().enableRowPinning && cell.row.depth === 0 && !hasBodyRowSpan()) {\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            }\n                          </div>\n                        } @else if (cell.column.id === 'expand') {\n                          <!-- Expand Button with Row Pin Popover -->\n                          <div class=\"flex items-center justify-center gap-1\">\n                            @if (cell.row.subRows && cell.row.subRows.length > 0) {\n                              <button\n                                type=\"button\"\n                                (click)=\"cell.row.toggleExpanded()\"\n                                class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                                <z-icon\n                                  zType=\"lucideChevronRight\"\n                                  zSize=\"14\"\n                                  class=\"transition-transform duration-200\"\n                                  [class.rotate-90]=\"cell.row.getIsExpanded()\" />\n                              </button>\n                            }\n                            @if (\n                              zConfig().enableRowPinning &&\n                              cell.row.depth === 0 &&\n                              !(cell.row.subRows && cell.row.subRows.length > 0) &&\n                              !hasBodyRowSpan()\n                            ) {\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            }\n                          </div>\n                        } @else if (cell.column.id === 'actions') {\n                          <!-- Actions Column - Row Pin Only (for parent rows) -->\n                          @if (cell.row.depth === 0 && !hasBodyRowSpan()) {\n                            <div class=\"flex items-center justify-center\">\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            </div>\n                          }\n                        } @else if (cell.column.id === actionColumnInfo()?.columnId && actionColumnInfo()) {\n                          <z-table-actions\n                            [zConfig]=\"$any(actionColumnInfo()!.config)\"\n                            [zRow]=\"cell.row.original\"\n                            [zRowId]=\"cell.row.id\"\n                            (zActionClick)=\"onActionClick($event)\" />\n                        } @else {\n                          <ng-container\n                            *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellContent\">\n                            @if (cellContent | zTableIsTemplateRef) {\n                              <!-- TemplateRef rendering -->\n                              <div\n                                [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\">\n                                <ng-container\n                                  *ngTemplateOutlet=\"cellContent; context: { $implicit: cell.getContext() }\" />\n                              </div>\n                            } @else if (cellContent | zTableHasIcon) {\n                              <!-- Icon syntax rendering -->\n                              <z-table-icon-text\n                                [zText]=\"cellContent\"\n                                [zTooltip]=\"cell | zTableCellConfig: zConfig().columns : 'contentTooltip'\"\n                                [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\" />\n                            } @else {\n                              <!-- Default/innerHTML rendering -->\n                              <div\n                                class=\"z-table-cell-text\"\n                                z-tooltip\n                                [zContent]=\"\n                                  (cell | zTableCellConfig: zConfig().columns : 'contentTooltip') || cellContent\n                                \"\n                                [innerHTML]=\"cellContent | zSafeHtml\"\n                                [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"></div>\n                            }\n                          </ng-container>\n                        }\n                      </td>\n                    }\n                  }\n                </tr>\n\n                <!-- Expanded Row Detail -->\n                @if (row.getIsExpanded() && row.depth === 0 && !row.subRows?.length && zConfig().expandedRowTemplate) {\n                  <tr class=\"z-expanded-row\">\n                    <td [attr.colspan]=\"row.getVisibleCells().length\" class=\"p-0\">\n                      <ng-container *ngTemplateOutlet=\"zConfig().expandedRowTemplate!; context: { $implicit: row }\" />\n                    </td>\n                  </tr>\n                }\n              </ng-template>\n\n              <!-- Render Top Pinned Rows (hidden when filtered data is empty) -->\n              @if (!isEmpty()) {\n                @for (row of table.getTopRows(); track row.id) {\n                  <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n                }\n              }\n\n              <!-- Render Center Rows -->\n              @for (row of table.getCenterRows(); track row.id) {\n                <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n              }\n\n              <!-- Render Bottom Pinned Rows (hidden when filtered data is empty) -->\n              @if (!isEmpty()) {\n                @for (row of bottomRowsReversed(); track row.id) {\n                  <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n                }\n              }\n            </tbody>\n          </table>\n        }\n      </ng-scrollbar>\n    }\n    <!-- end @else -->\n  </div>\n\n  <!-- Footer table -->\n  @if (hasFooter()) {\n    <div\n      class=\"z-tfoot-wrapper\"\n      [class.z-shadow-footer]=\"shouldFooterShowShadow()\"\n      [class.z-scroll-left]=\"hasScrollLeft()\"\n      [class.z-scroll-right]=\"hasScrollRight()\"\n      #tfootWrapper>\n      <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n        <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n        <tfoot>\n          @for (footerGroup of orderedFooterGroups(); track footerGroup.id) {\n            @if (footerGroup | zTableFooterContent: zConfig().columns) {\n              <tr>\n                @for (footer of footerGroup.headers; track footer.id) {\n                  @let rowSpan = footer | zTableSpan: zConfig().columns : 'footerRowSpan';\n                  @let shouldRender = footer | zTableFooterRender: footerGroup.headers : zConfig().columns;\n                  @if (rowSpan && shouldRender) {\n                    <th\n                      [ngStyle]=\"footer.column | zTablePinningStyles: footer : 'header' : table : zConfig().columns\"\n                      [class]=\"\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerClass') +\n                        ' ' +\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass')\n                      \"\n                      [style]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerStyle'\"\n                      [class.z-sticky-left]=\"footer.column.getIsPinned() === 'left'\"\n                      [class.z-sticky-right]=\"footer.column.getIsPinned() === 'right'\"\n                      [class.z-sticky-left-last]=\"footer | zTableHeaderPin: 'isLastLeftPinned' : zConfig().columns\"\n                      [class.z-sticky-right-first]=\"footer | zTableHeaderPin: 'isFirstRightPinned' : zConfig().columns\"\n                      [class.z-sticky-right-last]=\"footer | zTableHeaderPin: 'isLastRightPinned' : zConfig().columns\"\n                      [class.z-at-left-edge]=\"footer | zTableCellOffset: orderedLeafColumns()\"\n                      [attr.rowspan]=\"rowSpan\"\n                      [attr.colspan]=\"footer | zTableSpan: zConfig().columns : 'footerColSpan'\">\n                      @let configFooterContent =\n                        footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContent';\n                      @if (footer.column.columnDef.footer) {\n                        <ng-container\n                          *flexRender=\"footer.column.columnDef.footer; props: footer.getContext(); let footerContent\">\n                          <div\n                            class=\"flex w-full items-center\"\n                            [class.justify-center]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                              'text-center'\n                            \"\n                            [class.justify-end]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                              'text-right'\n                            \">\n                            @if (footerContent | zTableIsTemplateRef) {\n                              <!-- TemplateRef rendering -->\n                              <div\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \">\n                                <ng-container\n                                  *ngTemplateOutlet=\"footerContent; context: { $implicit: footer.getContext() }\" />\n                              </div>\n                            } @else if (footerContent | zTableHasIcon) {\n                              <!-- Icon syntax rendering -->\n                              <z-table-icon-text\n                                [zText]=\"footerContent\"\n                                [zTooltip]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip'\"\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \" />\n                            } @else {\n                              <!-- Default/string rendering -->\n                              <span\n                                class=\"z-table-cell-text\"\n                                z-tooltip\n                                [zContent]=\"\n                                  (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip') ||\n                                  footerContent\n                                \"\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \">\n                                {{ footerContent | translate }}\n                              </span>\n                            }\n                          </div>\n                        </ng-container>\n                      } @else if (configFooterContent) {\n                        <!-- Fallback for group columns without TanStack footer -->\n                        <div\n                          class=\"flex w-full items-center\"\n                          [class.justify-center]=\"\n                            (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                            'text-center'\n                          \"\n                          [class.justify-end]=\"\n                            (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                            'text-right'\n                          \">\n                          <span\n                            class=\"z-table-cell-text\"\n                            z-tooltip\n                            [zContent]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip') ||\n                              $any(configFooterContent)\n                            \"\n                            [ngClass]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\"\n                            [ngStyle]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\">\n                            {{ $any(configFooterContent) | translate }}\n                          </span>\n                        </div>\n                      }\n                    </th>\n                  }\n                }\n              </tr>\n            }\n          }\n        </tfoot>\n      </table>\n    </div>\n  }\n</div>\n\n<!-- Pagination -->\n@if (zConfig().enablePagination && zConfig().pagination?.enabled !== false) {\n  @let totalRows = table.getFilteredRowModel().rows.length;\n  <div class=\"mt-4 flex items-center justify-between gap-4\">\n    <div class=\"text-sm text-gray-500\">\n      {{\n        ('i18n_z_ui_table_total_rows' | translate).replace(\n          '{total}',\n          zConfig().totalCount?.toString() || totalRows.toString()\n        )\n      }}\n    </div>\n    <z-pagination\n      [zTotal]=\"zConfig().totalCount ?? totalRows\"\n      [(zPageIndex)]=\"pagination().pageIndex\"\n      [(zPageSize)]=\"pagination().pageSize\"\n      [zPageSizeOptions]=\"zConfig().pagination?.pageSizeOptions ?? [10, 20, 50, 100]\"\n      [zShowSizeChanger]=\"zConfig().pagination?.showSizeChanger ?? true\"\n      [zShowQuickJumper]=\"zConfig().pagination?.showQuickJumper ?? false\"\n      [zShowTotal]=\"false\"\n      [zDisabled]=\"zConfig().pagination?.disabled || zLoading() || isProcessing()\"\n      (zOnPageChange)=\"onPageChange($event)\" />\n  </div>\n}\n\n<!-- Settings Drawer -->\n<z-drawer\n  [(zVisible)]=\"showSettingsDrawer\"\n  [zTitle]=\"'i18n_z_ui_table_settings_title' | translate\"\n  zPlacement=\"right\"\n  zWidth=\"500px\"\n  [zShadow]=\"true\"\n  [zOkText]=\"null\"\n  [zCancelText]=\"'i18n_z_ui_drawer_close' | translate\">\n  <div class=\"z-table-settings-drawer px-4\">\n    <!-- Display Settings -->\n    <div class=\"mb-4\">\n      <h4 class=\"text-foreground mb-2 text-sm font-semibold\">{{ 'i18n_z_ui_table_display_settings' | translate }}</h4>\n      <p class=\"text-muted-foreground mb-3 text-xs\">{{ 'i18n_z_ui_table_display_settings_desc' | translate }}</p>\n      <div class=\"grid grid-cols-2 gap-x-4 gap-y-3\">\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showHorizontalBorder()\"\n          [zText]=\"'i18n_z_ui_table_horizontal_border' | translate\"\n          (zChange)=\"showHorizontalBorder.set(!showHorizontalBorder())\" />\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showVerticalBorder()\"\n          [zText]=\"'i18n_z_ui_table_vertical_border' | translate\"\n          (zChange)=\"showVerticalBorder.set(!showVerticalBorder())\" />\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showHeaderFooterShadow()\"\n          [zText]=\"'i18n_z_ui_table_header_footer_shadow' | translate\"\n          (zChange)=\"showHeaderFooterShadow.set(!showHeaderFooterShadow())\" />\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-border my-4 border-t\"></div>\n\n    <!-- Unified Column Settings -->\n    @if (zConfig().enableSettings) {\n      <div class=\"mb-4\">\n        <h4 class=\"text-foreground mb-2 text-sm font-semibold\">{{ 'i18n_z_ui_table_column_settings' | translate }}</h4>\n        <p class=\"text-muted-foreground mb-3 text-xs\">{{ 'i18n_z_ui_table_column_settings_desc' | translate }}</p>\n\n        <!-- Unpinned Columns (Draggable) -->\n        <div\n          cdkDropList\n          #columnDropList=\"cdkDropList\"\n          (cdkDropListDropped)=\"onPendingColumnDrop($event)\"\n          class=\"z-column-drop-list space-y-1.5\">\n          @for (columnId of columnOrder(); track columnId; let i = $index) {\n            @if (columnId !== 'expand' && columnId !== 'select') {\n              @let column = table.getColumn(columnId);\n              @let isPinned = column?.getIsPinned();\n              @let isVisible = columnVisibility()[columnId] !== false;\n              @let canPin = column?.getCanPin() !== false && zConfig().enableColumnPinning;\n              @if (!isPinned) {\n                <div\n                  cdkDrag\n                  [cdkDragData]=\"columnId\"\n                  cdkDragLockAxis=\"y\"\n                  cdkDragBoundary=\".z-column-drop-list\"\n                  cdkDragPreviewClass=\"z-drag-preview\"\n                  class=\"z-drag-item border-border bg-card hover:border-primary flex cursor-grab items-center gap-2 rounded border px-2 py-1.5 text-sm active:cursor-grabbing\"\n                  [class.opacity-60]=\"!isVisible\">\n                  <!-- Drag Handle -->\n                  <z-icon\n                    cdkDragHandle\n                    zType=\"lucideGripVertical\"\n                    zSize=\"14\"\n                    class=\"text-muted-foreground shrink-0 cursor-grab active:cursor-grabbing\" />\n\n                  <!-- Visibility Checkbox -->\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isVisible\"\n                    (change)=\"onToggleColumnVisibility(columnId)\"\n                    (mousedown)=\"$event.stopPropagation()\"\n                    class=\"border-input h-4 w-4 shrink-0 cursor-pointer rounded\" />\n\n                  <!-- Column Name -->\n                  <span class=\"flex min-w-0 flex-1 flex-col\">\n                    <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                      {{ columnId | zTableColumnHeader: zConfig().columns }}\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\" (mousedown)=\"$event.stopPropagation()\">\n                      <button\n                        type=\"button\"\n                        [disabled]=\"!isVisible\"\n                        (click)=\"onToggleColumnPin(columnId, 'left')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                        title=\"Pin Left\">\n                        <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                      </button>\n                      <button\n                        type=\"button\"\n                        [disabled]=\"!isVisible\"\n                        (click)=\"onToggleColumnPin(columnId, 'right')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                        title=\"Pin Right\">\n                        <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                      </button>\n                    </div>\n                  }\n                </div>\n              }\n            }\n          }\n        </div>\n\n        <!-- Pinned Columns Section -->\n        @if (zConfig().enableColumnPinning) {\n          @if (pinnedColumnIds().length > 0) {\n            <div class=\"border-border mt-4 border-t pt-4\">\n              <h5 class=\"text-muted-foreground mb-2 text-xs font-medium\">\n                {{ 'i18n_z_ui_table_pinned_columns' | translate }}\n              </h5>\n              <div class=\"space-y-1.5\">\n                @for (columnId of pinnedColumnIds(); track columnId) {\n                  @let column = table.getColumn(columnId);\n                  @let isPinned = column?.getIsPinned();\n                  @let isVisible = columnVisibility()[columnId] !== false;\n                  <div\n                    class=\"border-border bg-muted/30 flex items-center gap-2 rounded border px-2 py-1.5 text-sm\"\n                    [class.opacity-60]=\"!isVisible\">\n                    <!-- Pin Icon -->\n                    <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"text-primary shrink-0\" />\n\n                    <!-- Visibility Checkbox -->\n                    <!-- 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                      {{\n                        isPinned === 'left'\n                          ? ('i18n_z_ui_table_left' | translate)\n                          : ('i18n_z_ui_table_right' | translate)\n                      }}\n                    </span>\n\n                    <!-- Unpin Button -->\n                    <button\n                      type=\"button\"\n                      (click)=\"onToggleColumnPin(columnId, isPinned === 'left' ? 'left' : 'right')\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground cursor-pointer rounded p-1 text-xs transition-colors\"\n                      title=\"Unpin\">\n                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        }\n      </div>\n    }\n  </div>\n</z-drawer>\n", styles: [":host{display:flex;flex-direction:column;height:100%;--scrollbar-track-thickness: 7px;--scrollbar-track-color: transparent;--scrollbar-thumb-shape: 3px}.z-table-container{display:flex;flex-direction:column;position:relative;width:100%;height:100%;overflow:hidden;border-radius:8px;border:thin solid var(--border);background-color:var(--card)}.z-table-container.z-hide-horizontal-border th,.z-table-container.z-hide-horizontal-border td{border-bottom:none!important;border-top:none!important}.z-table-container.z-hide-vertical-border th,.z-table-container.z-hide-vertical-border td{border-left:none!important}table{width:fit-content;min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:14px}.z-table-toolbar .z-settings-btn{transition:all .15s ease}.z-table-toolbar .z-settings-btn:hover{border-color:var(--muted-foreground)}.z-table-cell-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;-webkit-user-select:text;user-select:text}.z-thead-wrapper{flex-shrink:0;background:var(--muted);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.z-thead-wrapper::-webkit-scrollbar{display:none}.z-thead-wrapper th{height:auto;padding:8px 12px;text-align:left;vertical-align:middle;font-weight:500;color:var(--foreground);white-space:nowrap;overflow:hidden;background:var(--muted);border-left:thin solid var(--border);border-bottom:thin solid var(--border);-webkit-user-select:none;user-select:none}.z-thead-wrapper th.z-at-left-edge{border-left:none}.z-thead-wrapper th[colspan]{text-align:center;background:var(--muted);font-weight:500;color:var(--foreground)}.z-thead-wrapper.z-shadow-header{box-shadow:0 1px 3px #00000014;position:relative;z-index:15}.z-thead-wrapper.z-shadow-header:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d}.z-tbody-wrapper{flex:1;min-height:100px;display:flex;flex-direction:column}.z-tbody-scrollbar{flex:1;height:100%}.z-empty-state,.z-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:100px;height:100%;color:var(--muted-foreground);font-size:.875rem;animation:z-fade-in .2s ease-out}.z-skeleton-state{display:flex;flex-direction:column;min-height:200px;height:100%;padding:0;animation:z-fade-in .2s ease-out}.z-skeleton-state .z-skeleton-row{display:flex;align-items:center;padding:0 8px;border-bottom:thin solid var(--border);box-sizing:border-box}.z-skeleton-state .z-skeleton-row:last-child{border-bottom:none}.z-skeleton-state .z-skeleton-row z-skeleton{display:flex;align-items:center;width:100%;height:auto!important}.z-tbody-scrollbar,.z-tbody-scrollbar table{animation:z-fade-in .2s ease-out}@keyframes z-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.z-tbody-wrapper tr{transition:background-color .15s ease}.z-tbody-wrapper tr:hover,.z-tbody-wrapper tr:hover td[style*=sticky]{background-color:var(--muted)}.z-tbody-wrapper tr.z-pinned-top td.z-sticky-left,.z-tbody-wrapper tr.z-pinned-top td.z-sticky-right,.z-tbody-wrapper tr.z-pinned-bottom td.z-sticky-left,.z-tbody-wrapper tr.z-pinned-bottom td.z-sticky-right{z-index:3}.z-tbody-wrapper tr.z-shadow-bottom{box-shadow:0 1px 3px #00000014!important;position:relative;z-index:15}.z-tbody-wrapper tr.z-shadow-bottom:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d!important}.z-tbody-wrapper tr.z-shadow-top{box-shadow:0 -2px 4px #0000000d!important;position:relative;z-index:15}.z-tbody-wrapper tr.z-shadow-top:where(.dark,.dark *){box-shadow:0 -2px 4px #0003!important}.z-tbody-wrapper td{padding:8px 12px;height:40px;vertical-align:middle;color:var(--foreground);white-space:nowrap;overflow:hidden;background:var(--card);border-left:thin solid var(--border);border-bottom:thin solid var(--border);box-sizing:border-box}.z-tbody-wrapper tbody.z-has-vertical-scroll td.z-at-bottom,.z-tbody-wrapper tbody.z-last-row-touches-bottom td.z-at-bottom{border-bottom:none}.z-tbody-wrapper td.z-at-left-edge{border-left:none}.z-tbody-wrapper td i{color:var(--muted-foreground);font-style:italic}.z-tbody-wrapper td[rowspan]{vertical-align:top;padding-top:12px}.z-tbody-wrapper td.z-row-hover{background-color:var(--muted)!important}.z-tbody-wrapper td.z-col-select,.z-tbody-wrapper td.z-col-expand,.z-tbody-wrapper td.z-col-actions{padding:8px 4px!important;text-align:center}.z-tbody-wrapper tr.z-child-row td.z-col-select:first-child,.z-tbody-wrapper tr.z-child-row td.z-col-expand:first-child,.z-tbody-wrapper tr.z-child-row td.z-col-actions:first-child{padding-left:0!important}.z-virtual-scroll-inner{position:relative;width:100%}.z-virtual-row{position:absolute;top:0;left:0;width:100%}tr.z-child-row td:first-child{padding-left:12px!important}tbody tr.z-selected,tbody tr.z-selected td{background-color:color-mix(in srgb,var(--primary) 15%,transparent)!important}tbody tr.z-selected:hover,tbody tr.z-selected:hover td{background-color:color-mix(in srgb,var(--primary) 20%,transparent)!important}tbody tr.z-indeterminate-selected,tbody tr.z-indeterminate-selected td{background-color:color-mix(in srgb,var(--primary) 10%,transparent)!important}tbody tr.z-indeterminate-selected:hover,tbody tr.z-indeterminate-selected:hover td{background-color:color-mix(in srgb,var(--primary) 15%,transparent)!important}tbody tr.z-pinned-top td{background-color:var(--card)!important}tbody tr.z-pinned-top:hover{background-color:var(--muted)}tbody tr.z-pinned-top:hover td{background-color:var(--muted)!important}tbody tr.z-pinned-bottom td{background-color:var(--card)!important}tbody tr.z-pinned-bottom:hover{background-color:var(--muted)}tbody tr.z-pinned-bottom:hover td,tr.z-expanded-row td{background-color:var(--muted)!important}thead th{position:relative}thead th .z-resizer{position:absolute;right:0;top:0;height:100%;width:8px;background:transparent;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;z-index:5}thead th .z-resizer:after{content:\"\";position:absolute;right:0;top:0;height:100%;width:3px;background:#0000001a;opacity:0;transition:opacity .2s ease}thead th .z-resizer:after:where(.dark,.dark *){background:#ffffff1a}thead th .z-resizer:hover:after{opacity:1;background:var(--primary);width:3px}thead th .z-resizer.z-is-resizing:after{opacity:1;background:var(--primary);width:3px}thead th .z-resizer.z-resizer-left{right:auto;left:0}thead th .z-resizer.z-resizer-left:after{right:auto;left:0}.z-thead-wrapper th.z-sticky-left,.z-thead-wrapper th.z-sticky-right,.z-tbody-wrapper th.z-sticky-left,.z-tbody-wrapper th.z-sticky-right,.z-tfoot-wrapper th.z-sticky-left,.z-tfoot-wrapper th.z-sticky-right{background-color:var(--muted);z-index:1;transform:translateZ(0);backface-visibility:hidden}.z-thead-wrapper td.z-sticky-left,.z-thead-wrapper td.z-sticky-right,.z-tbody-wrapper td.z-sticky-left,.z-tbody-wrapper td.z-sticky-right,.z-tfoot-wrapper td.z-sticky-left,.z-tfoot-wrapper td.z-sticky-right{background-color:var(--card);z-index:1;transform:translateZ(0);backface-visibility:hidden}.z-thead-wrapper th.z-sticky-left-last,.z-thead-wrapper td.z-sticky-left-last,.z-tbody-wrapper th.z-sticky-left-last,.z-tbody-wrapper td.z-sticky-left-last,.z-tfoot-wrapper th.z-sticky-left-last,.z-tfoot-wrapper td.z-sticky-left-last{position:relative;overflow:visible}.z-thead-wrapper th.z-sticky-left-last:after,.z-thead-wrapper td.z-sticky-left-last:after,.z-tbody-wrapper th.z-sticky-left-last:after,.z-tbody-wrapper td.z-sticky-left-last:after,.z-tfoot-wrapper th.z-sticky-left-last:after,.z-tfoot-wrapper td.z-sticky-left-last:after{content:\"\";position:absolute;top:0;bottom:0;right:-30px;width:30px;pointer-events:none;box-shadow:inset 10px 0 8px -8px #0000001a;z-index:10;opacity:0;transition:opacity .2s ease}.z-thead-wrapper.z-scroll-left th.z-sticky-left-last:after,.z-thead-wrapper.z-scroll-left td.z-sticky-left-last:after,.z-tbody-wrapper.z-scroll-left th.z-sticky-left-last:after,.z-tbody-wrapper.z-scroll-left td.z-sticky-left-last:after,.z-tfoot-wrapper.z-scroll-left th.z-sticky-left-last:after,.z-tfoot-wrapper.z-scroll-left td.z-sticky-left-last:after{opacity:1}.z-thead-wrapper th.z-sticky-right-first,.z-thead-wrapper td.z-sticky-right-first,.z-tbody-wrapper th.z-sticky-right-first,.z-tbody-wrapper td.z-sticky-right-first,.z-tfoot-wrapper th.z-sticky-right-first,.z-tfoot-wrapper td.z-sticky-right-first{position:relative;overflow:visible}.z-thead-wrapper th.z-sticky-right-first:before,.z-thead-wrapper td.z-sticky-right-first:before,.z-tbody-wrapper th.z-sticky-right-first:before,.z-tbody-wrapper td.z-sticky-right-first:before,.z-tfoot-wrapper th.z-sticky-right-first:before,.z-tfoot-wrapper td.z-sticky-right-first:before{content:\"\";position:absolute;top:0;bottom:0;left:-30px;width:30px;pointer-events:none;box-shadow:inset -10px 0 8px -8px #0000001a;z-index:10;opacity:0;transition:opacity .2s ease}.z-thead-wrapper.z-scroll-right th.z-sticky-right-first,.z-thead-wrapper.z-scroll-right td.z-sticky-right-first,.z-tbody-wrapper.z-scroll-right th.z-sticky-right-first,.z-tbody-wrapper.z-scroll-right td.z-sticky-right-first,.z-tfoot-wrapper.z-scroll-right th.z-sticky-right-first,.z-tfoot-wrapper.z-scroll-right td.z-sticky-right-first{border-left:none}.z-thead-wrapper.z-scroll-right th.z-sticky-right-first:before,.z-thead-wrapper.z-scroll-right td.z-sticky-right-first:before,.z-tbody-wrapper.z-scroll-right th.z-sticky-right-first:before,.z-tbody-wrapper.z-scroll-right td.z-sticky-right-first:before,.z-tfoot-wrapper.z-scroll-right th.z-sticky-right-first:before,.z-tfoot-wrapper.z-scroll-right td.z-sticky-right-first:before{opacity:1}.z-thead-wrapper th.z-sticky-right-last,.z-tfoot-wrapper th.z-sticky-right-last{position:relative}.z-thead-wrapper th.z-sticky-right-last:after,.z-tfoot-wrapper th.z-sticky-right-last:after{content:\"\";position:absolute;top:0;bottom:0;right:-30px;width:30px;background:var(--muted);pointer-events:none}.z-tfoot-wrapper{flex-shrink:0;background:var(--muted);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.z-tfoot-wrapper::-webkit-scrollbar{display:none}.z-tfoot-wrapper th{height:auto;padding:8px 12px;text-align:left;vertical-align:middle;font-weight:500;font-size:12px;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.5px;background:var(--muted);border-left:thin solid var(--border);border-top:thin solid var(--border)}.z-tfoot-wrapper th.z-at-left-edge{border-left:none}.z-tfoot-wrapper.z-shadow-footer{box-shadow:0 -2px 4px #0000000d;position:relative;z-index:15}.z-tfoot-wrapper.z-shadow-footer:where(.dark,.dark *){box-shadow:0 -2px 4px #0003}.z-pin-btn{padding:2px 4px;border-radius:4px;color:var(--muted-foreground);transition:all .15s ease}.z-pin-btn:hover{background-color:var(--muted);color:var(--foreground)}.z-pin-btn.z-pin-btn-active{color:var(--primary);background-color:var(--primary)}.z-pin-btn.z-pin-btn-active:hover{background-color:var(--primary);opacity:.8}.z-row-pin-trigger{opacity:1}.z-row-pin-trigger.text-primary{color:var(--primary)}.z-header-pin-trigger{opacity:1}.z-header-pin-trigger.text-primary{color:var(--primary)}th{overflow:hidden}th .z-header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th .z-header-text-wrapper{transition:background-color .15s ease;border-radius:4px}th .z-header-text-wrapper.z-has-options:hover{background-color:color-mix(in srgb,var(--foreground) 8%,transparent)}th .z-header-text-wrapper.z-has-options:active{background-color:color-mix(in srgb,var(--foreground) 12%,transparent)}.cdk-drag-preview,.z-drag-preview{box-shadow:0 5px 20px #0003;border-radius:6px;background-color:var(--card);border:1px solid var(--primary);z-index:10000!important;pointer-events:none}.cdk-drag-preview:where(.dark,.dark *),.z-drag-preview:where(.dark,.dark *){box-shadow:0 5px 20px #00000080}.cdk-drag-placeholder{background-color:color-mix(in srgb,var(--primary) 10%,transparent);border:2px dashed var(--primary);border-radius:6px}.cdk-drag-animating{transition:transform .1s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder){transition:transform .1s cubic-bezier(0,0,.2,1)}.z-drag-item.cdk-drag-dragging{transition:none!important}.z-column-drop-list{min-height:50px}:host-context(.dark) .z-thead-wrapper.z-scroll-left th.z-sticky-left-last,:host-context(.dark) .z-thead-wrapper.z-scroll-left td.z-sticky-left-last,:host-context(.dark) .z-tbody-wrapper.z-scroll-left th.z-sticky-left-last,:host-context(.dark) .z-tbody-wrapper.z-scroll-left td.z-sticky-left-last,:host-context(.dark) .z-tfoot-wrapper.z-scroll-left th.z-sticky-left-last,:host-context(.dark) .z-tfoot-wrapper.z-scroll-left td.z-sticky-left-last{border-right:1px solid var(--border)}:host-context(.dark) .z-thead-wrapper.z-scroll-right th.z-sticky-right-first,:host-context(.dark) .z-thead-wrapper.z-scroll-right td.z-sticky-right-first,:host-context(.dark) .z-tbody-wrapper.z-scroll-right th.z-sticky-right-first,:host-context(.dark) .z-tbody-wrapper.z-scroll-right td.z-sticky-right-first,:host-context(.dark) .z-tfoot-wrapper.z-scroll-right th.z-sticky-right-first,:host-context(.dark) .z-tfoot-wrapper.z-scroll-right td.z-sticky-right-first{border-left:1px solid var(--border)}.z-table-settings-drawer input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:1rem;height:1rem;border:thin solid var(--input);border-radius:.25rem;background-color:var(--background);cursor:pointer;position:relative;transition:all .2s ease}.z-table-settings-drawer input[type=checkbox]:hover{border-color:var(--primary)}.z-table-settings-drawer input[type=checkbox]:checked{background-color:var(--primary);border-color:var(--primary)}.z-table-settings-drawer input[type=checkbox]:checked:after{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:.375rem;height:.625rem;border:solid var(--primary-foreground);border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.z-table-settings-drawer input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ZCheckboxComponent, selector: "z-checkbox", inputs: ["class", "zType", "zSize", "zLabel", "zText", "zDisabled", "zIndeterminate", "zValue", "zOptions", "zOrientation", "zCheckAll", "zCheckAllText", "zChecked", "zGroupValue"], outputs: ["zCheckedChange", "zGroupValueChange", "zChange", "zGroupChange", "zControl"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest"], outputs: ["zOnSearch", "zOnChange", "zControl"], exportAs: ["zInput"] }, { kind: "component", type: ZLoadingComponent, selector: "z-loading", inputs: ["class", "zSpinner", "zSize", "zColor", "zText", "zOverlay", "zOverlayType", "zFullscreen", "zLoading"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "component", type: ZDrawerComponent, selector: "z-drawer", inputs: ["class", "zVisible", "zTitle", "zDescription", "zWidth", "zHeight", "zPlacement", "zClosable", "zMaskClosable", "zHideFooter", "zOkText", "zCancelText", "zOkDestructive", "zOkDisabled", "zLoading", "zOverlay", "zShadow", "zShape", "zContentLoading", "zSkeletonRows"], outputs: ["zOnOk", "zOnCancel", "zVisibleChange"], exportAs: ["zDrawer"] }, { kind: "component", type: ZPaginationComponent, selector: "z-pagination", inputs: ["zPageIndex", "zPageSize", "zTotal", "zPageSizeOptions", "zShowSizeChanger", "zShowQuickJumper", "zShowTotal", "zSimple", "zSize", "zDisabled", "zTotalLabel", "zPerPageLabel", "zGoToLabel"], outputs: ["zPageIndexChange", "zPageSizeChange", "zOnPageChange"] }, { kind: "component", type: ZTableFilterComponent, selector: "z-table-filter", inputs: ["zColumn", "zTable"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl"], exportAs: ["zPopover"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "directive", type: ZTableResizerDirective, selector: "[z-table-resizer],[zTableResizer]", inputs: ["zTableResizer"] }, { kind: "directive", type: ZTableRowHoverDirective, selector: "[z-table-row-hover], [zTableRowHover]", inputs: ["zTableRowHover"] }, { kind: "component", type: ZTableIconTextComponent, selector: "z-table-icon-text", inputs: ["zText", "zTooltip", "zTriggerElement"] }, { kind: "component", type: ZTableActionsComponent, selector: "z-table-actions", inputs: ["zConfig", "zRow", "zRowId", "zDropdownButtonSize"], outputs: ["zActionClick"] }, { kind: "pipe", type: ZTableIsTemplateRefPipe, name: "zTableIsTemplateRef" }, { kind: "pipe", type: ZTableHasIconPipe, name: "zTableHasIcon" }, { kind: "pipe", type: ZTableCellBottomPipe, name: "zTableCellBottom" }, { kind: "pipe", type: ZTableCellConfigPipe, name: "zTableCellConfig" }, { kind: "pipe", type: ZTableCellOffsetPipe, name: "zTableCellOffset" }, { kind: "pipe", type: ZTableColumnConfigPipe, name: "zTableColumnConfig" }, { kind: "pipe", type: ZTableColumnHeaderPipe, name: "zTableColumnHeader" }, { kind: "pipe", type: ZTableColumnParentsPipe, name: "zTableColumnParents" }, { kind: "pipe", type: ZTableFooterContentPipe, name: "zTableFooterContent" }, { kind: "pipe", type: ZTableHeaderPinPipe, name: "zTableHeaderPin" }, { kind: "pipe", type: ZTablePinningStylesPipe, name: "zTablePinningStyles" }, { kind: "pipe", type: ZTableRowPipe, name: "zTableRow" }, { kind: "pipe", type: ZTableSpanPipe, name: "zTableSpan" }, { kind: "pipe", type: ZTableFooterRenderPipe, name: "zTableFooterRender" }, { kind: "pipe", type: ZTableHeaderRenderPipe, name: "zTableHeaderRender" }, { kind: "pipe", type: ZTableBodyCellRenderPipe, name: "zTableBodyCellRender" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTableComponent, decorators: [{
             type: Component,
@@ -2761,6 +3139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         ZPopoverDirective,
                         ZButtonComponent,
                         ZTooltipDirective,
+                        ZTableResizerDirective,
                         ZTableRowHoverDirective,
                         ZTableIsTemplateRefPipe,
                         ZTableHasIconPipe,
@@ -2779,16 +3158,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         ZTableHeaderRenderPipe,
                         ZTableBodyCellRenderPipe,
                         ZTableIconTextComponent,
+                        ZTableActionsComponent,
                         ZSafeHtmlPipe,
                         TranslatePipe,
                     ], standalone: true, providers: [TranslatePipe], 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]=\"'i18n_z_ui_table_search' | translate\"\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()\">\n        {{ 'i18n_z_ui_table_settings' | translate }}\n      </z-button>\n    }\n  </div>\n}\n\n<div\n  class=\"z-table-container shadow-xs\"\n  [class.z-hide-horizontal-border]=\"!showHorizontalBorder()\"\n  [class.z-hide-vertical-border]=\"!showVerticalBorder()\"\n  [style.max-height]=\"zConfig().maxHeight\"\n  [style.min-height]=\"zConfig().minHeight\">\n  <!-- Shared colgroup template -->\n  <ng-template #colGroupTpl>\n    <colgroup>\n      @for (column of orderedLeafColumns(); track column.id) {\n        @if (column.getIsVisible()) {\n          <col [style.width]=\"'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n      }\n    </colgroup>\n  </ng-template>\n\n  <!-- Header table -->\n  <div\n    class=\"z-thead-wrapper shadow-xs\"\n    [class.z-shadow-header]=\"shouldHeaderShowShadow()\"\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\"\n    #theadWrapper>\n    <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n      <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n      <thead>\n        @for (headerGroup of orderedHeaderGroups(); track headerGroup.id) {\n          <tr>\n            @for (header of headerGroup.headers; track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableHeaderRender: headerGroup.headers : zConfig().columns;\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [ngStyle]=\"header.column | zTablePinningStyles: header : 'header' : table : zConfig().columns\"\n                  [class]=\"\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass') +\n                    ' ' +\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass')\n                  \"\n                  [style]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\"\n                  [class.z-sticky-left]=\"header.column.getIsPinned() === 'left'\"\n                  [class.z-sticky-right]=\"header.column.getIsPinned() === 'right'\"\n                  [class.z-sticky-left-last]=\"header | zTableHeaderPin: 'isLastLeftPinned' : zConfig().columns\"\n                  [class.z-sticky-right-first]=\"header | zTableHeaderPin: 'isFirstRightPinned' : zConfig().columns\"\n                  [class.z-sticky-right-last]=\"header | zTableHeaderPin: 'isLastRightPinned' : zConfig().columns\"\n                  [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                  [class.z-col-select]=\"header.column.id === 'select'\"\n                  [class.z-col-expand]=\"header.column.id === 'expand'\"\n                  [class.z-col-actions]=\"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\n                      class=\"flex w-full items-center gap-1\"\n                      [class.justify-center]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                        'text-center'\n                      \"\n                      [class.justify-end]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') === 'text-right'\n                      \">\n                      <!-- Column Options Popover Template -->\n                      @let columnEnableOrdering =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableOrdering';\n                      @let columnEnablePinning =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enablePinning';\n                      <ng-template #colOptionsPopoverContent>\n                        <div class=\"flex flex-col gap-0.5 p-0.5\">\n                          @if (zConfig().enableColumnOrdering && columnEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_left' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isLastMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_right' | translate }}</span>\n                            </button>\n                          }\n                          @if (\n                            zConfig().enableColumnOrdering &&\n                            columnEnableOrdering &&\n                            header.column.getCanPin() &&\n                            zConfig().enableColumnPinning &&\n                            columnEnablePinning\n                          ) {\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                          }\n                          @if (header.column.getCanPin() && zConfig().enableColumnPinning && columnEnablePinning) {\n                            @if (header.column.getIsPinned() !== 'left') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'right') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned()) {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                        </div>\n                      </ng-template>\n\n                      <!-- Header Text with Popover Trigger -->\n                      @let hasColumnOptions =\n                        (header.column.getCanPin() && zConfig().enableColumnPinning && columnEnablePinning) ||\n                        (zConfig().enableColumnOrdering && columnEnableOrdering);\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded px-1.5 py-1\"\n                        [class.cursor-pointer]=\"hasColumnOptions\"\n                        [class.z-has-options]=\"hasColumnOptions\"\n                        [attr.z-popover]=\"hasColumnOptions ? '' : null\"\n                        #colOptionsPopover=\"zPopover\"\n                        #headerTextWrapper\n                        z-popover\n                        [zPopoverContent]=\"hasColumnOptions ? colOptionsPopoverContent : null\"\n                        zTrigger=\"click\"\n                        zPosition=\"bottom\"\n                        [zOffset]=\"5\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <ng-container\n                              *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                          } @else if (headerContent | zTableHasIcon) {\n                            <z-table-icon-text\n                              class=\"min-w-0 truncate\"\n                              [zText]=\"headerContent\"\n                              [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\"\n                              [zTriggerElement]=\"headerTextWrapper\" />\n                          } @else {\n                            <span\n                              class=\"z-table-cell-text\"\n                              z-tooltip\n                              [zContent]=\"\n                                (header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip') ||\n                                headerContent\n                              \"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [innerHTML]=\"headerContent | 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)=\"\n                              $event.stopPropagation(); handleSort($event, header.column.getToggleSortingHandler())\n                            \">\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                        <!-- Dropdown indicator when has options -->\n                        @if (hasColumnOptions) {\n                          <z-icon\n                            zType=\"lucideChevronDown\"\n                            zSize=\"12\"\n                            class=\"text-muted-foreground shrink-0 opacity-50\" />\n                        }\n                      </div>\n                    </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      @if (zConfig().useSkeleton) {\n        <!-- Skeleton Loading -->\n        <div class=\"z-skeleton-state\">\n          @for (i of skeletonRows(); track $index) {\n            <div class=\"z-skeleton-row\" [style.height.px]=\"virtualRowHeight()\">\n              <z-skeleton zType=\"bar\" zWidth=\"100%\" [zHeight]=\"virtualRowHeight() - 16 + 'px'\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <!-- Spinner Loading -->\n        <div class=\"z-loading-state\">\n          <z-loading [zLoading]=\"true\" zSize=\"lg\" [zText]=\"'i18n_z_ui_table_loading' | translate\" />\n        </div>\n      }\n    } @else if (isEmpty()) {\n      <div class=\"z-empty-state\">\n        @if (isNoSearchResults()) {\n          <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"'i18n_z_ui_table_no_results' | translate\" />\n        } @else {\n          <z-empty zIcon=\"lucidePackageOpen\" zSize=\"sm\" [zMessage]=\"'i18n_z_ui_table_no_data' | translate\" />\n        }\n      </div>\n    } @else {\n      <ng-scrollbar class=\"z-tbody-scrollbar\" #tbodyWrapper track=\"all\" (scroll)=\"onTbodyScroll($event)\">\n        @if (isVirtual()) {\n          <!-- Virtual Scroll Mode -->\n          <div\n            class=\"z-virtual-scroll-inner\"\n            [style.height.px]=\"virtualizer.getTotalSize()\"\n            [style.min-width.px]=\"table.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let groupRows = dynamicGroupRows()[virtualItem.index] || [];\n              <div\n                class=\"z-virtual-row\"\n                [style.height.px]=\"dynamicGroupHeights()[virtualItem.index] ?? groupSize() * virtualRowHeight()\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\">\n                <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n                  <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n                  <tbody\n                    [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n                    [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n                    @for (row of groupRows; track row.id) {\n                      <tr\n                        z-table-row-hover\n                        [style.height.px]=\"virtualRowHeight()\"\n                        [class.z-child-row]=\"row.depth > 0\"\n                        [class.z-selected]=\"row.getIsSelected()\"\n                        [class.z-indeterminate-selected]=\"row.getIsSomeSelected() && !row.getIsSelected()\">\n                        @for (cell of row.getVisibleCells(); track cell.id) {\n                          @let shouldRenderRowSpan =\n                            cell | zTableSpan: zConfig().columns : 'shouldRender' : table.getRowModel().rows;\n                          @let shouldRenderColSpan =\n                            cell | zTableBodyCellRender: row.getVisibleCells() : zConfig().columns;\n                          @if (shouldRenderRowSpan && shouldRenderColSpan) {\n                            <td\n                              [ngStyle]=\"\n                                cell.column\n                                  | zTablePinningStyles: cell : 'body' : row.getVisibleCells() : zConfig().columns\n                              \"\n                              [class.z-sticky-left]=\"cell.column.getIsPinned() === 'left'\"\n                              [class.z-sticky-right]=\"cell.column.getIsPinned() === 'right'\"\n                              [class.z-sticky-left-last]=\"\n                                cell.column.getIsPinned() === 'left' && cell.column.getIsLastColumn('left')\n                              \"\n                              [class.z-sticky-right-first]=\"\n                                cell.column.getIsPinned() === 'right' && cell.column.getIsFirstColumn('right')\n                              \"\n                              [class.z-sticky-right-last]=\"\n                                cell.column.getIsPinned() === 'right' && cell.column.getIsLastColumn('right')\n                              \"\n                              [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                              [class.z-col-select]=\"cell.column.id === 'select'\"\n                              [class.z-col-expand]=\"cell.column.id === 'expand'\"\n                              [class.z-at-bottom]=\"\n                                cell | zTableCellBottom: zConfig().columns : table.getRowModel().rows\n                              \"\n                              [attr.rowspan]=\"\n                                cell | zTableSpan: zConfig().columns : 'cellRowSpan' : table.getRowModel().rows\n                              \"\n                              [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan'\"\n                              [class]=\"cell | zTableCellConfig: zConfig().columns : 'cellClass'\"\n                              [style]=\"cell | zTableCellConfig: zConfig().columns : 'cellStyle'\">\n                              @if (cell.column.id === 'select') {\n                                <!-- Row Checkbox -->\n                                <div class=\"flex items-center justify-center\">\n                                  <z-checkbox\n                                    zSize=\"sm\"\n                                    [zChecked]=\"cell.row.getIsSelected()\"\n                                    [zIndeterminate]=\"cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\"\n                                    [zDisabled]=\"!cell.row.getCanSelect()\"\n                                    (zChange)=\"cell.row.toggleSelected()\" />\n                                </div>\n                              } @else if (cell.column.id === 'expand') {\n                                <!-- Expand Button -->\n                                <div class=\"flex items-center justify-center\">\n                                  @if (cell.row.subRows && cell.row.subRows.length > 0) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.toggleExpanded()\"\n                                      class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                                      <z-icon\n                                        zType=\"lucideChevronRight\"\n                                        zSize=\"14\"\n                                        class=\"transition-transform duration-200\"\n                                        [class.rotate-90]=\"cell.row.getIsExpanded()\" />\n                                    </button>\n                                  }\n                                </div>\n                              } @else {\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\n              [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n              [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n              <!-- Row Template -->\n              <ng-template #rowTemplate let-row>\n                <tr\n                  z-table-row-hover\n                  [attr.data-row-id]=\"row.id\"\n                  [ngStyle]=\"row | zTableRow: table : 'pinningStyles' : virtualRowHeight()\"\n                  [class.z-child-row]=\"row.depth > 0\"\n                  [class.z-selected]=\"row.getIsSelected()\"\n                  [class.z-indeterminate-selected]=\"row.getIsSomeSelected() && !row.getIsSelected()\"\n                  [class.z-pinned-top]=\"row.getIsPinned() === 'top'\"\n                  [class.z-pinned-bottom]=\"row.getIsPinned() === 'bottom'\"\n                  [class.z-shadow-bottom]=\"\n                    showHeaderFooterShadow() &&\n                    row.getIsPinned() === 'top' &&\n                    (row | zTableRow: table : 'isLastTopPinned')\n                  \"\n                  [class.z-shadow-top]=\"\n                    showHeaderFooterShadow() &&\n                    row.getIsPinned() === 'bottom' &&\n                    (row | zTableRow: table : 'isFirstBottomPinned')\n                  \"\n                  [attr.data-depth]=\"row.depth\">\n                  @for (cell of row.getVisibleCells(); track cell.id) {\n                    @let shouldRenderRowSpan =\n                      cell | zTableSpan: zConfig().columns : 'shouldRender' : table.getRowModel().rows;\n                    @let shouldRenderColSpan = cell | zTableBodyCellRender: row.getVisibleCells() : zConfig().columns;\n                    @if (shouldRenderRowSpan && shouldRenderColSpan) {\n                      <td\n                        [ngStyle]=\"\n                          cell.column | zTablePinningStyles: cell : 'body' : row.getVisibleCells() : zConfig().columns\n                        \"\n                        [class]=\"cell | zTableCellConfig: zConfig().columns : 'cellClass'\"\n                        [style]=\"cell | zTableCellConfig: zConfig().columns : 'cellStyle'\"\n                        [class.z-sticky-left]=\"cell.column.getIsPinned() === 'left'\"\n                        [class.z-sticky-right]=\"cell.column.getIsPinned() === 'right'\"\n                        [class.z-sticky-left-last]=\"\n                          cell.column.getIsPinned() === 'left' && cell.column.getIsLastColumn('left')\n                        \"\n                        [class.z-sticky-right-first]=\"\n                          cell.column.getIsPinned() === 'right' && cell.column.getIsFirstColumn('right')\n                        \"\n                        [class.z-sticky-right-last]=\"\n                          cell.column.getIsPinned() === 'right' && cell.column.getIsLastColumn('right')\n                        \"\n                        [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                        [class.z-col-select]=\"cell.column.id === 'select'\"\n                        [class.z-col-expand]=\"cell.column.id === 'expand'\"\n                        [class.z-col-actions]=\"cell.column.id === 'actions'\"\n                        [class.z-at-bottom]=\"cell | zTableCellBottom: zConfig().columns : table.getRowModel().rows\"\n                        [attr.rowspan]=\"cell | zTableSpan: zConfig().columns : 'cellRowSpan' : table.getRowModel().rows\"\n                        [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan'\">\n                        @if (cell.column.id === 'select') {\n                          <!-- Row Checkbox with Pin Button -->\n                          <div class=\"flex items-center justify-center gap-1\">\n                            <z-checkbox\n                              zSize=\"sm\"\n                              [zChecked]=\"cell.row.getIsSelected()\"\n                              [zIndeterminate]=\"cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\"\n                              [zDisabled]=\"!cell.row.getCanSelect()\"\n                              (zChange)=\"cell.row.toggleSelected()\" />\n                            @if (zConfig().enableRowPinning && cell.row.depth === 0 && !hasBodyRowSpan()) {\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            }\n                          </div>\n                        } @else if (cell.column.id === 'expand') {\n                          <!-- Expand Button with Row Pin Popover -->\n                          <div class=\"flex items-center justify-center gap-1\">\n                            @if (cell.row.subRows && cell.row.subRows.length > 0) {\n                              <button\n                                type=\"button\"\n                                (click)=\"cell.row.toggleExpanded()\"\n                                class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                                <z-icon\n                                  zType=\"lucideChevronRight\"\n                                  zSize=\"14\"\n                                  class=\"transition-transform duration-200\"\n                                  [class.rotate-90]=\"cell.row.getIsExpanded()\" />\n                              </button>\n                            }\n                            @if (\n                              zConfig().enableRowPinning &&\n                              cell.row.depth === 0 &&\n                              !(cell.row.subRows && cell.row.subRows.length > 0) &&\n                              !hasBodyRowSpan()\n                            ) {\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            }\n                          </div>\n                        } @else if (cell.column.id === 'actions') {\n                          <!-- Actions Column - Row Pin Only (for parent rows) -->\n                          @if (cell.row.depth === 0 && !hasBodyRowSpan()) {\n                            <div class=\"flex items-center justify-center\">\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            </div>\n                          }\n                        } @else {\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                <!-- 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  <div class=\"mt-4 flex items-center justify-between gap-4\">\n    <div class=\"text-sm text-gray-500\">\n      {{\n        ('i18n_z_ui_table_total_rows' | translate).replace(\n          '{total}',\n          zConfig().totalCount?.toString() || totalRows.toString()\n        )\n      }}\n    </div>\n    <z-pagination\n      [zTotal]=\"zConfig().totalCount ?? totalRows\"\n      [(zPageIndex)]=\"pagination().pageIndex\"\n      [(zPageSize)]=\"pagination().pageSize\"\n      [zPageSizeOptions]=\"zConfig().pagination?.pageSizeOptions ?? [10, 20, 50, 100]\"\n      [zShowSizeChanger]=\"zConfig().pagination?.showSizeChanger ?? true\"\n      [zShowQuickJumper]=\"zConfig().pagination?.showQuickJumper ?? false\"\n      [zShowTotal]=\"false\"\n      [zDisabled]=\"zConfig().pagination?.disabled || zLoading() || isProcessing()\"\n      (zOnPageChange)=\"onPageChange($event)\" />\n  </div>\n}\n\n<!-- Settings Drawer -->\n<z-drawer\n  [(zVisible)]=\"showSettingsDrawer\"\n  [zTitle]=\"'i18n_z_ui_table_settings_title' | translate\"\n  zPlacement=\"right\"\n  zWidth=\"500px\"\n  [zShadow]=\"true\"\n  [zOkText]=\"null\"\n  [zCancelText]=\"'i18n_z_ui_drawer_close' | translate\">\n  <div class=\"z-table-settings-drawer px-4\">\n    <!-- Display Settings -->\n    <div class=\"mb-4\">\n      <h4 class=\"text-foreground mb-2 text-sm font-semibold\">{{ 'i18n_z_ui_table_display_settings' | translate }}</h4>\n      <p class=\"text-muted-foreground mb-3 text-xs\">{{ 'i18n_z_ui_table_display_settings_desc' | translate }}</p>\n      <div class=\"grid grid-cols-2 gap-x-4 gap-y-3\">\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showHorizontalBorder()\"\n          [zText]=\"'i18n_z_ui_table_horizontal_border' | translate\"\n          (zChange)=\"showHorizontalBorder.set(!showHorizontalBorder())\" />\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showVerticalBorder()\"\n          [zText]=\"'i18n_z_ui_table_vertical_border' | translate\"\n          (zChange)=\"showVerticalBorder.set(!showVerticalBorder())\" />\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showHeaderFooterShadow()\"\n          [zText]=\"'i18n_z_ui_table_header_footer_shadow' | translate\"\n          (zChange)=\"showHeaderFooterShadow.set(!showHeaderFooterShadow())\" />\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-border my-4 border-t\"></div>\n\n    <!-- Unified Column Settings -->\n    @if (zConfig().enableSettings) {\n      <div class=\"mb-4\">\n        <h4 class=\"text-foreground mb-2 text-sm font-semibold\">{{ 'i18n_z_ui_table_column_settings' | translate }}</h4>\n        <p class=\"text-muted-foreground mb-3 text-xs\">{{ 'i18n_z_ui_table_column_settings_desc' | translate }}</p>\n\n        <!-- Unpinned Columns (Draggable) -->\n        <div\n          cdkDropList\n          #columnDropList=\"cdkDropList\"\n          (cdkDropListDropped)=\"onPendingColumnDrop($event)\"\n          class=\"z-column-drop-list space-y-1.5\">\n          @for (columnId of columnOrder(); track columnId; let i = $index) {\n            @if (columnId !== 'expand' && columnId !== 'select') {\n              @let column = table.getColumn(columnId);\n              @let isPinned = column?.getIsPinned();\n              @let isVisible = columnVisibility()[columnId] !== false;\n              @let canPin = column?.getCanPin() !== false && zConfig().enableColumnPinning;\n              @if (!isPinned) {\n                <div\n                  cdkDrag\n                  [cdkDragData]=\"columnId\"\n                  cdkDragLockAxis=\"y\"\n                  cdkDragBoundary=\".z-column-drop-list\"\n                  cdkDragPreviewClass=\"z-drag-preview\"\n                  class=\"z-drag-item border-border bg-card hover:border-primary flex cursor-grab items-center gap-2 rounded border px-2 py-1.5 text-sm active:cursor-grabbing\"\n                  [class.opacity-60]=\"!isVisible\">\n                  <!-- Drag Handle -->\n                  <z-icon\n                    cdkDragHandle\n                    zType=\"lucideGripVertical\"\n                    zSize=\"14\"\n                    class=\"text-muted-foreground shrink-0 cursor-grab active:cursor-grabbing\" />\n\n                  <!-- Visibility Checkbox -->\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isVisible\"\n                    (change)=\"onToggleColumnVisibility(columnId)\"\n                    (mousedown)=\"$event.stopPropagation()\"\n                    class=\"border-input h-4 w-4 shrink-0 cursor-pointer rounded\" />\n\n                  <!-- Column Name -->\n                  <span class=\"flex min-w-0 flex-1 flex-col\">\n                    <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                      {{ columnId | zTableColumnHeader: zConfig().columns }}\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\" (mousedown)=\"$event.stopPropagation()\">\n                      <button\n                        type=\"button\"\n                        [disabled]=\"!isVisible\"\n                        (click)=\"onToggleColumnPin(columnId, 'left')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                        title=\"Pin Left\">\n                        <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                      </button>\n                      <button\n                        type=\"button\"\n                        [disabled]=\"!isVisible\"\n                        (click)=\"onToggleColumnPin(columnId, 'right')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                        title=\"Pin Right\">\n                        <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                      </button>\n                    </div>\n                  }\n                </div>\n              }\n            }\n          }\n        </div>\n\n        <!-- Pinned Columns Section -->\n        @if (zConfig().enableColumnPinning) {\n          @if (pinnedColumnIds().length > 0) {\n            <div class=\"border-border mt-4 border-t pt-4\">\n              <h5 class=\"text-muted-foreground mb-2 text-xs font-medium\">\n                {{ 'i18n_z_ui_table_pinned_columns' | translate }}\n              </h5>\n              <div class=\"space-y-1.5\">\n                @for (columnId of pinnedColumnIds(); track columnId) {\n                  @let column = table.getColumn(columnId);\n                  @let isPinned = column?.getIsPinned();\n                  @let isVisible = columnVisibility()[columnId] !== false;\n                  <div\n                    class=\"border-border bg-muted/30 flex items-center gap-2 rounded border px-2 py-1.5 text-sm\"\n                    [class.opacity-60]=\"!isVisible\">\n                    <!-- Pin Icon -->\n                    <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"text-primary shrink-0\" />\n\n                    <!-- Visibility Checkbox -->\n                    <!-- 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                      {{\n                        isPinned === 'left'\n                          ? ('i18n_z_ui_table_left' | translate)\n                          : ('i18n_z_ui_table_right' | translate)\n                      }}\n                    </span>\n\n                    <!-- Unpin Button -->\n                    <button\n                      type=\"button\"\n                      (click)=\"onToggleColumnPin(columnId, isPinned === 'left' ? 'left' : 'right')\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground cursor-pointer rounded p-1 text-xs transition-colors\"\n                      title=\"Unpin\">\n                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        }\n      </div>\n    }\n  </div>\n</z-drawer>\n", styles: [":host{display:flex;flex-direction:column;height:100%;--scrollbar-track-thickness: 7px;--scrollbar-track-color: transparent;--scrollbar-thumb-shape: 3px}.z-table-container{display:flex;flex-direction:column;position:relative;width:100%;height:100%;overflow:hidden;border-radius:8px;border:thin solid var(--border);background-color:var(--card)}.z-table-container.z-hide-horizontal-border th,.z-table-container.z-hide-horizontal-border td{border-bottom:none!important;border-top:none!important}.z-table-container.z-hide-vertical-border th,.z-table-container.z-hide-vertical-border td{border-left:none!important}table{width:fit-content;min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:14px}.z-table-toolbar .z-settings-btn{transition:all .15s ease}.z-table-toolbar .z-settings-btn:hover{border-color:var(--muted-foreground)}.z-table-cell-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;-webkit-user-select:text;user-select:text}.z-thead-wrapper{flex-shrink:0;background:var(--muted);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.z-thead-wrapper::-webkit-scrollbar{display:none}.z-thead-wrapper th{height:auto;padding:8px 12px;text-align:left;vertical-align:middle;font-weight:500;color:var(--foreground);white-space:nowrap;overflow:hidden;background:var(--muted);border-left:thin solid var(--border);border-bottom:thin solid var(--border);-webkit-user-select:none;user-select:none}.z-thead-wrapper th.z-at-left-edge{border-left:none}.z-thead-wrapper th[colspan]{text-align:center;background:var(--muted);font-weight:500;color:var(--foreground)}.z-thead-wrapper.z-shadow-header{box-shadow:0 1px 3px #00000014;position:relative;z-index:15}.z-thead-wrapper.z-shadow-header:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d}.z-tbody-wrapper{flex:1;min-height:100px;display:flex;flex-direction:column}.z-tbody-scrollbar{flex:1;height:100%}.z-empty-state,.z-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:100px;height:100%;color:var(--muted-foreground);font-size:.875rem;animation:z-fade-in .2s ease-out}.z-skeleton-state{display:flex;flex-direction:column;min-height:200px;height:100%;padding:0;animation:z-fade-in .2s ease-out}.z-skeleton-state .z-skeleton-row{display:flex;align-items:center;padding:0 8px;border-bottom:thin solid var(--border);box-sizing:border-box}.z-skeleton-state .z-skeleton-row:last-child{border-bottom:none}.z-skeleton-state .z-skeleton-row z-skeleton{display:flex;align-items:center;width:100%;height:auto!important}.z-tbody-scrollbar,.z-tbody-scrollbar table{animation:z-fade-in .2s ease-out}@keyframes z-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.z-tbody-wrapper tr{transition:background-color .15s ease}.z-tbody-wrapper tr:hover,.z-tbody-wrapper tr:hover td[style*=sticky]{background-color:var(--muted)}.z-tbody-wrapper tr.z-pinned-top td.z-sticky-left,.z-tbody-wrapper tr.z-pinned-top td.z-sticky-right,.z-tbody-wrapper tr.z-pinned-bottom td.z-sticky-left,.z-tbody-wrapper tr.z-pinned-bottom td.z-sticky-right{z-index:3}.z-tbody-wrapper tr.z-shadow-bottom{box-shadow:0 1px 3px #00000014!important;position:relative;z-index:15}.z-tbody-wrapper tr.z-shadow-bottom:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d!important}.z-tbody-wrapper tr.z-shadow-top{box-shadow:0 -2px 4px #0000000d!important;position:relative;z-index:15}.z-tbody-wrapper tr.z-shadow-top:where(.dark,.dark *){box-shadow:0 -2px 4px #0003!important}.z-tbody-wrapper td{padding:8px 12px;height:40px;vertical-align:middle;color:var(--foreground);white-space:nowrap;overflow:hidden;background:var(--card);border-left:thin solid var(--border);border-bottom:thin solid var(--border);box-sizing:border-box}.z-tbody-wrapper tbody.z-has-vertical-scroll td.z-at-bottom,.z-tbody-wrapper tbody.z-last-row-touches-bottom td.z-at-bottom{border-bottom:none}.z-tbody-wrapper td.z-at-left-edge{border-left:none}.z-tbody-wrapper td i{color:var(--muted-foreground);font-style:italic}.z-tbody-wrapper td[rowspan]{vertical-align:top;padding-top:12px}.z-tbody-wrapper td.z-row-hover{background-color:var(--muted)!important}.z-tbody-wrapper td.z-col-select,.z-tbody-wrapper td.z-col-expand,.z-tbody-wrapper td.z-col-actions{padding:8px 4px!important;text-align:center}.z-tbody-wrapper tr.z-child-row td.z-col-select:first-child,.z-tbody-wrapper tr.z-child-row td.z-col-expand:first-child,.z-tbody-wrapper tr.z-child-row td.z-col-actions:first-child{padding-left:0!important}.z-virtual-scroll-inner{position:relative;width:100%}.z-virtual-row{position:absolute;top:0;left:0;width:100%}tr.z-child-row td:first-child{padding-left:12px!important}tbody tr.z-selected,tbody tr.z-selected td{background-color:color-mix(in srgb,var(--primary) 15%,transparent)!important}tbody tr.z-selected:hover,tbody tr.z-selected:hover td{background-color:color-mix(in srgb,var(--primary) 20%,transparent)!important}tbody tr.z-indeterminate-selected,tbody tr.z-indeterminate-selected td{background-color:color-mix(in srgb,var(--primary) 10%,transparent)!important}tbody tr.z-indeterminate-selected:hover,tbody tr.z-indeterminate-selected:hover td{background-color:color-mix(in srgb,var(--primary) 15%,transparent)!important}tbody tr.z-pinned-top td{background-color:var(--card)!important}tbody tr.z-pinned-top:hover{background-color:var(--muted)}tbody tr.z-pinned-top:hover td{background-color:var(--muted)!important}tbody tr.z-pinned-bottom td{background-color:var(--card)!important}tbody tr.z-pinned-bottom:hover{background-color:var(--muted)}tbody tr.z-pinned-bottom:hover td,tr.z-expanded-row td{background-color:var(--muted)!important}thead th{position:relative}thead th .z-resizer{position:absolute;right:0;top:0;height:100%;width:8px;background:transparent;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;z-index:5}thead th .z-resizer:after{content:\"\";position:absolute;right:0;top:0;height:100%;width:3px;background:#0000001a;opacity:0;transition:opacity .2s ease}thead th .z-resizer:after:where(.dark,.dark *){background:#ffffff1a}thead th .z-resizer:hover:after{opacity:1;background:var(--primary);width:3px}thead th .z-resizer.z-is-resizing:after{opacity:1;background:var(--primary);width:3px}thead th .z-resizer.z-resizer-left{right:auto;left:0}thead th .z-resizer.z-resizer-left:after{right:auto;left:0}.z-thead-wrapper th.z-sticky-left,.z-thead-wrapper th.z-sticky-right,.z-tbody-wrapper th.z-sticky-left,.z-tbody-wrapper th.z-sticky-right,.z-tfoot-wrapper th.z-sticky-left,.z-tfoot-wrapper th.z-sticky-right{background-color:var(--muted);z-index:1;transform:translateZ(0);backface-visibility:hidden}.z-thead-wrapper td.z-sticky-left,.z-thead-wrapper td.z-sticky-right,.z-tbody-wrapper td.z-sticky-left,.z-tbody-wrapper td.z-sticky-right,.z-tfoot-wrapper td.z-sticky-left,.z-tfoot-wrapper td.z-sticky-right{background-color:var(--card);z-index:1;transform:translateZ(0);backface-visibility:hidden}.z-thead-wrapper th.z-sticky-left-last,.z-thead-wrapper td.z-sticky-left-last,.z-tbody-wrapper th.z-sticky-left-last,.z-tbody-wrapper td.z-sticky-left-last,.z-tfoot-wrapper th.z-sticky-left-last,.z-tfoot-wrapper td.z-sticky-left-last{position:relative;overflow:visible}.z-thead-wrapper th.z-sticky-left-last:after,.z-thead-wrapper td.z-sticky-left-last:after,.z-tbody-wrapper th.z-sticky-left-last:after,.z-tbody-wrapper td.z-sticky-left-last:after,.z-tfoot-wrapper th.z-sticky-left-last:after,.z-tfoot-wrapper td.z-sticky-left-last:after{content:\"\";position:absolute;top:0;bottom:0;right:-30px;width:30px;pointer-events:none;box-shadow:inset 10px 0 8px -8px #0000001a;z-index:10}.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{flex-shrink:0;background:var(--muted);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.z-tfoot-wrapper::-webkit-scrollbar{display:none}.z-tfoot-wrapper th{height:auto;padding:8px 12px;text-align:left;vertical-align:middle;font-weight:500;font-size:12px;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.5px;background:var(--muted);border-left:thin solid var(--border);border-top:thin solid var(--border)}.z-tfoot-wrapper th.z-at-left-edge{border-left:none}.z-tfoot-wrapper.z-shadow-footer{box-shadow:0 -2px 4px #0000000d;position:relative;z-index:15}.z-tfoot-wrapper.z-shadow-footer:where(.dark,.dark *){box-shadow:0 -2px 4px #0003}.z-pin-btn{padding:2px 4px;border-radius:4px;color:var(--muted-foreground);transition:all .15s ease}.z-pin-btn:hover{background-color:var(--muted);color:var(--foreground)}.z-pin-btn.z-pin-btn-active{color:var(--primary);background-color:var(--primary)}.z-pin-btn.z-pin-btn-active:hover{background-color:var(--primary);opacity:.8}.z-row-pin-trigger{opacity:1}.z-row-pin-trigger.text-primary{color:var(--primary)}.z-header-pin-trigger{opacity:1}.z-header-pin-trigger.text-primary{color:var(--primary)}th{overflow:hidden}th .z-header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th .z-header-text-wrapper{transition:background-color .15s ease;border-radius:4px}th .z-header-text-wrapper.z-has-options:hover{background-color:color-mix(in srgb,var(--foreground) 8%,transparent)}th .z-header-text-wrapper.z-has-options:active{background-color:color-mix(in srgb,var(--foreground) 12%,transparent)}.cdk-drag-preview,.z-drag-preview{box-shadow:0 5px 20px #0003;border-radius:6px;background-color:var(--card);border:1px solid var(--primary);z-index:10000!important;pointer-events:none}.cdk-drag-preview:where(.dark,.dark *),.z-drag-preview:where(.dark,.dark *){box-shadow:0 5px 20px #00000080}.cdk-drag-placeholder{background-color:color-mix(in srgb,var(--primary) 10%,transparent);border:2px dashed var(--primary);border-radius:6px}.cdk-drag-animating{transition:transform .1s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder){transition:transform .1s cubic-bezier(0,0,.2,1)}.z-drag-item.cdk-drag-dragging{transition:none!important}.z-column-drop-list{min-height:50px}.z-table-settings-drawer input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:1rem;height:1rem;border:thin solid var(--input);border-radius:.25rem;background-color:var(--background);cursor:pointer;position:relative;transition:all .2s ease}.z-table-settings-drawer input[type=checkbox]:hover{border-color:var(--primary)}.z-table-settings-drawer input[type=checkbox]:checked{background-color:var(--primary);border-color:var(--primary)}.z-table-settings-drawer input[type=checkbox]:checked:after{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:.375rem;height:.625rem;border:solid var(--primary-foreground);border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.z-table-settings-drawer input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}\n"] }]
+                    }, exportAs: 'zTable', template: "<!-- Toolbar: Search & Settings -->\n@if (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]=\"'i18n_z_ui_table_search' | translate\"\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()\">\n        {{ 'i18n_z_ui_table_settings' | translate }}\n      </z-button>\n    }\n  </div>\n}\n\n<div\n  class=\"z-table-container shadow-xs\"\n  [class.z-hide-horizontal-border]=\"!showHorizontalBorder()\"\n  [class.z-hide-vertical-border]=\"!showVerticalBorder()\"\n  [style.max-height]=\"zConfig().maxHeight\"\n  [style.min-height]=\"zConfig().minHeight\">\n  <!-- Shared colgroup template -->\n  <ng-template #colGroupTpl>\n    <colgroup>\n      @for (column of orderedLeafColumns(); track column.id) {\n        @if (column.getIsVisible()) {\n          <col [style.width]=\"'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n      }\n    </colgroup>\n  </ng-template>\n\n  <!-- Header table -->\n  <div\n    class=\"z-thead-wrapper shadow-xs\"\n    [class.z-shadow-header]=\"shouldHeaderShowShadow()\"\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\"\n    #theadWrapper>\n    <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n      <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n      <thead>\n        @for (headerGroup of orderedHeaderGroups(); track headerGroup.id) {\n          <tr>\n            @for (header of headerGroup.headers; track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableHeaderRender: headerGroup.headers : zConfig().columns;\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [ngStyle]=\"header.column | zTablePinningStyles: header : 'header' : table : zConfig().columns\"\n                  [class]=\"\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerClass') +\n                    ' ' +\n                    (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass')\n                  \"\n                  [style]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\"\n                  [class.z-sticky-left]=\"header.column.getIsPinned() === 'left'\"\n                  [class.z-sticky-right]=\"header.column.getIsPinned() === 'right'\"\n                  [class.z-sticky-left-last]=\"header | zTableHeaderPin: 'isLastLeftPinned' : zConfig().columns\"\n                  [class.z-sticky-right-first]=\"header | zTableHeaderPin: 'isFirstRightPinned' : zConfig().columns\"\n                  [class.z-sticky-right-last]=\"header | zTableHeaderPin: 'isLastRightPinned' : zConfig().columns\"\n                  [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                  [class.z-col-select]=\"header.column.id === 'select'\"\n                  [class.z-col-expand]=\"header.column.id === 'expand'\"\n                  [class.z-col-actions]=\"\n                    header.column.id === 'actions' || header.column.id === actionColumnInfo()?.columnId\n                  \"\n                  [attr.rowspan]=\"rowSpan\"\n                  [attr.colspan]=\"header | zTableSpan: zConfig().columns : 'headerColSpan'\">\n                  @if (header.column.id === 'select') {\n                    <!-- Header Checkbox -->\n                    <div class=\"flex items-center justify-center\">\n                      <z-checkbox\n                        zSize=\"sm\"\n                        [zChecked]=\"table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\"\n                        (zChange)=\"table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <!-- Expand All Button -->\n                    <div class=\"flex items-center justify-center\">\n                      <button\n                        type=\"button\"\n                        (click)=\"table.toggleAllRowsExpanded()\"\n                        class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                        <z-icon\n                          zType=\"lucideChevronRight\"\n                          zSize=\"14\"\n                          class=\"transition-transform duration-200\"\n                          [class.rotate-90]=\"table.getIsSomeRowsExpanded()\" />\n                      </button>\n                    </div>\n                  } @else {\n                    <!-- Header Content with Sort and Pin -->\n                    <div\n                      class=\"flex w-full items-center gap-1\"\n                      [class.justify-center]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                        'text-center'\n                      \"\n                      [class.justify-end]=\"\n                        (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') === 'text-right'\n                      \">\n                      <!-- Column Options Popover Template -->\n                      @let columnEnableOrdering =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableOrdering';\n                      @let columnEnablePinning =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enablePinning';\n                      @let effectiveEnableOrdering = columnEnableOrdering || zConfig().enableColumnOrdering;\n                      @let effectiveEnablePinning = columnEnablePinning || zConfig().enableColumnPinning;\n                      <ng-template #colOptionsPopoverContent>\n                        <div class=\"flex flex-col gap-0.5 p-0.5\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_left' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isLastMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                              <span>{{ 'i18n_z_ui_table_move_right' | translate }}</span>\n                            </button>\n                          }\n                          @if (effectiveEnableOrdering && header.column.getCanPin() && effectiveEnablePinning) {\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                          }\n                          @if (header.column.getCanPin() && effectiveEnablePinning) {\n                            @if (header.column.getIsPinned() !== 'left') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'right') {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucidePin\" zSize=\"12\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned()) {\n                              <button\n                                type=\"button\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                        </div>\n                      </ng-template>\n\n                      <!-- Header Text with Popover Trigger -->\n                      @let hasColumnOptions =\n                        (header.column.getCanPin() && effectiveEnablePinning) || effectiveEnableOrdering;\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded px-1.5 py-1\"\n                        [class.cursor-pointer]=\"hasColumnOptions\"\n                        [class.z-has-options]=\"hasColumnOptions\"\n                        [attr.z-popover]=\"hasColumnOptions ? '' : null\"\n                        #colOptionsPopover=\"zPopover\"\n                        #headerTextWrapper\n                        z-popover\n                        [zPopoverContent]=\"hasColumnOptions ? colOptionsPopoverContent : null\"\n                        zTrigger=\"click\"\n                        zPosition=\"bottom\"\n                        [zOffset]=\"5\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \">\n                              <ng-container\n                                *ngTemplateOutlet=\"headerContent; context: { $implicit: header.getContext() }\" />\n                            </div>\n                          } @else if (headerContent | zTableHasIcon) {\n                            <z-table-icon-text\n                              class=\"min-w-0 truncate\"\n                              [zText]=\"headerContent\"\n                              [zTooltip]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip'\"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \" />\n                          } @else {\n                            <span\n                              class=\"z-table-cell-text\"\n                              z-tooltip\n                              [zContent]=\"\n                                (header.column.id | zTableColumnConfig: zConfig().columns : 'headerTooltip') ||\n                                headerContent\n                              \"\n                              [zTriggerElement]=\"headerTextWrapper\"\n                              [innerHTML]=\"headerContent | translate | zSafeHtml\"\n                              [ngClass]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\n                              \"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        <!-- Dropdown indicator when has options (between text and sort icon) -->\n                        @if (hasColumnOptions) {\n                          <z-icon\n                            zType=\"lucideChevronDown\"\n                            zSize=\"12\"\n                            class=\"text-muted-foreground shrink-0 opacity-50\" />\n                        }\n                      </div>\n                      <!-- Sort Icon (outside wrapper, no hover background) -->\n                      @if (header.column.getCanSort() && !hasBodyRowSpan()) {\n                        <span\n                          class=\"z-sort-icon shrink-0 cursor-pointer text-gray-500 hover:text-gray-700\"\n                          (click)=\"handleSort($event, header.column.getToggleSortingHandler())\">\n                          @if (header.column.getIsSorted() === 'asc') {\n                            <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                          } @else if (header.column.getIsSorted() === 'desc') {\n                            <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                          } @else {\n                            <z-icon zType=\"lucideArrowDownUp\" zSize=\"12\" class=\"opacity-30\" />\n                          }\n                        </span>\n                      }\n                    </div>\n                  }\n                  <!-- Column Filter -->\n                  @if (header.column.getCanFilter() && hasFiltering()) {\n                    <div class=\"mt-1\">\n                      <z-table-filter [zColumn]=\"$any(header.column)\" [zTable]=\"$any(table)\" />\n                    </div>\n                  }\n                  <!-- Column Resizer -->\n                  @if (\n                    header.column.id !== 'select' &&\n                    header.column.id !== 'expand' &&\n                    zConfig().enableColumnResizing !== false\n                  ) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"\n                        header.column.getIsPinned() === 'right' || header.column.getIsLastColumn()\n                      \"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResizer]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n          </tr>\n        }\n      </thead>\n    </table>\n  </div>\n\n  <!-- Body table -->\n  <div\n    class=\"z-tbody-wrapper relative\"\n    #tbodyContainer\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\">\n    @if (zLoading() || isProcessing()) {\n      <!-- Loading State -->\n      @if (zConfig().useSkeleton) {\n        <!-- Skeleton Loading -->\n        <div class=\"z-skeleton-state\">\n          @for (i of skeletonRows(); track $index) {\n            <div class=\"z-skeleton-row\" [style.height.px]=\"virtualRowHeight()\">\n              <z-skeleton zType=\"bar\" zWidth=\"100%\" [zHeight]=\"virtualRowHeight() - 16 + 'px'\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <!-- Spinner Loading -->\n        <div class=\"z-loading-state\">\n          <z-loading [zLoading]=\"true\" zSize=\"lg\" [zText]=\"'i18n_z_ui_table_loading' | translate\" />\n        </div>\n      }\n    } @else if (isEmpty()) {\n      <div class=\"z-empty-state\">\n        @if (isNoSearchResults()) {\n          <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"'i18n_z_ui_table_no_results' | translate\" />\n        } @else {\n          <z-empty zIcon=\"lucidePackageOpen\" zSize=\"sm\" [zMessage]=\"'i18n_z_ui_table_no_data' | translate\" />\n        }\n      </div>\n    } @else {\n      <ng-scrollbar class=\"z-tbody-scrollbar\" #tbodyWrapper track=\"all\" (scroll)=\"onTbodyScroll($event)\">\n        @if (isVirtual()) {\n          <!-- Virtual Scroll Mode -->\n          <div\n            class=\"z-virtual-scroll-inner\"\n            [style.height.px]=\"virtualizer.getTotalSize()\"\n            [style.min-width.px]=\"table.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let groupRows = dynamicGroupRows()[virtualItem.index] || [];\n              <div\n                class=\"z-virtual-row\"\n                [style.height.px]=\"dynamicGroupHeights()[virtualItem.index] ?? groupSize() * virtualRowHeight()\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\">\n                <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n                  <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n                  <tbody\n                    [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n                    [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n                    @for (row of groupRows; track row.id) {\n                      <tr\n                        z-table-row-hover\n                        [style.height.px]=\"virtualRowHeight()\"\n                        [class.z-child-row]=\"row.depth > 0\"\n                        [class.z-selected]=\"row.getIsSelected()\"\n                        [class.z-indeterminate-selected]=\"row.getIsSomeSelected() && !row.getIsSelected()\">\n                        @for (cell of row.getVisibleCells(); track cell.id) {\n                          @let shouldRenderRowSpan =\n                            cell | zTableSpan: zConfig().columns : 'shouldRender' : table.getRowModel().rows;\n                          @let shouldRenderColSpan =\n                            cell | zTableBodyCellRender: row.getVisibleCells() : zConfig().columns;\n                          @if (shouldRenderRowSpan && shouldRenderColSpan) {\n                            <td\n                              [ngStyle]=\"\n                                cell.column\n                                  | zTablePinningStyles: cell : 'body' : row.getVisibleCells() : zConfig().columns\n                              \"\n                              [class.z-sticky-left]=\"cell.column.getIsPinned() === 'left'\"\n                              [class.z-sticky-right]=\"cell.column.getIsPinned() === 'right'\"\n                              [class.z-sticky-left-last]=\"\n                                cell.column.getIsPinned() === 'left' && cell.column.getIsLastColumn('left')\n                              \"\n                              [class.z-sticky-right-first]=\"\n                                cell.column.getIsPinned() === 'right' && cell.column.getIsFirstColumn('right')\n                              \"\n                              [class.z-sticky-right-last]=\"\n                                cell.column.getIsPinned() === 'right' && cell.column.getIsLastColumn('right')\n                              \"\n                              [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                              [class.z-col-select]=\"cell.column.id === 'select'\"\n                              [class.z-col-expand]=\"cell.column.id === 'expand'\"\n                              [class.z-col-actions]=\"cell.column.id === actionColumnInfo()?.columnId\"\n                              [class.z-at-bottom]=\"\n                                cell | zTableCellBottom: zConfig().columns : table.getRowModel().rows\n                              \"\n                              [attr.rowspan]=\"\n                                cell | zTableSpan: zConfig().columns : 'cellRowSpan' : table.getRowModel().rows\n                              \"\n                              [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan'\"\n                              [class]=\"cell | zTableCellConfig: zConfig().columns : 'cellClass'\"\n                              [style]=\"cell | zTableCellConfig: zConfig().columns : 'cellStyle'\">\n                              @if (cell.column.id === 'select') {\n                                <!-- Row Checkbox -->\n                                <div class=\"flex items-center justify-center\">\n                                  <z-checkbox\n                                    zSize=\"sm\"\n                                    [zChecked]=\"cell.row.getIsSelected()\"\n                                    [zIndeterminate]=\"cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\"\n                                    [zDisabled]=\"!cell.row.getCanSelect()\"\n                                    (zChange)=\"cell.row.toggleSelected()\" />\n                                </div>\n                              } @else if (cell.column.id === 'expand') {\n                                <!-- Expand Button -->\n                                <div class=\"flex items-center justify-center\">\n                                  @if (cell.row.subRows && cell.row.subRows.length > 0) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.toggleExpanded()\"\n                                      class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                                      <z-icon\n                                        zType=\"lucideChevronRight\"\n                                        zSize=\"14\"\n                                        class=\"transition-transform duration-200\"\n                                        [class.rotate-90]=\"cell.row.getIsExpanded()\" />\n                                    </button>\n                                  }\n                                </div>\n                              } @else if (cell.column.id === actionColumnInfo()?.columnId && actionColumnInfo()) {\n                                <z-table-actions\n                                  [zConfig]=\"$any(actionColumnInfo()!.config)\"\n                                  [zRow]=\"cell.row.original\"\n                                  [zRowId]=\"cell.row.id\"\n                                  (zActionClick)=\"onActionClick($event)\" />\n                              } @else {\n                                <ng-container\n                                  *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellContent\">\n                                  @if (cellContent | zTableIsTemplateRef) {\n                                    <!-- TemplateRef rendering -->\n                                    <div\n                                      [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                      [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\">\n                                      <ng-container\n                                        *ngTemplateOutlet=\"cellContent; context: { $implicit: cell.getContext() }\" />\n                                    </div>\n                                  } @else if (cellContent | zTableHasIcon) {\n                                    <!-- Icon syntax rendering -->\n                                    <z-table-icon-text\n                                      [zText]=\"cellContent\"\n                                      [zTooltip]=\"cell | zTableCellConfig: zConfig().columns : 'contentTooltip'\"\n                                      [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                      [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\" />\n                                  } @else {\n                                    <!-- Default/innerHTML rendering -->\n                                    <div\n                                      class=\"z-table-cell-text\"\n                                      z-tooltip\n                                      [zContent]=\"\n                                        (cell | zTableCellConfig: zConfig().columns : 'contentTooltip') || cellContent\n                                      \"\n                                      [innerHTML]=\"cellContent | zSafeHtml\"\n                                      [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                      [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"></div>\n                                  }\n                                </ng-container>\n                              }\n                            </td>\n                          }\n                        }\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Normal Scroll Mode -->\n          <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n            <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n            <tbody\n              [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n              [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n              <!-- Row Template -->\n              <ng-template #rowTemplate let-row>\n                <tr\n                  z-table-row-hover\n                  [attr.data-row-id]=\"row.id\"\n                  [ngStyle]=\"row | zTableRow: table : 'pinningStyles' : virtualRowHeight()\"\n                  [class.z-child-row]=\"row.depth > 0\"\n                  [class.z-selected]=\"row.getIsSelected()\"\n                  [class.z-indeterminate-selected]=\"row.getIsSomeSelected() && !row.getIsSelected()\"\n                  [class.z-pinned-top]=\"row.getIsPinned() === 'top'\"\n                  [class.z-pinned-bottom]=\"row.getIsPinned() === 'bottom'\"\n                  [class.z-shadow-bottom]=\"\n                    showHeaderFooterShadow() &&\n                    row.getIsPinned() === 'top' &&\n                    (row | zTableRow: table : 'isLastTopPinned')\n                  \"\n                  [class.z-shadow-top]=\"\n                    showHeaderFooterShadow() &&\n                    row.getIsPinned() === 'bottom' &&\n                    (row | zTableRow: table : 'isFirstBottomPinned')\n                  \"\n                  [attr.data-depth]=\"row.depth\">\n                  @for (cell of row.getVisibleCells(); track cell.id) {\n                    @let shouldRenderRowSpan =\n                      cell | zTableSpan: zConfig().columns : 'shouldRender' : table.getRowModel().rows;\n                    @let shouldRenderColSpan = cell | zTableBodyCellRender: row.getVisibleCells() : zConfig().columns;\n                    @if (shouldRenderRowSpan && shouldRenderColSpan) {\n                      <td\n                        [ngStyle]=\"\n                          cell.column | zTablePinningStyles: cell : 'body' : row.getVisibleCells() : zConfig().columns\n                        \"\n                        [class]=\"cell | zTableCellConfig: zConfig().columns : 'cellClass'\"\n                        [style]=\"cell | zTableCellConfig: zConfig().columns : 'cellStyle'\"\n                        [class.z-sticky-left]=\"cell.column.getIsPinned() === 'left'\"\n                        [class.z-sticky-right]=\"cell.column.getIsPinned() === 'right'\"\n                        [class.z-sticky-left-last]=\"\n                          cell.column.getIsPinned() === 'left' && cell.column.getIsLastColumn('left')\n                        \"\n                        [class.z-sticky-right-first]=\"\n                          cell.column.getIsPinned() === 'right' && cell.column.getIsFirstColumn('right')\n                        \"\n                        [class.z-sticky-right-last]=\"\n                          cell.column.getIsPinned() === 'right' && cell.column.getIsLastColumn('right')\n                        \"\n                        [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                        [class.z-col-select]=\"cell.column.id === 'select'\"\n                        [class.z-col-expand]=\"cell.column.id === 'expand'\"\n                        [class.z-col-actions]=\"\n                          cell.column.id === 'actions' || cell.column.id === actionColumnInfo()?.columnId\n                        \"\n                        [class.z-at-bottom]=\"cell | zTableCellBottom: zConfig().columns : table.getRowModel().rows\"\n                        [attr.rowspan]=\"cell | zTableSpan: zConfig().columns : 'cellRowSpan' : table.getRowModel().rows\"\n                        [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan'\">\n                        @if (cell.column.id === 'select') {\n                          <!-- Row Checkbox with Pin Button -->\n                          <div class=\"flex items-center justify-center gap-1\">\n                            <z-checkbox\n                              zSize=\"sm\"\n                              [zChecked]=\"cell.row.getIsSelected()\"\n                              [zIndeterminate]=\"cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\"\n                              [zDisabled]=\"!cell.row.getCanSelect()\"\n                              (zChange)=\"cell.row.toggleSelected()\" />\n                            @if (zConfig().enableRowPinning && cell.row.depth === 0 && !hasBodyRowSpan()) {\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            }\n                          </div>\n                        } @else if (cell.column.id === 'expand') {\n                          <!-- Expand Button with Row Pin Popover -->\n                          <div class=\"flex items-center justify-center gap-1\">\n                            @if (cell.row.subRows && cell.row.subRows.length > 0) {\n                              <button\n                                type=\"button\"\n                                (click)=\"cell.row.toggleExpanded()\"\n                                class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded\">\n                                <z-icon\n                                  zType=\"lucideChevronRight\"\n                                  zSize=\"14\"\n                                  class=\"transition-transform duration-200\"\n                                  [class.rotate-90]=\"cell.row.getIsExpanded()\" />\n                              </button>\n                            }\n                            @if (\n                              zConfig().enableRowPinning &&\n                              cell.row.depth === 0 &&\n                              !(cell.row.subRows && cell.row.subRows.length > 0) &&\n                              !hasBodyRowSpan()\n                            ) {\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            }\n                          </div>\n                        } @else if (cell.column.id === 'actions') {\n                          <!-- Actions Column - Row Pin Only (for parent rows) -->\n                          @if (cell.row.depth === 0 && !hasBodyRowSpan()) {\n                            <div class=\"flex items-center justify-center\">\n                              <ng-template #rowPinPopoverContent>\n                                <div class=\"flex flex-col gap-0.5 p-0.5\">\n                                  @if (cell.row.getIsPinned() !== 'top') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned() !== 'bottom') {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"text-foreground hover:bg-muted flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\n                                  }\n                                  @if (cell.row.getIsPinned()) {\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin(false); rowPinPopover.hideImmediate()\"\n                                      class=\"text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs\">\n                                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                    </button>\n                                  }\n                                </div>\n                              </ng-template>\n                              <button\n                                type=\"button\"\n                                z-popover\n                                #rowPinPopover=\"zPopover\"\n                                [zPopoverContent]=\"rowPinPopoverContent\"\n                                zTrigger=\"click\"\n                                zPosition=\"bottom\"\n                                class=\"z-row-pin-trigger text-muted-foreground hover:bg-muted hover:text-foreground flex cursor-pointer items-center justify-center rounded p-1\"\n                                [class.text-primary]=\"cell.row.getIsPinned()\">\n                                <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                              </button>\n                            </div>\n                          }\n                        } @else if (cell.column.id === actionColumnInfo()?.columnId && actionColumnInfo()) {\n                          <z-table-actions\n                            [zConfig]=\"$any(actionColumnInfo()!.config)\"\n                            [zRow]=\"cell.row.original\"\n                            [zRowId]=\"cell.row.id\"\n                            (zActionClick)=\"onActionClick($event)\" />\n                        } @else {\n                          <ng-container\n                            *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellContent\">\n                            @if (cellContent | zTableIsTemplateRef) {\n                              <!-- TemplateRef rendering -->\n                              <div\n                                [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\">\n                                <ng-container\n                                  *ngTemplateOutlet=\"cellContent; context: { $implicit: cell.getContext() }\" />\n                              </div>\n                            } @else if (cellContent | zTableHasIcon) {\n                              <!-- Icon syntax rendering -->\n                              <z-table-icon-text\n                                [zText]=\"cellContent\"\n                                [zTooltip]=\"cell | zTableCellConfig: zConfig().columns : 'contentTooltip'\"\n                                [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\" />\n                            } @else {\n                              <!-- Default/innerHTML rendering -->\n                              <div\n                                class=\"z-table-cell-text\"\n                                z-tooltip\n                                [zContent]=\"\n                                  (cell | zTableCellConfig: zConfig().columns : 'contentTooltip') || cellContent\n                                \"\n                                [innerHTML]=\"cellContent | zSafeHtml\"\n                                [ngClass]=\"cell | zTableCellConfig: zConfig().columns : 'contentClass'\"\n                                [ngStyle]=\"cell | zTableCellConfig: zConfig().columns : 'contentStyle'\"></div>\n                            }\n                          </ng-container>\n                        }\n                      </td>\n                    }\n                  }\n                </tr>\n\n                <!-- Expanded Row Detail -->\n                @if (row.getIsExpanded() && row.depth === 0 && !row.subRows?.length && zConfig().expandedRowTemplate) {\n                  <tr class=\"z-expanded-row\">\n                    <td [attr.colspan]=\"row.getVisibleCells().length\" class=\"p-0\">\n                      <ng-container *ngTemplateOutlet=\"zConfig().expandedRowTemplate!; context: { $implicit: row }\" />\n                    </td>\n                  </tr>\n                }\n              </ng-template>\n\n              <!-- Render Top Pinned Rows (hidden when filtered data is empty) -->\n              @if (!isEmpty()) {\n                @for (row of table.getTopRows(); track row.id) {\n                  <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n                }\n              }\n\n              <!-- Render Center Rows -->\n              @for (row of table.getCenterRows(); track row.id) {\n                <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n              }\n\n              <!-- Render Bottom Pinned Rows (hidden when filtered data is empty) -->\n              @if (!isEmpty()) {\n                @for (row of bottomRowsReversed(); track row.id) {\n                  <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: row }\" />\n                }\n              }\n            </tbody>\n          </table>\n        }\n      </ng-scrollbar>\n    }\n    <!-- end @else -->\n  </div>\n\n  <!-- Footer table -->\n  @if (hasFooter()) {\n    <div\n      class=\"z-tfoot-wrapper\"\n      [class.z-shadow-footer]=\"shouldFooterShowShadow()\"\n      [class.z-scroll-left]=\"hasScrollLeft()\"\n      [class.z-scroll-right]=\"hasScrollRight()\"\n      #tfootWrapper>\n      <table [ngStyle]=\"columnSizeVars()\" [style.width.px]=\"table.getTotalSize()\">\n        <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n        <tfoot>\n          @for (footerGroup of orderedFooterGroups(); track footerGroup.id) {\n            @if (footerGroup | zTableFooterContent: zConfig().columns) {\n              <tr>\n                @for (footer of footerGroup.headers; track footer.id) {\n                  @let rowSpan = footer | zTableSpan: zConfig().columns : 'footerRowSpan';\n                  @let shouldRender = footer | zTableFooterRender: footerGroup.headers : zConfig().columns;\n                  @if (rowSpan && shouldRender) {\n                    <th\n                      [ngStyle]=\"footer.column | zTablePinningStyles: footer : 'header' : table : zConfig().columns\"\n                      [class]=\"\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerClass') +\n                        ' ' +\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass')\n                      \"\n                      [style]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerStyle'\"\n                      [class.z-sticky-left]=\"footer.column.getIsPinned() === 'left'\"\n                      [class.z-sticky-right]=\"footer.column.getIsPinned() === 'right'\"\n                      [class.z-sticky-left-last]=\"footer | zTableHeaderPin: 'isLastLeftPinned' : zConfig().columns\"\n                      [class.z-sticky-right-first]=\"footer | zTableHeaderPin: 'isFirstRightPinned' : zConfig().columns\"\n                      [class.z-sticky-right-last]=\"footer | zTableHeaderPin: 'isLastRightPinned' : zConfig().columns\"\n                      [class.z-at-left-edge]=\"footer | zTableCellOffset: orderedLeafColumns()\"\n                      [attr.rowspan]=\"rowSpan\"\n                      [attr.colspan]=\"footer | zTableSpan: zConfig().columns : 'footerColSpan'\">\n                      @let configFooterContent =\n                        footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContent';\n                      @if (footer.column.columnDef.footer) {\n                        <ng-container\n                          *flexRender=\"footer.column.columnDef.footer; props: footer.getContext(); let footerContent\">\n                          <div\n                            class=\"flex w-full items-center\"\n                            [class.justify-center]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                              'text-center'\n                            \"\n                            [class.justify-end]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                              'text-right'\n                            \">\n                            @if (footerContent | zTableIsTemplateRef) {\n                              <!-- TemplateRef rendering -->\n                              <div\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \">\n                                <ng-container\n                                  *ngTemplateOutlet=\"footerContent; context: { $implicit: footer.getContext() }\" />\n                              </div>\n                            } @else if (footerContent | zTableHasIcon) {\n                              <!-- Icon syntax rendering -->\n                              <z-table-icon-text\n                                [zText]=\"footerContent\"\n                                [zTooltip]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip'\"\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \" />\n                            } @else {\n                              <!-- Default/string rendering -->\n                              <span\n                                class=\"z-table-cell-text\"\n                                z-tooltip\n                                [zContent]=\"\n                                  (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip') ||\n                                  footerContent\n                                \"\n                                [ngClass]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\n                                \">\n                                {{ footerContent | translate }}\n                              </span>\n                            }\n                          </div>\n                        </ng-container>\n                      } @else if (configFooterContent) {\n                        <!-- Fallback for group columns without TanStack footer -->\n                        <div\n                          class=\"flex w-full items-center\"\n                          [class.justify-center]=\"\n                            (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                            'text-center'\n                          \"\n                          [class.justify-end]=\"\n                            (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass') ===\n                            'text-right'\n                          \">\n                          <span\n                            class=\"z-table-cell-text\"\n                            z-tooltip\n                            [zContent]=\"\n                              (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerTooltip') ||\n                              $any(configFooterContent)\n                            \"\n                            [ngClass]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentClass'\"\n                            [ngStyle]=\"footer.column.id | zTableColumnConfig: zConfig().columns : 'footerContentStyle'\">\n                            {{ $any(configFooterContent) | translate }}\n                          </span>\n                        </div>\n                      }\n                    </th>\n                  }\n                }\n              </tr>\n            }\n          }\n        </tfoot>\n      </table>\n    </div>\n  }\n</div>\n\n<!-- Pagination -->\n@if (zConfig().enablePagination && zConfig().pagination?.enabled !== false) {\n  @let totalRows = table.getFilteredRowModel().rows.length;\n  <div class=\"mt-4 flex items-center justify-between gap-4\">\n    <div class=\"text-sm text-gray-500\">\n      {{\n        ('i18n_z_ui_table_total_rows' | translate).replace(\n          '{total}',\n          zConfig().totalCount?.toString() || totalRows.toString()\n        )\n      }}\n    </div>\n    <z-pagination\n      [zTotal]=\"zConfig().totalCount ?? totalRows\"\n      [(zPageIndex)]=\"pagination().pageIndex\"\n      [(zPageSize)]=\"pagination().pageSize\"\n      [zPageSizeOptions]=\"zConfig().pagination?.pageSizeOptions ?? [10, 20, 50, 100]\"\n      [zShowSizeChanger]=\"zConfig().pagination?.showSizeChanger ?? true\"\n      [zShowQuickJumper]=\"zConfig().pagination?.showQuickJumper ?? false\"\n      [zShowTotal]=\"false\"\n      [zDisabled]=\"zConfig().pagination?.disabled || zLoading() || isProcessing()\"\n      (zOnPageChange)=\"onPageChange($event)\" />\n  </div>\n}\n\n<!-- Settings Drawer -->\n<z-drawer\n  [(zVisible)]=\"showSettingsDrawer\"\n  [zTitle]=\"'i18n_z_ui_table_settings_title' | translate\"\n  zPlacement=\"right\"\n  zWidth=\"500px\"\n  [zShadow]=\"true\"\n  [zOkText]=\"null\"\n  [zCancelText]=\"'i18n_z_ui_drawer_close' | translate\">\n  <div class=\"z-table-settings-drawer px-4\">\n    <!-- Display Settings -->\n    <div class=\"mb-4\">\n      <h4 class=\"text-foreground mb-2 text-sm font-semibold\">{{ 'i18n_z_ui_table_display_settings' | translate }}</h4>\n      <p class=\"text-muted-foreground mb-3 text-xs\">{{ 'i18n_z_ui_table_display_settings_desc' | translate }}</p>\n      <div class=\"grid grid-cols-2 gap-x-4 gap-y-3\">\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showHorizontalBorder()\"\n          [zText]=\"'i18n_z_ui_table_horizontal_border' | translate\"\n          (zChange)=\"showHorizontalBorder.set(!showHorizontalBorder())\" />\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showVerticalBorder()\"\n          [zText]=\"'i18n_z_ui_table_vertical_border' | translate\"\n          (zChange)=\"showVerticalBorder.set(!showVerticalBorder())\" />\n        <z-checkbox\n          zSize=\"sm\"\n          [zChecked]=\"showHeaderFooterShadow()\"\n          [zText]=\"'i18n_z_ui_table_header_footer_shadow' | translate\"\n          (zChange)=\"showHeaderFooterShadow.set(!showHeaderFooterShadow())\" />\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-border my-4 border-t\"></div>\n\n    <!-- Unified Column Settings -->\n    @if (zConfig().enableSettings) {\n      <div class=\"mb-4\">\n        <h4 class=\"text-foreground mb-2 text-sm font-semibold\">{{ 'i18n_z_ui_table_column_settings' | translate }}</h4>\n        <p class=\"text-muted-foreground mb-3 text-xs\">{{ 'i18n_z_ui_table_column_settings_desc' | translate }}</p>\n\n        <!-- Unpinned Columns (Draggable) -->\n        <div\n          cdkDropList\n          #columnDropList=\"cdkDropList\"\n          (cdkDropListDropped)=\"onPendingColumnDrop($event)\"\n          class=\"z-column-drop-list space-y-1.5\">\n          @for (columnId of columnOrder(); track columnId; let i = $index) {\n            @if (columnId !== 'expand' && columnId !== 'select') {\n              @let column = table.getColumn(columnId);\n              @let isPinned = column?.getIsPinned();\n              @let isVisible = columnVisibility()[columnId] !== false;\n              @let canPin = column?.getCanPin() !== false && zConfig().enableColumnPinning;\n              @if (!isPinned) {\n                <div\n                  cdkDrag\n                  [cdkDragData]=\"columnId\"\n                  cdkDragLockAxis=\"y\"\n                  cdkDragBoundary=\".z-column-drop-list\"\n                  cdkDragPreviewClass=\"z-drag-preview\"\n                  class=\"z-drag-item border-border bg-card hover:border-primary flex cursor-grab items-center gap-2 rounded border px-2 py-1.5 text-sm active:cursor-grabbing\"\n                  [class.opacity-60]=\"!isVisible\">\n                  <!-- Drag Handle -->\n                  <z-icon\n                    cdkDragHandle\n                    zType=\"lucideGripVertical\"\n                    zSize=\"14\"\n                    class=\"text-muted-foreground shrink-0 cursor-grab active:cursor-grabbing\" />\n\n                  <!-- Visibility Checkbox -->\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isVisible\"\n                    (change)=\"onToggleColumnVisibility(columnId)\"\n                    (mousedown)=\"$event.stopPropagation()\"\n                    class=\"border-input h-4 w-4 shrink-0 cursor-pointer rounded\" />\n\n                  <!-- Column Name -->\n                  <span class=\"flex min-w-0 flex-1 flex-col\">\n                    <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                      {{ columnId | zTableColumnHeader: zConfig().columns }}\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\" (mousedown)=\"$event.stopPropagation()\">\n                      <button\n                        type=\"button\"\n                        [disabled]=\"!isVisible\"\n                        (click)=\"onToggleColumnPin(columnId, 'left')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                        title=\"Pin Left\">\n                        <z-icon zType=\"lucideArrowLeft\" zSize=\"12\" />\n                      </button>\n                      <button\n                        type=\"button\"\n                        [disabled]=\"!isVisible\"\n                        (click)=\"onToggleColumnPin(columnId, 'right')\"\n                        class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                        title=\"Pin Right\">\n                        <z-icon zType=\"lucideArrowRight\" zSize=\"12\" />\n                      </button>\n                    </div>\n                  }\n                </div>\n              }\n            }\n          }\n        </div>\n\n        <!-- Pinned Columns Section -->\n        @if (zConfig().enableColumnPinning) {\n          @if (pinnedColumnIds().length > 0) {\n            <div class=\"border-border mt-4 border-t pt-4\">\n              <h5 class=\"text-muted-foreground mb-2 text-xs font-medium\">\n                {{ 'i18n_z_ui_table_pinned_columns' | translate }}\n              </h5>\n              <div class=\"space-y-1.5\">\n                @for (columnId of pinnedColumnIds(); track columnId) {\n                  @let column = table.getColumn(columnId);\n                  @let isPinned = column?.getIsPinned();\n                  @let isVisible = columnVisibility()[columnId] !== false;\n                  <div\n                    class=\"border-border bg-muted/30 flex items-center gap-2 rounded border px-2 py-1.5 text-sm\"\n                    [class.opacity-60]=\"!isVisible\">\n                    <!-- Pin Icon -->\n                    <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"text-primary shrink-0\" />\n\n                    <!-- Visibility Checkbox -->\n                    <!-- 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                      {{\n                        isPinned === 'left'\n                          ? ('i18n_z_ui_table_left' | translate)\n                          : ('i18n_z_ui_table_right' | translate)\n                      }}\n                    </span>\n\n                    <!-- Unpin Button -->\n                    <button\n                      type=\"button\"\n                      (click)=\"onToggleColumnPin(columnId, isPinned === 'left' ? 'left' : 'right')\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground cursor-pointer rounded p-1 text-xs transition-colors\"\n                      title=\"Unpin\">\n                      <z-icon zType=\"lucideX\" zSize=\"12\" />\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        }\n      </div>\n    }\n  </div>\n</z-drawer>\n", styles: [":host{display:flex;flex-direction:column;height:100%;--scrollbar-track-thickness: 7px;--scrollbar-track-color: transparent;--scrollbar-thumb-shape: 3px}.z-table-container{display:flex;flex-direction:column;position:relative;width:100%;height:100%;overflow:hidden;border-radius:8px;border:thin solid var(--border);background-color:var(--card)}.z-table-container.z-hide-horizontal-border th,.z-table-container.z-hide-horizontal-border td{border-bottom:none!important;border-top:none!important}.z-table-container.z-hide-vertical-border th,.z-table-container.z-hide-vertical-border td{border-left:none!important}table{width:fit-content;min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:14px}.z-table-toolbar .z-settings-btn{transition:all .15s ease}.z-table-toolbar .z-settings-btn:hover{border-color:var(--muted-foreground)}.z-table-cell-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;-webkit-user-select:text;user-select:text}.z-thead-wrapper{flex-shrink:0;background:var(--muted);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.z-thead-wrapper::-webkit-scrollbar{display:none}.z-thead-wrapper th{height:auto;padding:8px 12px;text-align:left;vertical-align:middle;font-weight:500;color:var(--foreground);white-space:nowrap;overflow:hidden;background:var(--muted);border-left:thin solid var(--border);border-bottom:thin solid var(--border);-webkit-user-select:none;user-select:none}.z-thead-wrapper th.z-at-left-edge{border-left:none}.z-thead-wrapper th[colspan]{text-align:center;background:var(--muted);font-weight:500;color:var(--foreground)}.z-thead-wrapper.z-shadow-header{box-shadow:0 1px 3px #00000014;position:relative;z-index:15}.z-thead-wrapper.z-shadow-header:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d}.z-tbody-wrapper{flex:1;min-height:100px;display:flex;flex-direction:column}.z-tbody-scrollbar{flex:1;height:100%}.z-empty-state,.z-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:100px;height:100%;color:var(--muted-foreground);font-size:.875rem;animation:z-fade-in .2s ease-out}.z-skeleton-state{display:flex;flex-direction:column;min-height:200px;height:100%;padding:0;animation:z-fade-in .2s ease-out}.z-skeleton-state .z-skeleton-row{display:flex;align-items:center;padding:0 8px;border-bottom:thin solid var(--border);box-sizing:border-box}.z-skeleton-state .z-skeleton-row:last-child{border-bottom:none}.z-skeleton-state .z-skeleton-row z-skeleton{display:flex;align-items:center;width:100%;height:auto!important}.z-tbody-scrollbar,.z-tbody-scrollbar table{animation:z-fade-in .2s ease-out}@keyframes z-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.z-tbody-wrapper tr{transition:background-color .15s ease}.z-tbody-wrapper tr:hover,.z-tbody-wrapper tr:hover td[style*=sticky]{background-color:var(--muted)}.z-tbody-wrapper tr.z-pinned-top td.z-sticky-left,.z-tbody-wrapper tr.z-pinned-top td.z-sticky-right,.z-tbody-wrapper tr.z-pinned-bottom td.z-sticky-left,.z-tbody-wrapper tr.z-pinned-bottom td.z-sticky-right{z-index:3}.z-tbody-wrapper tr.z-shadow-bottom{box-shadow:0 1px 3px #00000014!important;position:relative;z-index:15}.z-tbody-wrapper tr.z-shadow-bottom:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d!important}.z-tbody-wrapper tr.z-shadow-top{box-shadow:0 -2px 4px #0000000d!important;position:relative;z-index:15}.z-tbody-wrapper tr.z-shadow-top:where(.dark,.dark *){box-shadow:0 -2px 4px #0003!important}.z-tbody-wrapper td{padding:8px 12px;height:40px;vertical-align:middle;color:var(--foreground);white-space:nowrap;overflow:hidden;background:var(--card);border-left:thin solid var(--border);border-bottom:thin solid var(--border);box-sizing:border-box}.z-tbody-wrapper tbody.z-has-vertical-scroll td.z-at-bottom,.z-tbody-wrapper tbody.z-last-row-touches-bottom td.z-at-bottom{border-bottom:none}.z-tbody-wrapper td.z-at-left-edge{border-left:none}.z-tbody-wrapper td i{color:var(--muted-foreground);font-style:italic}.z-tbody-wrapper td[rowspan]{vertical-align:top;padding-top:12px}.z-tbody-wrapper td.z-row-hover{background-color:var(--muted)!important}.z-tbody-wrapper td.z-col-select,.z-tbody-wrapper td.z-col-expand,.z-tbody-wrapper td.z-col-actions{padding:8px 4px!important;text-align:center}.z-tbody-wrapper tr.z-child-row td.z-col-select:first-child,.z-tbody-wrapper tr.z-child-row td.z-col-expand:first-child,.z-tbody-wrapper tr.z-child-row td.z-col-actions:first-child{padding-left:0!important}.z-virtual-scroll-inner{position:relative;width:100%}.z-virtual-row{position:absolute;top:0;left:0;width:100%}tr.z-child-row td:first-child{padding-left:12px!important}tbody tr.z-selected,tbody tr.z-selected td{background-color:color-mix(in srgb,var(--primary) 15%,transparent)!important}tbody tr.z-selected:hover,tbody tr.z-selected:hover td{background-color:color-mix(in srgb,var(--primary) 20%,transparent)!important}tbody tr.z-indeterminate-selected,tbody tr.z-indeterminate-selected td{background-color:color-mix(in srgb,var(--primary) 10%,transparent)!important}tbody tr.z-indeterminate-selected:hover,tbody tr.z-indeterminate-selected:hover td{background-color:color-mix(in srgb,var(--primary) 15%,transparent)!important}tbody tr.z-pinned-top td{background-color:var(--card)!important}tbody tr.z-pinned-top:hover{background-color:var(--muted)}tbody tr.z-pinned-top:hover td{background-color:var(--muted)!important}tbody tr.z-pinned-bottom td{background-color:var(--card)!important}tbody tr.z-pinned-bottom:hover{background-color:var(--muted)}tbody tr.z-pinned-bottom:hover td,tr.z-expanded-row td{background-color:var(--muted)!important}thead th{position:relative}thead th .z-resizer{position:absolute;right:0;top:0;height:100%;width:8px;background:transparent;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;z-index:5}thead th .z-resizer:after{content:\"\";position:absolute;right:0;top:0;height:100%;width:3px;background:#0000001a;opacity:0;transition:opacity .2s ease}thead th .z-resizer:after:where(.dark,.dark *){background:#ffffff1a}thead th .z-resizer:hover:after{opacity:1;background:var(--primary);width:3px}thead th .z-resizer.z-is-resizing:after{opacity:1;background:var(--primary);width:3px}thead th .z-resizer.z-resizer-left{right:auto;left:0}thead th .z-resizer.z-resizer-left:after{right:auto;left:0}.z-thead-wrapper th.z-sticky-left,.z-thead-wrapper th.z-sticky-right,.z-tbody-wrapper th.z-sticky-left,.z-tbody-wrapper th.z-sticky-right,.z-tfoot-wrapper th.z-sticky-left,.z-tfoot-wrapper th.z-sticky-right{background-color:var(--muted);z-index:1;transform:translateZ(0);backface-visibility:hidden}.z-thead-wrapper td.z-sticky-left,.z-thead-wrapper td.z-sticky-right,.z-tbody-wrapper td.z-sticky-left,.z-tbody-wrapper td.z-sticky-right,.z-tfoot-wrapper td.z-sticky-left,.z-tfoot-wrapper td.z-sticky-right{background-color:var(--card);z-index:1;transform:translateZ(0);backface-visibility:hidden}.z-thead-wrapper th.z-sticky-left-last,.z-thead-wrapper td.z-sticky-left-last,.z-tbody-wrapper th.z-sticky-left-last,.z-tbody-wrapper td.z-sticky-left-last,.z-tfoot-wrapper th.z-sticky-left-last,.z-tfoot-wrapper td.z-sticky-left-last{position:relative;overflow:visible}.z-thead-wrapper th.z-sticky-left-last:after,.z-thead-wrapper td.z-sticky-left-last:after,.z-tbody-wrapper th.z-sticky-left-last:after,.z-tbody-wrapper td.z-sticky-left-last:after,.z-tfoot-wrapper th.z-sticky-left-last:after,.z-tfoot-wrapper td.z-sticky-left-last:after{content:\"\";position:absolute;top:0;bottom:0;right:-30px;width:30px;pointer-events:none;box-shadow:inset 10px 0 8px -8px #0000001a;z-index:10;opacity:0;transition:opacity .2s ease}.z-thead-wrapper.z-scroll-left th.z-sticky-left-last:after,.z-thead-wrapper.z-scroll-left td.z-sticky-left-last:after,.z-tbody-wrapper.z-scroll-left th.z-sticky-left-last:after,.z-tbody-wrapper.z-scroll-left td.z-sticky-left-last:after,.z-tfoot-wrapper.z-scroll-left th.z-sticky-left-last:after,.z-tfoot-wrapper.z-scroll-left td.z-sticky-left-last:after{opacity:1}.z-thead-wrapper th.z-sticky-right-first,.z-thead-wrapper td.z-sticky-right-first,.z-tbody-wrapper th.z-sticky-right-first,.z-tbody-wrapper td.z-sticky-right-first,.z-tfoot-wrapper th.z-sticky-right-first,.z-tfoot-wrapper td.z-sticky-right-first{position:relative;overflow:visible}.z-thead-wrapper th.z-sticky-right-first:before,.z-thead-wrapper td.z-sticky-right-first:before,.z-tbody-wrapper th.z-sticky-right-first:before,.z-tbody-wrapper td.z-sticky-right-first:before,.z-tfoot-wrapper th.z-sticky-right-first:before,.z-tfoot-wrapper td.z-sticky-right-first:before{content:\"\";position:absolute;top:0;bottom:0;left:-30px;width:30px;pointer-events:none;box-shadow:inset -10px 0 8px -8px #0000001a;z-index:10;opacity:0;transition:opacity .2s ease}.z-thead-wrapper.z-scroll-right th.z-sticky-right-first,.z-thead-wrapper.z-scroll-right td.z-sticky-right-first,.z-tbody-wrapper.z-scroll-right th.z-sticky-right-first,.z-tbody-wrapper.z-scroll-right td.z-sticky-right-first,.z-tfoot-wrapper.z-scroll-right th.z-sticky-right-first,.z-tfoot-wrapper.z-scroll-right td.z-sticky-right-first{border-left:none}.z-thead-wrapper.z-scroll-right th.z-sticky-right-first:before,.z-thead-wrapper.z-scroll-right td.z-sticky-right-first:before,.z-tbody-wrapper.z-scroll-right th.z-sticky-right-first:before,.z-tbody-wrapper.z-scroll-right td.z-sticky-right-first:before,.z-tfoot-wrapper.z-scroll-right th.z-sticky-right-first:before,.z-tfoot-wrapper.z-scroll-right td.z-sticky-right-first:before{opacity:1}.z-thead-wrapper th.z-sticky-right-last,.z-tfoot-wrapper th.z-sticky-right-last{position:relative}.z-thead-wrapper th.z-sticky-right-last:after,.z-tfoot-wrapper th.z-sticky-right-last:after{content:\"\";position:absolute;top:0;bottom:0;right:-30px;width:30px;background:var(--muted);pointer-events:none}.z-tfoot-wrapper{flex-shrink:0;background:var(--muted);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.z-tfoot-wrapper::-webkit-scrollbar{display:none}.z-tfoot-wrapper th{height:auto;padding:8px 12px;text-align:left;vertical-align:middle;font-weight:500;font-size:12px;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.5px;background:var(--muted);border-left:thin solid var(--border);border-top:thin solid var(--border)}.z-tfoot-wrapper th.z-at-left-edge{border-left:none}.z-tfoot-wrapper.z-shadow-footer{box-shadow:0 -2px 4px #0000000d;position:relative;z-index:15}.z-tfoot-wrapper.z-shadow-footer:where(.dark,.dark *){box-shadow:0 -2px 4px #0003}.z-pin-btn{padding:2px 4px;border-radius:4px;color:var(--muted-foreground);transition:all .15s ease}.z-pin-btn:hover{background-color:var(--muted);color:var(--foreground)}.z-pin-btn.z-pin-btn-active{color:var(--primary);background-color:var(--primary)}.z-pin-btn.z-pin-btn-active:hover{background-color:var(--primary);opacity:.8}.z-row-pin-trigger{opacity:1}.z-row-pin-trigger.text-primary{color:var(--primary)}.z-header-pin-trigger{opacity:1}.z-header-pin-trigger.text-primary{color:var(--primary)}th{overflow:hidden}th .z-header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th .z-header-text-wrapper{transition:background-color .15s ease;border-radius:4px}th .z-header-text-wrapper.z-has-options:hover{background-color:color-mix(in srgb,var(--foreground) 8%,transparent)}th .z-header-text-wrapper.z-has-options:active{background-color:color-mix(in srgb,var(--foreground) 12%,transparent)}.cdk-drag-preview,.z-drag-preview{box-shadow:0 5px 20px #0003;border-radius:6px;background-color:var(--card);border:1px solid var(--primary);z-index:10000!important;pointer-events:none}.cdk-drag-preview:where(.dark,.dark *),.z-drag-preview:where(.dark,.dark *){box-shadow:0 5px 20px #00000080}.cdk-drag-placeholder{background-color:color-mix(in srgb,var(--primary) 10%,transparent);border:2px dashed var(--primary);border-radius:6px}.cdk-drag-animating{transition:transform .1s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder){transition:transform .1s cubic-bezier(0,0,.2,1)}.z-drag-item.cdk-drag-dragging{transition:none!important}.z-column-drop-list{min-height:50px}:host-context(.dark) .z-thead-wrapper.z-scroll-left th.z-sticky-left-last,:host-context(.dark) .z-thead-wrapper.z-scroll-left td.z-sticky-left-last,:host-context(.dark) .z-tbody-wrapper.z-scroll-left th.z-sticky-left-last,:host-context(.dark) .z-tbody-wrapper.z-scroll-left td.z-sticky-left-last,:host-context(.dark) .z-tfoot-wrapper.z-scroll-left th.z-sticky-left-last,:host-context(.dark) .z-tfoot-wrapper.z-scroll-left td.z-sticky-left-last{border-right:1px solid var(--border)}:host-context(.dark) .z-thead-wrapper.z-scroll-right th.z-sticky-right-first,:host-context(.dark) .z-thead-wrapper.z-scroll-right td.z-sticky-right-first,:host-context(.dark) .z-tbody-wrapper.z-scroll-right th.z-sticky-right-first,:host-context(.dark) .z-tbody-wrapper.z-scroll-right td.z-sticky-right-first,:host-context(.dark) .z-tfoot-wrapper.z-scroll-right th.z-sticky-right-first,:host-context(.dark) .z-tfoot-wrapper.z-scroll-right td.z-sticky-right-first{border-left:1px solid var(--border)}.z-table-settings-drawer input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:1rem;height:1rem;border:thin solid var(--input);border-radius:.25rem;background-color:var(--background);cursor:pointer;position:relative;transition:all .2s ease}.z-table-settings-drawer input[type=checkbox]:hover{border-color:var(--primary)}.z-table-settings-drawer input[type=checkbox]:checked{background-color:var(--primary);border-color:var(--primary)}.z-table-settings-drawer input[type=checkbox]:checked:after{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:.375rem;height:.625rem;border:solid var(--primary-foreground);border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.z-table-settings-drawer input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [], propDecorators: { zConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zConfig", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "zKey", required: false }] }], zChange: [{ type: i0.Output, args: ["zChange"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], theadWrapper: [{ type: i0.ViewChild, args: ['theadWrapper', { isSignal: true }] }], tbodyContainer: [{ type: i0.ViewChild, args: ['tbodyContainer', { isSignal: true }] }], tbodyWrapper: [{ type: i0.ViewChild, args: ['tbodyWrapper', { isSignal: true }] }], tbodyScrollbar: [{ type: i0.ViewChild, args: ['tbodyWrapper', { isSignal: true }] }], tfootWrapper: [{ type: i0.ViewChild, args: ['tfootWrapper', { isSignal: true }] }], expandedRowTemplate: [{ type: i0.ViewChild, args: ['expandedRowTemplate', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ZTableComponent, ZTableFilterComponent, ZTableIconTextComponent, columnConfigToColumnDef, findColumnConfig, getBodyConfig, getFooterConfig, getHeaderConfig, isBodyConfig, isFooterConfig, isHeaderConfig };
+export { ZTableActionsComponent, ZTableComponent, ZTableFilterComponent, ZTableIconTextComponent, columnConfigToColumnDef, findColumnConfig, getBodyConfig, getFooterConfig, getHeaderConfig, isBodyConfig, isFooterConfig, isHeaderConfig };
 //# sourceMappingURL=shival99-z-ui-components-z-table.mjs.map