@shival99/z-ui 2.6.7 → 2.6.9

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

@@ -3962,8 +3962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }], ctorParameters: () => [], propDecorators: { zTableDropTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "z-table-drop-target", required: true }] }], zTableDropTableId: [{ type: i0.Input, args: [{ isSignal: true, alias: "z-table-drop-table-id", required: true }] }], zTableDropItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "z-table-drop-item-id", required: true }] }], zTableDropDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "z-table-drop-disabled", required: false }] }], zTableDropped: [{ type: i0.Output, args: ["zTableDropped"] }] } });
 
 /**
- * EN: Applies row-hover class to hovered row cells and to spanning cells that cover that row.
- * VI: Áp class hover cho cell của row đang hover và cả các cell có rowSpan bao phủ row đó.
+ * Applies the hover class to row cells and spanning cells that cover the row.
  */
 class ZTableRowHoverDirective {
     zTableRowHover = input(null, /* @ts-ignore */
@@ -4073,8 +4072,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }], propDecorators: { zTableRowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTableRowHover", required: false }] }] } });
 
 /**
- * EN: Binds mouse/touch events to TanStack header resize handlers for column resizing.
- * VI: Gắn sự kiện mouse/touch vào resize handler của TanStack header để đổi kích thước cột.
+ * Binds mouse and touch events to TanStack header resize handlers.
  */
 class ZTableResizeDirective {
     zTableResize = input.required(/* @ts-ignore */
@@ -4124,8 +4122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }], propDecorators: { zTableResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTableResize", required: true }] }] } });
 
 /**
- * EN: Determines whether a body cell reaches the table bottom after applying rowSpan rules.
- * VI: Xác định cell body có chạm đáy bảng hay không sau khi áp dụng quy tắc rowSpan.
+ * Determines whether a body cell reaches the table bottom after applying rowSpan rules.
  */
 class ZTableCellBottomPipe {
     transform(cell, columns, allRows) {
@@ -4163,8 +4160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }] });
 
 /**
- * EN: Resolves whether click interaction is enabled for a body cell from column configuration.
- * VI: Xác định cell body có được phép click hay không dựa theo cấu hình cột.
+ * Resolves whether click interaction is enabled for a body cell from column configuration.
  */
 class ZTableCellClickablePipe {
     transform(columnId, columns) {
@@ -4190,8 +4186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }] });
 
 /**
- * EN: Maps body cell configuration into template-ready class/style/tooltip values.
- * VI: Ánh xạ cấu hình cell body thành giá trị class/style/tooltip để render template.
+ * Maps body cell configuration into template-ready class/style/tooltip values.
  */
 class ZTableCellConfigPipe {
     transform(cell, config, property) {
@@ -4262,8 +4257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }] });
 
 /**
- * EN: Normalizes edit settings for a cell and returns a consistent edit descriptor.
- * VI: Chuẩn hóa cấu hình edit của cell và trả về mô tả edit theo một format thống nhất.
+ * Normalizes edit settings for a cell and returns a consistent edit descriptor.
  */
 class ZTableCellEditPipe {
     transform(cell, columns) {
@@ -4432,8 +4426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }] });
 
 /**
- * EN: Checks whether a header/body item starts at the left edge in the ordered column list.
- * VI: Kiểm tra header/cell có nằm ở mép trái của danh sách cột đã sắp xếp hay không.
+ * Checks whether a header/body item starts at the left edge in the ordered column list.
  */
 class ZTableCellOffsetPipe {
     /**
@@ -4474,8 +4467,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }] });
 
 /**
- * EN: Detects pin-boundary states (last left, first right, last right) for header/footer cells.
- * VI: Xác định các mốc pin (cuối bên trái, đầu bên phải, cuối bên phải) cho cell header/footer.
+ * Detects pin-boundary states (last left, first right, last right) for header/footer cells.
  */
 class ZTableCellPinPipe {
     transform(item, property, columns, cellType = 'header', bodyCells) {
@@ -4647,8 +4639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }] });
 
 /**
- * EN: Decides whether header/footer/body cells should render when span and merge rules are applied.
- * VI: Quyết định header/footer/body có cần render hay không khi áp dụng quy tắc span và gộp ô.
+ * Decides whether header/footer/body cells should render when span and merge rules are applied.
  */
 class ZTableCellRenderPipe {
     transform(cellOrHeader, allCellsOrHeaders, columns, type, footerRowIndex = 0, footerGroups = []) {
@@ -4693,8 +4684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }] });
 
 /**
- * EN: Resolves per-cell visibility from static or callback-based body visibility config.
- * VI: Xác định độ hiển thị của từng cell từ cấu hình visible dạng static hoặc callback.
+ * Resolves per-cell visibility from static or callback-based body visibility config.
  */
 class ZTableCellVisiblePipe {
     transform(cell, columns) {
@@ -4727,14 +4717,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                 }]
         }] });
 
-const Z_TABLE_ALIGN_MAP = {
-    left: 'text-left',
-    center: 'text-center',
-    right: 'text-right',
-};
 /**
- * EN: Exposes header/footer/body-related column settings (class, style, tooltip, width, capabilities).
- * VI: Cung cấp cấu hình cột liên quan header/footer/body (class, style, tooltip, width, khả năng).
+ * Exposes header/footer/body-related column settings (class, style, tooltip, width, capabilities).
  */
 class ZTableColumnConfigPipe {
     transform(columnId, columns, property, footerRowIndex = 0) {
@@ -4755,9 +4739,9 @@ class ZTableColumnConfigPipe {
             case 'headerAlignClass': {
                 const headerConfig = getHeaderConfig(columnConfig);
                 if (headerConfig.align) {
-                    return Z_TABLE_ALIGN_MAP[headerConfig.align] || '';
+                    return Z_TABLE_BODY_ALIGN_MAP[headerConfig.align] || '';
                 }
-                return this._isCenteredHeaderColumn(columnId, columnConfig) ? Z_TABLE_ALIGN_MAP['center'] : '';
+                return this._isCenteredHeaderColumn(columnId, columnConfig) ? Z_TABLE_BODY_ALIGN_MAP['center'] : '';
             }
             case 'headerContentClass': {
                 const headerConfig = getHeaderConfig(columnConfig);
@@ -4789,7 +4773,7 @@ class ZTableColumnConfigPipe {
             }
             case 'footerAlignClass': {
                 const footerConfig = getFooterConfig(columnConfig, footerRowIndex);
-                return footerConfig.align ? Z_TABLE_ALIGN_MAP[footerConfig.align] || '' : '';
+                return footerConfig.align ? Z_TABLE_BODY_ALIGN_MAP[footerConfig.align] || '' : '';
             }
             case 'footerContentClass': {
                 const footerConfig = getFooterConfig(columnConfig, footerRowIndex);
@@ -4847,8 +4831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }] });
 
 /**
- * EN: Returns a plain-text header label for a column and removes icon syntax markers.
- * VI: Trả về nhãn header dạng text cho cột và loại bỏ cú pháp icon marker.
+ * Returns a plain-text header label for a column and removes icon syntax markers.
  */
 class ZTableColumnHeaderPipe {
     _zTranslateSvc = inject(ZTranslateService);
@@ -4876,8 +4859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }] });
 
 /**
- * EN: Builds the parent-column breadcrumb path for a nested column.
- * VI: Tạo đường dẫn breadcrumb các cột cha cho cột lồng nhau.
+ * Builds the parent-column breadcrumb path for a nested column.
  */
 class ZTableColumnParentsPipe {
     transform(columnId, columns) {
@@ -4921,8 +4903,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }] });
 
 /**
- * EN: Checks whether a footer group has at least one configured footer cell to render.
- * VI: Kiểm tra footer group có ít nhất một cell footer được cấu hình để render hay không.
+ * Checks whether a footer group has at least one configured footer cell to render.
  */
 class ZTableFooterContentPipe {
     transform(footerGroup, columns, footerRowIndex = 0) {
@@ -4971,8 +4952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }] });
 
 /**
- * EN: Detects whether a string content contains the table icon placeholder syntax.
- * VI: Kiểm tra nội dung chuỗi có chứa cú pháp placeholder icon của table hay không.
+ * Detects whether a string content contains the table icon placeholder syntax.
  */
 class ZTableHasIconPipe {
     transform(content) {
@@ -5173,8 +5153,8 @@ class ZTablePinningStylesPipe {
                 return 'right';
             }
         }
-        // Group có thể báo đang ghim khi chỉ một hậu duệ được ghim; fragment ở
-        // giữa vẫn phải dựa vào các leaf thực tế của fragment để quyết định sticky.
+        // A group can report as pinned when only one descendant is pinned; use the
+        // fragment's actual leaf columns to resolve sticky state.
         return undefined;
     }
     _leafHeaders(header) {
@@ -5382,8 +5362,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }] });
 
 /**
- * EN: Provides row-level pin metadata and sticky style offsets for top/bottom pinned rows.
- * VI: Cung cấp metadata pin theo row và offset style sticky cho các row pin top/bottom.
+ * Provides row pin metadata and sticky offsets for top and bottom pinned rows.
  */
 class ZTableRowPipe {
     transform(row, table, property, rowHeights, virtualRowHeight) {
@@ -5429,17 +5408,13 @@ class ZTableRowPipe {
         }
         const pinnedIndex = row.getPinnedIndex();
         const defaultHeight = virtualRowHeight + 2;
-        // EN: Stack each sticky row directly below the previous one using the EXACT (un-rounded) sum of
+        // Stack each sticky row directly below the previous one using the exact (un-rounded) sum of
         //     the measured heights above. Measured heights are fractional (e.g. 47.8px); rounding each
         //     one (or padding with +0.5px) pushed the offset past the real height and left a hairline
         //     gap between consecutive pinned rows, while overlapping by 1px swallowed the row's
         //     border-bottom. The exact float sum places row N right at the bottom of row N-1 — its
         //     border-bottom stays flush, no gap and no lost border.
         //     This path is non-virtual only; virtual scroll pins via .z-virtual-pinned-* CSS, not here.
-        // VI: Xếp mỗi sticky row ngay dưới row trước bằng TỔNG chiều cao thật (không làm tròn) của các
-        //     row phía trên. Làm tròn / cộng +0.5px làm offset dư → hở; còn chồng 1px lại nuốt mất
-        //     border-bottom. Dùng tổng float chính xác thì row N nằm khít đáy row N-1, border vẫn giữ,
-        //     không hở cũng không mất border.
         if (pinned === 'top') {
             let offset = 0;
             const topRows = table.getTopRows();
@@ -5490,8 +5465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }] });
 
 /**
- * EN: Computes rowSpan/colSpan and render visibility for body, header, and footer table cells.
- * VI: Tính rowSpan/colSpan và khả năng render cho cell body, header và footer của bảng.
+ * Computes rowSpan/colSpan and render visibility for body, header, and footer table cells.
  */
 class ZTableSpanPipe {
     transform(item, columns, property, allRowsOrFooterRowIndex, allHeadersOrCells) {
@@ -5548,8 +5522,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }] });
 
 /**
- * EN: Type guard pipe that checks if a value is an Angular TemplateRef.
- * VI: Pipe type guard để kiểm tra giá trị có phải là Angular TemplateRef hay không.
+ * Type guard pipe that checks if a value is an Angular TemplateRef.
  */
 class ZTableIsTemplateRefPipe {
     transform(value) {
@@ -5717,14 +5690,8 @@ class ZTableComponent {
     ...(ngDevMode ? [{ debugName: "cellSelectionAnchor" }] : /* istanbul ignore next */ []));
     cellSelectionFocus = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "cellSelectionFocus" }] : /* istanbul ignore next */ []));
-    // EN: Cell range-drag state. A pointerdown on a cell "arms" a drag; it only becomes a real drag
-    //     once the pointer genuinely MOVES (a document pointermove past a small threshold) with the
-    //     button held. pointerenter extends the range ONLY while `_isCellDragging` is true. Scrolling
-    //     (wheel / scrollbar / trackpad / keyboard) never fires pointermove over the body, so it can
-    //     never be mistaken for a range drag — fixes "scroll after selecting a cell selects a range".
-    // VI: Trạng thái kéo chọn range. pointerdown chỉ "lên nòng"; chỉ thành kéo thật khi con trỏ DI
-    //     CHUYỂN thật sự (pointermove vượt ngưỡng nhỏ) lúc giữ nút. pointerenter chỉ mở rộng range khi
-    //     đang kéo thật. Cuộn (wheel/scrollbar/trackpad) không bắn pointermove nên không bị nhầm.
+    // A pointerdown arms the drag; it becomes a range drag only after movement passes the threshold.
+    // Scrolling does not trigger this path, so selecting a cell and then scrolling stays safe.
     _cellDragArmed = false;
     _isCellDragging = false;
     _cellDragStart = null;
@@ -5739,7 +5706,7 @@ class ZTableComponent {
     ...(ngDevMode ? [{ debugName: "cellMenuControl" }] : /* istanbul ignore next */ []));
     contentRowClipboard = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "contentRowClipboard" }] : /* istanbul ignore next */ []));
-    // Giữ kích thước cột đã ổn định khi config được tạo lại trong lúc tải dữ liệu.
+    // Preserve column widths when the config is recreated during loading.
     columnSizingState = linkedSignal({ ...(ngDevMode ? { debugName: "columnSizingState" } : /* istanbul ignore next */ {}), source: () => this._columns(),
         computation: (cols, previous) => this._reconcileColumnSizing(cols, previous) });
     columnResizingState = signal({
@@ -5751,7 +5718,7 @@ class ZTableComponent {
         startSize: null,
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "columnResizingState" }] : /* istanbul ignore next */ []));
-    // Tách kích thước gốc khỏi phần chiều rộng được phân bổ thêm theo container.
+    // Keep base widths separate from the extra width distributed by the container.
     _columnBaseSizing = linkedSignal({ ...(ngDevMode ? { debugName: "_columnBaseSizing" } : /* istanbul ignore next */ {}), source: () => this._columns(),
         computation: (cols, previous) => this._reconcileColumnSizing(cols, previous) });
     appliedFilterChips = computed(() => {
@@ -5873,27 +5840,24 @@ class ZTableComponent {
     /** True when table has right-pinned columns and body isn't scrolled to the end */
     hasScrollRight = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasScrollRight" }] : /* istanbul ignore next */ []));
-    /** True khi top-pinned rows đang đè lên nội dung body đã scroll qua đầu */
+    /** True when top-pinned rows overlap body content that has scrolled underneath. */
     hasScrollTop = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasScrollTop" }] : /* istanbul ignore next */ []));
-    /** True khi bottom-pinned rows đang đè lên nội dung body còn scroll xuống được */
+    /** True when bottom-pinned rows overlap body content that can still scroll down. */
     hasScrollBottom = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasScrollBottom" }] : /* istanbul ignore next */ []));
     /**
-     * Group header (non-virtual) đang ghim ở mép dưới cùng của chồng sticky — chỉ mình nó đổ shadow.
-     * Nhiều header ghim chung một chỗ, mỗi cái một shadow thì alpha cộng dồn thành vệt đen đậm dần.
-     * Chỉ dùng cho shadow: class này bám theo scroll nên luôn trễ một frame, chấp nhận được với shadow
-     * nhưng không dùng được cho z-index (xem `tr.z-group-row-sticky`).
+     * ID of the lowest stuck non-virtual group header. Only this header receives a shadow.
+     * The value is for shadows only; it can lag scrolling by one frame and must not control z-index.
      */
     shadowGroupRowId = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "shadowGroupRowId" }] : /* istanbul ignore next */ []));
-    /** Chiều cao thật của group header row (non-virtual), dùng để xếp chồng sticky theo depth. */
+    /** Measured non-virtual group-row height used to stack sticky headers by depth. */
     _groupRowHeight = signal(Z_VIRTUAL_GROUP_HEADER_HEIGHT, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_groupRowHeight" }] : /* istanbul ignore next */ []));
     /**
-     * Tổng chiều cao khối pinned top rows (non-virtual), đo trực tiếp từ DOM sau mỗi render.
-     * Không dùng `pinnedRowHeights` vì signal đó chỉ refresh trong `_checkScrollState`, nên có thể
-     * còn giữ số đo cũ khi bảng vừa đổi cấu hình — sticky group header sẽ hở một khoảng vài px.
+     * Total height of non-virtual top-pinned rows, measured from the DOM after each render.
+     * This avoids stale values while table configuration changes.
      */
     _nonVirtualPinnedTopHeight = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_nonVirtualPinnedTopHeight" }] : /* istanbul ignore next */ []));
@@ -6025,7 +5989,7 @@ class ZTableComponent {
     ...(ngDevMode ? [{ debugName: "canUseContentRowInsert" }] : /* istanbul ignore next */ []));
     canUseRowSelection = computed(() => this.hasSelectColumn() && !this.hasContentEditableColumns(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "canUseRowSelection" }] : /* istanbul ignore next */ []));
-    // Tính năng select cell, copy cell, context menu cell, range select cell
+    // Cell selection, copy, context menu, and range-selection options.
     cellSelectionOptions = computed(() => {
         const config = this.zConfig().enableCellSelection;
         if (config === false || config === undefined) {
@@ -6396,7 +6360,7 @@ class ZTableComponent {
         };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "groupingConfig" }] : /* istanbul ignore next */ []));
-    /** EN/VI: true khi grouping chạy ở chế độ server (group meta do server cung cấp). */
+    /** True when grouping runs in server mode and group metadata comes from the server. */
     isServerGrouping = computed(() => {
         const config = this.groupingConfig();
         return config.enabled === true && config.mode === 'server' && this.zConfig().mode === 'server';
@@ -6410,16 +6374,15 @@ class ZTableComponent {
         if (this.hasBodyRowSpan()) {
             return false;
         }
-        // Server grouping: group do server cung cấp, table chỉ render.
+        // Server grouping: the server provides groups; the table only renders them.
         if (this.isServerGrouping()) {
             return true;
         }
-        // Local grouping: group ngay trên data của trang hiện tại (kể cả khi table mode='server',
-        // tức data lấy về theo page rồi group tại client — giống filter/sort local).
+        // Local grouping: group the current page data on the client, including server-paged data.
         return config.mode === 'local' || config.mode === undefined;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "canUseGrouping" }] : /* istanbul ignore next */ []));
-    /** EN/VI: cột group hiệu lực cho chế độ server (config cung cấp, không suy ra từ data). */
+    /** Effective grouping column for server mode, provided by configuration. */
     serverGroupColumnId = computed(() => {
         const config = this.groupingConfig();
         return config.serverGroupColumnId ?? config.columns?.[0] ?? null;
@@ -6507,7 +6470,7 @@ class ZTableComponent {
             : this._buildLocalGroupedItems(columnIds);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "groupedCenterRowItems" }] : /* istanbul ignore next */ []));
-    /** Local grouping: group được tính tại client từ rows của trang hiện tại. */
+    /** Builds groups on the client from rows on the current page. */
     _buildLocalGroupedItems(columnIds) {
         const items = [];
         this._appendLocalGroupedItems(items, this.table.getCenterRows(), columnIds, 0, '');
@@ -6559,15 +6522,15 @@ class ZTableComponent {
         }
     }
     /**
-     * Server grouping: thứ tự & meta group do `config.enableGrouping.serverGroups` quyết định.
-     * Child rows lấy từ `getCenterRows()` (data parent đã fetch) và gán vào group theo value.
+     * Server grouping uses the order and metadata from `serverGroups`.
+     * Fetched center rows are assigned to groups by their value.
      */
     _buildServerGroupedItems(columnId) {
         const serverGroups = this.groupingConfig().serverGroups ?? [];
         const toggledGroupIds = this.collapsedGroupIds();
         const defaultExpanded = this.groupingConfig().defaultExpanded !== false;
         const columnLabel = this._getColumnCopyHeader(columnId);
-        // Gom rows đã fetch theo groupId để gán vào đúng group meta.
+        // Bucket fetched rows by group ID before assigning them to group metadata.
         const rowsByGroupId = new Map();
         for (const row of this.table.getCenterRows()) {
             const groupId = this._getGroupId(columnId, this._getRowGroupValue(columnId, row));
@@ -6636,15 +6599,11 @@ class ZTableComponent {
         }, 0);
     }
     /**
-     * EN: Flat list of body rows in the exact order they are rendered. When grouping is active the
+     * Flat list of body rows in the exact order they are rendered. When grouping is active the
      *     center rows are re-ordered group-by-group, so the flat `table.getRowModel().rows` no longer
      *     matches the visual order. The `z-at-bottom` border logic must use this visual order, otherwise
      *     `border-bottom: none` is applied to whichever row happens to be last in the flat model — which
      *     after grouping lands somewhere in the middle of the table.
-     * VI: Danh sách phẳng các row body theo đúng thứ tự render. Khi đang group, center rows bị sắp xếp
-     *     lại theo từng group nên `table.getRowModel().rows` không còn khớp thứ tự hiển thị. Logic
-     *     border `z-at-bottom` phải dùng thứ tự hiển thị này, nếu không `border-bottom: none` sẽ bị gán
-     *     nhầm cho row đang nằm ở giữa bảng.
      */
     renderedBodyRows = computed(() => {
         const topRows = this.table.getTopRows();
@@ -6697,21 +6656,17 @@ class ZTableComponent {
         return items;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "virtualGroupedFlatItems" }] : /* istanbul ignore next */ []));
-    /** Sticky group header đang bật (config cho phép và đang thực sự group theo cột nào đó). */
+    /** True when sticky group headers are enabled and at least one grouping column is active. */
     isStickyGroupHeaderEnabled = computed(() => this.groupingConfig().stickyHeader === true && this.activeGroupingColumnIds().length > 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isStickyGroupHeaderEnabled" }] : /* istanbul ignore next */ []));
-    /** Flow layout: một transform cho cả khối thay vì mỗi row một cái. Sticky group header phải
-     * dùng absolute vì rangeExtractor làm tập render không liền mạch. */
+    /** Uses one transform for the virtual block; sticky group headers require absolute positioning. */
     usesFlowVirtualRows = computed(() => this.isVirtual() && !this.isStickyGroupHeaderEnabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "usesFlowVirtualRows" }] : /* istanbul ignore next */ []));
     virtualFlowOffset = computed(() => this.virtualizer.getVirtualItems()[0]?.start ?? 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "virtualFlowOffset" }] : /* istanbul ignore next */ []));
     /**
-     * `top` (px) của sticky group header theo depth ở chế độ non-virtual.
-     * Ở đây mọi group header đều là `<tr>` thật trong cùng một `<tbody>`, nên chỉ cần `position: sticky`:
-     * header sau (đứng sau trong DOM) tự đè lên header trước khi trôi tới rồi lộ lại khi cuộn ngược —
-     * không cần rangeExtractor như bên virtual (cơ chế đó chỉ để giữ row đã ra khỏi range).
-     * Header con xếp chồng ngay dưới header cha nên cộng thêm `depth * chiều cao group row`.
+     * Computes `top` offsets for non-virtual sticky group headers.
+     * Headers share one tbody, so native sticky positioning handles their stacking order.
      */
     stickyGroupTopByDepth = computed(() => {
         if (this.isVirtual() || !this.isStickyGroupHeaderEnabled()) {
@@ -6723,10 +6678,9 @@ class ZTableComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "stickyGroupTopByDepth" }] : /* istanbul ignore next */ []));
     /**
-     * Lookup phục vụ sticky group header trong virtual scroll:
-     * - `nearest[i]`: index group header gần nhất tại hoặc trước `i` (-1 nếu chưa có).
-     * - `parent`: index group header cha của một header (multi-level grouping), -1 nếu là cấp gốc.
-     * Trả `null` khi tắt sticky hoặc không ở chế độ virtual + grouping.
+     * Lookup data for sticky group headers in virtual scroll.
+     * `nearest[i]` points to the closest preceding header; `parent` stores each header's parent.
+     * Returns `null` when sticky grouping is inactive.
      */
     _stickyGroupHeaderMeta = computed(() => {
         if (this.groupingConfig().stickyHeader !== true) {
@@ -6756,7 +6710,7 @@ class ZTableComponent {
         return { nearest, parent };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_stickyGroupHeaderMeta" }] : /* istanbul ignore next */ []));
-    /** Chuỗi header (gốc → sâu nhất) cần ghim khi viewport bắt đầu tại `startIndex`. */
+    /** Builds the root-to-leaf header chain for a virtual viewport start index. */
     _buildStickyGroupChain(meta, startIndex) {
         const clampedIndex = Math.min(Math.max(startIndex, 0), meta.nearest.length - 1);
         const chain = [];
@@ -6768,11 +6722,7 @@ class ZTableComponent {
         return chain.reverse();
     }
     /**
-     * Trạng thái sticky group header theo virtual index:
-     * - `tops`: offset `top` (px) của từng header đang ghim; header cấp sâu hơn xếp chồng bên dưới
-     *   header cha nên cộng dồn chiều cao.
-     * - `shadowIndex`: header cuối chuỗi mang shadow (giống pinned row), -1 khi chưa có row nào
-     *   cuộn xuống dưới nó — lúc đó header vẫn ở đúng vị trí thật nên không cần shadow.
+     * Returns sticky header offsets and the header that should receive the shadow.
      */
     stickyGroupHeaderState = computed(() => {
         const empty = { tops: {}, shadowIndex: -1 };
@@ -6780,7 +6730,7 @@ class ZTableComponent {
         if (!meta) {
             return empty;
         }
-        // Đọc virtual items trước để virtualizer tính xong `range` của chu kỳ hiện tại.
+        // Read virtual items first so the virtualizer updates the current range.
         const virtualItems = this.virtualizer.getVirtualItems();
         const range = this.virtualizer.range();
         if (!range) {
@@ -7245,8 +7195,8 @@ class ZTableComponent {
         void this.columnVisibility();
         void this.columnPinning();
         if (!this.canUseVirtualColumns()) {
-            // Colgroup chỉ phát <col> cho cột đang hiển thị, nên colspan của group/expanded row
-            // cũng phải đếm theo cột hiển thị — nếu không, cột ẩn làm lệch chiều rộng body so với header.
+            // Colgroup contains visible columns only, so group and expanded-row colspan must use
+            // the visible count to keep body and header widths aligned.
             return this.orderedLeafColumns().filter(column => column.getIsVisible()).length;
         }
         let count = this.leftLeafColumns().length + this.virtualCenterColumns().length + this.rightLeafColumns().length;
@@ -7413,10 +7363,8 @@ class ZTableComponent {
     bottomRowsReversed = computed(() => [...this.table.getBottomRows()].reverse(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "bottomRowsReversed" }] : /* istanbul ignore next */ []));
     /**
-     * Id row ở hai biên của mỗi khối pinned, theo THỨ TỰ HIỂN THỊ (pinned bottom render ngược lại).
-     * Dùng signal thay cho `zTableRow` pipe: pipe là pure, chỉ chạy lại khi một tham số đổi reference.
-     * Khi ghim thêm/bớt row thì `row` và `table` giữ nguyên reference, nên row từng là biên vẫn giữ
-     * class cũ — pin bottom lộ rõ nhất vì shadow ở lại row cũ và row mới cũng có shadow.
+     * Tracks the first and last visible row IDs in each pinned block.
+     * Signals are used because the pure pipe does not rerun when pinning mutates existing references.
      */
     firstTopPinnedRowId = computed(() => this.table.getTopRows()[0]?.id ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "firstTopPinnedRowId" }] : /* istanbul ignore next */ []));
@@ -7978,8 +7926,7 @@ class ZTableComponent {
             initialOffset: virtualConfig.initialOffset ?? 0,
             useApplicationRefTick: false,
             ...pickDefined(virtualConfig, ['gap', 'isScrollingResetDelay', 'useScrollendEvent', 'getItemKey']),
-            // Sticky group header cần header đang ghim luôn nằm trong tập render, kể cả khi nó đã
-            // cuộn ra ngoài range tự nhiên — nên chèn cả chuỗi header cha vào range.
+            // Keep the stuck header and its parent chain in the render range even after they leave it.
             rangeExtractor: rangeExtractor || stickyGroupMeta
                 ? (range) => {
                     const baseIndexes = rangeExtractor ? rangeExtractor(range) : defaultRangeExtractor(range);
@@ -7996,12 +7943,8 @@ class ZTableComponent {
         };
     });
     /**
-     * Nhận diện group header đang ghim sau MỖI render, không chỉ khi scroll.
-     * Đổi virtual/non-virtual, đổi cột group hay pin/unpin row đều giữ nguyên scrollOffset nhưng dựng
-     * lại DOM và đổi đường sticky — nếu chỉ trông vào scroll handler thì header đang ghim sẽ thiếu
-     * class `z-group-row-stuck` cho tới lần cuộn kế tiếp, và bị data row đè trong khoảng đó.
-     * `_refreshStuckGroupRows` đọc `groupRowElements` + `stickyGroupTopByDepth` trước mọi early-return
-     * nên effect này tự chạy lại khi hai nguồn đó đổi (kể cả khi số đo tới muộn hơn một pass).
+     * Detects stuck group headers after every render, not only after scrolling.
+     * Layout and grouping changes can rebuild the DOM without changing scrollOffset.
      */
     _trackStuckGroupRows = afterRenderEffect({
         read: () => this._refreshStuckGroupRows(),
@@ -8012,8 +7955,7 @@ class ZTableComponent {
             const elements = this.virtualRowElements();
             const isDynamic = this.effectiveDynamicRowSizing();
             this._refreshStickyGroupMetrics();
-            // `_trackStuckGroupRows` chạy trước effect này trong cùng một phase nên nó thấy đường sticky
-            // của lần render trước. Hẹn thêm một lượt sau frame để đọc lại số đo vừa cập nhật ở trên.
+            // The tracking effect runs first, so refresh once more after the new measurements settle.
             this._scheduleStuckGroupRowsRefresh();
             if (!isDynamic) {
                 this._warnOnOverflowingFixedRows(elements);
@@ -8026,7 +7968,7 @@ class ZTableComponent {
         },
     });
     _stuckGroupRowsFrame = null;
-    /** Gom nhiều lần scroll trong cùng một frame — mỗi lần chạy đều đọc rect nên phải giới hạn tần suất. */
+    /** Coalesces stuck-row refreshes so DOM measurements run at most once per frame. */
     _scheduleStuckGroupRowsRefresh() {
         if (this._stuckGroupRowsFrame !== null) {
             return;
@@ -8044,17 +7986,14 @@ class ZTableComponent {
         this._stuckGroupRowsFrame = null;
     }
     /**
-     * Tìm group header (non-virtual) đang ghim ở mép dưới cùng của chồng sticky để trao shadow.
-     * Header đã ghim có `rect.top` đúng bằng đường sticky của depth đó; header chưa tới thì lớn hơn.
-     * Ưu tiên đường sticky thấp nhất (multi-level: header con), tie thì lấy cái sau cùng trong DOM vì
-     * đó là cái đang nằm trên khi nhiều header chồng nhau.
+     * Finds the lowest stuck non-virtual group header and assigns its shadow.
+     * Prefer the lowest sticky offset, then the last matching DOM element.
      */
     _refreshStuckGroupRows() {
         const groupRows = this.groupRowElements();
         const viewportEl = this._getTbodyViewportElement();
         const stickyTops = this.stickyGroupTopByDepth();
-        // Ở đỉnh bảng, header đầu tiên nằm sẵn đúng đường sticky nhưng chưa có row nào cuộn xuống dưới
-        // nó — chưa tính là đang ghim, nếu không sẽ đổ shadow ngay khi vừa mở bảng.
+        // At the top, the first header is already at its sticky offset but is not stuck yet.
         if (groupRows.length === 0 || !viewportEl || stickyTops.length === 0 || viewportEl.scrollTop <= 0.5) {
             this.shadowGroupRowId.set(null);
             return;
@@ -8081,13 +8020,13 @@ class ZTableComponent {
             this.shadowGroupRowId.set(shadowId);
         }
     }
-    /** Đo các mốc mà `stickyGroupTopByDepth` cần (non-virtual): chiều cao group row và khối pinned top. */
+    /** Measures the group-row and top-pinned heights used by non-virtual sticky offsets. */
     _refreshStickyGroupMetrics() {
         const groupRows = this.groupRowElements();
         if (groupRows.length === 0) {
             return;
         }
-        // Mọi group header dùng chung style nên chỉ cần đo row đầu tiên.
+        // All group headers share the same style, so the first row is sufficient.
         const measuredHeight = groupRows[0].nativeElement.getBoundingClientRect().height;
         if (measuredHeight > 0 && Math.abs(measuredHeight - this._groupRowHeight()) > 0.5) {
             this._groupRowHeight.set(measuredHeight);
@@ -8106,11 +8045,8 @@ class ZTableComponent {
     }
     _hasWarnedOverflowingFixedRows = false;
     /**
-     * Cảnh báo một lần mỗi bảng khi body row cao hơn `virtual.size`.
-     * CSS table layout coi `height` trên `<tr>`/`<td>` là min-height, nên nội dung cell không nén được
-     * (tag, button, nhiều dòng…) sẽ đẩy row vượt slot của virtualizer; row kế tiếp định vị tuyệt đối
-     * đúng theo `virtual.size` nên đè lên phần dôi ra — nhìn như mỗi row bị hụt mất vài px.
-     * Không tự sửa: chiều cao đúng phụ thuộc dữ liệu, chọn tăng `size` hay bật `dynamicSize` là của app.
+     * Warns once when a body row exceeds the fixed virtual size.
+     * CSS table layout treats row height as a minimum, so dense cell content can overflow its slot.
      */
     _warnOnOverflowingFixedRows(elements) {
         if (this._hasWarnedOverflowingFixedRows || elements.length === 0 || this.hasBodyRowSpan()) {
@@ -8119,7 +8055,7 @@ class ZTableComponent {
         const configuredHeight = this._virtualConfig().size ?? Z_DEFAULT_ROW_HEIGHT;
         for (const element of elements) {
             for (const row of element.nativeElement.querySelectorAll('tr')) {
-                // Group header có chiều cao riêng (Z_VIRTUAL_GROUP_HEADER_HEIGHT), không so với virtual.size.
+                // Group headers have their own height and are not compared with virtual.size.
                 if (row.classList.contains('z-group-row')) {
                     continue;
                 }
@@ -8135,8 +8071,7 @@ class ZTableComponent {
         }
     }
     _dynamicEstimateSampleCount = 0;
-    /** Averages the rows measured so far to estimate the ones not yet rendered.
-     * Tính lại theo bậc ~1.5x để tổng công việc là O(N) thay vì O(N²) khi cuộn hết danh sách dài. */
+    /** Averages measured rows and refreshes at roughly 1.5x sample growth to keep work O(N). */
     _refreshDynamicEstimate() {
         const sizeCache = this.virtualizer.itemSizeCache;
         const measuredCount = sizeCache.size;
@@ -8158,7 +8093,7 @@ class ZTableComponent {
             return;
         }
         // measure() rebuilds every offset, so never re-broadcast mid-scroll.
-        // `isScrolling` là signal — thiếu cặp ngoặc thì `!fn` luôn false và cả nhánh này thành code chết.
+        // `isScrolling` is a signal; call it before negating the value.
         if (Math.abs(nextEstimate - currentEstimate) >= 1 && !this.virtualizer.isScrolling()) {
             this._dynamicEstimateHeight = nextEstimate;
             this.virtualizer.measure();
@@ -8234,8 +8169,7 @@ class ZTableComponent {
                 this._bulkBarTimer = null;
             }, this._bulkBarExitDuration);
         });
-        // Gắn/gỡ overlay của bulk-action-bar theo bulkBarMounted — thay cho
-        // [cdkConnectedOverlayOpen]="bulkBarMounted()" của CDK cũ.
+        // Mount or remove the bulk-action-bar overlay from bulkBarMounted.
         effect(() => {
             const mounted = this.bulkBarMounted();
             if (mounted) {
@@ -9159,7 +9093,7 @@ class ZTableComponent {
         }
         this._setColumnSizingState(nextSizing);
     }
-    /** Cập nhật state sizing ngoài và atom của TanStack v9 đồng thời. */
+    /** Updates the external sizing state and TanStack's state together. */
     _setColumnSizingState(nextSizing) {
         this.columnSizingState.set(nextSizing);
         this.table.setOptions(previous => ({
@@ -9245,7 +9179,7 @@ class ZTableComponent {
         }
         const target = event.target;
         const viewport = this._getTbodyViewportElement() ?? target;
-        // Đồng bộ ngang buộc layout và invalidate style cả cây con — bỏ qua khi chỉ cuộn dọc.
+        // Sync horizontal scroll only when it changes; vertical scrolling does not need layout work.
         if (viewport.scrollLeft !== this._lastSyncedScrollLeft) {
             this._lastSyncedScrollLeft = viewport.scrollLeft;
             this._syncScrollLeft(viewport.scrollLeft);
@@ -9256,7 +9190,7 @@ class ZTableComponent {
         this._scheduleVirtualSpacerWidthRefresh();
         this._scheduleStuckGroupRowsRefresh();
     }
-    /** Chặn wheel trực tiếp trên header; header chỉ nhận scrollLeft từ body. */
+    /** Prevent direct header wheel scrolling; the body owns horizontal scroll. */
     onTheadWheel(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -9284,7 +9218,7 @@ class ZTableComponent {
     // ─── Sort / Pagination / Search Handlers ──────────────────────────────────
     /**
      * @deprecated Header sort now lives in the column filter popover.
-     * Giữ tạm để các consumer/template cũ còn compile trong giai đoạn chuyển đổi.
+     * Kept for compatibility with existing consumers and templates.
      */
     handleSort(event, handler) {
         event.preventDefault();
@@ -10787,8 +10721,8 @@ class ZTableComponent {
         if (!this.isServerGrouping()) {
             return;
         }
-        // Server grouping: báo parent biết group nào vừa expand để fetch child rows (giống filter/sort).
-        // defaultExpanded=true: có trong set = collapsed; defaultExpanded=false: có trong set = expanded.
+        // Notify the parent so server grouping can fetch child rows, like filter and sort changes.
+        // With defaultExpanded=true, membership means collapsed; otherwise it means expanded.
         const defaultExpanded = this.groupingConfig().defaultExpanded !== false;
         const isInSet = !wasToggled;
         const expanded = defaultExpanded ? !isInSet : isInSet;
@@ -11418,7 +11352,7 @@ class ZTableComponent {
         return result;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ZTableComponent, isStandalone: true, selector: "z-table", inputs: { zClass: { classPropertyName: "zClass", publicName: "zClass", isSignal: true, isRequired: false, transformFunction: null }, 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 }, zVariant: { classPropertyName: "zVariant", publicName: "zVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zChange: "zChange", zControl: "zControl" }, host: { classAttribute: "z-table block relative py-1" }, providers: [TranslatePipe, ZTableDragService], viewQueries: [{ propertyName: "theadWrapper", first: true, predicate: ["theadWrapper"], descendants: true, isSignal: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], 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 }, { propertyName: "virtualRowElements", predicate: ["virtualRow"], descendants: true, isSignal: true }, { propertyName: "groupRowElements", predicate: ["groupRow"], descendants: true, isSignal: true }, { propertyName: "bulkBarTemplateRef", first: true, predicate: ["bulkBarTemplate"], descendants: true, isSignal: true }], exportAs: ["zTable"], ngImport: i0, template: "<!-- Toolbar: Search & Settings -->\n@if (isSearchEnabled() || zConfig().enableSettings) {\n  <div class=\"z-table-toolbar mb-2 flex items-center justify-between gap-4\">\n    <!-- Search -->\n    @if (isSearchEnabled()) {\n      @let config = searchConfig();\n      <z-input\n        [class]=\"config?.width ?? 'w-64'\"\n        [zSize]=\"config?.size ?? 'sm'\"\n        [zPlaceholder]=\"config?.placeholder ?? 'i18n_z_ui_table_search' | translate\"\n        [zSearch]=\"true\"\n        [zDebounce]=\"config?.debounceTime ?? 300\"\n        (zOnSearch)=\"onSearchChange($event)\" />\n    } @else {\n      <div></div>\n    }\n\n    <!-- Settings Button -->\n    @if (zConfig().enableSettings) {\n      <z-button zType=\"outline\" zSize=\"sm\" zTypeIcon=\"lucideSettings\" (click)=\"openSettingsDrawer()\">\n        {{ 'i18n_z_ui_table_settings' | translate }}\n      </z-button>\n    }\n  </div>\n}\n\n@if (zConfig().enableFilterHeader && appliedFilterChips().length > 0) {\n  <div class=\"z-table-filter-header mb-2 flex min-w-0 items-center gap-2\">\n    <div class=\"flex min-w-0 flex-1 flex-wrap items-center gap-1.5\">\n      @for (chip of visibleAppliedFilterChips(); track chip.id) {\n        <span\n          class=\"border-border bg-muted/60 text-foreground inline-flex max-w-80 min-w-0 shrink-0 items-center gap-1 rounded-sm border px-2 py-1 text-[0.8125rem] shadow-xs\">\n          <span class=\"font-medium whitespace-nowrap\">{{ chip.label }}</span>\n          <span class=\"text-muted-foreground\">:</span>\n          <span class=\"truncate\" z-tooltip [zContent]=\"chip.value\" zTooltipTrigger=\"hover\" zTooltipPosition=\"top\">\n            {{ chip.value }}\n          </span>\n          <button\n            type=\"button\"\n            class=\"hover:bg-destructive/10 hover:text-destructive focus-visible:ring-ring -mr-1 inline-flex size-5 cursor-pointer items-center justify-center rounded-sm outline-none focus-visible:ring-2\"\n            [attr.aria-label]=\"'i18n_z_ui_table_filter_remove' | translate\"\n            (click)=\"clearAppliedFilterChip(chip)\">\n            <z-icon zType=\"lucideX\" zSize=\"12\" />\n          </button>\n        </span>\n      }\n      @if (hiddenAppliedFilterChipCount() > 0 && isFilterHeaderExpanded()) {\n        @for (chip of overflowAppliedFilterChips(); track chip.id) {\n          <span\n            class=\"z-table-filter-header-overflow-chip border-border bg-muted/60 text-foreground inline-flex max-w-80 min-w-0 shrink-0 items-center gap-1 rounded-sm border px-2 py-1 text-[0.8125rem] shadow-xs\"\n            [attr.aria-hidden]=\"!isFilterHeaderExpanded()\">\n            <span class=\"font-medium whitespace-nowrap\">{{ chip.label }}</span>\n            <span class=\"text-muted-foreground\">:</span>\n            <span class=\"truncate\" z-tooltip [zContent]=\"chip.value\" zTooltipTrigger=\"hover\" zTooltipPosition=\"top\">\n              {{ chip.value }}\n            </span>\n            <button\n              type=\"button\"\n              class=\"hover:bg-destructive/10 hover:text-destructive focus-visible:ring-ring -mr-1 inline-flex size-5 cursor-pointer items-center justify-center rounded-sm outline-none focus-visible:ring-2\"\n              [attr.aria-label]=\"'i18n_z_ui_table_filter_remove' | translate\"\n              (click)=\"clearAppliedFilterChip(chip)\">\n              <z-icon zType=\"lucideX\" zSize=\"12\" />\n            </button>\n          </span>\n        }\n      }\n      @if (hiddenAppliedFilterChipCount() > 0) {\n        <button\n          type=\"button\"\n          class=\"text-primary hover:bg-primary/10 focus-visible:ring-ring inline-flex h-7 cursor-pointer items-center rounded-sm px-2 text-xs font-medium outline-none focus-visible:ring-2\"\n          (click)=\"toggleFilterHeaderExpanded()\">\n          {{\n            isFilterHeaderExpanded()\n              ? ('i18n_z_ui_table_show_less' | translate)\n              : ('i18n_z_ui_table_show_more' | translate: { count: hiddenAppliedFilterChipCount() })\n          }}\n        </button>\n      }\n      <button\n        type=\"button\"\n        class=\"bg-destructive/10 text-destructive hover:bg-destructive/20 dark:bg-destructive/15 dark:text-destructive-foreground dark:hover:bg-destructive/25 focus-visible:ring-destructive inline-flex h-7 cursor-pointer items-center gap-1 rounded-sm px-2 text-xs font-medium shadow-xs outline-none focus-visible:ring-2\"\n        (click)=\"clearAppliedFilters()\">\n        <z-icon zType=\"lucideX\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_clear_filter' | translate }}</span>\n      </button>\n    </div>\n  </div>\n}\n\n<div\n  #tableContainer\n  [class]=\"classTable()\"\n  [ngStyle]=\"columnSizeVars()\"\n  [class.z-pinning-overflow]=\"!isPinnedLayoutWithinContainer()\"\n  [class.z-hide-horizontal-border]=\"!showHorizontalBorder()\"\n  [class.z-hide-vertical-border]=\"!showVerticalBorder()\"\n  [class.z-hide-pinned-top-border]=\"hasScrollTop()\"\n  [class.z-hide-pinned-bottom-border]=\"hasScrollBottom()\"\n  [style.width]=\"zConfig().width\"\n  [style.height]=\"zConfig().height\"\n  [style.max-height]=\"zConfig().maxHeight\"\n  [style.min-height]=\"zConfig().minHeight\"\n  [attr.tabindex]=\"canUseContentRowInsert() || canUseCellSelection() ? 0 : null\"\n  (keydown)=\"onContentTableKeydown($event)\">\n  @let isColumnPinningActive = isPinnedLayoutWithinContainer();\n  <ng-template #contentRowMenuContent>\n    <div class=\"flex min-w-36 flex-col gap-0.5 p-1\">\n      @if (contentRowMenu()?.columnId) {\n        <button\n          type=\"button\"\n          class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"copyContentCell()\">\n          <z-icon zType=\"lucideCopy\" zSize=\"12\" />\n          <span>{{ 'i18n_z_ui_table_copy_cell' | translate }}</span>\n        </button>\n        <div class=\"border-border my-0 border-t\"></div>\n      }\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none\"\n        (click)=\"copyContentRows()\">\n        <z-icon zType=\"lucideCopy\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_copy_row' | translate }}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none disabled:pointer-events-none disabled:opacity-40\"\n        [disabled]=\"contentRowClipboard().length === 0\"\n        (click)=\"pasteContentRows('below')\">\n        <z-icon zType=\"lucideClipboardPaste\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_paste_row_below' | translate }}</span>\n      </button>\n      <div class=\"border-border my-0 border-t\"></div>\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none disabled:pointer-events-none disabled:opacity-40\"\n        [disabled]=\"!canMoveContentRowUp()\"\n        (click)=\"moveContentRow('up')\">\n        <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_move_row_up' | translate }}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none disabled:pointer-events-none disabled:opacity-40\"\n        [disabled]=\"!canMoveContentRowDown()\"\n        (click)=\"moveContentRow('down')\">\n        <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_move_row_down' | translate }}</span>\n      </button>\n      <div class=\"border-border my-0 border-t\"></div>\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none\"\n        (click)=\"insertContentRow('above')\">\n        <z-icon zType=\"lucideArrowUpToLine\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_insert_row_above' | translate }}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none\"\n        (click)=\"insertContentRow('below')\">\n        <z-icon zType=\"lucideArrowDownToLine\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_insert_row_below' | translate }}</span>\n      </button>\n      <div class=\"border-border my-0 border-t\"></div>\n      <button\n        type=\"button\"\n        class=\"text-destructive hover:bg-destructive/10 focus:bg-destructive/10 flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none\"\n        (click)=\"deleteContentRows()\">\n        <z-icon zType=\"lucideTrash2\" zSize=\"12\" />\n        <span>\n          {{\n            contentRowDeleteCount() > 1\n              ? ('i18n_z_ui_table_delete_selected_rows' | translate)\n              : ('i18n_z_ui_table_delete_row' | translate)\n          }}\n        </span>\n      </button>\n    </div>\n  </ng-template>\n\n  <ng-template #cellMenuContent>\n    <div class=\"flex min-w-36 flex-col gap-0.5 p-1\">\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none disabled:pointer-events-none disabled:opacity-40\"\n        [disabled]=\"!canCopyCellMenuSelection()\"\n        (click)=\"copySelectedCells(false)\">\n        <z-icon zType=\"lucideCopy\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_copy_cell' | translate }}</span>\n      </button>\n      @if (cellSelectionOptions().copyWithHeaders) {\n        <button\n          type=\"button\"\n          class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none disabled:pointer-events-none disabled:opacity-40\"\n          [disabled]=\"!canCopyCellMenuSelection()\"\n          (click)=\"copySelectedCells(true)\">\n          <z-icon zType=\"lucideCopy\" zSize=\"12\" />\n          <span>{{ 'i18n_z_ui_table_copy_cell_with_headers' | translate }}</span>\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <div\n    class=\"pointer-events-none fixed size-px opacity-0\"\n    z-popover\n    [zPopoverContent]=\"contentRowMenuContent\"\n    zTrigger=\"manual\"\n    zPosition=\"bottom-left\"\n    zClass=\"z-table-content-row-menu\"\n    [zOffset]=\"0\"\n    [zManualClose]=\"true\"\n    [zScrollClose]=\"true\"\n    [style.left.px]=\"contentRowMenu()?.left ?? -9999\"\n    [style.top.px]=\"contentRowMenu()?.top ?? -9999\"\n    (zControl)=\"setContentRowMenuControl($event)\"\n    (zHide)=\"clearContentRowMenu()\"></div>\n\n  <div\n    class=\"pointer-events-none fixed size-px opacity-0\"\n    z-popover\n    [zPopoverContent]=\"cellMenuContent\"\n    zTrigger=\"manual\"\n    zPosition=\"bottom-left\"\n    zClass=\"z-table-cell-menu\"\n    [zOffset]=\"0\"\n    [zManualClose]=\"true\"\n    [zScrollClose]=\"true\"\n    [style.left.px]=\"cellMenu()?.left ?? -9999\"\n    [style.top.px]=\"cellMenu()?.top ?? -9999\"\n    (zControl)=\"setCellMenuControl($event)\"\n    (zHide)=\"clearCellMenu()\"></div>\n\n  <!-- Shared colgroup template -->\n  <ng-template #colGroupTpl>\n    <colgroup>\n      @if (canUseVirtualColumns()) {\n        @for (column of leftLeafColumns(); track column.id) {\n          @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n          <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n        @if (virtualLeftSpacerWidth() > 0) {\n          <col [style.width.px]=\"virtualRenderedLeftSpacerWidth()\" />\n        }\n        @for (column of virtualCenterColumns(); track column.id) {\n          @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n          <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n        @if (virtualRightSpacerWidth() > 0) {\n          <col [style.width.px]=\"virtualRenderedRightSpacerWidth()\" />\n        }\n        @for (column of rightLeafColumns(); track column.id) {\n          @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n          <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n      } @else {\n        @for (column of orderedLeafColumns(); track column.id) {\n          @if (column.getIsVisible()) {\n            @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n            <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n          }\n        }\n      }\n    </colgroup>\n  </ng-template>\n\n  <!-- Header table -->\n  <div\n    class=\"z-thead-wrapper\"\n    [class.z-shadow-header]=\"shouldHeaderShowShadow()\"\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\"\n    (wheel)=\"onTheadWheel($event)\"\n    #theadWrapper>\n    <table [style.width.px]=\"renderedTableWidth()\">\n      <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n      <thead>\n        @if (canUseVirtualColumns()) {\n          <tr>\n            @for (header of leftHeaderRow(); track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: leftHeaderRow() : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [ngStyle]=\"\n                    header.column\n                      | zTablePinningStyles\n                        : header\n                        : 'header'\n                        : table\n                        : zConfig().columns\n                        : columnResizing()\n                        : colDomWidthMap()\n                        : isColumnPinningActive\n                  \"\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]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isLeftPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-right]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isRightPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-left-last]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-right-first]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-right-last]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isLastRightPinned' : zConfig().columns)\n                  \"\n                  [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                  [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\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 === 'rowDrag') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                    </div>\n                  } @else if (header.column.id === 'select') {\n                    <div\n                      class=\"flex items-center\"\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                      <z-checkbox\n                        [zChecked]=\"canUseRowSelection() && table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"\n                          canUseRowSelection() && table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\n                        \"\n                        [zDisabled]=\"!canUseRowSelection()\"\n                        (zChange)=\"canUseRowSelection() && table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <div\n                      class=\"flex items-center\"\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                      <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-sm\">\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                    <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                      @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 ?? true;\n                      <ng-template #colOptionsPopoverContent>\n                        <div zHoverGlide zHoverGlideSelector=\".z-column-menu-item\" class=\"flex flex-col gap-1 py-1\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"14\" />\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                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"14\" />\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() !== 'start') {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"!pinAvailabilityMap()[header.column.id]?.left\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'end') {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"!pinAvailabilityMap()[header.column.id]?.right\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (\n                              header.column.getIsPinned() &&\n                              header.column.id !== 'expand' &&\n                              header.column.id !== actionColumnInfo()?.columnId\n                            ) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          @if (groupingHeaderMenuMap()[header.id]) {\n                            @let isActiveGroupingColumn = groupingColumnMap()[header.column.id];\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                            @if (!isActiveGroupingColumn) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"groupByColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideRows3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                                <span>{{ 'i18n_z_ui_table_group_by_column' | translate }}</span>\n                              </button>\n                            }\n                            @let groupMenuStateBoundary = isActiveGroupingColumn;\n                            @if (groupMenuStateBoundary) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"removeGroupingColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideUngroup\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_clear_grouping' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          <div class=\"border-border my-0.5 border-t\"></div>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"autosizeColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideChevronsLeftRight\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_autosize_column' | translate }}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"autosizeAllColumns(); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_autosize_all_columns' | translate }}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"resetColumns(); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideRotateCcw\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_reset_columns' | translate }}</span>\n                          </button>\n                          @if (hideableColumns().length > 0) {\n                            <button\n                              type=\"button\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"openSettingsDrawerFromColumnMenu(colOptionsPopover)\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                              <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span class=\"truncate\">\n                                {{ 'i18n_z_ui_table_choose_columns' | translate }}\n                              </span>\n                            </button>\n                          }\n                        </div>\n                      </ng-template>\n\n                      @let columnEnableHeaderMenu =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableHeaderMenu';\n                      @let hasColumnOptions =\n                        header.column.id !== 'actionRowPin' &&\n                        columnEnableHeaderMenu !== false &&\n                        (groupingHeaderMenuMap()[header.id] ||\n                          (header.column.getCanPin() && effectiveEnablePinning) ||\n                          effectiveEnableOrdering ||\n                          hideableColumns().length > 0);\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded-sm 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                        zClass=\"rounded-(--radius-sm) overflow-hidden\"\n                        [zOffset]=\"5\"\n                        (zOutsideClick)=\"hideColumnPopoversOnOutsideClick(colOptionsPopover)\"\n                        (mousedown)=\"$event.preventDefault()\"\n                        [attr.tabindex]=\"hasColumnOptions ? 0 : null\"\n                        [attr.role]=\"hasColumnOptions ? 'button' : null\"\n                        [attr.aria-haspopup]=\"hasColumnOptions ? 'menu' : null\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              class=\"z-template-content\"\n                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\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                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\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                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        @if (hasColumnOptions) {\n                          <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                        }\n                      </div>\n                      @if ((header.column.getCanSort() && !hasBodyRowSpan()) || header.column.getCanFilter()) {\n                        <z-table-filter\n                          [zColumn]=\"$any(header.column)\"\n                          [zTable]=\"$any(table)\"\n                          [zResetVersion]=\"filterResetVersion()\"\n                          [zSortingState]=\"sorting()\"\n                          [zEnableMultiSort]=\"zConfig().enableMultiSort ?? true\" />\n                      }\n                    </div>\n                  }\n                  @if (header.column.getCanResize() && zConfig().enableColumnResizing !== false) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"header.column.getIsPinned() === 'end' || header.column.getIsLastColumn()\"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n            @if (virtualLeftSpacerWidth() > 0) {\n              <th\n                class=\"z-virtual-column-spacer z-virtual-header-spacer z-virtual-left-spacer pointer-events-none p-0\"\n                [style.width.px]=\"virtualRenderedLeftSpacerWidth()\"></th>\n            }\n            @for (header of virtualCenterHeaderRow(); track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: virtualCenterHeaderRow() : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\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-col-drag]=\"header.column.id === 'rowDrag'\"\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 === 'rowDrag') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                    </div>\n                  } @else if (header.column.id === 'select') {\n                    <div\n                      class=\"flex items-center\"\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                      <z-checkbox\n                        [zChecked]=\"canUseRowSelection() && table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"\n                          canUseRowSelection() && table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\n                        \"\n                        [zDisabled]=\"!canUseRowSelection()\"\n                        (zChange)=\"canUseRowSelection() && table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <div\n                      class=\"flex items-center\"\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                      <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-sm\">\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                    <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                      @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 ?? true;\n                      <ng-template #colOptionsPopoverContent>\n                        <div zHoverGlide zHoverGlideSelector=\".z-column-menu-item\" class=\"flex flex-col gap-1 py-1\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"14\" />\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                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"14\" />\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() !== 'start') {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"!pinAvailabilityMap()[header.column.id]?.left\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'end') {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"!pinAvailabilityMap()[header.column.id]?.right\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (\n                              header.column.getIsPinned() &&\n                              header.column.id !== 'expand' &&\n                              header.column.id !== actionColumnInfo()?.columnId\n                            ) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          @if (groupingHeaderMenuMap()[header.id]) {\n                            @let isActiveGroupingColumn = groupingColumnMap()[header.column.id];\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                            @if (!isActiveGroupingColumn) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"groupByColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideRows3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                                <span>{{ 'i18n_z_ui_table_group_by_column' | translate }}</span>\n                              </button>\n                            }\n                            @let groupMenuStateBoundary = isActiveGroupingColumn;\n                            @if (groupMenuStateBoundary) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"removeGroupingColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideUngroup\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_clear_grouping' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          <div class=\"border-border my-0.5 border-t\"></div>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"autosizeColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideChevronsLeftRight\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_autosize_column' | translate }}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"autosizeAllColumns(); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_autosize_all_columns' | translate }}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"resetColumns(); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideRotateCcw\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_reset_columns' | translate }}</span>\n                          </button>\n                          @if (hideableColumns().length > 0) {\n                            <button\n                              type=\"button\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"openSettingsDrawerFromColumnMenu(colOptionsPopover)\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                              <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span class=\"truncate\">\n                                {{ 'i18n_z_ui_table_choose_columns' | translate }}\n                              </span>\n                            </button>\n                          }\n                        </div>\n                      </ng-template>\n\n                      @let columnEnableHeaderMenu =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableHeaderMenu';\n                      @let hasColumnOptions =\n                        header.column.id !== 'actionRowPin' &&\n                        columnEnableHeaderMenu !== false &&\n                        (groupingHeaderMenuMap()[header.id] ||\n                          (header.column.getCanPin() && effectiveEnablePinning) ||\n                          effectiveEnableOrdering ||\n                          hideableColumns().length > 0);\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded-sm 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                        zClass=\"rounded-(--radius-sm) overflow-hidden\"\n                        [zOffset]=\"5\"\n                        (zOutsideClick)=\"hideColumnPopoversOnOutsideClick(colOptionsPopover)\"\n                        (mousedown)=\"$event.preventDefault()\"\n                        [attr.tabindex]=\"hasColumnOptions ? 0 : null\"\n                        [attr.role]=\"hasColumnOptions ? 'button' : null\"\n                        [attr.aria-haspopup]=\"hasColumnOptions ? 'menu' : null\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              class=\"z-template-content\"\n                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\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                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\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                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        @if (hasColumnOptions) {\n                          <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                        }\n                      </div>\n                      @if ((header.column.getCanSort() && !hasBodyRowSpan()) || header.column.getCanFilter()) {\n                        <z-table-filter\n                          [zColumn]=\"$any(header.column)\"\n                          [zTable]=\"$any(table)\"\n                          [zResetVersion]=\"filterResetVersion()\"\n                          [zSortingState]=\"sorting()\"\n                          [zEnableMultiSort]=\"zConfig().enableMultiSort ?? true\" />\n                      }\n                    </div>\n                  }\n                  @if (header.column.getCanResize() && zConfig().enableColumnResizing !== false) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"header.column.getIsPinned() === 'end' || header.column.getIsLastColumn()\"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n            @if (virtualRightSpacerWidth() > 0) {\n              <th\n                class=\"z-virtual-column-spacer z-virtual-header-spacer z-virtual-right-spacer pointer-events-none p-0\"\n                [style.width.px]=\"virtualRenderedRightSpacerWidth()\"></th>\n            }\n            @for (header of rightHeaderRow(); track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: rightHeaderRow() : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [ngStyle]=\"\n                    header.column\n                      | zTablePinningStyles\n                        : header\n                        : 'header'\n                        : table\n                        : zConfig().columns\n                        : columnResizing()\n                        : colDomWidthMap()\n                        : isColumnPinningActive\n                  \"\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]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isLeftPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-right]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isRightPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-left-last]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-right-first]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-right-last]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isLastRightPinned' : zConfig().columns)\n                  \"\n                  [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                  [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\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 === 'rowDrag') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                    </div>\n                  } @else if (header.column.id === 'select') {\n                    <!-- Header Checkbox -->\n                    <div\n                      class=\"flex items-center\"\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                      <z-checkbox\n                        [zChecked]=\"canUseRowSelection() && table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"\n                          canUseRowSelection() && table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\n                        \"\n                        [zDisabled]=\"!canUseRowSelection()\"\n                        (zChange)=\"canUseRowSelection() && table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <!-- Expand All Button -->\n                    <div\n                      class=\"flex items-center\"\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                      <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-sm\">\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 ?? true;\n                      <ng-template #colOptionsPopoverContent>\n                        <div zHoverGlide zHoverGlideSelector=\".z-column-menu-item\" class=\"flex flex-col gap-1 py-1\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"14\" />\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                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"14\" />\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() !== 'start') {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"!pinAvailabilityMap()[header.column.id]?.left\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'end') {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"!pinAvailabilityMap()[header.column.id]?.right\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (\n                              header.column.getIsPinned() &&\n                              header.column.id !== 'expand' &&\n                              header.column.id !== actionColumnInfo()?.columnId\n                            ) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          @if (groupingHeaderMenuMap()[header.id]) {\n                            @let isActiveGroupingColumn = groupingColumnMap()[header.column.id];\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                            @if (!isActiveGroupingColumn) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"groupByColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideRows3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                                <span>{{ 'i18n_z_ui_table_group_by_column' | translate }}</span>\n                              </button>\n                            }\n                            @let groupMenuStateBoundary = isActiveGroupingColumn;\n                            @if (groupMenuStateBoundary) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"removeGroupingColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideUngroup\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_clear_grouping' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          <div class=\"border-border my-0.5 border-t\"></div>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"autosizeColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideChevronsLeftRight\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_autosize_column' | translate }}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"autosizeAllColumns(); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_autosize_all_columns' | translate }}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"resetColumns(); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideRotateCcw\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_reset_columns' | translate }}</span>\n                          </button>\n                          @if (hideableColumns().length > 0) {\n                            <button\n                              type=\"button\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"openSettingsDrawerFromColumnMenu(colOptionsPopover)\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                              <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span class=\"truncate\">\n                                {{ 'i18n_z_ui_table_choose_columns' | translate }}\n                              </span>\n                            </button>\n                          }\n                        </div>\n                      </ng-template>\n\n                      @let columnEnableHeaderMenu =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableHeaderMenu';\n                      @let hasColumnOptions =\n                        header.column.id !== 'actionRowPin' &&\n                        columnEnableHeaderMenu !== false &&\n                        (groupingHeaderMenuMap()[header.id] ||\n                          (header.column.getCanPin() && effectiveEnablePinning) ||\n                          effectiveEnableOrdering ||\n                          hideableColumns().length > 0);\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded-sm 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                        zClass=\"rounded-(--radius-sm) overflow-hidden\"\n                        [zOffset]=\"5\"\n                        (zOutsideClick)=\"hideColumnPopoversOnOutsideClick(colOptionsPopover)\"\n                        (mousedown)=\"$event.preventDefault()\"\n                        [attr.tabindex]=\"hasColumnOptions ? 0 : null\"\n                        [attr.role]=\"hasColumnOptions ? 'button' : null\"\n                        [attr.aria-haspopup]=\"hasColumnOptions ? 'menu' : null\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              class=\"z-template-content\"\n                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\n                              [ngStyle]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\">\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                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\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                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\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 zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                        }\n                      </div>\n                      <!-- Sort Icon (outside wrapper, no hover background) -->\n                      @if ((header.column.getCanSort() && !hasBodyRowSpan()) || header.column.getCanFilter()) {\n                        <z-table-filter\n                          [zColumn]=\"$any(header.column)\"\n                          [zTable]=\"$any(table)\"\n                          [zResetVersion]=\"filterResetVersion()\"\n                          [zSortingState]=\"sorting()\"\n                          [zEnableMultiSort]=\"zConfig().enableMultiSort ?? true\" />\n                      }\n                    </div>\n                  }\n                  <!-- Column Resizer -->\n                  @if (header.column.getCanResize() && zConfig().enableColumnResizing !== false) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"header.column.getIsPinned() === 'end' || header.column.getIsLastColumn()\"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n          </tr>\n        } @else {\n          @for (headerGroup of orderedHeaderGroups(); track headerGroup.id) {\n            <tr>\n              @for (header of headerGroup.headers; track header.id) {\n                @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n                @let shouldRender = header | zTableCellRender: headerGroup.headers : zConfig().columns : 'header';\n                @if (rowSpan && shouldRender) {\n                  <th\n                    [attr.id]=\"header.column.id\"\n                    [ngStyle]=\"\n                      header.column\n                        | zTablePinningStyles\n                          : header\n                          : 'header'\n                          : table\n                          : zConfig().columns\n                          : columnResizing()\n                          : colDomWidthMap()\n                          : isColumnPinningActive\n                    \"\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]=\"\n                      isColumnPinningActive && (header | zTableCellPin: 'isLeftPinned' : zConfig().columns)\n                    \"\n                    [class.z-sticky-right]=\"\n                      isColumnPinningActive && (header | zTableCellPin: 'isRightPinned' : zConfig().columns)\n                    \"\n                    [class.z-sticky-left-last]=\"\n                      isColumnPinningActive && (header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns)\n                    \"\n                    [class.z-sticky-right-first]=\"\n                      isColumnPinningActive && (header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns)\n                    \"\n                    [class.z-sticky-right-last]=\"\n                      isColumnPinningActive && (header | zTableCellPin: 'isLastRightPinned' : zConfig().columns)\n                    \"\n                    [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                    [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\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]=\"\n                      header | zTableSpan: zConfig().columns : 'headerColSpan' : undefined : headerGroup.headers\n                    \">\n                    @if (header.column.id === 'rowDrag') {\n                      <div class=\"flex items-center justify-center\">\n                        <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                      </div>\n                    } @else if (header.column.id === 'select') {\n                      <div\n                        class=\"flex items-center\"\n                        [class.justify-center]=\"\n                          (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                          'text-center'\n                        \"\n                        [class.justify-end]=\"\n                          (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                          'text-right'\n                        \">\n                        <z-checkbox\n                          [zChecked]=\"canUseRowSelection() && table.getIsAllRowsSelected()\"\n                          [zIndeterminate]=\"\n                            canUseRowSelection() && table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\n                          \"\n                          [zDisabled]=\"!canUseRowSelection()\"\n                          (zChange)=\"canUseRowSelection() && table.toggleAllRowsSelected()\" />\n                      </div>\n                    } @else if (header.column.id === 'expand') {\n                      <div\n                        class=\"flex items-center\"\n                        [class.justify-center]=\"\n                          (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                          'text-center'\n                        \"\n                        [class.justify-end]=\"\n                          (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                          'text-right'\n                        \">\n                        <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-sm\">\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                      <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') ===\n                          'text-right'\n                        \">\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 ?? true;\n                        <ng-template #colOptionsPopoverContent>\n                          <div zHoverGlide zHoverGlideSelector=\".z-column-menu-item\" class=\"flex flex-col gap-1 py-1\">\n                            @if (effectiveEnableOrdering) {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucideArrowLeft\" zSize=\"15\" />\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                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucideArrowRight\" zSize=\"15\" />\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() !== 'start') {\n                                <button\n                                  type=\"button\"\n                                  [disabled]=\"!pinAvailabilityMap()[header.column.id]?.left\"\n                                  (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                  (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                  class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                  <z-icon zType=\"lucidePin\" zSize=\"15\" class=\"rotate-90\" />\n                                  <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                                </button>\n                              }\n                              @if (header.column.getIsPinned() !== 'end') {\n                                <button\n                                  type=\"button\"\n                                  [disabled]=\"!pinAvailabilityMap()[header.column.id]?.right\"\n                                  (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                  (click)=\"\n                                    handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\n                                  \"\n                                  class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                  <z-icon zType=\"lucidePin\" zSize=\"15\" class=\"-rotate-90\" />\n                                  <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                                </button>\n                              }\n                              @if (\n                                header.column.getIsPinned() &&\n                                header.column.id !== 'expand' &&\n                                header.column.id !== actionColumnInfo()?.columnId\n                              ) {\n                                <button\n                                  type=\"button\"\n                                  (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                  (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                  class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                  <z-icon zType=\"lucideX\" zSize=\"15\" />\n                                  <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                </button>\n                              }\n                            }\n                            @if (groupingHeaderMenuMap()[header.id]) {\n                              @let isActiveGroupingColumn = groupingColumnMap()[header.column.id];\n                              <div class=\"border-border my-0.5 border-t\"></div>\n                              @if (!isActiveGroupingColumn) {\n                                <button\n                                  type=\"button\"\n                                  (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                  (click)=\"groupByColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                  class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                  <z-icon zType=\"lucideRows3\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                                  <span>{{ 'i18n_z_ui_table_group_by_column' | translate }}</span>\n                                </button>\n                              }\n                              @let groupMenuStateBoundary = isActiveGroupingColumn;\n                              @if (groupMenuStateBoundary) {\n                                <button\n                                  type=\"button\"\n                                  (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                  (click)=\"removeGroupingColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                  class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                  <z-icon zType=\"lucideUngroup\" zSize=\"15\" />\n                                  <span>{{ 'i18n_z_ui_table_clear_grouping' | translate }}</span>\n                                </button>\n                              }\n                            }\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                            <button\n                              type=\"button\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"autosizeColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                              <z-icon\n                                zType=\"lucideChevronsLeftRight\"\n                                zSize=\"14\"\n                                class=\"text-muted-foreground shrink-0\" />\n                              <span>{{ 'i18n_z_ui_table_autosize_column' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"autosizeAllColumns(); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                              <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span>{{ 'i18n_z_ui_table_autosize_all_columns' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"resetColumns(); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                              <z-icon zType=\"lucideRotateCcw\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span>{{ 'i18n_z_ui_table_reset_columns' | translate }}</span>\n                            </button>\n                            @if (hideableColumns().length > 0) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"openSettingsDrawerFromColumnMenu(colOptionsPopover)\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                                <span class=\"truncate\">\n                                  {{ 'i18n_z_ui_table_choose_columns' | translate }}\n                                </span>\n                              </button>\n                            }\n                          </div>\n                        </ng-template>\n\n                        @let columnEnableHeaderMenu =\n                          header.column.id | zTableColumnConfig: zConfig().columns : 'enableHeaderMenu';\n                        @let hasColumnOptions =\n                          header.column.id !== 'actionRowPin' &&\n                          columnEnableHeaderMenu !== false &&\n                          (groupingHeaderMenuMap()[header.id] ||\n                            (header.column.getCanPin() && effectiveEnablePinning) ||\n                            effectiveEnableOrdering ||\n                            hideableColumns().length > 0);\n                        <div\n                          class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded-sm 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                          zClass=\"rounded-(--radius-sm) overflow-hidden\"\n                          [zOffset]=\"5\"\n                          (zOutsideClick)=\"hideColumnPopoversOnOutsideClick(colOptionsPopover)\"\n                          (mousedown)=\"$event.preventDefault()\"\n                          [attr.tabindex]=\"hasColumnOptions ? 0 : null\"\n                          [attr.role]=\"hasColumnOptions ? 'button' : null\"\n                          [attr.aria-haspopup]=\"hasColumnOptions ? 'menu' : null\">\n                          <ng-container\n                            *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                            @if (headerContent | zTableIsTemplateRef) {\n                              <div\n                                class=\"z-template-content\"\n                                [class]=\"\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                                [class]=\"\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                                [class]=\"\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                          @if (hasColumnOptions) {\n                            <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                          }\n                        </div>\n                        @if ((header.column.getCanSort() && !hasBodyRowSpan()) || header.column.getCanFilter()) {\n                          <z-table-filter\n                            [zColumn]=\"$any(header.column)\"\n                            [zTable]=\"$any(table)\"\n                            [zResetVersion]=\"filterResetVersion()\"\n                            [zSortingState]=\"sorting()\"\n                            [zEnableMultiSort]=\"zConfig().enableMultiSort ?? true\" />\n                        }\n                      </div>\n                    }\n                    @if (header.column.getCanResize() && zConfig().enableColumnResizing !== false) {\n                      <div\n                        class=\"z-resizer\"\n                        [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                        [class.z-resizer-left]=\"\n                          header.column.getIsPinned() === 'end' || header.column.getIsLastColumn()\n                        \"\n                        (dblclick)=\"header.column.resetSize()\"\n                        [zTableResize]=\"header\"></div>\n                    }\n                  </th>\n                }\n              }\n            </tr>\n          }\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 (isLoading() || isProcessing()) {\n      <!-- Loading State -->\n      @if (zConfig().useSkeleton) {\n        <!-- Skeleton Loading -->\n        <div class=\"animate-in fade-in flex h-full flex-col duration-200\">\n          @for (i of skeletonRows(); track $index; let last = $last) {\n            <div\n              class=\"border-border box-border flex flex-1 flex-col items-start justify-center gap-1.5 px-2\"\n              [class.border-b]=\"!last\">\n              <z-skeleton zType=\"bar\" zWidth=\"100%\" zHeight=\"22px\" />\n              <z-skeleton zType=\"bar\" zWidth=\"50%\" zHeight=\"14px\" />\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 (scroll)=\"onTbodyScroll($event)\">\n        @if (isVirtual()) {\n          <!-- Virtual Scroll Mode -->\n\n          <div\n            class=\"z-virtual-scroll-inner\"\n            [style.height.px]=\"virtualizer.getTotalSize()\"\n            [style.min-width.px]=\"table.getTotalSize()\">\n            <!-- Pinned rows v\u00E0 center rows d\u00F9ng chung m\u1ED9t virtual canvas. -->\n            @if (virtualPinnedTopRows().length > 0) {\n              <div class=\"z-virtual-pinned-top\" [style.min-width.px]=\"table.getTotalSize()\">\n                @for (row of virtualPinnedTopRows(); track row.id) {\n                  <ng-container *ngTemplateOutlet=\"virtualPinnedRowTpl; context: { $implicit: row }\" />\n                }\n              </div>\n            }\n\n            @if (usesFlowVirtualRows()) {\n              <div\n                class=\"z-virtual-flow\"\n                [style.transform]=\"'translate3d(0,' + virtualFlowOffset() + 'px,0)'\"\n                [style.min-width.px]=\"table.getTotalSize()\">\n                <ng-container *ngTemplateOutlet=\"virtualRowsTpl\" />\n              </div>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"virtualRowsTpl\" />\n            }\n\n            <ng-template #virtualRowsTpl>\n              @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n                @let groupRows = dynamicGroupRows()[virtualItem.index] || [];\n                @let virtualFlatItem = virtualGroupedFlatItems()[virtualItem.index];\n                @let stickyGroupState = stickyGroupHeaderState();\n                @let stickyGroupTop = stickyGroupState.tops[virtualItem.index];\n                @let isStickyGroupHeader = stickyGroupTop !== undefined;\n                <div\n                  #virtualRow\n                  class=\"z-virtual-row\"\n                  [class.z-virtual-row-flow]=\"usesFlowVirtualRows()\"\n                  [class.z-virtual-row-fixed]=\"!effectiveDynamicRowSizing()\"\n                  [class.z-virtual-row-group-header]=\"virtualFlatItem?.type === 'group-header'\"\n                  [class.z-virtual-row-sticky-group]=\"isStickyGroupHeader\"\n                  [class.z-virtual-row-sticky-group-shadow]=\"stickyGroupState.shadowIndex === virtualItem.index\"\n                  [style.top.px]=\"stickyGroupTop\"\n                  z-table-draggable=\"row\"\n                  z-table-drop-target=\"row\"\n                  [z-table-drag-table-id]=\"dragInstanceId\"\n                  [z-table-drop-table-id]=\"dragInstanceId\"\n                  [z-table-drag-item-id]=\"groupRows.length > 0 ? groupRows[0].id : ''\"\n                  [z-table-drop-item-id]=\"groupRows.length > 0 ? groupRows[0].id : ''\"\n                  [z-table-drag-disabled]=\"!isVirtualRowDragEnabled() || groupRows.length !== 1\"\n                  [z-table-drop-disabled]=\"!isVirtualRowDragEnabled() || groupRows.length !== 1\"\n                  (zTableDropped)=\"_handleDragDrop($event)\"\n                  [attr.data-index]=\"virtualItem.index\"\n                  [style.height.px]=\"\n                    effectiveDynamicRowSizing()\n                      ? null\n                      : (dynamicGroupHeights()[virtualItem.index] ?? groupSize() * virtualRowHeight()) + 1\n                  \"\n                  [style.transform]=\"\n                    usesFlowVirtualRows() || isStickyGroupHeader ? null : 'translate3d(0,' + virtualItem.start + 'px,0)'\n                  \">\n                  <table [style.width.px]=\"renderedTableWidth()\">\n                    <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n                    <tbody\n                      [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n                      [class.z-has-bottom-pinned]=\"table.getBottomRows().length > 0\"\n                      [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n                      @let groupHeaderItem = _getVirtualGroupHeader(virtualFlatItem);\n                      @if (groupHeaderItem) {\n                        <tr\n                          class=\"z-group-row\"\n                          [class.z-group-row-has-totals]=\"groupHeaderItem.totals\"\n                          [class.z-group-row-expanded]=\"groupHeaderItem.expanded\"\n                          [attr.data-group-id]=\"groupHeaderItem.id\"\n                          [attr.data-group-depth]=\"groupHeaderItem.depth\">\n                          @if (groupHeaderItem.totals) {\n                            @let totalColumnMap = groupTotalColumnMap();\n                            @for (column of orderedLeafColumns(); track column.id; let isFirstGroupCell = $first) {\n                              <td\n                                [class.z-group-row-label-cell]=\"isFirstGroupCell\"\n                                [class.z-group-row-total-cell]=\"!isFirstGroupCell && totalColumnMap[column.id]\"\n                                [attr.data-column-id]=\"column.id\">\n                                @if (isFirstGroupCell) {\n                                  <div class=\"z-group-row-sticky-wrapper\">\n                                    <button\n                                      type=\"button\"\n                                      class=\"z-group-row-trigger\"\n                                      [style.padding-left.rem]=\"0.75 + groupHeaderItem.depth * 0.75\"\n                                      [attr.aria-expanded]=\"groupHeaderItem.expanded\"\n                                      (click)=\"toggleGroupRow(groupHeaderItem.id)\">\n                                      <z-icon\n                                        zType=\"lucideChevronRight\"\n                                        zSize=\"14\"\n                                        class=\"transition-transform duration-200\"\n                                        [class.rotate-90]=\"groupHeaderItem.expanded\" />\n                                      <span\n                                        class=\"z-group-row-label\"\n                                        z-tooltip\n                                        [zContent]=\"\n                                          (groupHeaderItem.columnLabel ? groupHeaderItem.columnLabel + ': ' : '') +\n                                          groupHeaderItem.label\n                                        \">\n                                        @if (groupHeaderItem.columnLabel) {\n                                          <span class=\"z-group-row-column-label\">\n                                            {{ groupHeaderItem.columnLabel }}:\n                                          </span>\n                                        }\n                                        {{ groupHeaderItem.label }}\n                                      </span>\n                                      @if (groupingConfig().showCount !== false) {\n                                        <span class=\"z-group-row-count\">{{ groupHeaderItem.count }}</span>\n                                      }\n                                      @if (groupHeaderItem.loading) {\n                                        <z-loading class=\"z-group-row-loading\" [zLoading]=\"true\" zSize=\"xs\" />\n                                      }\n                                    </button>\n                                    @if (!isServerGrouping()) {\n                                      <button\n                                        type=\"button\"\n                                        z-button\n                                        zType=\"ghost\"\n                                        zSize=\"sm\"\n                                        zTypeIcon=\"lucideX\"\n                                        [zWave]=\"false\"\n                                        z-tooltip\n                                        zSizeIcon=\"14\"\n                                        [zContent]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                                        [attr.aria-label]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                                        [zAlwaysShow]=\"true\"\n                                        zTooltipPosition=\"top\"\n                                        class=\"z-group-row-remove\"\n                                        (click)=\"removeGroupingColumn(groupHeaderItem.columnId)\"></button>\n                                    }\n                                  </div>\n                                }\n                                @if (!isFirstGroupCell && totalColumnMap[column.id]) {\n                                  @let totalConfig = groupTotalConfigMap()[column.id];\n                                  @let totalTooltip = totalConfig.tooltip;\n                                  @let totalPopover = totalConfig.popover;\n                                  @let totalPopoverContent = totalPopover | zTablePopoverConfig: 'content';\n                                  <ng-template #groupTotalPopoverTpl>\n                                    @if (totalPopoverContent | zTableIsTemplateRef) {\n                                      <ng-container *ngTemplateOutlet=\"$any(totalPopoverContent)\" />\n                                    }\n                                    @if (!(totalPopoverContent | zTableIsTemplateRef)) {\n                                      <div [innerHTML]=\"$any(totalPopoverContent) | zSafeHtml\"></div>\n                                    }\n                                  </ng-template>\n                                  <span\n                                    class=\"z-group-row-total\"\n                                    z-tooltip\n                                    z-popover\n                                    [class]=\"totalConfig.class\"\n                                    [zContent]=\"\n                                      $any(\n                                        (totalTooltip | zTableTooltipConfig: 'content') ||\n                                          groupHeaderItem.totals[column.id]\n                                      )\n                                    \"\n                                    [zTooltipPosition]=\"$any(totalTooltip | zTableTooltipConfig: 'position')\"\n                                    [zTooltipTrigger]=\"$any(totalTooltip | zTableTooltipConfig: 'trigger')\"\n                                    [zTooltipType]=\"$any(totalTooltip | zTableTooltipConfig: 'type')\"\n                                    [zTooltipSize]=\"$any(totalTooltip | zTableTooltipConfig: 'size')\"\n                                    [zTooltipClass]=\"$any(totalTooltip | zTableTooltipConfig: 'class')\"\n                                    [zTooltipShowDelay]=\"$any(totalTooltip | zTableTooltipConfig: 'showDelay')\"\n                                    [zTooltipHideDelay]=\"$any(totalTooltip | zTableTooltipConfig: 'hideDelay')\"\n                                    [zTooltipArrow]=\"$any(totalTooltip | zTableTooltipConfig: 'arrow')\"\n                                    [zTooltipOffset]=\"$any(totalTooltip | zTableTooltipConfig: 'offset')\"\n                                    [zAutoDetect]=\"$any(totalTooltip | zTableTooltipConfig: 'autoDetect')\"\n                                    [zAlwaysShow]=\"$any(totalTooltip | zTableTooltipConfig: 'alwaysShow')\"\n                                    [zMaxWidth]=\"$any(totalTooltip | zTableTooltipConfig: 'maxWidth')\"\n                                    [zPopoverContent]=\"totalPopoverContent ? groupTotalPopoverTpl : null\"\n                                    [zPosition]=\"$any(totalPopover | zTablePopoverConfig: 'position')\"\n                                    [zPopoverTrigger]=\"$any(totalPopover | zTablePopoverConfig: 'trigger')\"\n                                    [zClass]=\"$any(totalPopover | zTablePopoverConfig: 'class')\"\n                                    [zShowDelay]=\"$any(totalPopover | zTablePopoverConfig: 'showDelay')\"\n                                    [zHideDelay]=\"$any(totalPopover | zTablePopoverConfig: 'hideDelay')\"\n                                    [zDisabled]=\"$any(totalPopover | zTablePopoverConfig: 'disabled')\"\n                                    [zOffset]=\"$any(totalPopover | zTablePopoverConfig: 'offset')\"\n                                    [zPopoverWidth]=\"$any(totalPopover | zTablePopoverConfig: 'width')\"\n                                    [zManualClose]=\"$any(totalPopover | zTablePopoverConfig: 'manualClose')\"\n                                    [zOutsideClickClose]=\"$any(totalPopover | zTablePopoverConfig: 'outsideClickClose')\"\n                                    [zScrollClose]=\"$any(totalPopover | zTablePopoverConfig: 'scrollClose')\"\n                                    [zSticky]=\"$any(totalPopover | zTablePopoverConfig: 'sticky')\"\n                                    [zShowArrow]=\"$any(totalPopover | zTablePopoverConfig: 'showArrow')\"\n                                    [zKeyboardSafe]=\"$any(totalPopover | zTablePopoverConfig: 'keyboardSafe')\">\n                                    {{ groupHeaderItem.totals[column.id] }}\n                                  </span>\n                                }\n                              </td>\n                            }\n                          } @else {\n                            <td [attr.colspan]=\"renderedColumnCount()\">\n                              <div class=\"z-group-row-sticky-wrapper\">\n                                <button\n                                  type=\"button\"\n                                  class=\"z-group-row-trigger\"\n                                  [style.padding-left.rem]=\"0.75 + groupHeaderItem.depth * 0.75\"\n                                  [attr.aria-expanded]=\"groupHeaderItem.expanded\"\n                                  (click)=\"toggleGroupRow(groupHeaderItem.id)\">\n                                  <z-icon\n                                    zType=\"lucideChevronRight\"\n                                    zSize=\"14\"\n                                    class=\"transition-transform duration-200\"\n                                    [class.rotate-90]=\"groupHeaderItem.expanded\" />\n                                  <span\n                                    class=\"z-group-row-label\"\n                                    z-tooltip\n                                    [zContent]=\"\n                                      (groupHeaderItem.columnLabel ? groupHeaderItem.columnLabel + ': ' : '') +\n                                      groupHeaderItem.label\n                                    \">\n                                    @if (groupHeaderItem.columnLabel) {\n                                      <span class=\"z-group-row-column-label\">{{ groupHeaderItem.columnLabel }}:</span>\n                                    }\n                                    {{ groupHeaderItem.label }}\n                                  </span>\n                                  @if (groupingConfig().showCount !== false) {\n                                    <span class=\"z-group-row-count\">{{ groupHeaderItem.count }}</span>\n                                  }\n                                  @if (groupHeaderItem.loading) {\n                                    <z-loading class=\"z-group-row-loading\" [zLoading]=\"true\" zSize=\"xs\" />\n                                  }\n                                </button>\n                                @if (!isServerGrouping()) {\n                                  <button\n                                    type=\"button\"\n                                    z-button\n                                    zType=\"ghost\"\n                                    zSize=\"sm\"\n                                    zTypeIcon=\"lucideX\"\n                                    [zWave]=\"false\"\n                                    z-tooltip\n                                    zSizeIcon=\"14\"\n                                    [zContent]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                                    [attr.aria-label]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                                    [zAlwaysShow]=\"true\"\n                                    zTooltipPosition=\"top\"\n                                    class=\"z-group-row-remove\"\n                                    (click)=\"removeGroupingColumn(groupHeaderItem.columnId)\"></button>\n                                }\n                              </div>\n                            </td>\n                          }\n                        </tr>\n                      }\n                      @for (row of groupRows; track row.id) {\n                        @let virtualGroupDepth = _getVirtualGroupDepth(virtualFlatItem);\n                        @let visibleCells = row.getVisibleCells();\n                        @let rowSelected = canUseRowSelection() && row.getIsSelected();\n                        @let rowSomeSelected = canUseRowSelection() && row.getIsSomeSelected();\n                        @let rowPinned = row.getIsPinned();\n                        <tr\n                          z-table-row-hover\n                          [attr.data-row-id]=\"row.id\"\n                          [class]=\"row | zTableRowConfig: zConfig() : 'rowClass'\"\n                          [style]=\"row | zTableRowConfig: zConfig() : 'rowStyle'\"\n                          [style.height.px]=\"effectiveDynamicRowSizing() ? null : virtualRowHeight()\"\n                          [style.min-height.px]=\"effectiveDynamicRowSizing() ? virtualRowHeight() : null\"\n                          [style.--z-row-height]=\"effectiveDynamicRowSizing() ? 'auto' : virtualRowHeight() + 'px'\"\n                          [class.z-child-row]=\"row.depth > 0\"\n                          [class.z-group-child-row]=\"_isVirtualGroupChild(virtualFlatItem)\"\n                          [style.--z-group-content-indent]=\"\n                            virtualGroupDepth > 0 ? 1.75 + (virtualGroupDepth - 1) * 0.75 + 'rem' : null\n                          \"\n                          [class.z-selected]=\"rowSelected\"\n                          [class.z-indeterminate-selected]=\"rowSomeSelected && !rowSelected\"\n                          [class.z-context-menu-active]=\"contentRowMenu()?.row?.id === row.id\"\n                          [class.z-pinned-top]=\"rowPinned === 'top'\"\n                          [class.z-pinned-top-first]=\"rowPinned === 'top' && row.id === firstTopPinnedRowId()\"\n                          [class.z-pinned-bottom]=\"rowPinned === 'bottom'\"\n                          [class.z-pinned-bottom-last]=\"rowPinned === 'bottom' && row.id === lastBottomPinnedRowId()\"\n                          [class.z-pinned-bottom-first]=\"rowPinned === 'bottom' && row.id === firstBottomPinnedRowId()\"\n                          [class.z-shadow-bottom]=\"\n                            showHeaderFooterShadow() &&\n                            hasScrollTop() &&\n                            rowPinned === 'top' &&\n                            row.id === lastTopPinnedRowId() &&\n                            !isStickyGroupHeaderEnabled()\n                          \"\n                          [class.z-shadow-top]=\"\n                            showHeaderFooterShadow() &&\n                            hasScrollBottom() &&\n                            rowPinned === 'bottom' &&\n                            row.id === firstBottomPinnedRowId()\n                          \"\n                          (contextmenu)=\"openContentRowMenu($event, row)\">\n                          @for (cell of visibleCells; track cell.id) {\n                            @let cellPinned = cell.column.getIsPinned();\n                            @if (\n                              canUseVirtualColumns() &&\n                              virtualLeftSpacerWidth() > 0 &&\n                              cell.column.id === firstVirtualCenterColumnId()\n                            ) {\n                              <td\n                                class=\"z-virtual-column-spacer pointer-events-none p-0\"\n                                [style.width.px]=\"virtualRenderedLeftSpacerWidth()\"></td>\n                            }\n                            @let shouldRenderRowSpan =\n                              cell | zTableSpan: zConfig().columns : 'shouldRender' : bodyRowSpanRows();\n                            @let shouldRenderColSpan =\n                              cell | zTableCellRender: visibleCells : zConfig().columns : 'body';\n                            @let isVirtualColumnVisible =\n                              !canUseVirtualColumns() ||\n                              cellPinned !== false ||\n                              virtualCenterColumnVisibilityMap()[cell.column.id];\n                            @if (shouldRenderRowSpan && shouldRenderColSpan && isVirtualColumnVisible) {\n                              @let cellSelectionId = row.id + '::' + cell.column.id;\n                              <td\n                                [attr.data-column-id]=\"cell.column.id\"\n                                [ngStyle]=\"\n                                  cell.column\n                                    | zTablePinningStyles\n                                      : cell\n                                      : 'body'\n                                      : visibleCells\n                                      : zConfig().columns\n                                      : columnResizing()\n                                      : colDomWidthMap()\n                                      : isColumnPinningActive\n                                      : bodyRowSpanRows()\n                                \"\n                                [class]=\"cell | zTableCellConfig: zConfig() : 'cellClass'\"\n                                [class.z-sticky-left]=\"isColumnPinningActive && cellPinned === 'start'\"\n                                [class.z-sticky-right]=\"isColumnPinningActive && cellPinned === 'end'\"\n                                [class.z-sticky-left-last]=\"\n                                  isColumnPinningActive &&\n                                  cellPinned === 'start' &&\n                                  (cell | zTableCellPin: 'isLastLeftPinned' : zConfig().columns : 'body' : visibleCells)\n                                \"\n                                [class.z-sticky-right-first]=\"\n                                  isColumnPinningActive &&\n                                  cellPinned === 'end' &&\n                                  (cell\n                                    | zTableCellPin: 'isFirstRightPinned' : zConfig().columns : 'body' : visibleCells)\n                                \"\n                                [class.z-sticky-right-last]=\"\n                                  isColumnPinningActive &&\n                                  cellPinned === 'end' &&\n                                  (cell\n                                    | zTableCellPin: 'isLastRightPinned' : zConfig().columns : 'body' : visibleCells)\n                                \"\n                                [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                                [class.z-col-drag]=\"cell.column.id === 'rowDrag'\"\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-cell-selectable]=\"canUseCellSelection()\"\n                                [class.z-cell-active]=\"\n                                  !hasMultipleSelectedCells() &&\n                                  activeCell()?.rowId === row.id &&\n                                  activeCell()?.columnId === cell.column.id\n                                \"\n                                [class.z-cell-range-selected]=\"visualSelectedCellIds().has(cellSelectionId)\"\n                                [class.z-cell-range-top]=\"selectedCellEdgeIds().top.has(cellSelectionId)\"\n                                [class.z-cell-range-right]=\"selectedCellEdgeIds().right.has(cellSelectionId)\"\n                                [class.z-cell-range-bottom]=\"selectedCellEdgeIds().bottom.has(cellSelectionId)\"\n                                [class.z-cell-range-left]=\"selectedCellEdgeIds().left.has(cellSelectionId)\"\n                                [class.z-content-edit-active]=\"\n                                  activeContentEditCell()?.rowId === row.id &&\n                                  activeContentEditCell()?.columnId === cell.column.id\n                                \"\n                                [class.z-at-bottom]=\"cell | zTableCellBottom: zConfig().columns : renderedBodyRows()\"\n                                [attr.rowspan]=\"\n                                  cell | zTableSpan: zConfig().columns : 'cellRowSpan' : bodyRowSpanRows()\n                                \"\n                                [attr.colspan]=\"\n                                  cell | zTableSpan: zConfig().columns : 'cellColSpan' : undefined : visibleCells\n                                \"\n                                [style]=\"cell | zTableCellConfig: zConfig() : 'cellStyle'\"\n                                [style.--z-cell-range-top]=\"\n                                  (selectedCellRangeInsets().get(cellSelectionId)?.top ?? 0) + '%'\n                                \"\n                                [style.--z-cell-range-right]=\"\n                                  (selectedCellRangeInsets().get(cellSelectionId)?.right ?? 0) + '%'\n                                \"\n                                [style.--z-cell-range-bottom]=\"\n                                  (selectedCellRangeInsets().get(cellSelectionId)?.bottom ?? 0) + '%'\n                                \"\n                                [style.--z-cell-range-left]=\"\n                                  (selectedCellRangeInsets().get(cellSelectionId)?.left ?? 0) + '%'\n                                \"\n                                (pointerdown)=\"onCellPointerDown($event, row, cell.column.id)\"\n                                (pointerenter)=\"onCellPointerEnter($event, row, cell.column.id)\"\n                                (contextmenu)=\"openCellMenu($event, row, cell.column.id)\">\n                                @if (cell.column.id === 'rowDrag') {\n                                  <div class=\"flex items-center justify-center\">\n                                    <button\n                                      data-z-table-drag-handle\n                                      type=\"button\"\n                                      class=\"text-muted-foreground inline-flex size-7 items-center justify-center rounded-md\"\n                                      [class.cursor-grab]=\"isRowDragEnabled()\"\n                                      [class.opacity-40]=\"!isRowDragEnabled()\">\n                                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" />\n                                    </button>\n                                  </div>\n                                } @else if (cell.column.id === 'select') {\n                                  <!-- Row Checkbox -->\n                                  <div class=\"flex items-center justify-center\">\n                                    <z-checkbox\n                                      [zChecked]=\"canUseRowSelection() && cell.row.getIsSelected()\"\n                                      [zIndeterminate]=\"\n                                        canUseRowSelection() &&\n                                        cell.row.getIsSomeSelected() &&\n                                        !cell.row.getIsSelected()\n                                      \"\n                                      [zDisabled]=\"!canUseRowSelection() || !cell.row.getCanSelect()\"\n                                      (zChange)=\"canUseRowSelection() && 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.getCanExpand()) {\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-sm\">\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 (\n                                  (cell.column.id === 'actionRowPin' || cell.column.id === 'actions') &&\n                                  cell.column.id !== actionColumnInfo()?.columnId\n                                ) {\n                                  @if (cell.row.depth === 0 && !hasBodyRowSpan()) {\n                                    <div class=\"flex items-center justify-center\">\n                                      <ng-template #rowPinPopoverContent>\n                                        <div\n                                          zHoverGlide\n                                          zHoverGlideSelector=\".z-column-menu-item\"\n                                          class=\"flex flex-col gap-1 py-1\">\n                                          @if (cell.row.getIsPinned() !== 'top') {\n                                            <button\n                                              type=\"button\"\n                                              (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\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=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\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=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\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-sm p-1 outline-none\"\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                                  @let isCellVisible = cell | zTableCellVisible: zConfig().columns;\n                                  @if (isCellVisible) {\n                                    @let editInfoVirtual = cell.getContext() | zTableCellEdit: zConfig().columns;\n                                    @if (editInfoVirtual.enabled) {\n                                      <!-- Editable Cell (Virtual) -->\n                                      <z-table-edit-cell\n                                        [zRow]=\"cell.row.original\"\n                                        [zRowId]=\"cell.row.id\"\n                                        [zRowIndex]=\"cell.row.index\"\n                                        [zColumnId]=\"cell.column.id\"\n                                        [zValue]=\"cell.getValue()\"\n                                        [zRowUpdate]=\"_rowUpdate()\"\n                                        [zEditConfig]=\"$any(editInfoVirtual.config)\"\n                                        (zChange)=\"onCellEdit($any($event))\" />\n                                    } @else if (editInfoVirtual.contentEnabled) {\n                                      @let contentConfigVirtual = editInfoVirtual.contentConfig!;\n                                      @if (\n                                        activeContentEditCell()?.rowId === row.id &&\n                                        activeContentEditCell()?.columnId === cell.column.id\n                                      ) {\n                                        <z-table-content-editor\n                                          [zValue]=\"cell.getValue()\"\n                                          [zConfig]=\"contentConfigVirtual\"\n                                          (zCommit)=\"onContentEditCommit($event, row, cell.column.id, cell.getValue())\"\n                                          (zCancel)=\"onContentEditCancel()\" />\n                                      } @else {\n                                        <button\n                                          type=\"button\"\n                                          class=\"z-table-content-trigger\"\n                                          [attr.data-z-table-edit-row]=\"row.id\"\n                                          [attr.data-z-table-edit-column]=\"cell.column.id\"\n                                          (keydown)=\"onContentEditKeydown($event, row.id, cell.column.id)\"\n                                          (click)=\"onContentEditStart($event, row.id, cell.column.id)\">\n                                          {{ contentConfigVirtual.displayValue }}\n                                        </button>\n                                      }\n                                    } @else {\n                                      <ng-container\n                                        *flexRender=\"\n                                          cell.column.columnDef.cell;\n                                          props: cell.getContext();\n                                          let cellContent\n                                        \">\n                                        @if (cellContent | zTableIsTemplateRef) {\n                                          <!-- TemplateRef rendering -->\n                                          @let isClickable = cell.column.id | zTableCellClickable: zConfig().columns;\n                                          <div\n                                            class=\"z-template-content\"\n                                            [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                            [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                            (click)=\"isClickable && onCellClick(row, cell.column.id, cell.getValue())\">\n                                            <ng-container\n                                              *ngTemplateOutlet=\"\n                                                cellContent;\n                                                context: { $implicit: cell.getContext() }\n                                              \" />\n                                          </div>\n                                        } @else if (cellContent | zTableHasIcon) {\n                                          <!-- Icon syntax rendering -->\n                                          @let isClickableIcon =\n                                            cell.column.id | zTableCellClickable: zConfig().columns;\n                                          <z-table-icon-text\n                                            [zText]=\"cellContent\"\n                                            [zTooltip]=\"cell | zTableCellConfig: zConfig() : 'contentTooltip'\"\n                                            [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                            [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                            (click)=\"\n                                              isClickableIcon && onCellClick(row, cell.column.id, cell.getValue())\n                                            \" />\n                                        } @else {\n                                          <!-- Default/innerHTML rendering -->\n                                          @let isClickableDefault =\n                                            cell.column.id | zTableCellClickable: zConfig().columns;\n                                          @let cellTooltipConfig =\n                                            cell | zTableCellConfig: zConfig() : 'contentTooltip';\n                                          @let cellPopoverConfig =\n                                            cell | zTableCellConfig: zConfig() : 'contentPopover';\n                                          @let cellPopoverContent = cellPopoverConfig | zTablePopoverConfig: 'content';\n                                          <ng-template #cellPopoverTpl>\n                                            @if (cellPopoverContent | zTableIsTemplateRef) {\n                                              <ng-container *ngTemplateOutlet=\"$any(cellPopoverContent)\" />\n                                            }\n                                            @if (!(cellPopoverContent | zTableIsTemplateRef)) {\n                                              <div [innerHTML]=\"$any(cellPopoverContent) | zSafeHtml\"></div>\n                                            }\n                                          </ng-template>\n                                          @if (cellPopoverContent) {\n                                            <div\n                                              class=\"z-table-cell-text\"\n                                              z-popover\n                                              z-tooltip\n                                              [zTriggerElement]=\"cellOverlayContent\"\n                                              [zTriggerRef]=\"cellOverlayContent\"\n                                              [zContent]=\"\n                                                (cellTooltipConfig | zTableTooltipConfig: 'content') || cellContent\n                                              \"\n                                              [zTooltipPosition]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'position')\n                                              \"\n                                              [zTooltipTrigger]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'trigger')\n                                              \"\n                                              [zTooltipType]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'type')\"\n                                              [zTooltipSize]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'size')\"\n                                              [zTooltipClass]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'class')\"\n                                              [zTooltipShowDelay]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'showDelay')\n                                              \"\n                                              [zTooltipHideDelay]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'hideDelay')\n                                              \"\n                                              [zTooltipArrow]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'arrow')\"\n                                              [zTooltipOffset]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'offset')\"\n                                              [zAutoDetect]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'autoDetect')\n                                              \"\n                                              [zAlwaysShow]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'alwaysShow')\n                                              \"\n                                              [zMaxWidth]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'maxWidth')\"\n                                              [zPopoverContent]=\"cellPopoverTpl\"\n                                              [zPosition]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'position')\"\n                                              [zPopoverTrigger]=\"\n                                                $any(cellPopoverConfig | zTablePopoverConfig: 'trigger')\n                                              \"\n                                              [zClass]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'class')\"\n                                              [zShowDelay]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'showDelay')\"\n                                              [zHideDelay]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'hideDelay')\"\n                                              [zDisabled]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'disabled')\"\n                                              [zOffset]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'offset')\"\n                                              [zPopoverWidth]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'width')\"\n                                              [zManualClose]=\"\n                                                $any(cellPopoverConfig | zTablePopoverConfig: 'manualClose')\n                                              \"\n                                              [zOutsideClickClose]=\"\n                                                $any(cellPopoverConfig | zTablePopoverConfig: 'outsideClickClose')\n                                              \"\n                                              [zScrollClose]=\"\n                                                $any(cellPopoverConfig | zTablePopoverConfig: 'scrollClose')\n                                              \"\n                                              [zSticky]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'sticky')\"\n                                              [zShowArrow]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'showArrow')\"\n                                              [zKeyboardSafe]=\"\n                                                $any(cellPopoverConfig | zTablePopoverConfig: 'keyboardSafe')\n                                              \"\n                                              (click)=\"\n                                                isClickableDefault && onCellClick(row, cell.column.id, cell.getValue())\n                                              \">\n                                              <span\n                                                #cellOverlayContent\n                                                class=\"z-table-cell-content-trigger\"\n                                                [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                                [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                                [innerHTML]=\"cellContent | translate | zSafeHtml\"></span>\n                                            </div>\n                                          } @else {\n                                            <div\n                                              class=\"z-table-cell-text\"\n                                              z-tooltip\n                                              [zTriggerElement]=\"cellTooltipContent\"\n                                              [zContent]=\"\n                                                (cellTooltipConfig | zTableTooltipConfig: 'content') || cellContent\n                                              \"\n                                              [zTooltipPosition]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'position')\n                                              \"\n                                              [zTooltipTrigger]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'trigger')\n                                              \"\n                                              [zTooltipType]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'type')\"\n                                              [zTooltipSize]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'size')\"\n                                              [zTooltipClass]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'class')\"\n                                              [zTooltipShowDelay]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'showDelay')\n                                              \"\n                                              [zTooltipHideDelay]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'hideDelay')\n                                              \"\n                                              [zTooltipArrow]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'arrow')\"\n                                              [zTooltipOffset]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'offset')\"\n                                              [zAutoDetect]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'autoDetect')\n                                              \"\n                                              [zAlwaysShow]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'alwaysShow')\n                                              \"\n                                              [zMaxWidth]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'maxWidth')\"\n                                              (click)=\"\n                                                isClickableDefault && onCellClick(row, cell.column.id, cell.getValue())\n                                              \">\n                                              <span\n                                                #cellTooltipContent\n                                                class=\"z-table-cell-content-trigger\"\n                                                [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                                [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                                [innerHTML]=\"cellContent | translate | zSafeHtml\"></span>\n                                            </div>\n                                          }\n                                        }\n                                      </ng-container>\n                                    }\n                                  }\n                                }\n                              </td>\n                            }\n                            @if (\n                              canUseVirtualColumns() &&\n                              virtualRightSpacerWidth() > 0 &&\n                              cell.column.id === lastVirtualCenterColumnId()\n                            ) {\n                              <td\n                                class=\"z-virtual-column-spacer pointer-events-none p-0\"\n                                [style.width.px]=\"virtualRenderedRightSpacerWidth()\"></td>\n                            }\n                          }\n                        </tr>\n                      }\n                    </tbody>\n                  </table>\n                </div>\n              }\n            </ng-template>\n          </div>\n\n          <!--\n            Bottom pinned rows: sibling AFTER the virtual canvas (not absolute like the\n            center rows). The virtualizer reserves their height inside getTotalSize() via\n            `paddingEnd`, leaving an empty band at the canvas bottom. `margin-top: -bottomHeight`\n            pulls this real flow element back over that band, and `position: sticky; bottom: 0`\n            floats it to the viewport bottom while scrolling.\n          -->\n          @if (virtualPinnedBottomRows().length > 0) {\n            <div\n              class=\"z-virtual-pinned-bottom\"\n              [style.min-width.px]=\"table.getTotalSize()\"\n              [style.margin-top.px]=\"-virtualPinnedBottomHeight()\">\n              @for (row of virtualPinnedBottomRows(); track row.id) {\n                <ng-container *ngTemplateOutlet=\"virtualPinnedRowTpl; context: { $implicit: row }\" />\n              }\n            </div>\n          }\n\n          <!-- Template for rendering pinned rows in virtual scroll mode -->\n          <ng-template #virtualPinnedRowTpl let-row>\n            @let visibleCells = row.getVisibleCells();\n            @let rowSelected = canUseRowSelection() && row.getIsSelected();\n            @let rowSomeSelected = canUseRowSelection() && row.getIsSomeSelected();\n            @let rowPinned = row.getIsPinned();\n            <table [style.width.px]=\"renderedTableWidth()\">\n              <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n              <tbody [class.z-has-vertical-scroll]=\"hasVerticalScroll()\">\n                <tr\n                  z-table-row-hover\n                  [attr.data-row-id]=\"row.id\"\n                  [class]=\"row | zTableRowConfig: zConfig() : 'rowClass'\"\n                  [style]=\"row | zTableRowConfig: zConfig() : 'rowStyle'\"\n                  [style.height.px]=\"effectiveDynamicRowSizing() ? null : virtualRowHeight()\"\n                  [style.min-height.px]=\"effectiveDynamicRowSizing() ? virtualRowHeight() : null\"\n                  [style.--z-row-height]=\"effectiveDynamicRowSizing() ? 'auto' : virtualRowHeight() + 'px'\"\n                  [class.z-selected]=\"rowSelected\"\n                  [class.z-indeterminate-selected]=\"rowSomeSelected && !rowSelected\"\n                  [class.z-context-menu-active]=\"contentRowMenu()?.row?.id === row.id\"\n                  [class.z-pinned-top]=\"rowPinned === 'top'\"\n                  [class.z-pinned-top-first]=\"rowPinned === 'top' && row.id === firstTopPinnedRowId()\"\n                  [class.z-pinned-bottom]=\"rowPinned === 'bottom'\"\n                  [class.z-pinned-bottom-last]=\"rowPinned === 'bottom' && row.id === lastBottomPinnedRowId()\"\n                  [class.z-pinned-bottom-first]=\"rowPinned === 'bottom' && row.id === firstBottomPinnedRowId()\"\n                  [class.z-shadow-bottom]=\"\n                    showHeaderFooterShadow() &&\n                    hasScrollTop() &&\n                    rowPinned === 'top' &&\n                    row.id === lastTopPinnedRowId() &&\n                    !isStickyGroupHeaderEnabled()\n                  \"\n                  [class.z-shadow-top]=\"\n                    showHeaderFooterShadow() &&\n                    hasScrollBottom() &&\n                    rowPinned === 'bottom' &&\n                    row.id === firstBottomPinnedRowId()\n                  \"\n                  (contextmenu)=\"openContentRowMenu($event, row)\">\n                  @let isColumnPinningActivePinned = isPinnedLayoutWithinContainer();\n                  @for (cell of visibleCells; track cell.id) {\n                    @let cellPinned = cell.column.getIsPinned();\n                    @let cellSelectionId = row.id + '::' + cell.column.id;\n                    @if (\n                      canUseVirtualColumns() &&\n                      virtualLeftSpacerWidth() > 0 &&\n                      cell.column.id === firstVirtualCenterColumnId()\n                    ) {\n                      <td\n                        class=\"z-virtual-column-spacer pointer-events-none p-0\"\n                        [style.width.px]=\"virtualRenderedLeftSpacerWidth()\"></td>\n                    }\n                    @let isVirtualColumnVisible =\n                      !canUseVirtualColumns() ||\n                      cellPinned !== false ||\n                      virtualCenterColumnVisibilityMap()[cell.column.id];\n                    @if (isVirtualColumnVisible) {\n                      <td\n                        [attr.data-column-id]=\"cell.column.id\"\n                        [ngStyle]=\"\n                          cell.column\n                            | zTablePinningStyles\n                              : cell\n                              : 'body'\n                              : visibleCells\n                              : zConfig().columns\n                              : columnResizing()\n                              : colDomWidthMap()\n                              : isColumnPinningActivePinned\n                              : bodyRowSpanRows()\n                        \"\n                        [class]=\"cell | zTableCellConfig: zConfig() : 'cellClass'\"\n                        [class.z-sticky-left]=\"isColumnPinningActivePinned && cellPinned === 'start'\"\n                        [class.z-sticky-right]=\"isColumnPinningActivePinned && cellPinned === 'end'\"\n                        [class.z-sticky-left-last]=\"\n                          isColumnPinningActivePinned &&\n                          cellPinned === 'start' &&\n                          (cell | zTableCellPin: 'isLastLeftPinned' : zConfig().columns : 'body' : visibleCells)\n                        \"\n                        [class.z-sticky-right-first]=\"\n                          isColumnPinningActivePinned &&\n                          cellPinned === 'end' &&\n                          (cell | zTableCellPin: 'isFirstRightPinned' : zConfig().columns : 'body' : visibleCells)\n                        \"\n                        [class.z-sticky-right-last]=\"\n                          isColumnPinningActivePinned &&\n                          cellPinned === 'end' &&\n                          (cell | zTableCellPin: 'isLastRightPinned' : zConfig().columns : 'body' : visibleCells)\n                        \"\n                        [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                        [class.z-col-drag]=\"cell.column.id === 'rowDrag'\"\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-cell-selectable]=\"canUseCellSelection()\"\n                        [class.z-cell-active]=\"\n                          !hasMultipleSelectedCells() &&\n                          activeCell()?.rowId === row.id &&\n                          activeCell()?.columnId === cell.column.id\n                        \"\n                        [class.z-cell-range-selected]=\"visualSelectedCellIds().has(cellSelectionId)\"\n                        [class.z-cell-range-top]=\"selectedCellEdgeIds().top.has(cellSelectionId)\"\n                        [class.z-cell-range-right]=\"selectedCellEdgeIds().right.has(cellSelectionId)\"\n                        [class.z-cell-range-bottom]=\"selectedCellEdgeIds().bottom.has(cellSelectionId)\"\n                        [class.z-cell-range-left]=\"selectedCellEdgeIds().left.has(cellSelectionId)\"\n                        [style.--z-cell-range-top]=\"(selectedCellRangeInsets().get(cellSelectionId)?.top ?? 0) + '%'\"\n                        [style.--z-cell-range-right]=\"\n                          (selectedCellRangeInsets().get(cellSelectionId)?.right ?? 0) + '%'\n                        \"\n                        [style.--z-cell-range-bottom]=\"\n                          (selectedCellRangeInsets().get(cellSelectionId)?.bottom ?? 0) + '%'\n                        \"\n                        [style.--z-cell-range-left]=\"(selectedCellRangeInsets().get(cellSelectionId)?.left ?? 0) + '%'\"\n                        [style]=\"cell | zTableCellConfig: zConfig() : 'cellStyle'\"\n                        (pointerdown)=\"onCellPointerDown($event, row, cell.column.id)\"\n                        (pointerenter)=\"onCellPointerEnter($event, row, cell.column.id)\"\n                        (contextmenu)=\"openCellMenu($event, row, cell.column.id)\">\n                        @if (cell.column.id === 'select') {\n                          <z-checkbox\n                            [zChecked]=\"rowSelected\"\n                            [zIndeterminate]=\"rowSomeSelected && !rowSelected\"\n                            [zDisabled]=\"!canUseRowSelection()\"\n                            (zChange)=\"canUseRowSelection() && row.toggleSelected()\" />\n                        } @else if (cell.column.id === 'expand') {\n                          <button\n                            type=\"button\"\n                            class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded-sm\"\n                            (click)=\"row.toggleExpanded()\">\n                            <z-icon\n                              zType=\"lucideChevronRight\"\n                              zSize=\"14\"\n                              class=\"transition-transform duration-200\"\n                              [class.rotate-90]=\"row.getIsExpanded()\" />\n                          </button>\n                        } @else if (cell.column.id === 'actionRowPin') {\n                          <div class=\"flex items-center justify-center\">\n                            <button\n                              type=\"button\"\n                              class=\"z-row-pin-trigger z-row-pin-unpin-trigger flex h-6 w-6 cursor-pointer items-center justify-center rounded-sm\"\n                              (click)=\"cell.row.pin(false)\">\n                              <z-icon zType=\"lucideX\" zSize=\"14\" />\n                            </button>\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                          @let isCellVisible = cell | zTableCellVisible: zConfig().columns;\n                          @if (isCellVisible) {\n                            <ng-container\n                              *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellContent\">\n                              @if (cellContent | zTableIsTemplateRef) {\n                                <div\n                                  class=\"z-template-content\"\n                                  [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                  [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\">\n                                  <ng-container\n                                    *ngTemplateOutlet=\"cellContent; context: { $implicit: cell.getContext() }\" />\n                                </div>\n                              } @else if (cellContent | zTableHasIcon) {\n                                <z-table-icon-text\n                                  [zText]=\"cellContent\"\n                                  [zTooltip]=\"cell | zTableCellConfig: zConfig() : 'contentTooltip'\"\n                                  [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                  [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\" />\n                              } @else {\n                                <span\n                                  class=\"z-table-cell-text\"\n                                  z-tooltip\n                                  [zContent]=\"(cell | zTableCellConfig: zConfig() : 'contentTooltip') || cellContent\"\n                                  [innerHTML]=\"cellContent | translate | zSafeHtml\"\n                                  [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                  [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"></span>\n                              }\n                            </ng-container>\n                          }\n                        }\n                      </td>\n                    }\n                    @if (\n                      canUseVirtualColumns() &&\n                      virtualRightSpacerWidth() > 0 &&\n                      cell.column.id === lastVirtualCenterColumnId()\n                    ) {\n                      <td\n                        class=\"z-virtual-column-spacer pointer-events-none p-0\"\n                        [style.width.px]=\"virtualRenderedRightSpacerWidth()\"></td>\n                    }\n                  }\n                </tr>\n              </tbody>\n            </table>\n          </ng-template>\n        } @else {\n          <!-- Normal Scroll Mode -->\n\n          <table [style.width.px]=\"renderedTableWidth()\">\n            <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n            <tbody\n              class=\"z-table-drag-body\"\n              [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n              [class.z-has-bottom-pinned]=\"table.getBottomRows().length > 0\"\n              [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n              <!-- Row Template -->\n              <ng-template #rowTemplate let-row let-isGroupChild=\"isGroupChild\" let-groupDepth=\"groupDepth\">\n                @let visibleCells = row.getVisibleCells();\n                @let rowSelected = canUseRowSelection() && row.getIsSelected();\n                @let rowSomeSelected = canUseRowSelection() && row.getIsSomeSelected();\n                @let rowPinned = row.getIsPinned();\n                <tr\n                  z-table-row-hover\n                  z-table-draggable=\"row\"\n                  z-table-drop-target=\"row\"\n                  [animate.enter]=\"row.depth > 0 || isGroupChild ? 'z-row-enter' : ''\"\n                  [z-table-drag-table-id]=\"dragInstanceId\"\n                  [z-table-drop-table-id]=\"dragInstanceId\"\n                  [z-table-drag-item-id]=\"row.id\"\n                  [z-table-drop-item-id]=\"row.id\"\n                  [z-table-drag-disabled]=\"!isRowDragEnabled()\"\n                  [z-table-drop-disabled]=\"!isRowDragEnabled()\"\n                  (zTableDropped)=\"_handleDragDrop($event)\"\n                  [attr.data-row-id]=\"row.id\"\n                  [class]=\"row | zTableRowConfig: zConfig() : 'rowClass'\"\n                  [style]=\"row | zTableRowConfig: zConfig() : 'rowStyle'\"\n                  [ngStyle]=\"row | zTableRow: table : 'pinningStyles' : pinnedRowHeights() : virtualRowHeight()\"\n                  [class.z-child-row]=\"row.depth > 0\"\n                  [class.z-group-child-row]=\"isGroupChild\"\n                  [style.--z-group-content-indent]=\"groupDepth > 0 ? 1.75 + (groupDepth - 1) * 0.75 + 'rem' : null\"\n                  [class.z-selected]=\"rowSelected\"\n                  [class.z-indeterminate-selected]=\"rowSomeSelected && !rowSelected\"\n                  [class.z-context-menu-active]=\"contentRowMenu()?.row?.id === row.id\"\n                  [class.z-pinned-top]=\"rowPinned === 'top'\"\n                  [class.z-pinned-top-first]=\"rowPinned === 'top' && row.id === firstTopPinnedRowId()\"\n                  [class.z-pinned-bottom]=\"rowPinned === 'bottom'\"\n                  [class.z-pinned-bottom-last]=\"rowPinned === 'bottom' && row.id === lastBottomPinnedRowId()\"\n                  [class.z-pinned-bottom-first]=\"rowPinned === 'bottom' && row.id === firstBottomPinnedRowId()\"\n                  [class.z-shadow-bottom]=\"\n                    showHeaderFooterShadow() &&\n                    hasScrollTop() &&\n                    rowPinned === 'top' &&\n                    row.id === lastTopPinnedRowId() &&\n                    !isStickyGroupHeaderEnabled()\n                  \"\n                  [class.z-shadow-top]=\"\n                    showHeaderFooterShadow() &&\n                    hasScrollBottom() &&\n                    rowPinned === 'bottom' &&\n                    row.id === firstBottomPinnedRowId()\n                  \"\n                  [attr.data-depth]=\"row.depth\"\n                  (contextmenu)=\"openContentRowMenu($event, row)\">\n                  @for (cell of visibleCells; track cell.id) {\n                    @let cellPinned = cell.column.getIsPinned();\n                    @let cellRowPinned = cell.row.getIsPinned();\n                    @if (\n                      canUseVirtualColumns() &&\n                      virtualLeftSpacerWidth() > 0 &&\n                      cell.column.id === firstVirtualCenterColumnId()\n                    ) {\n                      <td\n                        class=\"z-virtual-column-spacer pointer-events-none p-0\"\n                        [style.width.px]=\"virtualRenderedLeftSpacerWidth()\"></td>\n                    }\n                    @let shouldRenderRowSpan =\n                      cell | zTableSpan: zConfig().columns : 'shouldRender' : bodyRowSpanRows();\n                    @let shouldRenderColSpan = cell | zTableCellRender: visibleCells : zConfig().columns : 'body';\n                    @let isVirtualColumnVisible =\n                      !canUseVirtualColumns() ||\n                      cellPinned !== false ||\n                      virtualCenterColumnVisibilityMap()[cell.column.id];\n                    @if (shouldRenderRowSpan && shouldRenderColSpan && isVirtualColumnVisible) {\n                      @let cellSelectionId = row.id + '::' + cell.column.id;\n                      <td\n                        [attr.data-column-id]=\"cell.column.id\"\n                        [ngStyle]=\"\n                          cell.column\n                            | zTablePinningStyles\n                              : cell\n                              : 'body'\n                              : visibleCells\n                              : zConfig().columns\n                              : columnResizing()\n                              : colDomWidthMap()\n                              : isColumnPinningActive\n                              : bodyRowSpanRows()\n                        \"\n                        [class]=\"cell | zTableCellConfig: zConfig() : 'cellClass'\"\n                        [style]=\"cell | zTableCellConfig: zConfig() : 'cellStyle'\"\n                        [class.z-sticky-left]=\"isColumnPinningActive && cellPinned === 'start'\"\n                        [class.z-sticky-right]=\"isColumnPinningActive && cellPinned === 'end'\"\n                        [class.z-sticky-left-last]=\"\n                          isColumnPinningActive &&\n                          cellPinned === 'start' &&\n                          (cell | zTableCellPin: 'isLastLeftPinned' : zConfig().columns : 'body' : visibleCells)\n                        \"\n                        [class.z-sticky-right-first]=\"\n                          isColumnPinningActive &&\n                          cellPinned === 'end' &&\n                          (cell | zTableCellPin: 'isFirstRightPinned' : zConfig().columns : 'body' : visibleCells)\n                        \"\n                        [class.z-sticky-right-last]=\"\n                          isColumnPinningActive &&\n                          cellPinned === 'end' &&\n                          (cell | zTableCellPin: 'isLastRightPinned' : zConfig().columns : 'body' : visibleCells)\n                        \"\n                        [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                        [class.z-col-drag]=\"cell.column.id === 'rowDrag'\"\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-cell-selectable]=\"canUseCellSelection()\"\n                        [class.z-cell-active]=\"\n                          !hasMultipleSelectedCells() &&\n                          activeCell()?.rowId === row.id &&\n                          activeCell()?.columnId === cell.column.id\n                        \"\n                        [class.z-cell-range-selected]=\"visualSelectedCellIds().has(cellSelectionId)\"\n                        [class.z-cell-range-top]=\"selectedCellEdgeIds().top.has(cellSelectionId)\"\n                        [class.z-cell-range-right]=\"selectedCellEdgeIds().right.has(cellSelectionId)\"\n                        [class.z-cell-range-bottom]=\"selectedCellEdgeIds().bottom.has(cellSelectionId)\"\n                        [class.z-cell-range-left]=\"selectedCellEdgeIds().left.has(cellSelectionId)\"\n                        [class.z-content-edit-active]=\"\n                          activeContentEditCell()?.rowId === row.id &&\n                          activeContentEditCell()?.columnId === cell.column.id\n                        \"\n                        [class.z-at-bottom]=\"cell | zTableCellBottom: zConfig().columns : renderedBodyRows()\"\n                        [attr.rowspan]=\"cell | zTableSpan: zConfig().columns : 'cellRowSpan' : bodyRowSpanRows()\"\n                        [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan' : undefined : visibleCells\"\n                        [style.--z-cell-range-top]=\"(selectedCellRangeInsets().get(cellSelectionId)?.top ?? 0) + '%'\"\n                        [style.--z-cell-range-right]=\"\n                          (selectedCellRangeInsets().get(cellSelectionId)?.right ?? 0) + '%'\n                        \"\n                        [style.--z-cell-range-bottom]=\"\n                          (selectedCellRangeInsets().get(cellSelectionId)?.bottom ?? 0) + '%'\n                        \"\n                        [style.--z-cell-range-left]=\"(selectedCellRangeInsets().get(cellSelectionId)?.left ?? 0) + '%'\"\n                        (pointerdown)=\"onCellPointerDown($event, row, cell.column.id)\"\n                        (pointerenter)=\"onCellPointerEnter($event, row, cell.column.id)\"\n                        (contextmenu)=\"openCellMenu($event, row, cell.column.id)\">\n                        @if (cell.column.id === 'rowDrag') {\n                          <div class=\"flex items-center justify-center\">\n                            <button\n                              data-z-table-drag-handle\n                              type=\"button\"\n                              class=\"text-muted-foreground hover:bg-muted hover:text-foreground inline-flex size-7 items-center justify-center rounded-md transition-colors\"\n                              [class.cursor-grab]=\"isRowDragEnabled()\"\n                              [class.cursor-not-allowed]=\"!isRowDragEnabled()\"\n                              [class.opacity-40]=\"!isRowDragEnabled()\">\n                              <z-icon zType=\"lucideGripVertical\" zSize=\"14\" />\n                            </button>\n                          </div>\n                        } @else 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                              [zChecked]=\"canUseRowSelection() && cell.row.getIsSelected()\"\n                              [zIndeterminate]=\"\n                                canUseRowSelection() && cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\n                              \"\n                              [zDisabled]=\"!canUseRowSelection() || !cell.row.getCanSelect()\"\n                              (zChange)=\"canUseRowSelection() && cell.row.toggleSelected()\" />\n                            @if (zConfig().enableRowPinning && cell.row.depth === 0 && !hasBodyRowSpan()) {\n                              @if (cellRowPinned) {\n                                <button\n                                  type=\"button\"\n                                  class=\"z-row-pin-trigger z-row-pin-unpin-trigger flex h-6 w-6 cursor-pointer items-center justify-center rounded-sm\"\n                                  (click)=\"cell.row.pin(false)\">\n                                  <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                </button>\n                              } @else {\n                                <ng-template #rowPinPopoverContent>\n                                  <div\n                                    zHoverGlide\n                                    zHoverGlideSelector=\".z-column-menu-item\"\n                                    class=\"flex flex-col gap-1 py-1\">\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\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-sm p-1 outline-none\">\n                                  <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                                </button>\n                              }\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.getCanExpand()) {\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-sm\">\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                              @if (cellRowPinned) {\n                                <button\n                                  type=\"button\"\n                                  class=\"z-row-pin-trigger z-row-pin-unpin-trigger flex h-6 w-6 cursor-pointer items-center justify-center rounded-sm\"\n                                  (click)=\"cell.row.pin(false)\">\n                                  <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                </button>\n                              } @else {\n                                <ng-template #rowPinPopoverContent>\n                                  <div\n                                    zHoverGlide\n                                    zHoverGlideSelector=\".z-column-menu-item\"\n                                    class=\"flex flex-col gap-1 py-1\">\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\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-sm p-1 outline-none\">\n                                  <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                                </button>\n                              }\n                            }\n                          </div>\n                        } @else if (\n                          (cell.column.id === 'actionRowPin' || cell.column.id === 'actions') &&\n                          cell.column.id !== actionColumnInfo()?.columnId\n                        ) {\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                              @if (cellRowPinned) {\n                                <button\n                                  type=\"button\"\n                                  class=\"z-row-pin-trigger z-row-pin-unpin-trigger flex h-6 w-6 cursor-pointer items-center justify-center rounded-sm\"\n                                  (click)=\"cell.row.pin(false)\">\n                                  <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                </button>\n                              } @else {\n                                <ng-template #rowPinPopoverContent>\n                                  <div\n                                    zHoverGlide\n                                    zHoverGlideSelector=\".z-column-menu-item\"\n                                    class=\"flex flex-col gap-1 py-1\">\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\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-sm p-1 outline-none\">\n                                  <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                                </button>\n                              }\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                          @let isCellVisibleNormal = cell | zTableCellVisible: zConfig().columns;\n                          @if (isCellVisibleNormal) {\n                            @let editInfo = cell.getContext() | zTableCellEdit: zConfig().columns;\n                            @if (editInfo.enabled) {\n                              <!-- Editable Cell -->\n                              <z-table-edit-cell\n                                [zRow]=\"cell.row.original\"\n                                [zRowId]=\"cell.row.id\"\n                                [zRowIndex]=\"cell.row.index\"\n                                [zColumnId]=\"cell.column.id\"\n                                [zValue]=\"cell.getValue()\"\n                                [zRowUpdate]=\"_rowUpdate()\"\n                                [zEditConfig]=\"$any(editInfo.config)\"\n                                (zChange)=\"onCellEdit($any($event))\" />\n                            } @else if (editInfo.contentEnabled) {\n                              @let contentConfig = editInfo.contentConfig!;\n                              @if (\n                                activeContentEditCell()?.rowId === row.id &&\n                                activeContentEditCell()?.columnId === cell.column.id\n                              ) {\n                                <z-table-content-editor\n                                  [zValue]=\"cell.getValue()\"\n                                  [zConfig]=\"contentConfig\"\n                                  (zCommit)=\"onContentEditCommit($event, row, cell.column.id, cell.getValue())\"\n                                  (zCancel)=\"onContentEditCancel()\" />\n                              } @else {\n                                <button\n                                  type=\"button\"\n                                  class=\"z-table-content-trigger\"\n                                  [attr.data-z-table-edit-row]=\"row.id\"\n                                  [attr.data-z-table-edit-column]=\"cell.column.id\"\n                                  (keydown)=\"onContentEditKeydown($event, row.id, cell.column.id)\"\n                                  (click)=\"onContentEditStart($event, row.id, cell.column.id)\">\n                                  {{ contentConfig.displayValue }}\n                                </button>\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                                  @let isClickableTpl = cell.column.id | zTableCellClickable: zConfig().columns;\n                                  <div\n                                    class=\"z-template-content\"\n                                    [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                    [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                    (click)=\"isClickableTpl && onCellClick(row, cell.column.id, cell.getValue())\">\n                                    <ng-container\n                                      *ngTemplateOutlet=\"cellContent; context: { $implicit: cell.getContext() }\" />\n                                  </div>\n                                } @else if (cellContent | zTableHasIcon) {\n                                  <!-- Icon syntax rendering -->\n                                  @let isClickableIconTpl = cell.column.id | zTableCellClickable: zConfig().columns;\n                                  <z-table-icon-text\n                                    [zText]=\"cellContent\"\n                                    [zTooltip]=\"cell | zTableCellConfig: zConfig() : 'contentTooltip'\"\n                                    [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                    [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                    (click)=\"isClickableIconTpl && onCellClick(row, cell.column.id, cell.getValue())\" />\n                                } @else {\n                                  <!-- Default/innerHTML rendering -->\n                                  @let isClickableDefaultTpl = cell.column.id | zTableCellClickable: zConfig().columns;\n                                  @let cellTooltipConfigTpl = cell | zTableCellConfig: zConfig() : 'contentTooltip';\n                                  @let cellPopoverConfigTpl = cell | zTableCellConfig: zConfig() : 'contentPopover';\n                                  @let cellPopoverContentTpl = cellPopoverConfigTpl | zTablePopoverConfig: 'content';\n                                  <ng-template #cellPopoverTplNormal>\n                                    @if (cellPopoverContentTpl | zTableIsTemplateRef) {\n                                      <ng-container *ngTemplateOutlet=\"$any(cellPopoverContentTpl)\" />\n                                    }\n                                    @if (!(cellPopoverContentTpl | zTableIsTemplateRef)) {\n                                      <div [innerHTML]=\"$any(cellPopoverContentTpl) | zSafeHtml\"></div>\n                                    }\n                                  </ng-template>\n                                  @if (cellPopoverContentTpl) {\n                                    <div\n                                      class=\"z-table-cell-text\"\n                                      z-popover\n                                      z-tooltip\n                                      [zTriggerElement]=\"cellOverlayContentTpl\"\n                                      [zTriggerRef]=\"cellOverlayContentTpl\"\n                                      [zContent]=\"\n                                        (cellTooltipConfigTpl | zTableTooltipConfig: 'content') || cellContent\n                                      \"\n                                      [zTooltipPosition]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'position')\"\n                                      [zTooltipTrigger]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'trigger')\"\n                                      [zTooltipType]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'type')\"\n                                      [zTooltipSize]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'size')\"\n                                      [zTooltipClass]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'class')\"\n                                      [zTooltipShowDelay]=\"\n                                        $any(cellTooltipConfigTpl | zTableTooltipConfig: 'showDelay')\n                                      \"\n                                      [zTooltipHideDelay]=\"\n                                        $any(cellTooltipConfigTpl | zTableTooltipConfig: 'hideDelay')\n                                      \"\n                                      [zTooltipArrow]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'arrow')\"\n                                      [zTooltipOffset]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'offset')\"\n                                      [zAutoDetect]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'autoDetect')\"\n                                      [zAlwaysShow]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'alwaysShow')\"\n                                      [zMaxWidth]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'maxWidth')\"\n                                      [zPopoverContent]=\"cellPopoverTplNormal\"\n                                      [zPosition]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'position')\"\n                                      [zPopoverTrigger]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'trigger')\"\n                                      [zClass]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'class')\"\n                                      [zShowDelay]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'showDelay')\"\n                                      [zHideDelay]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'hideDelay')\"\n                                      [zDisabled]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'disabled')\"\n                                      [zOffset]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'offset')\"\n                                      [zPopoverWidth]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'width')\"\n                                      [zManualClose]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'manualClose')\"\n                                      [zOutsideClickClose]=\"\n                                        $any(cellPopoverConfigTpl | zTablePopoverConfig: 'outsideClickClose')\n                                      \"\n                                      [zScrollClose]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'scrollClose')\"\n                                      [zSticky]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'sticky')\"\n                                      [zShowArrow]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'showArrow')\"\n                                      [zKeyboardSafe]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'keyboardSafe')\"\n                                      (click)=\"\n                                        isClickableDefaultTpl && onCellClick(row, cell.column.id, cell.getValue())\n                                      \">\n                                      <span\n                                        #cellOverlayContentTpl\n                                        class=\"z-table-cell-content-trigger\"\n                                        [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                        [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                        [innerHTML]=\"cellContent | translate | zSafeHtml\"></span>\n                                    </div>\n                                  } @else {\n                                    <div\n                                      class=\"z-table-cell-text\"\n                                      z-tooltip\n                                      [zTriggerElement]=\"cellTooltipContentTpl\"\n                                      [zContent]=\"\n                                        (cellTooltipConfigTpl | zTableTooltipConfig: 'content') || cellContent\n                                      \"\n                                      [zTooltipPosition]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'position')\"\n                                      [zTooltipTrigger]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'trigger')\"\n                                      [zTooltipType]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'type')\"\n                                      [zTooltipSize]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'size')\"\n                                      [zTooltipClass]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'class')\"\n                                      [zTooltipShowDelay]=\"\n                                        $any(cellTooltipConfigTpl | zTableTooltipConfig: 'showDelay')\n                                      \"\n                                      [zTooltipHideDelay]=\"\n                                        $any(cellTooltipConfigTpl | zTableTooltipConfig: 'hideDelay')\n                                      \"\n                                      [zTooltipArrow]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'arrow')\"\n                                      [zTooltipOffset]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'offset')\"\n                                      [zAutoDetect]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'autoDetect')\"\n                                      [zAlwaysShow]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'alwaysShow')\"\n                                      [zMaxWidth]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'maxWidth')\"\n                                      (click)=\"\n                                        isClickableDefaultTpl && onCellClick(row, cell.column.id, cell.getValue())\n                                      \">\n                                      <span\n                                        #cellTooltipContentTpl\n                                        class=\"z-table-cell-content-trigger\"\n                                        [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                        [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                        [innerHTML]=\"cellContent | translate | zSafeHtml\"></span>\n                                    </div>\n                                  }\n                                }\n                              </ng-container>\n                            }\n                          }\n                        }\n                      </td>\n                    }\n                    @if (\n                      canUseVirtualColumns() &&\n                      virtualRightSpacerWidth() > 0 &&\n                      cell.column.id === lastVirtualCenterColumnId()\n                    ) {\n                      <td\n                        class=\"z-virtual-column-spacer pointer-events-none p-0\"\n                        [style.width.px]=\"virtualRenderedRightSpacerWidth()\"></td>\n                    }\n                  }\n                </tr>\n\n                <!-- Expanded Row Detail -->\n                @if (row.getIsExpanded() && row.depth === 0 && !row.subRows?.length) {\n                  @let resolvedSubTableConfig = row | zTableSubTableConfig: zConfig();\n                  <tr class=\"z-expanded-row\" animate.enter=\"z-expanded-row-enter\">\n                    <td [attr.colspan]=\"renderedColumnCount()\" class=\"p-0\">\n                      <!-- Animate \u1EDF wrapper n\u00E0y b\u1EB1ng clip-path/translate/opacity \u2014 xem z-expanded-row-reveal. -->\n                      <div class=\"z-expanded-row-content\">\n                        @if (zConfig().expandedRowTemplate) {\n                          <ng-container\n                            *ngTemplateOutlet=\"zConfig().expandedRowTemplate!; context: { $implicit: row }\" />\n                        } @else if (resolvedSubTableConfig) {\n                          <div class=\"z-sub-table-container\">\n                            <z-table [zConfig]=\"$any(resolvedSubTableConfig)\" zVariant=\"borderless\" />\n                          </div>\n                        }\n                      </div>\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 (item of groupedCenterRowItems(); track item.type === 'group' ? item.id : item.row.id) {\n                @if (item.type === 'group') {\n                  <tr\n                    #groupRow\n                    class=\"z-group-row\"\n                    [class.z-group-row-has-totals]=\"item.totals\"\n                    [class.z-group-row-expanded]=\"item.expanded\"\n                    [class.z-group-row-sticky]=\"isStickyGroupHeaderEnabled()\"\n                    [class.z-group-row-sticky-shadow]=\"shadowGroupRowId() === item.id\"\n                    [style.top.px]=\"stickyGroupTopByDepth()[item.depth]\"\n                    [attr.data-group-id]=\"item.id\"\n                    [attr.data-group-depth]=\"item.depth\">\n                    @if (item.totals) {\n                      @let totalColumnMap = groupTotalColumnMap();\n                      @for (column of orderedLeafColumns(); track column.id; let isFirstGroupCell = $first) {\n                        <td\n                          [class.z-group-row-label-cell]=\"isFirstGroupCell\"\n                          [class.z-group-row-total-cell]=\"!isFirstGroupCell && totalColumnMap[column.id]\"\n                          [attr.data-column-id]=\"column.id\">\n                          @if (isFirstGroupCell) {\n                            <div class=\"z-group-row-sticky-wrapper\">\n                              <button\n                                type=\"button\"\n                                class=\"z-group-row-trigger\"\n                                [style.padding-left.rem]=\"0.75 + item.depth * 0.75\"\n                                [attr.aria-expanded]=\"item.expanded\"\n                                (click)=\"toggleGroupRow(item.id)\">\n                                <z-icon\n                                  zType=\"lucideChevronRight\"\n                                  zSize=\"14\"\n                                  class=\"transition-transform duration-200\"\n                                  [class.rotate-90]=\"item.expanded\" />\n                                <span\n                                  class=\"z-group-row-label\"\n                                  z-tooltip\n                                  [zContent]=\"(item.columnLabel ? item.columnLabel + ': ' : '') + item.label\">\n                                  @if (item.columnLabel) {\n                                    <span class=\"z-group-row-column-label\">{{ item.columnLabel }}:</span>\n                                  }\n                                  {{ item.label }}\n                                </span>\n                                @if (groupingConfig().showCount !== false) {\n                                  <span class=\"z-group-row-count\">{{ item.count }}</span>\n                                }\n                                @if (item.loading) {\n                                  <z-loading class=\"z-group-row-loading\" [zLoading]=\"true\" zSize=\"xs\" />\n                                }\n                              </button>\n                              @if (!isServerGrouping()) {\n                                <button\n                                  type=\"button\"\n                                  z-button\n                                  zType=\"ghost\"\n                                  zSize=\"sm\"\n                                  zTypeIcon=\"lucideX\"\n                                  zSizeIcon=\"14\"\n                                  [zWave]=\"false\"\n                                  z-tooltip\n                                  [zContent]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                                  [attr.aria-label]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                                  [zAlwaysShow]=\"true\"\n                                  zTooltipPosition=\"top\"\n                                  class=\"z-group-row-remove\"\n                                  (click)=\"removeGroupingColumn(item.columnId)\"></button>\n                              }\n                            </div>\n                          }\n                          @if (!isFirstGroupCell && totalColumnMap[column.id]) {\n                            @let totalConfig = groupTotalConfigMap()[column.id];\n                            @let totalTooltip = totalConfig.tooltip;\n                            @let totalPopover = totalConfig.popover;\n                            @let totalPopoverContent = totalPopover | zTablePopoverConfig: 'content';\n                            <ng-template #groupTotalPopoverTpl>\n                              @if (totalPopoverContent | zTableIsTemplateRef) {\n                                <ng-container *ngTemplateOutlet=\"$any(totalPopoverContent)\" />\n                              }\n                              @if (!(totalPopoverContent | zTableIsTemplateRef)) {\n                                <div [innerHTML]=\"$any(totalPopoverContent) | zSafeHtml\"></div>\n                              }\n                            </ng-template>\n                            <span\n                              class=\"z-group-row-total\"\n                              z-tooltip\n                              z-popover\n                              [class]=\"totalConfig.class\"\n                              [zContent]=\"\n                                $any((totalTooltip | zTableTooltipConfig: 'content') || item.totals[column.id])\n                              \"\n                              [zTooltipPosition]=\"$any(totalTooltip | zTableTooltipConfig: 'position')\"\n                              [zTooltipTrigger]=\"$any(totalTooltip | zTableTooltipConfig: 'trigger')\"\n                              [zTooltipType]=\"$any(totalTooltip | zTableTooltipConfig: 'type')\"\n                              [zTooltipSize]=\"$any(totalTooltip | zTableTooltipConfig: 'size')\"\n                              [zTooltipClass]=\"$any(totalTooltip | zTableTooltipConfig: 'class')\"\n                              [zTooltipShowDelay]=\"$any(totalTooltip | zTableTooltipConfig: 'showDelay')\"\n                              [zTooltipHideDelay]=\"$any(totalTooltip | zTableTooltipConfig: 'hideDelay')\"\n                              [zTooltipArrow]=\"$any(totalTooltip | zTableTooltipConfig: 'arrow')\"\n                              [zTooltipOffset]=\"$any(totalTooltip | zTableTooltipConfig: 'offset')\"\n                              [zAutoDetect]=\"$any(totalTooltip | zTableTooltipConfig: 'autoDetect')\"\n                              [zAlwaysShow]=\"$any(totalTooltip | zTableTooltipConfig: 'alwaysShow')\"\n                              [zMaxWidth]=\"$any(totalTooltip | zTableTooltipConfig: 'maxWidth')\"\n                              [zPopoverContent]=\"totalPopoverContent ? groupTotalPopoverTpl : null\"\n                              [zPosition]=\"$any(totalPopover | zTablePopoverConfig: 'position')\"\n                              [zPopoverTrigger]=\"$any(totalPopover | zTablePopoverConfig: 'trigger')\"\n                              [zClass]=\"$any(totalPopover | zTablePopoverConfig: 'class')\"\n                              [zShowDelay]=\"$any(totalPopover | zTablePopoverConfig: 'showDelay')\"\n                              [zHideDelay]=\"$any(totalPopover | zTablePopoverConfig: 'hideDelay')\"\n                              [zDisabled]=\"$any(totalPopover | zTablePopoverConfig: 'disabled')\"\n                              [zOffset]=\"$any(totalPopover | zTablePopoverConfig: 'offset')\"\n                              [zPopoverWidth]=\"$any(totalPopover | zTablePopoverConfig: 'width')\"\n                              [zManualClose]=\"$any(totalPopover | zTablePopoverConfig: 'manualClose')\"\n                              [zOutsideClickClose]=\"$any(totalPopover | zTablePopoverConfig: 'outsideClickClose')\"\n                              [zScrollClose]=\"$any(totalPopover | zTablePopoverConfig: 'scrollClose')\"\n                              [zSticky]=\"$any(totalPopover | zTablePopoverConfig: 'sticky')\"\n                              [zShowArrow]=\"$any(totalPopover | zTablePopoverConfig: 'showArrow')\"\n                              [zKeyboardSafe]=\"$any(totalPopover | zTablePopoverConfig: 'keyboardSafe')\">\n                              {{ item.totals[column.id] }}\n                            </span>\n                          }\n                        </td>\n                      }\n                    } @else {\n                      <td [attr.colspan]=\"renderedColumnCount()\">\n                        <div class=\"z-group-row-sticky-wrapper\">\n                          <button\n                            type=\"button\"\n                            class=\"z-group-row-trigger\"\n                            [style.padding-left.rem]=\"0.75 + item.depth * 0.75\"\n                            [attr.aria-expanded]=\"item.expanded\"\n                            (click)=\"toggleGroupRow(item.id)\">\n                            <z-icon\n                              zType=\"lucideChevronRight\"\n                              zSize=\"14\"\n                              class=\"transition-transform duration-200\"\n                              [class.rotate-90]=\"item.expanded\" />\n                            <span\n                              class=\"z-group-row-label\"\n                              z-tooltip\n                              [zContent]=\"(item.columnLabel ? item.columnLabel + ': ' : '') + item.label\">\n                              @if (item.columnLabel) {\n                                <span class=\"z-group-row-column-label\">{{ item.columnLabel }}:</span>\n                              }\n                              {{ item.label }}\n                            </span>\n                            @if (groupingConfig().showCount !== false) {\n                              <span class=\"z-group-row-count\">{{ item.count }}</span>\n                            }\n                            @if (item.loading) {\n                              <z-loading class=\"z-group-row-loading\" [zLoading]=\"true\" zSize=\"xs\" />\n                            }\n                          </button>\n                          @if (!isServerGrouping()) {\n                            <button\n                              type=\"button\"\n                              z-button\n                              zType=\"ghost\"\n                              zSize=\"sm\"\n                              zTypeIcon=\"lucideX\"\n                              zSizeIcon=\"14\"\n                              [zWave]=\"false\"\n                              z-tooltip\n                              [zContent]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                              [attr.aria-label]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                              [zAlwaysShow]=\"true\"\n                              zTooltipPosition=\"top\"\n                              class=\"z-group-row-remove\"\n                              (click)=\"removeGroupingColumn(item.columnId)\"></button>\n                          }\n                        </div>\n                      </td>\n                    }\n                  </tr>\n                }\n                @if (item.type === 'row') {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      rowTemplate;\n                      context: {\n                        $implicit: item.row,\n                        isGroupChild: item.isGroupChild,\n                        groupDepth: item.groupDepth,\n                      }\n                    \" />\n                }\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 [style.width.px]=\"renderedTableWidth()\">\n        <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n        <tfoot>\n          @for (footerGroup of orderedFooterGroups(); track footerGroup.id; let footerRowIndex = $index) {\n            @if (footerGroup | zTableFooterContent: zConfig().columns : footerRowIndex) {\n              <tr>\n                @for (footer of footerGroup.headers; track footer.id) {\n                  @if (\n                    canUseVirtualColumns() &&\n                    virtualLeftSpacerWidth() > 0 &&\n                    footer.column.id === firstVirtualCenterColumnId()\n                  ) {\n                    <th\n                      class=\"z-virtual-column-spacer z-virtual-footer-spacer pointer-events-none p-0\"\n                      [style.width.px]=\"virtualRenderedLeftSpacerWidth()\"></th>\n                  }\n                  @let rowSpan = footer | zTableSpan: zConfig().columns : 'footerRowSpan' : footerRowIndex;\n                  @let shouldRender =\n                    footer\n                      | zTableCellRender\n                        : footerGroup.headers\n                        : zConfig().columns\n                        : 'footer'\n                        : footerRowIndex\n                        : orderedFooterGroups();\n                  @let isVirtualColumnVisible =\n                    !canUseVirtualColumns() ||\n                    footer.column.getIsPinned() !== false ||\n                    virtualCenterColumnVisibilityMap()[footer.column.id];\n                  @if (rowSpan && shouldRender && isVirtualColumnVisible) {\n                    <th\n                      [attr.data-column-id]=\"footer.column.id\"\n                      [ngStyle]=\"\n                        footer.column\n                          | zTablePinningStyles\n                            : footer\n                            : 'footer'\n                            : table\n                            : zConfig().columns\n                            : columnResizing()\n                            : colDomWidthMap()\n                            : isColumnPinningActive\n                      \"\n                      [class]=\"\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerClass' : footerRowIndex) +\n                        ' ' +\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass' : footerRowIndex)\n                      \"\n                      [style]=\"\n                        footer.column.id | zTableColumnConfig: zConfig().columns : 'footerStyle' : footerRowIndex\n                      \"\n                      [class.z-sticky-left]=\"\n                        isColumnPinningActive && (footer | zTableCellPin: 'isLeftPinned' : zConfig().columns : 'footer')\n                      \"\n                      [class.z-sticky-right]=\"\n                        isColumnPinningActive &&\n                        (footer | zTableCellPin: 'isRightPinned' : zConfig().columns : 'footer')\n                      \"\n                      [class.z-sticky-left-last]=\"\n                        isColumnPinningActive &&\n                        (footer | zTableCellPin: 'isLastLeftPinned' : zConfig().columns : 'footer')\n                      \"\n                      [class.z-sticky-right-first]=\"\n                        isColumnPinningActive &&\n                        (footer | zTableCellPin: 'isFirstRightPinned' : zConfig().columns : 'footer')\n                      \"\n                      [class.z-sticky-right-last]=\"\n                        isColumnPinningActive &&\n                        (footer | zTableCellPin: 'isLastRightPinned' : zConfig().columns : 'footer')\n                      \"\n                      [class.z-at-left-edge]=\"footer | zTableCellOffset: orderedLeafColumns()\"\n                      [attr.rowspan]=\"rowSpan\"\n                      [attr.colspan]=\"\n                        footer | zTableSpan: zConfig().columns : 'footerColSpan' : footerRowIndex : footerGroup.headers\n                      \">\n                      @let configFooterContent =\n                        footer.column.id | zTableFooterRender: zConfig().columns : footerRowIndex;\n                      @if (configFooterContent !== undefined && configFooterContent !== '') {\n                        <ng-container *flexRender=\"configFooterContent; props: footer.getContext(); let footerContent\">\n                          <div\n                            class=\"flex w-full items-center\"\n                            [class.justify-center]=\"\n                              (footer.column.id\n                                | zTableColumnConfig: zConfig().columns : 'footerAlignClass' : footerRowIndex) ===\n                              'text-center'\n                            \"\n                            [class.justify-end]=\"\n                              (footer.column.id\n                                | zTableColumnConfig: zConfig().columns : 'footerAlignClass' : footerRowIndex) ===\n                              'text-right'\n                            \">\n                            @if (footerContent | zTableIsTemplateRef) {\n                              <!-- TemplateRef rendering -->\n                              <div\n                                class=\"z-template-content\"\n                                [class]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerContentClass' : footerRowIndex\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerContentStyle' : footerRowIndex\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]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerTooltip' : footerRowIndex\n                                \"\n                                [class]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerContentClass' : footerRowIndex\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerContentStyle' : footerRowIndex\n                                \" />\n                            } @else {\n                              <!-- Default/string rendering -->\n                              <span\n                                class=\"z-table-cell-text\"\n                                z-tooltip\n                                [zContent]=\"\n                                  (footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerTooltip' : footerRowIndex) ||\n                                  footerContent\n                                \"\n                                [class]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerContentClass' : footerRowIndex\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerContentStyle' : footerRowIndex\n                                \">\n                                {{ footerContent | translate }}\n                              </span>\n                            }\n                          </div>\n                        </ng-container>\n                      }\n                    </th>\n                  }\n                  @if (\n                    canUseVirtualColumns() &&\n                    virtualRightSpacerWidth() > 0 &&\n                    footer.column.id === lastVirtualCenterColumnId()\n                  ) {\n                    <th\n                      class=\"z-virtual-column-spacer z-virtual-footer-spacer pointer-events-none p-0\"\n                      [style.width.px]=\"virtualRenderedRightSpacerWidth()\"></th>\n                  }\n                }\n              </tr>\n            }\n          }\n        </tfoot>\n      </table>\n    </div>\n  }\n</div>\n\n<!-- Pagination -->\n@if (zConfig().pagination?.enabled !== false) {\n  <div class=\"mt-4 flex items-center justify-between gap-4\">\n    <div class=\"truncate text-sm text-gray-500\">\n      {{ 'i18n_z_ui_table_total_rows' | translate: { total: (paginationTotal() | zFormatNum) } }}\n    </div>\n    <z-pagination\n      [zTotal]=\"paginationTotal()\"\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 || isLoading() || isProcessing()\"\n      (zOnPageChange)=\"onPageChange($event)\" />\n  </div>\n}\n\n<!-- Floating Bulk Action Bar -->\n<ng-template #bulkBarTemplate>\n  @if (bulkBarConfig(); as config) {\n    <div class=\"z-bulk-action-bar-inner\" [class.z-leaving]=\"bulkBarClosing()\">\n      <div class=\"z-bulk-action-bar-count\">\n        {{ bulkBarContext()?.selectedRowIds?.length ?? 0 | zFormatNum }}\n        {{ config.selectedLabel ?? ('i18n_z_ui_table_selected' | translate) }}\n      </div>\n\n      <div class=\"z-bulk-action-bar-divider\"></div>\n\n      <div class=\"z-bulk-action-bar-actions\">\n        <div class=\"z-bulk-action-bar-buttons\">\n          @for (item of bulkBarItems(); track item.action.key) {\n            <button\n              type=\"button\"\n              z-button\n              zSize=\"sm\"\n              [zType]=\"item.buttonType\"\n              [zDisabled]=\"item.disabled\"\n              class=\"z-bulk-action-bar-button\"\n              [disabled]=\"item.disabled\"\n              (click)=\"onBulkActionClick(item.action)\">\n              @if (item.action.icon) {\n                <z-icon [zType]=\"item.action.icon\" [zSize]=\"item.action.iconSize ?? '14'\" />\n              }\n              @if (item.action.label) {\n                <span>{{ item.action.label | translate }}</span>\n              }\n            </button>\n          }\n        </div>\n\n        <z-dropdown-menu class=\"z-bulk-action-bar-menu\" [zItems]=\"bulkBarDropdownItems()\" zPosition=\"top-right\">\n          <button\n            type=\"button\"\n            z-button\n            zType=\"outline\"\n            zSize=\"sm\"\n            zTypeIcon=\"lucideEllipsis\"\n            class=\"z-bulk-action-bar-menu-trigger\"\n            [attr.aria-label]=\"'i18n_z_ui_table_bulk_actions' | translate\"></button>\n        </z-dropdown-menu>\n      </div>\n    </div>\n  }\n</ng-template>\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  zBodyClass=\"mx-0! px-0!\"\n  [zShadow]=\"true\"\n  [zOkText]=\"null\"\n  [zCancelText]=\"'i18n_z_ui_drawer_close' | translate\">\n  <div class=\"z-table-settings-drawer\">\n    <!-- Display Settings -->\n    <div class=\"mx-4 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          [zChecked]=\"showHorizontalBorder()\"\n          [zText]=\"'i18n_z_ui_table_horizontal_border' | translate\"\n          (zChange)=\"showHorizontalBorder.set(!showHorizontalBorder())\" />\n        <z-checkbox\n          [zChecked]=\"showVerticalBorder()\"\n          [zText]=\"'i18n_z_ui_table_vertical_border' | translate\"\n          (zChange)=\"showVerticalBorder.set(!showVerticalBorder())\" />\n        <z-checkbox\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    <!-- T\u1EA1m t\u1EAFt \u0111i\u1EC1u ki\u1EC7n: @if (zConfig().enableSettings) -->\n    <div class=\"mx-4 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        [cdkDropListAutoScrollDisabled]=\"true\"\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' && columnId !== 'rowDrag') {\n            @let column = table.getColumn(columnId);\n            @let isPinned = column?.getIsPinned();\n            @let isVisible = pendingVisibleColumns().includes(columnId);\n            @let isVisibilityDisabled = pendingColumnVisibilityDisabledMap()[columnId];\n            @let isGroupedColumn = groupingColumnMap()[columnId];\n            @let columnEnablePinningConfig = columnId | zTableColumnConfig: zConfig().columns : 'enablePinning';\n            @let canPin =\n              (columnEnablePinningConfig ?? zConfig().enableColumnPinning ?? true) && column?.getCanPin() !== false;\n            @if (!isPinned) {\n              <div\n                cdkDrag\n                [cdkDragDisabled]=\"isGroupedColumn\"\n                [cdkDragData]=\"columnId\"\n                cdkDragLockAxis=\"y\"\n                cdkDragPreviewContainer=\"global\"\n                cdkDragPreviewClass=\"z-drag-preview\"\n                class=\"z-drag-item border-border bg-card hover:border-primary flex cursor-default items-center gap-2 rounded-sm border px-2 py-1.5 text-sm\"\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\"\n                  [class.cursor-pointer]=\"!isGroupedColumn\"\n                  [class.cursor-default]=\"isGroupedColumn\"\n                  [class.opacity-40]=\"isGroupedColumn\" />\n\n                <!-- Visibility Checkbox -->\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isVisible\"\n                  [disabled]=\"isVisibilityDisabled\"\n                  (change)=\"onToggleColumnVisibility(columnId)\"\n                  (mousedown)=\"$event.stopPropagation()\"\n                  class=\"border-input h-4 w-4 shrink-0 cursor-default rounded-sm disabled:opacity-50\" />\n\n                <!-- Column Name -->\n                <span class=\"flex min-w-0 flex-1 flex-col\">\n                  <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                    {{ columnId | zTableColumnHeader: zConfig().columns | translate }}\n                  </span>\n                  @let parents = columnId | zTableColumnParents: zConfig().columns;\n                  @if (parents) {\n                    <span class=\"text-muted-foreground truncate text-[0.625rem]\">({{ parents | translate }})</span>\n                  }\n                </span>\n\n                <!-- Pin Buttons -->\n                @if (canPin) {\n                  <div class=\"flex shrink-0 items-center gap-0.5\" (mousedown)=\"$event.stopPropagation()\">\n                    <button\n                      type=\"button\"\n                      [disabled]=\"!isVisible || isGroupedColumn || !pinAvailabilityMap()[columnId]?.left\"\n                      (click)=\"onToggleColumnPin(columnId, 'left')\"\n                      class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded-sm 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 || isGroupedColumn || !pinAvailabilityMap()[columnId]?.right\"\n                      (click)=\"onToggleColumnPin(columnId, 'right')\"\n                      class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded-sm 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 ?? true) {\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 = pendingVisibleColumns().includes(columnId);\n                @let isVisibilityDisabled = pendingColumnVisibilityDisabledMap()[columnId];\n                @let isGroupedColumn = groupingColumnMap()[columnId];\n                <div\n                  class=\"border-border bg-muted/30 flex items-center gap-2 rounded-sm border px-2 py-1.5 text-sm\"\n                  [class.opacity-60]=\"!isVisible\">\n                  <!-- Pin Icon -->\n                  <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"text-primary shrink-0\" />\n\n                  <!-- Visibility Checkbox -->\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isVisible\"\n                    [disabled]=\"isVisibilityDisabled\"\n                    (change)=\"onToggleColumnVisibility(columnId)\"\n                    class=\"border-input h-4 w-4 shrink-0 cursor-default rounded-sm disabled:opacity-50\" />\n\n                  <!-- Column Name -->\n                  <span class=\"flex min-w-0 flex-1 flex-col\">\n                    <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                      {{ columnId | zTableColumnHeader: zConfig().columns | translate }}\n                    </span>\n                    @let pinnedParents = columnId | zTableColumnParents: zConfig().columns;\n                    @if (pinnedParents) {\n                      <span class=\"text-muted-foreground truncate text-[0.625rem]\">\n                        ({{ pinnedParents | translate }})\n                      </span>\n                    }\n                  </span>\n\n                  <!-- Position Badge -->\n                  <span\n                    class=\"bg-primary/10 text-primary shrink-0 rounded-sm px-1.5 py-0.5 text-[0.625rem] font-medium\">\n                    {{\n                      isPinned === 'start'\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                    [disabled]=\"isGroupedColumn\"\n                    (click)=\"onToggleColumnPin(columnId, isPinned === 'start' ? 'left' : 'right')\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground cursor-pointer rounded-sm p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                    title=\"Unpin\">\n                    <z-icon zType=\"lucideX\" zSize=\"12\" />\n                  </button>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      }\n    </div>\n  </div>\n</z-drawer>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;contain:inline-size;width:100%;max-width:100%;min-width:0;height:100%;overflow-x:visible;--scrollbar-track-thickness: 7px;--scrollbar-track-color: transparent;--scrollbar-thumb-shape: 3px;--z-shadow-left-right: -1.875rem;--z-shadow-left-width: 1.875rem;--z-shadow-left-opacity: 0;--z-shadow-right-left: -1.875rem;--z-shadow-right-width: 1.875rem;--z-shadow-right-opacity: 0;--z-sticky-left-border-color: transparent;--z-sticky-right-border-color: var(--border);--z-cell-selection-background: color-mix(in srgb, var(--primary) 12%, transparent);--z-cell-selection-background-opaque: color-mix(in srgb, var(--primary) 12%, var(--card))}.z-table-container{display:flex;flex-direction:column;position:relative;box-sizing:border-box;contain:inline-size;width:100%;max-width:100%;min-width:0;height:100%;overflow:hidden;border-radius:var(--radius-sm);border:thin solid var(--border);background-color:var(--card)}.z-table-container:focus{outline:none}.z-table-container.z-table-borderless{border:none;border-radius:0;box-shadow:none!important;background-color:transparent}.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}.z-table-container.z-hide-pinned-top-border tbody tr.z-pinned-top.z-shadow-bottom>td{border-bottom-color:var(--border)!important}.z-table-container.z-hide-pinned-bottom-border tbody.z-has-bottom-pinned td.z-at-bottom{border-bottom-color:transparent}table{width:fit-content;min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:.875rem}.z-table-container.z-column-resizing table,.z-table-toolbar{min-width:0}.z-table-toolbar .z-settings-btn{transition:all .15s ease}.z-table-toolbar .z-settings-btn:hover{border-color:var(--muted-foreground)}.z-table-filter-header{min-width:0}.z-table-filter-header button{flex:none}.z-table-filter-header-overflow-chip{animation:z-table-filter-chip-enter .16s ease}@media(prefers-reduced-motion:reduce){.z-table-filter-header-overflow-chip{animation:none}}@keyframes z-table-filter-chip-enter{0%{opacity:0;transform:translate(-.25rem)}to{opacity:1;transform:translate(0)}}::ng-deep .z-bulk-action-bar-overlay{position:fixed!important;top:auto;left:50%;bottom:0;transform:translate(-50%);max-width:calc(100vw - 2rem);margin-bottom:1rem;transform-origin:center bottom}.z-bulk-action-bar-inner{border:thin solid color-mix(in srgb,var(--border) 88%,transparent);border-radius:var(--radius-md);background:color-mix(in srgb,var(--card) 96%,var(--background));color:var(--foreground);box-shadow:0 1rem 2.5rem color-mix(in srgb,var(--foreground) 20%,transparent),0 .25rem .75rem color-mix(in srgb,var(--foreground) 12%,transparent),0 0 0 1px color-mix(in srgb,var(--background) 65%,transparent) inset;display:flex;align-items:center;gap:.5rem;width:max-content;min-height:2.25rem;max-width:calc(100vw - 2rem);padding:.5rem;overflow:hidden;transform-origin:center bottom;animation:z-bulk-action-bar-enter .18s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}.z-bulk-action-bar-inner.z-leaving{pointer-events:none;animation:z-bulk-action-bar-exit .14s ease-in forwards}.z-bulk-action-bar-count{flex:none;padding:0 .25rem;white-space:nowrap;font-size:.8125rem;font-weight:500;color:var(--foreground)}.z-bulk-action-bar-divider{width:1px;height:1.5rem;flex:none;background:color-mix(in srgb,var(--border) 88%,transparent)}.z-bulk-action-bar-actions,.z-bulk-action-bar-buttons{display:flex;align-items:center;gap:.5rem;min-width:0}.z-bulk-action-bar-button{flex:none}.z-bulk-action-bar-menu{display:none;flex:none}@media(max-width:48rem){.z-bulk-action-bar-inner{width:calc(100vw - 2rem);gap:.375rem}.z-bulk-action-bar-count{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}.z-bulk-action-bar-buttons{display:none}.z-bulk-action-bar-menu{display:block}}@keyframes z-bulk-action-bar-enter{0%{opacity:0;transform:translateY(.875rem)}to{opacity:1;transform:translateY(0)}}@keyframes z-bulk-action-bar-exit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(.875rem)}}@media(prefers-reduced-motion:reduce){.z-bulk-action-bar-inner{animation:none}}:host ::ng-deep .z-table-cell-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;min-width:0;-webkit-user-select:text;user-select:text}:host ::ng-deep .z-table-cell-text>*,:host ::ng-deep .z-table-cell-text *{display:inline-block;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}:host ::ng-deep .z-table-cell-content-trigger{display:inline-block;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.z-template-content{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.z-template-content>*{min-width:0;max-width:100%}.z-template-content>[class*=flex]{min-width:0;max-width:100%}.z-template-content>[class*=flex]>*{min-width:0;flex-shrink:1}.z-template-content>[class*=grid]{min-width:0;max-width:100%}.z-thead-wrapper{flex-shrink:0;background:var(--muted);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;position:relative;z-index:4}.z-thead-wrapper::-webkit-scrollbar{display:none}.z-thead-wrapper th{height:auto;padding:.5rem;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;width:100%;max-width:100%;min-width:0;min-height:6.25rem;display:flex;flex-direction:column;overflow:hidden}.z-tbody-scrollbar{flex:1;width:100%;max-width:100%;min-width:0;height:100%}.z-empty-state,.z-loading-state{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:6.25rem;height:100%;color:var(--muted-foreground);font-size:.875rem;animation:z-fade-in .2s ease-out}.z-tbody-scrollbar,.z-tbody-scrollbar table{animation:z-fade-in .2s ease-out}@keyframes z-fade-in{0%{opacity:0;transform:translateY(.25rem)}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:.5rem 12px;height:var(--z-row-height, 2.375rem);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-color:transparent}.z-tbody-wrapper tbody.z-has-bottom-pinned td.z-at-bottom{border-bottom-color:var(--border)}.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:.75rem}.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:.5rem 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;box-sizing:border-box;width:100%}.z-virtual-row,.z-virtual-flow{position:absolute;top:0;left:0;width:100%}.z-virtual-row-flow{position:relative}.z-virtual-row-fixed{overflow:hidden}.z-virtual-row-group-header{z-index:2}.z-virtual-row-sticky-group{position:sticky}.z-virtual-row-sticky-group-shadow{box-shadow:0 1px 3px #00000014}.z-virtual-row-sticky-group-shadow:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d}tr.z-group-row-sticky{position:sticky;z-index:2}tr.z-group-row-sticky>td{background:var(--card)}tr.z-group-row-sticky-shadow{box-shadow:0 1px 3px #00000014}tr.z-group-row-sticky-shadow:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d}tr.z-child-row td:first-child{border-left:.125rem solid var(--primary)!important;padding-left:.75rem!important}tbody tr.z-context-menu-active,tbody tr.z-context-menu-active td{background-color:var(--muted)!important}tbody tr.z-selected,tbody tr.z-selected td{background-color:color-mix(in srgb,var(--primary) 15%,var(--background))!important}tbody tr.z-selected:hover,tbody tr.z-selected:hover td{background-color:color-mix(in srgb,var(--primary) 20%,var(--background))!important}tbody tr.z-indeterminate-selected,tbody tr.z-indeterminate-selected td{background-color:color-mix(in srgb,var(--primary) 10%,var(--background))!important}tbody tr.z-indeterminate-selected:hover,tbody tr.z-indeterminate-selected:hover td{background-color:color-mix(in srgb,var(--primary) 15%,var(--background))!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{background-color:var(--muted)!important}tbody tr.z-pinned-bottom-last>td{border-bottom-color:transparent!important}tbody tr.z-pinned-bottom-first>td{border-top:thin solid var(--border)}:host .z-tbody-wrapper tbody tr:not(.z-pinned-top):not(.z-pinned-bottom):has(+tr.z-pinned-bottom)>td{border-bottom-color:transparent}tr.z-expanded-row>td{border-left:.125rem solid var(--primary);background-color:var(--background)!important}.z-expanded-row-content{transform-origin:top center}@keyframes z-expanded-row-reveal{0%{clip-path:inset(0 0 100% 0);translate:0 -.375rem;opacity:0}to{clip-path:inset(0 0 0 0);translate:none;opacity:1}}@keyframes z-expanded-row-fade-in{0%{opacity:0}to{opacity:1}}tr.z-expanded-row-enter{animation:z-expanded-row-fade-in .18s ease-out}tr.z-expanded-row-enter .z-expanded-row-content{animation:z-expanded-row-reveal .18s ease-out}@keyframes z-child-row-slide-in{0%{translate:0 -.375rem;opacity:0}to{translate:none;opacity:1}}tr.z-child-row.z-row-enter,tr.z-group-child-row.z-row-enter{animation:z-child-row-slide-in .18s ease-out}@media(prefers-reduced-motion:reduce){tr.z-expanded-row-enter,tr.z-child-row.z-row-enter,tr.z-group-child-row.z-row-enter,tr.z-expanded-row-enter .z-expanded-row-content,tr.z-child-row.z-row-enter .z-expanded-row-content,tr.z-group-child-row.z-row-enter .z-expanded-row-content{animation-duration:1ms}}.z-sub-table-container{padding:.75rem 1rem .75rem 3rem;background-color:var(--background)}.z-table-content-trigger{display:block;width:100%;min-width:0;min-height:1.5rem;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;line-height:1.5rem;text-align:inherit;outline:0;cursor:text}.z-table-content-trigger:hover{color:var(--primary)}.z-content-edit-active{position:relative;z-index:2}td:has(>.z-table-content-trigger:focus-visible){position:relative;z-index:2}td:has(>.z-table-content-trigger:focus-visible):after{position:absolute;z-index:3;inset:0;border:1px solid var(--primary);content:\"\";pointer-events:none}td.z-cell-selectable{-webkit-user-select:none;user-select:none}td.z-cell-range-selected{position:relative;isolation:isolate}td.z-cell-range-selected:before{position:absolute;z-index:0;box-sizing:border-box;top:var(--z-cell-range-top, 0);right:var(--z-cell-range-right, 0);bottom:var(--z-cell-range-bottom, 0);left:var(--z-cell-range-left, 0);background-color:var(--z-cell-selection-background);content:\"\";pointer-events:none}td.z-cell-range-selected>*{position:relative;z-index:1}td.z-cell-range-top:before{border-top:1px solid var(--primary)}td.z-cell-range-right:before{border-right:1px solid var(--primary)}td.z-cell-range-bottom:before{border-bottom:1px solid var(--primary)}td.z-cell-range-left:before{border-left:1px solid var(--primary)}td.z-cell-active{position:relative;z-index:3;background-color:var(--z-cell-selection-background)!important}td.z-cell-active:after{position:absolute;z-index:4;inset:0;border:1px solid var(--primary);content:\"\";pointer-events:none}td.z-content-edit-active{-webkit-user-select:text;user-select:text}td.z-cell-active.z-row-hover,td.z-content-edit-active.z-row-hover{background-color:var(--card)!important}thead th{position:relative}thead th .z-resizer{position:absolute;right:0;top:0;height:100%;width:.5rem;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:.1875rem;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:.1875rem}thead th .z-resizer.z-is-resizing:after{opacity:1;background:var(--primary);width:.1875rem}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;border-right:thin solid var(--z-sticky-left-border-color)}.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:var(--z-shadow-left-right);width:var(--z-shadow-left-width);pointer-events:none;box-shadow:inset 10px 0 8px -8px #0000001a;z-index:10;opacity:var(--z-shadow-left-opacity)}:host-context(.dark) .z-thead-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-thead-wrapper td.z-sticky-left-last:after,:host-context(.dark) .z-tbody-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-tbody-wrapper td.z-sticky-left-last:after,:host-context(.dark) .z-tfoot-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-tfoot-wrapper td.z-sticky-left-last:after{box-shadow:inset 10px 0 10px -8px #0000004d}.z-thead-wrapper.z-scroll-left,.z-tbody-wrapper.z-scroll-left,.z-tfoot-wrapper.z-scroll-left{--z-shadow-left-opacity: 1}.z-thead-wrapper.z-scroll-left:where(.dark,.dark *),.z-tbody-wrapper.z-scroll-left:where(.dark,.dark *),.z-tfoot-wrapper.z-scroll-left:where(.dark,.dark *){--z-sticky-left-border-color: var(--border)}.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;border-left:thin solid var(--z-sticky-right-border-color)}.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:var(--z-shadow-right-left);width:var(--z-shadow-right-width);pointer-events:none;box-shadow:inset -10px 0 8px -8px #0000001a;z-index:10;opacity:var(--z-shadow-right-opacity)}:host-context(.dark) .z-thead-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-thead-wrapper td.z-sticky-right-first:before,:host-context(.dark) .z-tbody-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-tbody-wrapper td.z-sticky-right-first:before,:host-context(.dark) .z-tfoot-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-tfoot-wrapper td.z-sticky-right-first:before{box-shadow:inset -10px 0 10px -8px #0000004d}.z-thead-wrapper.z-scroll-right,.z-tbody-wrapper.z-scroll-right,.z-tfoot-wrapper.z-scroll-right{--z-shadow-right-opacity: 1}.z-thead-wrapper.z-scroll-right:not(:where(.dark,.dark *)),.z-tbody-wrapper.z-scroll-right:not(:where(.dark,.dark *)),.z-tfoot-wrapper.z-scroll-right:not(:where(.dark,.dark *)){--z-sticky-right-border-color: transparent}.z-pinning-overflow{--z-shadow-left-opacity: 0 !important;--z-shadow-right-opacity: 0 !important;--z-sticky-left-border-color: transparent !important;--z-sticky-right-border-color: transparent !important}.z-pinning-overflow .z-sticky-left,.z-pinning-overflow .z-sticky-right{position:relative!important;right:auto!important;left:auto!important}.z-pinning-overflow .z-sticky-left-last:after,.z-pinning-overflow .z-sticky-right-first:before,.z-pinning-overflow .z-sticky-right-last:after{display:none!important}.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:-1.875rem;width:1.875rem;background:var(--muted);pointer-events:none}.z-tfoot-wrapper{flex-shrink:0;width:100%;max-width:100%;min-width:0;background:var(--muted);overflow-x:hidden;overflow-y:hidden;touch-action:pan-y pinch-zoom}.z-tfoot-wrapper th{height:auto;padding:.5rem 12px;text-align:left;vertical-align:middle;font-weight:500;font-size:.75rem;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:.125rem 4px;border-radius:var(--radius-xs);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:focus-visible,.z-row-pin-trigger.z-popover-open{background-color:color-mix(in srgb,var(--foreground) 8%,transparent);color:var(--foreground)}.z-row-pin-trigger:active{background-color:color-mix(in srgb,var(--foreground) 12%,transparent)}.z-row-pin-trigger.text-primary{color:var(--primary)}.z-row-pin-unpin-trigger{color:var(--muted-foreground);outline:none}.z-row-pin-unpin-trigger:hover{color:var(--destructive);background-color:color-mix(in srgb,var(--destructive) 10%,transparent)}.z-row-pin-unpin-trigger:focus,.z-row-pin-unpin-trigger:focus-visible{color:var(--muted-foreground);background-color:transparent;outline:none;box-shadow:none}.z-row-pin-unpin-trigger:active{color:var(--destructive);background-color:color-mix(in srgb,var(--destructive) 14%,transparent)}.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:var(--radius-sm);min-width:0;overflow:hidden;flex-shrink:1}th .z-header-text-wrapper.z-has-options:hover,th .z-header-text-wrapper.z-has-options:focus-visible,th .z-header-text-wrapper.z-has-options.z-popover-open{background-color:color-mix(in srgb,var(--foreground) 8%,transparent);outline:none}th .z-header-text-wrapper.z-has-options:active{background-color:color-mix(in srgb,var(--foreground) 12%,transparent)}.z-column-menu-item{position:relative;z-index:1;line-height:1.25rem;transition:background-color .15s ease,color .15s ease}.z-column-menu-item:focus-visible,.z-column-menu-item.z-popover-open{background-color:var(--muted);outline:none}.z-table-drag-preview{box-sizing:border-box;border-radius:var(--radius-md);background-color:var(--card);border:1px solid var(--primary);box-shadow:0 10px 24px #00000029;overflow:hidden;z-index:10000!important;pointer-events:none}.z-table-drag-preview:where(.dark,.dark *){box-shadow:0 5px 20px #00000080}.z-table-drag-preview-row{border:0;border-radius:var(--radius-xs);background-color:var(--background);box-shadow:0 8px 20px #0000001f,inset 0 0 0 1px color-mix(in srgb,var(--primary) 45%,var(--border))}.z-table-drag-preview-row table,.z-table-drag-preview-row tbody,.z-table-drag-preview-row tr{height:100%}.z-table-drag-preview-row td{vertical-align:middle!important;background-color:var(--background)}.z-table-drag-preview-virtual{border:0;border-radius:0;box-shadow:0 8px 20px #0000001f,inset 0 0 0 1px color-mix(in srgb,var(--primary) 45%,var(--border))}.z-table-drag-source{display:none!important}.z-virtual-row.z-table-drag-source{display:block!important;pointer-events:none;outline:1px solid var(--border);outline-offset:-1px}.z-virtual-row.z-table-drag-source td{color:color-mix(in srgb,var(--foreground) 45%,transparent);border-color:var(--border)!important;background-color:var(--card)!important}.z-virtual-row.z-table-drag-source td>*{opacity:.45}[data-z-table-drag-handle]{touch-action:none;-webkit-user-select:none;user-select:none}.z-column-drop-list{min-height:3.125rem;overscroll-behavior:contain}.cdk-drag-preview.z-drag-preview,.cdk-drag-placeholder.z-drag-item{border-radius:var(--radius-sm)}.z-table-drag-placeholder{width:100%;min-height:2.625rem;box-sizing:border-box;border:2px dashed var(--primary);border-radius:0;background-color:color-mix(in srgb,var(--primary) 10%,var(--background));pointer-events:none}.z-table-drag-placeholder-row>td{padding:0!important;border:0!important;background:transparent!important}.z-table-drag-placeholder-row .z-table-drag-placeholder{border-radius:0;background-color:color-mix(in srgb,var(--primary) 10%,transparent)}.z-table-drag-placeholder-virtual{position:absolute;top:0;left:0;z-index:20;border-radius:0}.z-tbody-wrapper tr.z-group-row td{background:var(--card);border-top:none;border-bottom:1px solid var(--border)}.z-virtual-row:not(.z-virtual-row-flow) tr.z-group-row td{background:var(--card);border-top:none;border-bottom:none}.z-group-row-sticky-wrapper{display:inline-flex;align-items:center;translate:var(--z-scroll-x, 0px) 0}.z-table-container:not(.z-hide-horizontal-border) .z-virtual-row:not(.z-virtual-row-flow):after,.z-table-container:not(.z-hide-horizontal-border) .z-virtual-row-flow.z-virtual-row-group-header:after{content:\"\";position:absolute;right:0;bottom:0;left:0;z-index:3;height:1px;background:var(--border);pointer-events:none}.z-tbody-wrapper tr.z-group-child-row td.z-at-left-edge,.z-virtual-row tr.z-group-child-row td.z-at-left-edge{border-left:2px solid var(--primary)!important;padding-left:var(--z-group-content-indent, .75rem)}.z-group-row-trigger{display:inline-flex;min-height:2rem;max-width:100%;align-items:center;gap:.5rem;padding:.25rem .5rem .25rem .75rem;color:var(--primary);font-size:.8125rem;font-weight:600;vertical-align:middle;cursor:pointer}.z-group-row-remove{margin-left:.125rem;color:var(--muted-foreground);vertical-align:middle}.z-group-row-remove:hover,.z-group-row-remove:focus-visible{color:var(--destructive);background:color-mix(in srgb,var(--destructive) 10%,transparent);outline:none}.z-group-row-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.z-group-row-column-label{color:color-mix(in srgb,var(--primary) 65%,var(--foreground));font-weight:500;margin-right:.25rem}.z-group-row-count{display:inline-flex;min-width:1.25rem;height:1.25rem;align-items:center;justify-content:center;padding:0 .375rem;border-radius:var(--radius-pill);background:var(--primary);color:var(--primary-foreground);font-size:.6875rem;font-weight:600}.z-group-row-loading{display:inline-flex;align-items:center;margin-left:.25rem}.z-group-row-has-totals td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.z-group-row-has-totals .z-group-row-label-cell{position:sticky;left:0;z-index:2;background:var(--card)}.z-group-row-has-totals .z-group-row-label-cell .z-group-row-sticky-wrapper{max-width:100%;translate:none}.z-group-row-total{display:inline-block;max-width:100%;color:var(--foreground);font-size:.8125rem;font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.z-group-row-total-cell{text-align:right}:host .z-tbody-wrapper td.z-sticky-right-first.z-cell-range-selected:before,:host .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-selected:before{position:absolute!important;z-index:0!important;box-sizing:border-box!important;top:var(--z-cell-range-top, 0)!important;right:var(--z-cell-range-right, 0)!important;bottom:var(--z-cell-range-bottom, 0)!important;left:var(--z-cell-range-left, 0)!important;width:auto!important;background-color:var(--z-cell-selection-background-opaque)!important;box-shadow:none!important;content:\"\"!important;pointer-events:none!important;opacity:1!important}:host .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-selected:after{display:none!important}:host .z-tbody-wrapper td.z-sticky-right-first.z-cell-range-top:before,:host .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-top:before{border-top:1px solid var(--primary)}:host .z-tbody-wrapper td.z-sticky-right-first.z-cell-range-right:before,:host .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-right:before{border-right:1px solid var(--primary)}:host .z-tbody-wrapper td.z-sticky-right-first.z-cell-range-bottom:before,:host .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-bottom:before{border-bottom:1px solid var(--primary)}:host .z-tbody-wrapper td.z-sticky-right-first.z-cell-range-left:before,:host .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-left:before{border-left:1px solid var(--primary)}:host-context(.z-table-pointer-dragging) .z-tbody-wrapper td.z-sticky-right-first.z-cell-range-selected:before,:host-context(.z-table-pointer-dragging) .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-selected:before{background-color:transparent!important}:host td.z-cell-range-selected:before{position:absolute;z-index:0;box-sizing:border-box;top:var(--z-cell-range-top, 0);right:var(--z-cell-range-right, 0);bottom:var(--z-cell-range-bottom, 0);left:var(--z-cell-range-left, 0);background-color:var(--z-cell-selection-background);box-shadow:none;content:\"\";pointer-events:none;opacity:1}:host td.z-cell-range-top:before{border-top:1px solid var(--primary)}:host td.z-cell-range-right:before{border-right:1px solid var(--primary)}:host td.z-cell-range-bottom:before{border-bottom:1px solid var(--primary)}:host td.z-cell-range-left:before{border-left:1px solid var(--primary)}:host-context(.z-table-pointer-dragging) .z-tbody-wrapper td{pointer-events:none}:host-context(.z-table-pointer-dragging) td.z-row-hover{background-color:var(--background)!important}:host td.z-cell-active,:host td.z-cell-active.z-row-hover{background-color:var(--z-cell-selection-background)!important}:host td.z-content-edit-active.z-row-hover{background-color:var(--card)!important}:host tr.z-pinned-top td.z-cell-active,:host tr.z-pinned-top td.z-cell-active.z-row-hover,:host tr.z-pinned-bottom td.z-cell-active,:host tr.z-pinned-bottom td.z-cell-active.z-row-hover,:host td.z-cell-active.z-sticky-left,:host td.z-cell-active.z-sticky-left.z-row-hover,:host td.z-cell-active.z-sticky-right,:host td.z-cell-active.z-sticky-right.z-row-hover{background-color:var(--z-cell-selection-background-opaque)!important}:host tr.z-pinned-top td.z-cell-range-selected,:host tr.z-pinned-bottom td.z-cell-range-selected,:host td.z-cell-range-selected.z-sticky-left,:host td.z-cell-range-selected.z-sticky-right{background-color:var(--card)}:host tr.z-pinned-top td.z-cell-range-selected:before,:host tr.z-pinned-bottom td.z-cell-range-selected:before,:host td.z-cell-range-selected.z-sticky-left:before,:host td.z-cell-range-selected.z-sticky-right:before{background-color:var(--z-cell-selection-background-opaque)}:host-context(.z-table-pointer-dragging) td.z-cell-range-selected,:host-context(.z-table-pointer-dragging) td.z-cell-range-selected.z-row-hover,:host-context(.z-table-pointer-dragging) td.z-cell-active,:host-context(.z-table-pointer-dragging) td.z-cell-active.z-row-hover{background-color:var(--card)!important}:host-context(.z-table-pointer-dragging) td.z-cell-range-selected:before{background-color:transparent}:host .z-tbody-wrapper tbody tr.z-group-child-row:has(+tr.z-group-row)>td.z-at-bottom{border-bottom-color:var(--border)}:host .z-virtual-row:has(tr.z-group-child-row):has(+.z-virtual-row tr.z-group-row) tr.z-group-child-row>td.z-at-bottom{border-bottom-color:var(--border)}.z-thead-wrapper th.z-virtual-column-spacer,.z-tfoot-wrapper th.z-virtual-column-spacer{box-sizing:border-box;padding:0!important;background:var(--muted);border-left:thin solid var(--border)}.z-thead-wrapper th.z-virtual-header-spacer{border-bottom:thin solid var(--border)}.z-tfoot-wrapper th.z-virtual-footer-spacer{border-top:thin solid var(--border)}.z-tbody-wrapper td.z-virtual-column-spacer{box-sizing:border-box;height:auto;padding:0!important;background:var(--card);border-left:thin solid var(--border);border-bottom:thin solid var(--border)}.z-tbody-wrapper tr:hover td.z-virtual-column-spacer{background-color:var(--muted)}.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:var(--radius-sm);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 .125rem .125rem 0;transform:translate(-50%,-60%) rotate(45deg)}.z-table-settings-drawer input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}.z-virtual-pinned-top{position:sticky;top:0;left:0;z-index:3;width:100%}.z-virtual-pinned-bottom{position:sticky;bottom:0;left:0;z-index:3;width:100%}\n"], dependencies: [{ kind: "component", type: ZTableComponent, selector: "z-table", inputs: ["zClass", "zConfig", "zLoading", "zKey", "zVariant"], outputs: ["zChange", "zControl"], exportAs: ["zTable"] }, { 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: "ng-template[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: "directive", type: ZTableDraggableDirective, selector: "[z-table-draggable]", inputs: ["z-table-draggable", "z-table-drag-table-id", "z-table-drag-item-id", "z-table-drag-disabled", "z-table-drag-handle"] }, { kind: "directive", type: ZTableDropTargetDirective, selector: "[z-table-drop-target]", inputs: ["z-table-drop-target", "z-table-drop-table-id", "z-table-drop-item-id", "z-table-drop-disabled"], outputs: ["zTableDropped"] }, { kind: "component", type: ZCheckboxComponent, selector: "z-checkbox", inputs: ["class", "zType", "zSize", "zLabel", "zText", "zDisabled", "zIndeterminate", "zValue", "zOptions", "zOrientation", "zCheckAll", "zCheckAllText", "zChecked", "zGroupValue"], outputs: ["zChange", "zGroupChange", "zOnBlur", "zOnFocus", "zControl", "zEvent", "zCheckedChange", "zGroupValueChange"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zLoadingOutline", "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", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "component", type: ZLoadingComponent, selector: "z-loading", inputs: ["class", "zSpinner", "zSize", "zColor", "zText", "zOverlay", "zOverlayType", "zFullscreen", "zLoading"] }, { kind: "directive", type: ZHoverGlideDirective, selector: "[zHoverGlide]", inputs: ["zHoverGlideSelector", "zHoverGlideClass", "zHoverGlideDisabled"] }, { 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", "zBodyClass", "zVisible", "zTitle", "zDescription", "zWidth", "zHeight", "zPlacement", "zClosable", "zMaskClosable", "zDisableShadow", "zHeaderBorder", "zFooterBorder", "zHideFooter", "zHideHeader", "zOkText", "zCancelText", "zOkDestructive", "zOkDisabled", "zLoading", "zOverlay", "zShadow", "zShape", "zContentLoading", "zSkeletonRows", "zExpand", "zScrollMode"], outputs: ["zOnOk", "zOnCancel", "zAfterClose", "zScrollbar", "zVisibleChange"], exportAs: ["zDrawer"] }, { kind: "component", type: ZDropdownMenuComponent, selector: "z-dropdown-menu", inputs: ["zItems", "zLabel", "zIcon", "zButtonType", "zPosition", "zButtonSize", "zOffset", "zMinWidth", "zMaxWidth", "zDisabled", "zWave"], outputs: ["zOnItemClick"] }, { kind: "component", type: ZPaginationComponent, selector: "z-pagination", inputs: ["zPageIndex", "zPageSize", "zTotal", "zPageSizeOptions", "zShowSizeChanger", "zShowQuickJumper", "zShowTotal", "zSimple", "zSize", "zDisabled", "zTotalLabel", "zPerPageLabel", "zGoToLabel"], outputs: ["zOnPageChange", "zPageIndexChange", "zPageSizeChange"] }, { kind: "component", type: ZTableFilterComponent, selector: "z-table-filter", inputs: ["zColumn", "zTable", "zResetVersion", "zSortingState", "zEnableMultiSort"] }, { kind: "component", type: ZTableEditCellComponent, selector: "z-table-edit-cell", inputs: ["zRow", "zRowId", "zRowIndex", "zColumnId", "zValue", "zEditConfig", "zRowUpdate"], outputs: ["zChange"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zContext", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "directive", type: ZTableResizeDirective, selector: "[z-table-resize],[zTableResize]", inputs: ["zTableResize"] }, { kind: "directive", type: ZTableRowHoverDirective, selector: "[z-table-row-hover], [zTableRowHover]", inputs: ["zTableRowHover"] }, { kind: "component", type: ZTableIconTextComponent, selector: "z-table-icon-text", inputs: ["zText", "zTooltip", "zTriggerElement"] }, { kind: "component", type: ZTableActionsComponent, selector: "z-table-actions", inputs: ["zConfig", "zRow", "zRowId", "zDropdownButtonSize"], outputs: ["zActionClick"] }, { kind: "component", type: ZTableContentEditorComponent, selector: "z-table-content-editor", inputs: ["zValue", "zConfig"], outputs: ["zCommit", "zCancel"] }, { kind: "pipe", type: ZTableIsTemplateRefPipe, name: "zTableIsTemplateRef" }, { kind: "pipe", type: ZTableHasIconPipe, name: "zTableHasIcon" }, { kind: "pipe", type: ZTableCellBottomPipe, name: "zTableCellBottom" }, { kind: "pipe", type: ZTableCellClickablePipe, name: "zTableCellClickable" }, { kind: "pipe", type: ZTableCellConfigPipe, name: "zTableCellConfig" }, { kind: "pipe", type: ZTableCellEditPipe, name: "zTableCellEdit" }, { kind: "pipe", type: ZTableCellOffsetPipe, name: "zTableCellOffset" }, { kind: "pipe", type: ZTableCellPinPipe, name: "zTableCellPin" }, { kind: "pipe", type: ZTableCellVisiblePipe, name: "zTableCellVisible" }, { 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: ZTableFooterRenderPipe, name: "zTableFooterRender" }, { kind: "pipe", type: ZTablePinningStylesPipe, name: "zTablePinningStyles" }, { kind: "pipe", type: ZTablePopoverConfigPipe, name: "zTablePopoverConfig" }, { kind: "pipe", type: ZTableRowPipe, name: "zTableRow" }, { kind: "pipe", type: ZTableRowConfigPipe, name: "zTableRowConfig" }, { kind: "pipe", type: ZTableSpanPipe, name: "zTableSpan" }, { kind: "pipe", type: ZTableSubTableConfigPipe, name: "zTableSubTableConfig" }, { kind: "pipe", type: ZTableTooltipConfigPipe, name: "zTableTooltipConfig" }, { kind: "pipe", type: ZTableCellRenderPipe, name: "zTableCellRender" }, { kind: "pipe", type: ZFormatNumPipe, name: "zFormatNum" }, { 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: "22.1.6", type: ZTableComponent, isStandalone: true, selector: "z-table", inputs: { zClass: { classPropertyName: "zClass", publicName: "zClass", isSignal: true, isRequired: false, transformFunction: null }, 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 }, zVariant: { classPropertyName: "zVariant", publicName: "zVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zChange: "zChange", zControl: "zControl" }, host: { classAttribute: "z-table block relative py-1" }, providers: [TranslatePipe, ZTableDragService], viewQueries: [{ propertyName: "theadWrapper", first: true, predicate: ["theadWrapper"], descendants: true, isSignal: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], 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 }, { propertyName: "virtualRowElements", predicate: ["virtualRow"], descendants: true, isSignal: true }, { propertyName: "groupRowElements", predicate: ["groupRow"], descendants: true, isSignal: true }, { propertyName: "bulkBarTemplateRef", first: true, predicate: ["bulkBarTemplate"], descendants: true, isSignal: true }], exportAs: ["zTable"], ngImport: i0, template: "<!-- Toolbar: Search & Settings -->\n@if (isSearchEnabled() || zConfig().enableSettings) {\n  <div class=\"z-table-toolbar mb-2 flex items-center justify-between gap-4\">\n    <!-- Search -->\n    @if (isSearchEnabled()) {\n      @let config = searchConfig();\n      <z-input\n        [class]=\"config?.width ?? 'w-64'\"\n        [zSize]=\"config?.size ?? 'sm'\"\n        [zPlaceholder]=\"config?.placeholder ?? 'i18n_z_ui_table_search' | translate\"\n        [zSearch]=\"true\"\n        [zDebounce]=\"config?.debounceTime ?? 300\"\n        (zOnSearch)=\"onSearchChange($event)\" />\n    } @else {\n      <div></div>\n    }\n\n    <!-- Settings Button -->\n    @if (zConfig().enableSettings) {\n      <z-button zType=\"outline\" zSize=\"sm\" zTypeIcon=\"lucideSettings\" (click)=\"openSettingsDrawer()\">\n        {{ 'i18n_z_ui_table_settings' | translate }}\n      </z-button>\n    }\n  </div>\n}\n\n@if (zConfig().enableFilterHeader && appliedFilterChips().length > 0) {\n  <div class=\"z-table-filter-header mb-2 flex min-w-0 items-center gap-2\">\n    <div class=\"flex min-w-0 flex-1 flex-wrap items-center gap-1.5\">\n      @for (chip of visibleAppliedFilterChips(); track chip.id) {\n        <span\n          class=\"border-border bg-muted/60 text-foreground inline-flex max-w-80 min-w-0 shrink-0 items-center gap-1 rounded-sm border px-2 py-1 text-[0.8125rem] shadow-xs\">\n          <span class=\"font-medium whitespace-nowrap\">{{ chip.label }}</span>\n          <span class=\"text-muted-foreground\">:</span>\n          <span class=\"truncate\" z-tooltip [zContent]=\"chip.value\" zTooltipTrigger=\"hover\" zTooltipPosition=\"top\">\n            {{ chip.value }}\n          </span>\n          <button\n            type=\"button\"\n            class=\"hover:bg-destructive/10 hover:text-destructive focus-visible:ring-ring -mr-1 inline-flex size-5 cursor-pointer items-center justify-center rounded-sm outline-none focus-visible:ring-2\"\n            [attr.aria-label]=\"'i18n_z_ui_table_filter_remove' | translate\"\n            (click)=\"clearAppliedFilterChip(chip)\">\n            <z-icon zType=\"lucideX\" zSize=\"12\" />\n          </button>\n        </span>\n      }\n      @if (hiddenAppliedFilterChipCount() > 0 && isFilterHeaderExpanded()) {\n        @for (chip of overflowAppliedFilterChips(); track chip.id) {\n          <span\n            class=\"z-table-filter-header-overflow-chip border-border bg-muted/60 text-foreground inline-flex max-w-80 min-w-0 shrink-0 items-center gap-1 rounded-sm border px-2 py-1 text-[0.8125rem] shadow-xs\"\n            [attr.aria-hidden]=\"!isFilterHeaderExpanded()\">\n            <span class=\"font-medium whitespace-nowrap\">{{ chip.label }}</span>\n            <span class=\"text-muted-foreground\">:</span>\n            <span class=\"truncate\" z-tooltip [zContent]=\"chip.value\" zTooltipTrigger=\"hover\" zTooltipPosition=\"top\">\n              {{ chip.value }}\n            </span>\n            <button\n              type=\"button\"\n              class=\"hover:bg-destructive/10 hover:text-destructive focus-visible:ring-ring -mr-1 inline-flex size-5 cursor-pointer items-center justify-center rounded-sm outline-none focus-visible:ring-2\"\n              [attr.aria-label]=\"'i18n_z_ui_table_filter_remove' | translate\"\n              (click)=\"clearAppliedFilterChip(chip)\">\n              <z-icon zType=\"lucideX\" zSize=\"12\" />\n            </button>\n          </span>\n        }\n      }\n      @if (hiddenAppliedFilterChipCount() > 0) {\n        <button\n          type=\"button\"\n          class=\"text-primary hover:bg-primary/10 focus-visible:ring-ring inline-flex h-7 cursor-pointer items-center rounded-sm px-2 text-xs font-medium outline-none focus-visible:ring-2\"\n          (click)=\"toggleFilterHeaderExpanded()\">\n          {{\n            isFilterHeaderExpanded()\n              ? ('i18n_z_ui_table_show_less' | translate)\n              : ('i18n_z_ui_table_show_more' | translate: { count: hiddenAppliedFilterChipCount() })\n          }}\n        </button>\n      }\n      <button\n        type=\"button\"\n        class=\"bg-destructive/10 text-destructive hover:bg-destructive/20 dark:bg-destructive/15 dark:text-destructive-foreground dark:hover:bg-destructive/25 focus-visible:ring-destructive inline-flex h-7 cursor-pointer items-center gap-1 rounded-sm px-2 text-xs font-medium shadow-xs outline-none focus-visible:ring-2\"\n        (click)=\"clearAppliedFilters()\">\n        <z-icon zType=\"lucideX\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_clear_filter' | translate }}</span>\n      </button>\n    </div>\n  </div>\n}\n\n<div\n  #tableContainer\n  [class]=\"classTable()\"\n  [ngStyle]=\"columnSizeVars()\"\n  [class.z-pinning-overflow]=\"!isPinnedLayoutWithinContainer()\"\n  [class.z-hide-horizontal-border]=\"!showHorizontalBorder()\"\n  [class.z-hide-vertical-border]=\"!showVerticalBorder()\"\n  [class.z-hide-pinned-top-border]=\"hasScrollTop()\"\n  [class.z-hide-pinned-bottom-border]=\"hasScrollBottom()\"\n  [style.width]=\"zConfig().width\"\n  [style.height]=\"zConfig().height\"\n  [style.max-height]=\"zConfig().maxHeight\"\n  [style.min-height]=\"zConfig().minHeight\"\n  [attr.tabindex]=\"canUseContentRowInsert() || canUseCellSelection() ? 0 : null\"\n  (keydown)=\"onContentTableKeydown($event)\">\n  @let isColumnPinningActive = isPinnedLayoutWithinContainer();\n  <ng-template #contentRowMenuContent>\n    <div class=\"flex min-w-36 flex-col gap-0.5 p-1\">\n      @if (contentRowMenu()?.columnId) {\n        <button\n          type=\"button\"\n          class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"copyContentCell()\">\n          <z-icon zType=\"lucideCopy\" zSize=\"12\" />\n          <span>{{ 'i18n_z_ui_table_copy_cell' | translate }}</span>\n        </button>\n        <div class=\"border-border my-0 border-t\"></div>\n      }\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none\"\n        (click)=\"copyContentRows()\">\n        <z-icon zType=\"lucideCopy\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_copy_row' | translate }}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none disabled:pointer-events-none disabled:opacity-40\"\n        [disabled]=\"contentRowClipboard().length === 0\"\n        (click)=\"pasteContentRows('below')\">\n        <z-icon zType=\"lucideClipboardPaste\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_paste_row_below' | translate }}</span>\n      </button>\n      <div class=\"border-border my-0 border-t\"></div>\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none disabled:pointer-events-none disabled:opacity-40\"\n        [disabled]=\"!canMoveContentRowUp()\"\n        (click)=\"moveContentRow('up')\">\n        <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_move_row_up' | translate }}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none disabled:pointer-events-none disabled:opacity-40\"\n        [disabled]=\"!canMoveContentRowDown()\"\n        (click)=\"moveContentRow('down')\">\n        <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_move_row_down' | translate }}</span>\n      </button>\n      <div class=\"border-border my-0 border-t\"></div>\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none\"\n        (click)=\"insertContentRow('above')\">\n        <z-icon zType=\"lucideArrowUpToLine\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_insert_row_above' | translate }}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none\"\n        (click)=\"insertContentRow('below')\">\n        <z-icon zType=\"lucideArrowDownToLine\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_insert_row_below' | translate }}</span>\n      </button>\n      <div class=\"border-border my-0 border-t\"></div>\n      <button\n        type=\"button\"\n        class=\"text-destructive hover:bg-destructive/10 focus:bg-destructive/10 flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none\"\n        (click)=\"deleteContentRows()\">\n        <z-icon zType=\"lucideTrash2\" zSize=\"12\" />\n        <span>\n          {{\n            contentRowDeleteCount() > 1\n              ? ('i18n_z_ui_table_delete_selected_rows' | translate)\n              : ('i18n_z_ui_table_delete_row' | translate)\n          }}\n        </span>\n      </button>\n    </div>\n  </ng-template>\n\n  <ng-template #cellMenuContent>\n    <div class=\"flex min-w-36 flex-col gap-0.5 p-1\">\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none disabled:pointer-events-none disabled:opacity-40\"\n        [disabled]=\"!canCopyCellMenuSelection()\"\n        (click)=\"copySelectedCells(false)\">\n        <z-icon zType=\"lucideCopy\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_copy_cell' | translate }}</span>\n      </button>\n      @if (cellSelectionOptions().copyWithHeaders) {\n        <button\n          type=\"button\"\n          class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none disabled:pointer-events-none disabled:opacity-40\"\n          [disabled]=\"!canCopyCellMenuSelection()\"\n          (click)=\"copySelectedCells(true)\">\n          <z-icon zType=\"lucideCopy\" zSize=\"12\" />\n          <span>{{ 'i18n_z_ui_table_copy_cell_with_headers' | translate }}</span>\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <div\n    class=\"pointer-events-none fixed size-px opacity-0\"\n    z-popover\n    [zPopoverContent]=\"contentRowMenuContent\"\n    zTrigger=\"manual\"\n    zPosition=\"bottom-left\"\n    zClass=\"z-table-content-row-menu\"\n    [zOffset]=\"0\"\n    [zManualClose]=\"true\"\n    [zScrollClose]=\"true\"\n    [style.left.px]=\"contentRowMenu()?.left ?? -9999\"\n    [style.top.px]=\"contentRowMenu()?.top ?? -9999\"\n    (zControl)=\"setContentRowMenuControl($event)\"\n    (zHide)=\"clearContentRowMenu()\"></div>\n\n  <div\n    class=\"pointer-events-none fixed size-px opacity-0\"\n    z-popover\n    [zPopoverContent]=\"cellMenuContent\"\n    zTrigger=\"manual\"\n    zPosition=\"bottom-left\"\n    zClass=\"z-table-cell-menu\"\n    [zOffset]=\"0\"\n    [zManualClose]=\"true\"\n    [zScrollClose]=\"true\"\n    [style.left.px]=\"cellMenu()?.left ?? -9999\"\n    [style.top.px]=\"cellMenu()?.top ?? -9999\"\n    (zControl)=\"setCellMenuControl($event)\"\n    (zHide)=\"clearCellMenu()\"></div>\n\n  <!-- Shared colgroup template -->\n  <ng-template #colGroupTpl>\n    <colgroup>\n      @if (canUseVirtualColumns()) {\n        @for (column of leftLeafColumns(); track column.id) {\n          @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n          <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n        @if (virtualLeftSpacerWidth() > 0) {\n          <col [style.width.px]=\"virtualRenderedLeftSpacerWidth()\" />\n        }\n        @for (column of virtualCenterColumns(); track column.id) {\n          @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n          <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n        @if (virtualRightSpacerWidth() > 0) {\n          <col [style.width.px]=\"virtualRenderedRightSpacerWidth()\" />\n        }\n        @for (column of rightLeafColumns(); track column.id) {\n          @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n          <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n      } @else {\n        @for (column of orderedLeafColumns(); track column.id) {\n          @if (column.getIsVisible()) {\n            @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n            <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n          }\n        }\n      }\n    </colgroup>\n  </ng-template>\n\n  <!-- Header table -->\n  <div\n    class=\"z-thead-wrapper\"\n    [class.z-shadow-header]=\"shouldHeaderShowShadow()\"\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\"\n    (wheel)=\"onTheadWheel($event)\"\n    #theadWrapper>\n    <table [style.width.px]=\"renderedTableWidth()\">\n      <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n      <thead>\n        @if (canUseVirtualColumns()) {\n          <tr>\n            @for (header of leftHeaderRow(); track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: leftHeaderRow() : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [ngStyle]=\"\n                    header.column\n                      | zTablePinningStyles\n                        : header\n                        : 'header'\n                        : table\n                        : zConfig().columns\n                        : columnResizing()\n                        : colDomWidthMap()\n                        : isColumnPinningActive\n                  \"\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]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isLeftPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-right]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isRightPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-left-last]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-right-first]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-right-last]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isLastRightPinned' : zConfig().columns)\n                  \"\n                  [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                  [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\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 === 'rowDrag') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                    </div>\n                  } @else if (header.column.id === 'select') {\n                    <div\n                      class=\"flex items-center\"\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                      <z-checkbox\n                        [zChecked]=\"canUseRowSelection() && table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"\n                          canUseRowSelection() && table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\n                        \"\n                        [zDisabled]=\"!canUseRowSelection()\"\n                        (zChange)=\"canUseRowSelection() && table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <div\n                      class=\"flex items-center\"\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                      <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-sm\">\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                    <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                      @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 ?? true;\n                      <ng-template #colOptionsPopoverContent>\n                        <div zHoverGlide zHoverGlideSelector=\".z-column-menu-item\" class=\"flex flex-col gap-1 py-1\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"14\" />\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                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"14\" />\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() !== 'start') {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"!pinAvailabilityMap()[header.column.id]?.left\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'end') {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"!pinAvailabilityMap()[header.column.id]?.right\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (\n                              header.column.getIsPinned() &&\n                              header.column.id !== 'expand' &&\n                              header.column.id !== actionColumnInfo()?.columnId\n                            ) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          @if (groupingHeaderMenuMap()[header.id]) {\n                            @let isActiveGroupingColumn = groupingColumnMap()[header.column.id];\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                            @if (!isActiveGroupingColumn) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"groupByColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideRows3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                                <span>{{ 'i18n_z_ui_table_group_by_column' | translate }}</span>\n                              </button>\n                            }\n                            @let groupMenuStateBoundary = isActiveGroupingColumn;\n                            @if (groupMenuStateBoundary) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"removeGroupingColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideUngroup\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_clear_grouping' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          <div class=\"border-border my-0.5 border-t\"></div>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"autosizeColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideChevronsLeftRight\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_autosize_column' | translate }}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"autosizeAllColumns(); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_autosize_all_columns' | translate }}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"resetColumns(); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideRotateCcw\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_reset_columns' | translate }}</span>\n                          </button>\n                          @if (hideableColumns().length > 0) {\n                            <button\n                              type=\"button\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"openSettingsDrawerFromColumnMenu(colOptionsPopover)\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                              <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span class=\"truncate\">\n                                {{ 'i18n_z_ui_table_choose_columns' | translate }}\n                              </span>\n                            </button>\n                          }\n                        </div>\n                      </ng-template>\n\n                      @let columnEnableHeaderMenu =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableHeaderMenu';\n                      @let hasColumnOptions =\n                        header.column.id !== 'actionRowPin' &&\n                        columnEnableHeaderMenu !== false &&\n                        (groupingHeaderMenuMap()[header.id] ||\n                          (header.column.getCanPin() && effectiveEnablePinning) ||\n                          effectiveEnableOrdering ||\n                          hideableColumns().length > 0);\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded-sm 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                        zClass=\"rounded-(--radius-sm) overflow-hidden\"\n                        [zOffset]=\"5\"\n                        (zOutsideClick)=\"hideColumnPopoversOnOutsideClick(colOptionsPopover)\"\n                        (mousedown)=\"$event.preventDefault()\"\n                        [attr.tabindex]=\"hasColumnOptions ? 0 : null\"\n                        [attr.role]=\"hasColumnOptions ? 'button' : null\"\n                        [attr.aria-haspopup]=\"hasColumnOptions ? 'menu' : null\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              class=\"z-template-content\"\n                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\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                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\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                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        @if (hasColumnOptions) {\n                          <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                        }\n                      </div>\n                      @if ((header.column.getCanSort() && !hasBodyRowSpan()) || header.column.getCanFilter()) {\n                        <z-table-filter\n                          [zColumn]=\"$any(header.column)\"\n                          [zTable]=\"$any(table)\"\n                          [zResetVersion]=\"filterResetVersion()\"\n                          [zSortingState]=\"sorting()\"\n                          [zEnableMultiSort]=\"zConfig().enableMultiSort ?? true\" />\n                      }\n                    </div>\n                  }\n                  @if (header.column.getCanResize() && zConfig().enableColumnResizing !== false) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"header.column.getIsPinned() === 'end' || header.column.getIsLastColumn()\"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n            @if (virtualLeftSpacerWidth() > 0) {\n              <th\n                class=\"z-virtual-column-spacer z-virtual-header-spacer z-virtual-left-spacer pointer-events-none p-0\"\n                [style.width.px]=\"virtualRenderedLeftSpacerWidth()\"></th>\n            }\n            @for (header of virtualCenterHeaderRow(); track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: virtualCenterHeaderRow() : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\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-col-drag]=\"header.column.id === 'rowDrag'\"\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 === 'rowDrag') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                    </div>\n                  } @else if (header.column.id === 'select') {\n                    <div\n                      class=\"flex items-center\"\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                      <z-checkbox\n                        [zChecked]=\"canUseRowSelection() && table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"\n                          canUseRowSelection() && table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\n                        \"\n                        [zDisabled]=\"!canUseRowSelection()\"\n                        (zChange)=\"canUseRowSelection() && table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <div\n                      class=\"flex items-center\"\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                      <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-sm\">\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                    <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                      @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 ?? true;\n                      <ng-template #colOptionsPopoverContent>\n                        <div zHoverGlide zHoverGlideSelector=\".z-column-menu-item\" class=\"flex flex-col gap-1 py-1\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"14\" />\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                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"14\" />\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() !== 'start') {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"!pinAvailabilityMap()[header.column.id]?.left\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'end') {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"!pinAvailabilityMap()[header.column.id]?.right\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (\n                              header.column.getIsPinned() &&\n                              header.column.id !== 'expand' &&\n                              header.column.id !== actionColumnInfo()?.columnId\n                            ) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          @if (groupingHeaderMenuMap()[header.id]) {\n                            @let isActiveGroupingColumn = groupingColumnMap()[header.column.id];\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                            @if (!isActiveGroupingColumn) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"groupByColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideRows3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                                <span>{{ 'i18n_z_ui_table_group_by_column' | translate }}</span>\n                              </button>\n                            }\n                            @let groupMenuStateBoundary = isActiveGroupingColumn;\n                            @if (groupMenuStateBoundary) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"removeGroupingColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideUngroup\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_clear_grouping' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          <div class=\"border-border my-0.5 border-t\"></div>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"autosizeColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideChevronsLeftRight\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_autosize_column' | translate }}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"autosizeAllColumns(); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_autosize_all_columns' | translate }}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"resetColumns(); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideRotateCcw\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_reset_columns' | translate }}</span>\n                          </button>\n                          @if (hideableColumns().length > 0) {\n                            <button\n                              type=\"button\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"openSettingsDrawerFromColumnMenu(colOptionsPopover)\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                              <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span class=\"truncate\">\n                                {{ 'i18n_z_ui_table_choose_columns' | translate }}\n                              </span>\n                            </button>\n                          }\n                        </div>\n                      </ng-template>\n\n                      @let columnEnableHeaderMenu =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableHeaderMenu';\n                      @let hasColumnOptions =\n                        header.column.id !== 'actionRowPin' &&\n                        columnEnableHeaderMenu !== false &&\n                        (groupingHeaderMenuMap()[header.id] ||\n                          (header.column.getCanPin() && effectiveEnablePinning) ||\n                          effectiveEnableOrdering ||\n                          hideableColumns().length > 0);\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded-sm 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                        zClass=\"rounded-(--radius-sm) overflow-hidden\"\n                        [zOffset]=\"5\"\n                        (zOutsideClick)=\"hideColumnPopoversOnOutsideClick(colOptionsPopover)\"\n                        (mousedown)=\"$event.preventDefault()\"\n                        [attr.tabindex]=\"hasColumnOptions ? 0 : null\"\n                        [attr.role]=\"hasColumnOptions ? 'button' : null\"\n                        [attr.aria-haspopup]=\"hasColumnOptions ? 'menu' : null\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              class=\"z-template-content\"\n                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\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                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\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                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        @if (hasColumnOptions) {\n                          <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                        }\n                      </div>\n                      @if ((header.column.getCanSort() && !hasBodyRowSpan()) || header.column.getCanFilter()) {\n                        <z-table-filter\n                          [zColumn]=\"$any(header.column)\"\n                          [zTable]=\"$any(table)\"\n                          [zResetVersion]=\"filterResetVersion()\"\n                          [zSortingState]=\"sorting()\"\n                          [zEnableMultiSort]=\"zConfig().enableMultiSort ?? true\" />\n                      }\n                    </div>\n                  }\n                  @if (header.column.getCanResize() && zConfig().enableColumnResizing !== false) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"header.column.getIsPinned() === 'end' || header.column.getIsLastColumn()\"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n            @if (virtualRightSpacerWidth() > 0) {\n              <th\n                class=\"z-virtual-column-spacer z-virtual-header-spacer z-virtual-right-spacer pointer-events-none p-0\"\n                [style.width.px]=\"virtualRenderedRightSpacerWidth()\"></th>\n            }\n            @for (header of rightHeaderRow(); track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: rightHeaderRow() : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [ngStyle]=\"\n                    header.column\n                      | zTablePinningStyles\n                        : header\n                        : 'header'\n                        : table\n                        : zConfig().columns\n                        : columnResizing()\n                        : colDomWidthMap()\n                        : isColumnPinningActive\n                  \"\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]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isLeftPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-right]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isRightPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-left-last]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-right-first]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-right-last]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isLastRightPinned' : zConfig().columns)\n                  \"\n                  [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                  [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\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 === 'rowDrag') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                    </div>\n                  } @else if (header.column.id === 'select') {\n                    <!-- Header Checkbox -->\n                    <div\n                      class=\"flex items-center\"\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                      <z-checkbox\n                        [zChecked]=\"canUseRowSelection() && table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"\n                          canUseRowSelection() && table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\n                        \"\n                        [zDisabled]=\"!canUseRowSelection()\"\n                        (zChange)=\"canUseRowSelection() && table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <!-- Expand All Button -->\n                    <div\n                      class=\"flex items-center\"\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                      <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-sm\">\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 ?? true;\n                      <ng-template #colOptionsPopoverContent>\n                        <div zHoverGlide zHoverGlideSelector=\".z-column-menu-item\" class=\"flex flex-col gap-1 py-1\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"14\" />\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                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"14\" />\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() !== 'start') {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"!pinAvailabilityMap()[header.column.id]?.left\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'end') {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"!pinAvailabilityMap()[header.column.id]?.right\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (\n                              header.column.getIsPinned() &&\n                              header.column.id !== 'expand' &&\n                              header.column.id !== actionColumnInfo()?.columnId\n                            ) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          @if (groupingHeaderMenuMap()[header.id]) {\n                            @let isActiveGroupingColumn = groupingColumnMap()[header.column.id];\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                            @if (!isActiveGroupingColumn) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"groupByColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideRows3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                                <span>{{ 'i18n_z_ui_table_group_by_column' | translate }}</span>\n                              </button>\n                            }\n                            @let groupMenuStateBoundary = isActiveGroupingColumn;\n                            @if (groupMenuStateBoundary) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"removeGroupingColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideUngroup\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_clear_grouping' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          <div class=\"border-border my-0.5 border-t\"></div>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"autosizeColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideChevronsLeftRight\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_autosize_column' | translate }}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"autosizeAllColumns(); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_autosize_all_columns' | translate }}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"resetColumns(); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideRotateCcw\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_reset_columns' | translate }}</span>\n                          </button>\n                          @if (hideableColumns().length > 0) {\n                            <button\n                              type=\"button\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"openSettingsDrawerFromColumnMenu(colOptionsPopover)\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                              <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span class=\"truncate\">\n                                {{ 'i18n_z_ui_table_choose_columns' | translate }}\n                              </span>\n                            </button>\n                          }\n                        </div>\n                      </ng-template>\n\n                      @let columnEnableHeaderMenu =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableHeaderMenu';\n                      @let hasColumnOptions =\n                        header.column.id !== 'actionRowPin' &&\n                        columnEnableHeaderMenu !== false &&\n                        (groupingHeaderMenuMap()[header.id] ||\n                          (header.column.getCanPin() && effectiveEnablePinning) ||\n                          effectiveEnableOrdering ||\n                          hideableColumns().length > 0);\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded-sm 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                        zClass=\"rounded-(--radius-sm) overflow-hidden\"\n                        [zOffset]=\"5\"\n                        (zOutsideClick)=\"hideColumnPopoversOnOutsideClick(colOptionsPopover)\"\n                        (mousedown)=\"$event.preventDefault()\"\n                        [attr.tabindex]=\"hasColumnOptions ? 0 : null\"\n                        [attr.role]=\"hasColumnOptions ? 'button' : null\"\n                        [attr.aria-haspopup]=\"hasColumnOptions ? 'menu' : null\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              class=\"z-template-content\"\n                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\n                              [ngStyle]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\">\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                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\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                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\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 zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                        }\n                      </div>\n                      <!-- Sort Icon (outside wrapper, no hover background) -->\n                      @if ((header.column.getCanSort() && !hasBodyRowSpan()) || header.column.getCanFilter()) {\n                        <z-table-filter\n                          [zColumn]=\"$any(header.column)\"\n                          [zTable]=\"$any(table)\"\n                          [zResetVersion]=\"filterResetVersion()\"\n                          [zSortingState]=\"sorting()\"\n                          [zEnableMultiSort]=\"zConfig().enableMultiSort ?? true\" />\n                      }\n                    </div>\n                  }\n                  <!-- Column Resizer -->\n                  @if (header.column.getCanResize() && zConfig().enableColumnResizing !== false) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"header.column.getIsPinned() === 'end' || header.column.getIsLastColumn()\"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n          </tr>\n        } @else {\n          @for (headerGroup of orderedHeaderGroups(); track headerGroup.id) {\n            <tr>\n              @for (header of headerGroup.headers; track header.id) {\n                @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n                @let shouldRender = header | zTableCellRender: headerGroup.headers : zConfig().columns : 'header';\n                @if (rowSpan && shouldRender) {\n                  <th\n                    [attr.id]=\"header.column.id\"\n                    [ngStyle]=\"\n                      header.column\n                        | zTablePinningStyles\n                          : header\n                          : 'header'\n                          : table\n                          : zConfig().columns\n                          : columnResizing()\n                          : colDomWidthMap()\n                          : isColumnPinningActive\n                    \"\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]=\"\n                      isColumnPinningActive && (header | zTableCellPin: 'isLeftPinned' : zConfig().columns)\n                    \"\n                    [class.z-sticky-right]=\"\n                      isColumnPinningActive && (header | zTableCellPin: 'isRightPinned' : zConfig().columns)\n                    \"\n                    [class.z-sticky-left-last]=\"\n                      isColumnPinningActive && (header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns)\n                    \"\n                    [class.z-sticky-right-first]=\"\n                      isColumnPinningActive && (header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns)\n                    \"\n                    [class.z-sticky-right-last]=\"\n                      isColumnPinningActive && (header | zTableCellPin: 'isLastRightPinned' : zConfig().columns)\n                    \"\n                    [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                    [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\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]=\"\n                      header | zTableSpan: zConfig().columns : 'headerColSpan' : undefined : headerGroup.headers\n                    \">\n                    @if (header.column.id === 'rowDrag') {\n                      <div class=\"flex items-center justify-center\">\n                        <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                      </div>\n                    } @else if (header.column.id === 'select') {\n                      <div\n                        class=\"flex items-center\"\n                        [class.justify-center]=\"\n                          (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                          'text-center'\n                        \"\n                        [class.justify-end]=\"\n                          (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                          'text-right'\n                        \">\n                        <z-checkbox\n                          [zChecked]=\"canUseRowSelection() && table.getIsAllRowsSelected()\"\n                          [zIndeterminate]=\"\n                            canUseRowSelection() && table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\n                          \"\n                          [zDisabled]=\"!canUseRowSelection()\"\n                          (zChange)=\"canUseRowSelection() && table.toggleAllRowsSelected()\" />\n                      </div>\n                    } @else if (header.column.id === 'expand') {\n                      <div\n                        class=\"flex items-center\"\n                        [class.justify-center]=\"\n                          (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                          'text-center'\n                        \"\n                        [class.justify-end]=\"\n                          (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                          'text-right'\n                        \">\n                        <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-sm\">\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                      <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') ===\n                          'text-right'\n                        \">\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 ?? true;\n                        <ng-template #colOptionsPopoverContent>\n                          <div zHoverGlide zHoverGlideSelector=\".z-column-menu-item\" class=\"flex flex-col gap-1 py-1\">\n                            @if (effectiveEnableOrdering) {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucideArrowLeft\" zSize=\"15\" />\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                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucideArrowRight\" zSize=\"15\" />\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() !== 'start') {\n                                <button\n                                  type=\"button\"\n                                  [disabled]=\"!pinAvailabilityMap()[header.column.id]?.left\"\n                                  (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                  (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                  class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                  <z-icon zType=\"lucidePin\" zSize=\"15\" class=\"rotate-90\" />\n                                  <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                                </button>\n                              }\n                              @if (header.column.getIsPinned() !== 'end') {\n                                <button\n                                  type=\"button\"\n                                  [disabled]=\"!pinAvailabilityMap()[header.column.id]?.right\"\n                                  (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                  (click)=\"\n                                    handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\n                                  \"\n                                  class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                  <z-icon zType=\"lucidePin\" zSize=\"15\" class=\"-rotate-90\" />\n                                  <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                                </button>\n                              }\n                              @if (\n                                header.column.getIsPinned() &&\n                                header.column.id !== 'expand' &&\n                                header.column.id !== actionColumnInfo()?.columnId\n                              ) {\n                                <button\n                                  type=\"button\"\n                                  (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                  (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                  class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                  <z-icon zType=\"lucideX\" zSize=\"15\" />\n                                  <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                </button>\n                              }\n                            }\n                            @if (groupingHeaderMenuMap()[header.id]) {\n                              @let isActiveGroupingColumn = groupingColumnMap()[header.column.id];\n                              <div class=\"border-border my-0.5 border-t\"></div>\n                              @if (!isActiveGroupingColumn) {\n                                <button\n                                  type=\"button\"\n                                  (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                  (click)=\"groupByColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                  class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                  <z-icon zType=\"lucideRows3\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                                  <span>{{ 'i18n_z_ui_table_group_by_column' | translate }}</span>\n                                </button>\n                              }\n                              @let groupMenuStateBoundary = isActiveGroupingColumn;\n                              @if (groupMenuStateBoundary) {\n                                <button\n                                  type=\"button\"\n                                  (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                  (click)=\"removeGroupingColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                  class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                  <z-icon zType=\"lucideUngroup\" zSize=\"15\" />\n                                  <span>{{ 'i18n_z_ui_table_clear_grouping' | translate }}</span>\n                                </button>\n                              }\n                            }\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                            <button\n                              type=\"button\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"autosizeColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                              <z-icon\n                                zType=\"lucideChevronsLeftRight\"\n                                zSize=\"14\"\n                                class=\"text-muted-foreground shrink-0\" />\n                              <span>{{ 'i18n_z_ui_table_autosize_column' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"autosizeAllColumns(); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                              <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span>{{ 'i18n_z_ui_table_autosize_all_columns' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"resetColumns(); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                              <z-icon zType=\"lucideRotateCcw\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span>{{ 'i18n_z_ui_table_reset_columns' | translate }}</span>\n                            </button>\n                            @if (hideableColumns().length > 0) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"openSettingsDrawerFromColumnMenu(colOptionsPopover)\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                                <span class=\"truncate\">\n                                  {{ 'i18n_z_ui_table_choose_columns' | translate }}\n                                </span>\n                              </button>\n                            }\n                          </div>\n                        </ng-template>\n\n                        @let columnEnableHeaderMenu =\n                          header.column.id | zTableColumnConfig: zConfig().columns : 'enableHeaderMenu';\n                        @let hasColumnOptions =\n                          header.column.id !== 'actionRowPin' &&\n                          columnEnableHeaderMenu !== false &&\n                          (groupingHeaderMenuMap()[header.id] ||\n                            (header.column.getCanPin() && effectiveEnablePinning) ||\n                            effectiveEnableOrdering ||\n                            hideableColumns().length > 0);\n                        <div\n                          class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded-sm 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                          zClass=\"rounded-(--radius-sm) overflow-hidden\"\n                          [zOffset]=\"5\"\n                          (zOutsideClick)=\"hideColumnPopoversOnOutsideClick(colOptionsPopover)\"\n                          (mousedown)=\"$event.preventDefault()\"\n                          [attr.tabindex]=\"hasColumnOptions ? 0 : null\"\n                          [attr.role]=\"hasColumnOptions ? 'button' : null\"\n                          [attr.aria-haspopup]=\"hasColumnOptions ? 'menu' : null\">\n                          <ng-container\n                            *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                            @if (headerContent | zTableIsTemplateRef) {\n                              <div\n                                class=\"z-template-content\"\n                                [class]=\"\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                                [class]=\"\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                                [class]=\"\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                          @if (hasColumnOptions) {\n                            <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                          }\n                        </div>\n                        @if ((header.column.getCanSort() && !hasBodyRowSpan()) || header.column.getCanFilter()) {\n                          <z-table-filter\n                            [zColumn]=\"$any(header.column)\"\n                            [zTable]=\"$any(table)\"\n                            [zResetVersion]=\"filterResetVersion()\"\n                            [zSortingState]=\"sorting()\"\n                            [zEnableMultiSort]=\"zConfig().enableMultiSort ?? true\" />\n                        }\n                      </div>\n                    }\n                    @if (header.column.getCanResize() && zConfig().enableColumnResizing !== false) {\n                      <div\n                        class=\"z-resizer\"\n                        [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                        [class.z-resizer-left]=\"\n                          header.column.getIsPinned() === 'end' || header.column.getIsLastColumn()\n                        \"\n                        (dblclick)=\"header.column.resetSize()\"\n                        [zTableResize]=\"header\"></div>\n                    }\n                  </th>\n                }\n              }\n            </tr>\n          }\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 (isLoading() || isProcessing()) {\n      <!-- Loading State -->\n      @if (zConfig().useSkeleton) {\n        <!-- Skeleton Loading -->\n        <div class=\"animate-in fade-in flex h-full flex-col duration-200\">\n          @for (i of skeletonRows(); track $index; let last = $last) {\n            <div\n              class=\"border-border box-border flex flex-1 flex-col items-start justify-center gap-1.5 px-2\"\n              [class.border-b]=\"!last\">\n              <z-skeleton zType=\"bar\" zWidth=\"100%\" zHeight=\"22px\" />\n              <z-skeleton zType=\"bar\" zWidth=\"50%\" zHeight=\"14px\" />\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 (scroll)=\"onTbodyScroll($event)\">\n        @if (isVirtual()) {\n          <!-- Virtual Scroll Mode -->\n\n          <div\n            class=\"z-virtual-scroll-inner\"\n            [style.height.px]=\"virtualizer.getTotalSize()\"\n            [style.min-width.px]=\"table.getTotalSize()\">\n            <!-- Pinned and center rows share one virtual canvas. -->\n            @if (virtualPinnedTopRows().length > 0) {\n              <div class=\"z-virtual-pinned-top\" [style.min-width.px]=\"table.getTotalSize()\">\n                @for (row of virtualPinnedTopRows(); track row.id) {\n                  <ng-container *ngTemplateOutlet=\"virtualPinnedRowTpl; context: { $implicit: row }\" />\n                }\n              </div>\n            }\n\n            @if (usesFlowVirtualRows()) {\n              <div\n                class=\"z-virtual-flow\"\n                [style.transform]=\"'translate3d(0,' + virtualFlowOffset() + 'px,0)'\"\n                [style.min-width.px]=\"table.getTotalSize()\">\n                <ng-container *ngTemplateOutlet=\"virtualRowsTpl\" />\n              </div>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"virtualRowsTpl\" />\n            }\n\n            <ng-template #virtualRowsTpl>\n              @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n                @let groupRows = dynamicGroupRows()[virtualItem.index] || [];\n                @let virtualFlatItem = virtualGroupedFlatItems()[virtualItem.index];\n                @let stickyGroupState = stickyGroupHeaderState();\n                @let stickyGroupTop = stickyGroupState.tops[virtualItem.index];\n                @let isStickyGroupHeader = stickyGroupTop !== undefined;\n                <div\n                  #virtualRow\n                  class=\"z-virtual-row\"\n                  [class.z-virtual-row-flow]=\"usesFlowVirtualRows()\"\n                  [class.z-virtual-row-fixed]=\"!effectiveDynamicRowSizing()\"\n                  [class.z-virtual-row-group-header]=\"virtualFlatItem?.type === 'group-header'\"\n                  [class.z-virtual-row-sticky-group]=\"isStickyGroupHeader\"\n                  [class.z-virtual-row-sticky-group-shadow]=\"stickyGroupState.shadowIndex === virtualItem.index\"\n                  [style.top.px]=\"stickyGroupTop\"\n                  z-table-draggable=\"row\"\n                  z-table-drop-target=\"row\"\n                  [z-table-drag-table-id]=\"dragInstanceId\"\n                  [z-table-drop-table-id]=\"dragInstanceId\"\n                  [z-table-drag-item-id]=\"groupRows.length > 0 ? groupRows[0].id : ''\"\n                  [z-table-drop-item-id]=\"groupRows.length > 0 ? groupRows[0].id : ''\"\n                  [z-table-drag-disabled]=\"!isVirtualRowDragEnabled() || groupRows.length !== 1\"\n                  [z-table-drop-disabled]=\"!isVirtualRowDragEnabled() || groupRows.length !== 1\"\n                  (zTableDropped)=\"_handleDragDrop($event)\"\n                  [attr.data-index]=\"virtualItem.index\"\n                  [style.height.px]=\"\n                    effectiveDynamicRowSizing()\n                      ? null\n                      : (dynamicGroupHeights()[virtualItem.index] ?? groupSize() * virtualRowHeight()) + 1\n                  \"\n                  [style.transform]=\"\n                    usesFlowVirtualRows() || isStickyGroupHeader ? null : 'translate3d(0,' + virtualItem.start + 'px,0)'\n                  \">\n                  <table [style.width.px]=\"renderedTableWidth()\">\n                    <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n                    <tbody\n                      [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n                      [class.z-has-bottom-pinned]=\"table.getBottomRows().length > 0\"\n                      [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n                      @let groupHeaderItem = _getVirtualGroupHeader(virtualFlatItem);\n                      @if (groupHeaderItem) {\n                        <tr\n                          class=\"z-group-row\"\n                          [class.z-group-row-has-totals]=\"groupHeaderItem.totals\"\n                          [class.z-group-row-expanded]=\"groupHeaderItem.expanded\"\n                          [attr.data-group-id]=\"groupHeaderItem.id\"\n                          [attr.data-group-depth]=\"groupHeaderItem.depth\">\n                          @if (groupHeaderItem.totals) {\n                            @let totalColumnMap = groupTotalColumnMap();\n                            @for (column of orderedLeafColumns(); track column.id; let isFirstGroupCell = $first) {\n                              <td\n                                [class.z-group-row-label-cell]=\"isFirstGroupCell\"\n                                [class.z-group-row-total-cell]=\"!isFirstGroupCell && totalColumnMap[column.id]\"\n                                [attr.data-column-id]=\"column.id\">\n                                @if (isFirstGroupCell) {\n                                  <div class=\"z-group-row-sticky-wrapper\">\n                                    <button\n                                      type=\"button\"\n                                      class=\"z-group-row-trigger\"\n                                      [style.padding-left.rem]=\"0.75 + groupHeaderItem.depth * 0.75\"\n                                      [attr.aria-expanded]=\"groupHeaderItem.expanded\"\n                                      (click)=\"toggleGroupRow(groupHeaderItem.id)\">\n                                      <z-icon\n                                        zType=\"lucideChevronRight\"\n                                        zSize=\"14\"\n                                        class=\"transition-transform duration-200\"\n                                        [class.rotate-90]=\"groupHeaderItem.expanded\" />\n                                      <span\n                                        class=\"z-group-row-label\"\n                                        z-tooltip\n                                        [zContent]=\"\n                                          (groupHeaderItem.columnLabel ? groupHeaderItem.columnLabel + ': ' : '') +\n                                          groupHeaderItem.label\n                                        \">\n                                        @if (groupHeaderItem.columnLabel) {\n                                          <span class=\"z-group-row-column-label\">\n                                            {{ groupHeaderItem.columnLabel }}:\n                                          </span>\n                                        }\n                                        {{ groupHeaderItem.label }}\n                                      </span>\n                                      @if (groupingConfig().showCount !== false) {\n                                        <span class=\"z-group-row-count\">{{ groupHeaderItem.count }}</span>\n                                      }\n                                      @if (groupHeaderItem.loading) {\n                                        <z-loading class=\"z-group-row-loading\" [zLoading]=\"true\" zSize=\"xs\" />\n                                      }\n                                    </button>\n                                    @if (!isServerGrouping()) {\n                                      <button\n                                        type=\"button\"\n                                        z-button\n                                        zType=\"ghost\"\n                                        zSize=\"sm\"\n                                        zTypeIcon=\"lucideX\"\n                                        [zWave]=\"false\"\n                                        z-tooltip\n                                        zSizeIcon=\"14\"\n                                        [zContent]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                                        [attr.aria-label]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                                        [zAlwaysShow]=\"true\"\n                                        zTooltipPosition=\"top\"\n                                        class=\"z-group-row-remove\"\n                                        (click)=\"removeGroupingColumn(groupHeaderItem.columnId)\"></button>\n                                    }\n                                  </div>\n                                }\n                                @if (!isFirstGroupCell && totalColumnMap[column.id]) {\n                                  @let totalConfig = groupTotalConfigMap()[column.id];\n                                  @let totalTooltip = totalConfig.tooltip;\n                                  @let totalPopover = totalConfig.popover;\n                                  @let totalPopoverContent = totalPopover | zTablePopoverConfig: 'content';\n                                  <ng-template #groupTotalPopoverTpl>\n                                    @if (totalPopoverContent | zTableIsTemplateRef) {\n                                      <ng-container *ngTemplateOutlet=\"$any(totalPopoverContent)\" />\n                                    }\n                                    @if (!(totalPopoverContent | zTableIsTemplateRef)) {\n                                      <div [innerHTML]=\"$any(totalPopoverContent) | zSafeHtml\"></div>\n                                    }\n                                  </ng-template>\n                                  <span\n                                    class=\"z-group-row-total\"\n                                    z-tooltip\n                                    z-popover\n                                    [class]=\"totalConfig.class\"\n                                    [zContent]=\"\n                                      $any(\n                                        (totalTooltip | zTableTooltipConfig: 'content') ||\n                                          groupHeaderItem.totals[column.id]\n                                      )\n                                    \"\n                                    [zTooltipPosition]=\"$any(totalTooltip | zTableTooltipConfig: 'position')\"\n                                    [zTooltipTrigger]=\"$any(totalTooltip | zTableTooltipConfig: 'trigger')\"\n                                    [zTooltipType]=\"$any(totalTooltip | zTableTooltipConfig: 'type')\"\n                                    [zTooltipSize]=\"$any(totalTooltip | zTableTooltipConfig: 'size')\"\n                                    [zTooltipClass]=\"$any(totalTooltip | zTableTooltipConfig: 'class')\"\n                                    [zTooltipShowDelay]=\"$any(totalTooltip | zTableTooltipConfig: 'showDelay')\"\n                                    [zTooltipHideDelay]=\"$any(totalTooltip | zTableTooltipConfig: 'hideDelay')\"\n                                    [zTooltipArrow]=\"$any(totalTooltip | zTableTooltipConfig: 'arrow')\"\n                                    [zTooltipOffset]=\"$any(totalTooltip | zTableTooltipConfig: 'offset')\"\n                                    [zAutoDetect]=\"$any(totalTooltip | zTableTooltipConfig: 'autoDetect')\"\n                                    [zAlwaysShow]=\"$any(totalTooltip | zTableTooltipConfig: 'alwaysShow')\"\n                                    [zMaxWidth]=\"$any(totalTooltip | zTableTooltipConfig: 'maxWidth')\"\n                                    [zPopoverContent]=\"totalPopoverContent ? groupTotalPopoverTpl : null\"\n                                    [zPosition]=\"$any(totalPopover | zTablePopoverConfig: 'position')\"\n                                    [zPopoverTrigger]=\"$any(totalPopover | zTablePopoverConfig: 'trigger')\"\n                                    [zClass]=\"$any(totalPopover | zTablePopoverConfig: 'class')\"\n                                    [zShowDelay]=\"$any(totalPopover | zTablePopoverConfig: 'showDelay')\"\n                                    [zHideDelay]=\"$any(totalPopover | zTablePopoverConfig: 'hideDelay')\"\n                                    [zDisabled]=\"$any(totalPopover | zTablePopoverConfig: 'disabled')\"\n                                    [zOffset]=\"$any(totalPopover | zTablePopoverConfig: 'offset')\"\n                                    [zPopoverWidth]=\"$any(totalPopover | zTablePopoverConfig: 'width')\"\n                                    [zManualClose]=\"$any(totalPopover | zTablePopoverConfig: 'manualClose')\"\n                                    [zOutsideClickClose]=\"$any(totalPopover | zTablePopoverConfig: 'outsideClickClose')\"\n                                    [zScrollClose]=\"$any(totalPopover | zTablePopoverConfig: 'scrollClose')\"\n                                    [zSticky]=\"$any(totalPopover | zTablePopoverConfig: 'sticky')\"\n                                    [zShowArrow]=\"$any(totalPopover | zTablePopoverConfig: 'showArrow')\"\n                                    [zKeyboardSafe]=\"$any(totalPopover | zTablePopoverConfig: 'keyboardSafe')\">\n                                    {{ groupHeaderItem.totals[column.id] }}\n                                  </span>\n                                }\n                              </td>\n                            }\n                          } @else {\n                            <td [attr.colspan]=\"renderedColumnCount()\">\n                              <div class=\"z-group-row-sticky-wrapper\">\n                                <button\n                                  type=\"button\"\n                                  class=\"z-group-row-trigger\"\n                                  [style.padding-left.rem]=\"0.75 + groupHeaderItem.depth * 0.75\"\n                                  [attr.aria-expanded]=\"groupHeaderItem.expanded\"\n                                  (click)=\"toggleGroupRow(groupHeaderItem.id)\">\n                                  <z-icon\n                                    zType=\"lucideChevronRight\"\n                                    zSize=\"14\"\n                                    class=\"transition-transform duration-200\"\n                                    [class.rotate-90]=\"groupHeaderItem.expanded\" />\n                                  <span\n                                    class=\"z-group-row-label\"\n                                    z-tooltip\n                                    [zContent]=\"\n                                      (groupHeaderItem.columnLabel ? groupHeaderItem.columnLabel + ': ' : '') +\n                                      groupHeaderItem.label\n                                    \">\n                                    @if (groupHeaderItem.columnLabel) {\n                                      <span class=\"z-group-row-column-label\">{{ groupHeaderItem.columnLabel }}:</span>\n                                    }\n                                    {{ groupHeaderItem.label }}\n                                  </span>\n                                  @if (groupingConfig().showCount !== false) {\n                                    <span class=\"z-group-row-count\">{{ groupHeaderItem.count }}</span>\n                                  }\n                                  @if (groupHeaderItem.loading) {\n                                    <z-loading class=\"z-group-row-loading\" [zLoading]=\"true\" zSize=\"xs\" />\n                                  }\n                                </button>\n                                @if (!isServerGrouping()) {\n                                  <button\n                                    type=\"button\"\n                                    z-button\n                                    zType=\"ghost\"\n                                    zSize=\"sm\"\n                                    zTypeIcon=\"lucideX\"\n                                    [zWave]=\"false\"\n                                    z-tooltip\n                                    zSizeIcon=\"14\"\n                                    [zContent]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                                    [attr.aria-label]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                                    [zAlwaysShow]=\"true\"\n                                    zTooltipPosition=\"top\"\n                                    class=\"z-group-row-remove\"\n                                    (click)=\"removeGroupingColumn(groupHeaderItem.columnId)\"></button>\n                                }\n                              </div>\n                            </td>\n                          }\n                        </tr>\n                      }\n                      @for (row of groupRows; track row.id) {\n                        @let virtualGroupDepth = _getVirtualGroupDepth(virtualFlatItem);\n                        @let visibleCells = row.getVisibleCells();\n                        @let rowSelected = canUseRowSelection() && row.getIsSelected();\n                        @let rowSomeSelected = canUseRowSelection() && row.getIsSomeSelected();\n                        @let rowPinned = row.getIsPinned();\n                        <tr\n                          z-table-row-hover\n                          [attr.data-row-id]=\"row.id\"\n                          [class]=\"row | zTableRowConfig: zConfig() : 'rowClass'\"\n                          [style]=\"row | zTableRowConfig: zConfig() : 'rowStyle'\"\n                          [style.height.px]=\"effectiveDynamicRowSizing() ? null : virtualRowHeight()\"\n                          [style.min-height.px]=\"effectiveDynamicRowSizing() ? virtualRowHeight() : null\"\n                          [style.--z-row-height]=\"effectiveDynamicRowSizing() ? 'auto' : virtualRowHeight() + 'px'\"\n                          [class.z-child-row]=\"row.depth > 0\"\n                          [class.z-group-child-row]=\"_isVirtualGroupChild(virtualFlatItem)\"\n                          [style.--z-group-content-indent]=\"\n                            virtualGroupDepth > 0 ? 1.75 + (virtualGroupDepth - 1) * 0.75 + 'rem' : null\n                          \"\n                          [class.z-selected]=\"rowSelected\"\n                          [class.z-indeterminate-selected]=\"rowSomeSelected && !rowSelected\"\n                          [class.z-context-menu-active]=\"contentRowMenu()?.row?.id === row.id\"\n                          [class.z-pinned-top]=\"rowPinned === 'top'\"\n                          [class.z-pinned-top-first]=\"rowPinned === 'top' && row.id === firstTopPinnedRowId()\"\n                          [class.z-pinned-bottom]=\"rowPinned === 'bottom'\"\n                          [class.z-pinned-bottom-last]=\"rowPinned === 'bottom' && row.id === lastBottomPinnedRowId()\"\n                          [class.z-pinned-bottom-first]=\"rowPinned === 'bottom' && row.id === firstBottomPinnedRowId()\"\n                          [class.z-shadow-bottom]=\"\n                            showHeaderFooterShadow() &&\n                            hasScrollTop() &&\n                            rowPinned === 'top' &&\n                            row.id === lastTopPinnedRowId() &&\n                            !isStickyGroupHeaderEnabled()\n                          \"\n                          [class.z-shadow-top]=\"\n                            showHeaderFooterShadow() &&\n                            hasScrollBottom() &&\n                            rowPinned === 'bottom' &&\n                            row.id === firstBottomPinnedRowId()\n                          \"\n                          (contextmenu)=\"openContentRowMenu($event, row)\">\n                          @for (cell of visibleCells; track cell.id) {\n                            @let cellPinned = cell.column.getIsPinned();\n                            @if (\n                              canUseVirtualColumns() &&\n                              virtualLeftSpacerWidth() > 0 &&\n                              cell.column.id === firstVirtualCenterColumnId()\n                            ) {\n                              <td\n                                class=\"z-virtual-column-spacer pointer-events-none p-0\"\n                                [style.width.px]=\"virtualRenderedLeftSpacerWidth()\"></td>\n                            }\n                            @let shouldRenderRowSpan =\n                              cell | zTableSpan: zConfig().columns : 'shouldRender' : bodyRowSpanRows();\n                            @let shouldRenderColSpan =\n                              cell | zTableCellRender: visibleCells : zConfig().columns : 'body';\n                            @let isVirtualColumnVisible =\n                              !canUseVirtualColumns() ||\n                              cellPinned !== false ||\n                              virtualCenterColumnVisibilityMap()[cell.column.id];\n                            @if (shouldRenderRowSpan && shouldRenderColSpan && isVirtualColumnVisible) {\n                              @let cellSelectionId = row.id + '::' + cell.column.id;\n                              <td\n                                [attr.data-column-id]=\"cell.column.id\"\n                                [ngStyle]=\"\n                                  cell.column\n                                    | zTablePinningStyles\n                                      : cell\n                                      : 'body'\n                                      : visibleCells\n                                      : zConfig().columns\n                                      : columnResizing()\n                                      : colDomWidthMap()\n                                      : isColumnPinningActive\n                                      : bodyRowSpanRows()\n                                \"\n                                [class]=\"cell | zTableCellConfig: zConfig() : 'cellClass'\"\n                                [class.z-sticky-left]=\"isColumnPinningActive && cellPinned === 'start'\"\n                                [class.z-sticky-right]=\"isColumnPinningActive && cellPinned === 'end'\"\n                                [class.z-sticky-left-last]=\"\n                                  isColumnPinningActive &&\n                                  cellPinned === 'start' &&\n                                  (cell | zTableCellPin: 'isLastLeftPinned' : zConfig().columns : 'body' : visibleCells)\n                                \"\n                                [class.z-sticky-right-first]=\"\n                                  isColumnPinningActive &&\n                                  cellPinned === 'end' &&\n                                  (cell\n                                    | zTableCellPin: 'isFirstRightPinned' : zConfig().columns : 'body' : visibleCells)\n                                \"\n                                [class.z-sticky-right-last]=\"\n                                  isColumnPinningActive &&\n                                  cellPinned === 'end' &&\n                                  (cell\n                                    | zTableCellPin: 'isLastRightPinned' : zConfig().columns : 'body' : visibleCells)\n                                \"\n                                [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                                [class.z-col-drag]=\"cell.column.id === 'rowDrag'\"\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-cell-selectable]=\"canUseCellSelection()\"\n                                [class.z-cell-active]=\"\n                                  !hasMultipleSelectedCells() &&\n                                  activeCell()?.rowId === row.id &&\n                                  activeCell()?.columnId === cell.column.id\n                                \"\n                                [class.z-cell-range-selected]=\"visualSelectedCellIds().has(cellSelectionId)\"\n                                [class.z-cell-range-top]=\"selectedCellEdgeIds().top.has(cellSelectionId)\"\n                                [class.z-cell-range-right]=\"selectedCellEdgeIds().right.has(cellSelectionId)\"\n                                [class.z-cell-range-bottom]=\"selectedCellEdgeIds().bottom.has(cellSelectionId)\"\n                                [class.z-cell-range-left]=\"selectedCellEdgeIds().left.has(cellSelectionId)\"\n                                [class.z-content-edit-active]=\"\n                                  activeContentEditCell()?.rowId === row.id &&\n                                  activeContentEditCell()?.columnId === cell.column.id\n                                \"\n                                [class.z-at-bottom]=\"cell | zTableCellBottom: zConfig().columns : renderedBodyRows()\"\n                                [attr.rowspan]=\"\n                                  cell | zTableSpan: zConfig().columns : 'cellRowSpan' : bodyRowSpanRows()\n                                \"\n                                [attr.colspan]=\"\n                                  cell | zTableSpan: zConfig().columns : 'cellColSpan' : undefined : visibleCells\n                                \"\n                                [style]=\"cell | zTableCellConfig: zConfig() : 'cellStyle'\"\n                                [style.--z-cell-range-top]=\"\n                                  (selectedCellRangeInsets().get(cellSelectionId)?.top ?? 0) + '%'\n                                \"\n                                [style.--z-cell-range-right]=\"\n                                  (selectedCellRangeInsets().get(cellSelectionId)?.right ?? 0) + '%'\n                                \"\n                                [style.--z-cell-range-bottom]=\"\n                                  (selectedCellRangeInsets().get(cellSelectionId)?.bottom ?? 0) + '%'\n                                \"\n                                [style.--z-cell-range-left]=\"\n                                  (selectedCellRangeInsets().get(cellSelectionId)?.left ?? 0) + '%'\n                                \"\n                                (pointerdown)=\"onCellPointerDown($event, row, cell.column.id)\"\n                                (pointerenter)=\"onCellPointerEnter($event, row, cell.column.id)\"\n                                (contextmenu)=\"openCellMenu($event, row, cell.column.id)\">\n                                @if (cell.column.id === 'rowDrag') {\n                                  <div class=\"flex items-center justify-center\">\n                                    <button\n                                      data-z-table-drag-handle\n                                      type=\"button\"\n                                      class=\"text-muted-foreground inline-flex size-7 items-center justify-center rounded-md\"\n                                      [class.cursor-grab]=\"isRowDragEnabled()\"\n                                      [class.opacity-40]=\"!isRowDragEnabled()\">\n                                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" />\n                                    </button>\n                                  </div>\n                                } @else if (cell.column.id === 'select') {\n                                  <!-- Row Checkbox -->\n                                  <div class=\"flex items-center justify-center\">\n                                    <z-checkbox\n                                      [zChecked]=\"canUseRowSelection() && cell.row.getIsSelected()\"\n                                      [zIndeterminate]=\"\n                                        canUseRowSelection() &&\n                                        cell.row.getIsSomeSelected() &&\n                                        !cell.row.getIsSelected()\n                                      \"\n                                      [zDisabled]=\"!canUseRowSelection() || !cell.row.getCanSelect()\"\n                                      (zChange)=\"canUseRowSelection() && 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.getCanExpand()) {\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-sm\">\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 (\n                                  (cell.column.id === 'actionRowPin' || cell.column.id === 'actions') &&\n                                  cell.column.id !== actionColumnInfo()?.columnId\n                                ) {\n                                  @if (cell.row.depth === 0 && !hasBodyRowSpan()) {\n                                    <div class=\"flex items-center justify-center\">\n                                      <ng-template #rowPinPopoverContent>\n                                        <div\n                                          zHoverGlide\n                                          zHoverGlideSelector=\".z-column-menu-item\"\n                                          class=\"flex flex-col gap-1 py-1\">\n                                          @if (cell.row.getIsPinned() !== 'top') {\n                                            <button\n                                              type=\"button\"\n                                              (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\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=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\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=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\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-sm p-1 outline-none\"\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                                  @let isCellVisible = cell | zTableCellVisible: zConfig().columns;\n                                  @if (isCellVisible) {\n                                    @let editInfoVirtual = cell.getContext() | zTableCellEdit: zConfig().columns;\n                                    @if (editInfoVirtual.enabled) {\n                                      <!-- Editable Cell (Virtual) -->\n                                      <z-table-edit-cell\n                                        [zRow]=\"cell.row.original\"\n                                        [zRowId]=\"cell.row.id\"\n                                        [zRowIndex]=\"cell.row.index\"\n                                        [zColumnId]=\"cell.column.id\"\n                                        [zValue]=\"cell.getValue()\"\n                                        [zRowUpdate]=\"_rowUpdate()\"\n                                        [zEditConfig]=\"$any(editInfoVirtual.config)\"\n                                        (zChange)=\"onCellEdit($any($event))\" />\n                                    } @else if (editInfoVirtual.contentEnabled) {\n                                      @let contentConfigVirtual = editInfoVirtual.contentConfig!;\n                                      @if (\n                                        activeContentEditCell()?.rowId === row.id &&\n                                        activeContentEditCell()?.columnId === cell.column.id\n                                      ) {\n                                        <z-table-content-editor\n                                          [zValue]=\"cell.getValue()\"\n                                          [zConfig]=\"contentConfigVirtual\"\n                                          (zCommit)=\"onContentEditCommit($event, row, cell.column.id, cell.getValue())\"\n                                          (zCancel)=\"onContentEditCancel()\" />\n                                      } @else {\n                                        <button\n                                          type=\"button\"\n                                          class=\"z-table-content-trigger\"\n                                          [attr.data-z-table-edit-row]=\"row.id\"\n                                          [attr.data-z-table-edit-column]=\"cell.column.id\"\n                                          (keydown)=\"onContentEditKeydown($event, row.id, cell.column.id)\"\n                                          (click)=\"onContentEditStart($event, row.id, cell.column.id)\">\n                                          {{ contentConfigVirtual.displayValue }}\n                                        </button>\n                                      }\n                                    } @else {\n                                      <ng-container\n                                        *flexRender=\"\n                                          cell.column.columnDef.cell;\n                                          props: cell.getContext();\n                                          let cellContent\n                                        \">\n                                        @if (cellContent | zTableIsTemplateRef) {\n                                          <!-- TemplateRef rendering -->\n                                          @let isClickable = cell.column.id | zTableCellClickable: zConfig().columns;\n                                          <div\n                                            class=\"z-template-content\"\n                                            [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                            [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                            (click)=\"isClickable && onCellClick(row, cell.column.id, cell.getValue())\">\n                                            <ng-container\n                                              *ngTemplateOutlet=\"\n                                                cellContent;\n                                                context: { $implicit: cell.getContext() }\n                                              \" />\n                                          </div>\n                                        } @else if (cellContent | zTableHasIcon) {\n                                          <!-- Icon syntax rendering -->\n                                          @let isClickableIcon =\n                                            cell.column.id | zTableCellClickable: zConfig().columns;\n                                          <z-table-icon-text\n                                            [zText]=\"cellContent\"\n                                            [zTooltip]=\"cell | zTableCellConfig: zConfig() : 'contentTooltip'\"\n                                            [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                            [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                            (click)=\"\n                                              isClickableIcon && onCellClick(row, cell.column.id, cell.getValue())\n                                            \" />\n                                        } @else {\n                                          <!-- Default/innerHTML rendering -->\n                                          @let isClickableDefault =\n                                            cell.column.id | zTableCellClickable: zConfig().columns;\n                                          @let cellTooltipConfig =\n                                            cell | zTableCellConfig: zConfig() : 'contentTooltip';\n                                          @let cellPopoverConfig =\n                                            cell | zTableCellConfig: zConfig() : 'contentPopover';\n                                          @let cellPopoverContent = cellPopoverConfig | zTablePopoverConfig: 'content';\n                                          <ng-template #cellPopoverTpl>\n                                            @if (cellPopoverContent | zTableIsTemplateRef) {\n                                              <ng-container *ngTemplateOutlet=\"$any(cellPopoverContent)\" />\n                                            }\n                                            @if (!(cellPopoverContent | zTableIsTemplateRef)) {\n                                              <div [innerHTML]=\"$any(cellPopoverContent) | zSafeHtml\"></div>\n                                            }\n                                          </ng-template>\n                                          @if (cellPopoverContent) {\n                                            <div\n                                              class=\"z-table-cell-text\"\n                                              z-popover\n                                              z-tooltip\n                                              [zTriggerElement]=\"cellOverlayContent\"\n                                              [zTriggerRef]=\"cellOverlayContent\"\n                                              [zContent]=\"\n                                                (cellTooltipConfig | zTableTooltipConfig: 'content') || cellContent\n                                              \"\n                                              [zTooltipPosition]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'position')\n                                              \"\n                                              [zTooltipTrigger]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'trigger')\n                                              \"\n                                              [zTooltipType]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'type')\"\n                                              [zTooltipSize]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'size')\"\n                                              [zTooltipClass]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'class')\"\n                                              [zTooltipShowDelay]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'showDelay')\n                                              \"\n                                              [zTooltipHideDelay]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'hideDelay')\n                                              \"\n                                              [zTooltipArrow]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'arrow')\"\n                                              [zTooltipOffset]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'offset')\"\n                                              [zAutoDetect]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'autoDetect')\n                                              \"\n                                              [zAlwaysShow]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'alwaysShow')\n                                              \"\n                                              [zMaxWidth]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'maxWidth')\"\n                                              [zPopoverContent]=\"cellPopoverTpl\"\n                                              [zPosition]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'position')\"\n                                              [zPopoverTrigger]=\"\n                                                $any(cellPopoverConfig | zTablePopoverConfig: 'trigger')\n                                              \"\n                                              [zClass]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'class')\"\n                                              [zShowDelay]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'showDelay')\"\n                                              [zHideDelay]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'hideDelay')\"\n                                              [zDisabled]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'disabled')\"\n                                              [zOffset]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'offset')\"\n                                              [zPopoverWidth]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'width')\"\n                                              [zManualClose]=\"\n                                                $any(cellPopoverConfig | zTablePopoverConfig: 'manualClose')\n                                              \"\n                                              [zOutsideClickClose]=\"\n                                                $any(cellPopoverConfig | zTablePopoverConfig: 'outsideClickClose')\n                                              \"\n                                              [zScrollClose]=\"\n                                                $any(cellPopoverConfig | zTablePopoverConfig: 'scrollClose')\n                                              \"\n                                              [zSticky]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'sticky')\"\n                                              [zShowArrow]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'showArrow')\"\n                                              [zKeyboardSafe]=\"\n                                                $any(cellPopoverConfig | zTablePopoverConfig: 'keyboardSafe')\n                                              \"\n                                              (click)=\"\n                                                isClickableDefault && onCellClick(row, cell.column.id, cell.getValue())\n                                              \">\n                                              <span\n                                                #cellOverlayContent\n                                                class=\"z-table-cell-content-trigger\"\n                                                [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                                [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                                [innerHTML]=\"cellContent | translate | zSafeHtml\"></span>\n                                            </div>\n                                          } @else {\n                                            <div\n                                              class=\"z-table-cell-text\"\n                                              z-tooltip\n                                              [zTriggerElement]=\"cellTooltipContent\"\n                                              [zContent]=\"\n                                                (cellTooltipConfig | zTableTooltipConfig: 'content') || cellContent\n                                              \"\n                                              [zTooltipPosition]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'position')\n                                              \"\n                                              [zTooltipTrigger]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'trigger')\n                                              \"\n                                              [zTooltipType]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'type')\"\n                                              [zTooltipSize]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'size')\"\n                                              [zTooltipClass]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'class')\"\n                                              [zTooltipShowDelay]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'showDelay')\n                                              \"\n                                              [zTooltipHideDelay]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'hideDelay')\n                                              \"\n                                              [zTooltipArrow]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'arrow')\"\n                                              [zTooltipOffset]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'offset')\"\n                                              [zAutoDetect]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'autoDetect')\n                                              \"\n                                              [zAlwaysShow]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'alwaysShow')\n                                              \"\n                                              [zMaxWidth]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'maxWidth')\"\n                                              (click)=\"\n                                                isClickableDefault && onCellClick(row, cell.column.id, cell.getValue())\n                                              \">\n                                              <span\n                                                #cellTooltipContent\n                                                class=\"z-table-cell-content-trigger\"\n                                                [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                                [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                                [innerHTML]=\"cellContent | translate | zSafeHtml\"></span>\n                                            </div>\n                                          }\n                                        }\n                                      </ng-container>\n                                    }\n                                  }\n                                }\n                              </td>\n                            }\n                            @if (\n                              canUseVirtualColumns() &&\n                              virtualRightSpacerWidth() > 0 &&\n                              cell.column.id === lastVirtualCenterColumnId()\n                            ) {\n                              <td\n                                class=\"z-virtual-column-spacer pointer-events-none p-0\"\n                                [style.width.px]=\"virtualRenderedRightSpacerWidth()\"></td>\n                            }\n                          }\n                        </tr>\n                      }\n                    </tbody>\n                  </table>\n                </div>\n              }\n            </ng-template>\n          </div>\n\n          <!--\n            Bottom pinned rows: sibling AFTER the virtual canvas (not absolute like the\n            center rows). The virtualizer reserves their height inside getTotalSize() via\n            `paddingEnd`, leaving an empty band at the canvas bottom. `margin-top: -bottomHeight`\n            pulls this real flow element back over that band, and `position: sticky; bottom: 0`\n            floats it to the viewport bottom while scrolling.\n          -->\n          @if (virtualPinnedBottomRows().length > 0) {\n            <div\n              class=\"z-virtual-pinned-bottom\"\n              [style.min-width.px]=\"table.getTotalSize()\"\n              [style.margin-top.px]=\"-virtualPinnedBottomHeight()\">\n              @for (row of virtualPinnedBottomRows(); track row.id) {\n                <ng-container *ngTemplateOutlet=\"virtualPinnedRowTpl; context: { $implicit: row }\" />\n              }\n            </div>\n          }\n\n          <!-- Template for rendering pinned rows in virtual scroll mode -->\n          <ng-template #virtualPinnedRowTpl let-row>\n            @let visibleCells = row.getVisibleCells();\n            @let rowSelected = canUseRowSelection() && row.getIsSelected();\n            @let rowSomeSelected = canUseRowSelection() && row.getIsSomeSelected();\n            @let rowPinned = row.getIsPinned();\n            <table [style.width.px]=\"renderedTableWidth()\">\n              <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n              <tbody [class.z-has-vertical-scroll]=\"hasVerticalScroll()\">\n                <tr\n                  z-table-row-hover\n                  [attr.data-row-id]=\"row.id\"\n                  [class]=\"row | zTableRowConfig: zConfig() : 'rowClass'\"\n                  [style]=\"row | zTableRowConfig: zConfig() : 'rowStyle'\"\n                  [style.height.px]=\"effectiveDynamicRowSizing() ? null : virtualRowHeight()\"\n                  [style.min-height.px]=\"effectiveDynamicRowSizing() ? virtualRowHeight() : null\"\n                  [style.--z-row-height]=\"effectiveDynamicRowSizing() ? 'auto' : virtualRowHeight() + 'px'\"\n                  [class.z-selected]=\"rowSelected\"\n                  [class.z-indeterminate-selected]=\"rowSomeSelected && !rowSelected\"\n                  [class.z-context-menu-active]=\"contentRowMenu()?.row?.id === row.id\"\n                  [class.z-pinned-top]=\"rowPinned === 'top'\"\n                  [class.z-pinned-top-first]=\"rowPinned === 'top' && row.id === firstTopPinnedRowId()\"\n                  [class.z-pinned-bottom]=\"rowPinned === 'bottom'\"\n                  [class.z-pinned-bottom-last]=\"rowPinned === 'bottom' && row.id === lastBottomPinnedRowId()\"\n                  [class.z-pinned-bottom-first]=\"rowPinned === 'bottom' && row.id === firstBottomPinnedRowId()\"\n                  [class.z-shadow-bottom]=\"\n                    showHeaderFooterShadow() &&\n                    hasScrollTop() &&\n                    rowPinned === 'top' &&\n                    row.id === lastTopPinnedRowId() &&\n                    !isStickyGroupHeaderEnabled()\n                  \"\n                  [class.z-shadow-top]=\"\n                    showHeaderFooterShadow() &&\n                    hasScrollBottom() &&\n                    rowPinned === 'bottom' &&\n                    row.id === firstBottomPinnedRowId()\n                  \"\n                  (contextmenu)=\"openContentRowMenu($event, row)\">\n                  @let isColumnPinningActivePinned = isPinnedLayoutWithinContainer();\n                  @for (cell of visibleCells; track cell.id) {\n                    @let cellPinned = cell.column.getIsPinned();\n                    @let cellSelectionId = row.id + '::' + cell.column.id;\n                    @if (\n                      canUseVirtualColumns() &&\n                      virtualLeftSpacerWidth() > 0 &&\n                      cell.column.id === firstVirtualCenterColumnId()\n                    ) {\n                      <td\n                        class=\"z-virtual-column-spacer pointer-events-none p-0\"\n                        [style.width.px]=\"virtualRenderedLeftSpacerWidth()\"></td>\n                    }\n                    @let isVirtualColumnVisible =\n                      !canUseVirtualColumns() ||\n                      cellPinned !== false ||\n                      virtualCenterColumnVisibilityMap()[cell.column.id];\n                    @if (isVirtualColumnVisible) {\n                      <td\n                        [attr.data-column-id]=\"cell.column.id\"\n                        [ngStyle]=\"\n                          cell.column\n                            | zTablePinningStyles\n                              : cell\n                              : 'body'\n                              : visibleCells\n                              : zConfig().columns\n                              : columnResizing()\n                              : colDomWidthMap()\n                              : isColumnPinningActivePinned\n                              : bodyRowSpanRows()\n                        \"\n                        [class]=\"cell | zTableCellConfig: zConfig() : 'cellClass'\"\n                        [class.z-sticky-left]=\"isColumnPinningActivePinned && cellPinned === 'start'\"\n                        [class.z-sticky-right]=\"isColumnPinningActivePinned && cellPinned === 'end'\"\n                        [class.z-sticky-left-last]=\"\n                          isColumnPinningActivePinned &&\n                          cellPinned === 'start' &&\n                          (cell | zTableCellPin: 'isLastLeftPinned' : zConfig().columns : 'body' : visibleCells)\n                        \"\n                        [class.z-sticky-right-first]=\"\n                          isColumnPinningActivePinned &&\n                          cellPinned === 'end' &&\n                          (cell | zTableCellPin: 'isFirstRightPinned' : zConfig().columns : 'body' : visibleCells)\n                        \"\n                        [class.z-sticky-right-last]=\"\n                          isColumnPinningActivePinned &&\n                          cellPinned === 'end' &&\n                          (cell | zTableCellPin: 'isLastRightPinned' : zConfig().columns : 'body' : visibleCells)\n                        \"\n                        [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                        [class.z-col-drag]=\"cell.column.id === 'rowDrag'\"\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-cell-selectable]=\"canUseCellSelection()\"\n                        [class.z-cell-active]=\"\n                          !hasMultipleSelectedCells() &&\n                          activeCell()?.rowId === row.id &&\n                          activeCell()?.columnId === cell.column.id\n                        \"\n                        [class.z-cell-range-selected]=\"visualSelectedCellIds().has(cellSelectionId)\"\n                        [class.z-cell-range-top]=\"selectedCellEdgeIds().top.has(cellSelectionId)\"\n                        [class.z-cell-range-right]=\"selectedCellEdgeIds().right.has(cellSelectionId)\"\n                        [class.z-cell-range-bottom]=\"selectedCellEdgeIds().bottom.has(cellSelectionId)\"\n                        [class.z-cell-range-left]=\"selectedCellEdgeIds().left.has(cellSelectionId)\"\n                        [style.--z-cell-range-top]=\"(selectedCellRangeInsets().get(cellSelectionId)?.top ?? 0) + '%'\"\n                        [style.--z-cell-range-right]=\"\n                          (selectedCellRangeInsets().get(cellSelectionId)?.right ?? 0) + '%'\n                        \"\n                        [style.--z-cell-range-bottom]=\"\n                          (selectedCellRangeInsets().get(cellSelectionId)?.bottom ?? 0) + '%'\n                        \"\n                        [style.--z-cell-range-left]=\"(selectedCellRangeInsets().get(cellSelectionId)?.left ?? 0) + '%'\"\n                        [style]=\"cell | zTableCellConfig: zConfig() : 'cellStyle'\"\n                        (pointerdown)=\"onCellPointerDown($event, row, cell.column.id)\"\n                        (pointerenter)=\"onCellPointerEnter($event, row, cell.column.id)\"\n                        (contextmenu)=\"openCellMenu($event, row, cell.column.id)\">\n                        @if (cell.column.id === 'select') {\n                          <z-checkbox\n                            [zChecked]=\"rowSelected\"\n                            [zIndeterminate]=\"rowSomeSelected && !rowSelected\"\n                            [zDisabled]=\"!canUseRowSelection()\"\n                            (zChange)=\"canUseRowSelection() && row.toggleSelected()\" />\n                        } @else if (cell.column.id === 'expand') {\n                          <button\n                            type=\"button\"\n                            class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded-sm\"\n                            (click)=\"row.toggleExpanded()\">\n                            <z-icon\n                              zType=\"lucideChevronRight\"\n                              zSize=\"14\"\n                              class=\"transition-transform duration-200\"\n                              [class.rotate-90]=\"row.getIsExpanded()\" />\n                          </button>\n                        } @else if (cell.column.id === 'actionRowPin') {\n                          <div class=\"flex items-center justify-center\">\n                            <button\n                              type=\"button\"\n                              class=\"z-row-pin-trigger z-row-pin-unpin-trigger flex h-6 w-6 cursor-pointer items-center justify-center rounded-sm\"\n                              (click)=\"cell.row.pin(false)\">\n                              <z-icon zType=\"lucideX\" zSize=\"14\" />\n                            </button>\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                          @let isCellVisible = cell | zTableCellVisible: zConfig().columns;\n                          @if (isCellVisible) {\n                            <ng-container\n                              *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellContent\">\n                              @if (cellContent | zTableIsTemplateRef) {\n                                <div\n                                  class=\"z-template-content\"\n                                  [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                  [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\">\n                                  <ng-container\n                                    *ngTemplateOutlet=\"cellContent; context: { $implicit: cell.getContext() }\" />\n                                </div>\n                              } @else if (cellContent | zTableHasIcon) {\n                                <z-table-icon-text\n                                  [zText]=\"cellContent\"\n                                  [zTooltip]=\"cell | zTableCellConfig: zConfig() : 'contentTooltip'\"\n                                  [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                  [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\" />\n                              } @else {\n                                <span\n                                  class=\"z-table-cell-text\"\n                                  z-tooltip\n                                  [zContent]=\"(cell | zTableCellConfig: zConfig() : 'contentTooltip') || cellContent\"\n                                  [innerHTML]=\"cellContent | translate | zSafeHtml\"\n                                  [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                  [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"></span>\n                              }\n                            </ng-container>\n                          }\n                        }\n                      </td>\n                    }\n                    @if (\n                      canUseVirtualColumns() &&\n                      virtualRightSpacerWidth() > 0 &&\n                      cell.column.id === lastVirtualCenterColumnId()\n                    ) {\n                      <td\n                        class=\"z-virtual-column-spacer pointer-events-none p-0\"\n                        [style.width.px]=\"virtualRenderedRightSpacerWidth()\"></td>\n                    }\n                  }\n                </tr>\n              </tbody>\n            </table>\n          </ng-template>\n        } @else {\n          <!-- Normal Scroll Mode -->\n\n          <table [style.width.px]=\"renderedTableWidth()\">\n            <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n            <tbody\n              class=\"z-table-drag-body\"\n              [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n              [class.z-has-bottom-pinned]=\"table.getBottomRows().length > 0\"\n              [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n              <!-- Row Template -->\n              <ng-template #rowTemplate let-row let-isGroupChild=\"isGroupChild\" let-groupDepth=\"groupDepth\">\n                @let visibleCells = row.getVisibleCells();\n                @let rowSelected = canUseRowSelection() && row.getIsSelected();\n                @let rowSomeSelected = canUseRowSelection() && row.getIsSomeSelected();\n                @let rowPinned = row.getIsPinned();\n                <tr\n                  z-table-row-hover\n                  z-table-draggable=\"row\"\n                  z-table-drop-target=\"row\"\n                  [animate.enter]=\"row.depth > 0 || isGroupChild ? 'z-row-enter' : ''\"\n                  [z-table-drag-table-id]=\"dragInstanceId\"\n                  [z-table-drop-table-id]=\"dragInstanceId\"\n                  [z-table-drag-item-id]=\"row.id\"\n                  [z-table-drop-item-id]=\"row.id\"\n                  [z-table-drag-disabled]=\"!isRowDragEnabled()\"\n                  [z-table-drop-disabled]=\"!isRowDragEnabled()\"\n                  (zTableDropped)=\"_handleDragDrop($event)\"\n                  [attr.data-row-id]=\"row.id\"\n                  [class]=\"row | zTableRowConfig: zConfig() : 'rowClass'\"\n                  [style]=\"row | zTableRowConfig: zConfig() : 'rowStyle'\"\n                  [ngStyle]=\"row | zTableRow: table : 'pinningStyles' : pinnedRowHeights() : virtualRowHeight()\"\n                  [class.z-child-row]=\"row.depth > 0\"\n                  [class.z-group-child-row]=\"isGroupChild\"\n                  [style.--z-group-content-indent]=\"groupDepth > 0 ? 1.75 + (groupDepth - 1) * 0.75 + 'rem' : null\"\n                  [class.z-selected]=\"rowSelected\"\n                  [class.z-indeterminate-selected]=\"rowSomeSelected && !rowSelected\"\n                  [class.z-context-menu-active]=\"contentRowMenu()?.row?.id === row.id\"\n                  [class.z-pinned-top]=\"rowPinned === 'top'\"\n                  [class.z-pinned-top-first]=\"rowPinned === 'top' && row.id === firstTopPinnedRowId()\"\n                  [class.z-pinned-bottom]=\"rowPinned === 'bottom'\"\n                  [class.z-pinned-bottom-last]=\"rowPinned === 'bottom' && row.id === lastBottomPinnedRowId()\"\n                  [class.z-pinned-bottom-first]=\"rowPinned === 'bottom' && row.id === firstBottomPinnedRowId()\"\n                  [class.z-shadow-bottom]=\"\n                    showHeaderFooterShadow() &&\n                    hasScrollTop() &&\n                    rowPinned === 'top' &&\n                    row.id === lastTopPinnedRowId() &&\n                    !isStickyGroupHeaderEnabled()\n                  \"\n                  [class.z-shadow-top]=\"\n                    showHeaderFooterShadow() &&\n                    hasScrollBottom() &&\n                    rowPinned === 'bottom' &&\n                    row.id === firstBottomPinnedRowId()\n                  \"\n                  [attr.data-depth]=\"row.depth\"\n                  (contextmenu)=\"openContentRowMenu($event, row)\">\n                  @for (cell of visibleCells; track cell.id) {\n                    @let cellPinned = cell.column.getIsPinned();\n                    @let cellRowPinned = cell.row.getIsPinned();\n                    @if (\n                      canUseVirtualColumns() &&\n                      virtualLeftSpacerWidth() > 0 &&\n                      cell.column.id === firstVirtualCenterColumnId()\n                    ) {\n                      <td\n                        class=\"z-virtual-column-spacer pointer-events-none p-0\"\n                        [style.width.px]=\"virtualRenderedLeftSpacerWidth()\"></td>\n                    }\n                    @let shouldRenderRowSpan =\n                      cell | zTableSpan: zConfig().columns : 'shouldRender' : bodyRowSpanRows();\n                    @let shouldRenderColSpan = cell | zTableCellRender: visibleCells : zConfig().columns : 'body';\n                    @let isVirtualColumnVisible =\n                      !canUseVirtualColumns() ||\n                      cellPinned !== false ||\n                      virtualCenterColumnVisibilityMap()[cell.column.id];\n                    @if (shouldRenderRowSpan && shouldRenderColSpan && isVirtualColumnVisible) {\n                      @let cellSelectionId = row.id + '::' + cell.column.id;\n                      <td\n                        [attr.data-column-id]=\"cell.column.id\"\n                        [ngStyle]=\"\n                          cell.column\n                            | zTablePinningStyles\n                              : cell\n                              : 'body'\n                              : visibleCells\n                              : zConfig().columns\n                              : columnResizing()\n                              : colDomWidthMap()\n                              : isColumnPinningActive\n                              : bodyRowSpanRows()\n                        \"\n                        [class]=\"cell | zTableCellConfig: zConfig() : 'cellClass'\"\n                        [style]=\"cell | zTableCellConfig: zConfig() : 'cellStyle'\"\n                        [class.z-sticky-left]=\"isColumnPinningActive && cellPinned === 'start'\"\n                        [class.z-sticky-right]=\"isColumnPinningActive && cellPinned === 'end'\"\n                        [class.z-sticky-left-last]=\"\n                          isColumnPinningActive &&\n                          cellPinned === 'start' &&\n                          (cell | zTableCellPin: 'isLastLeftPinned' : zConfig().columns : 'body' : visibleCells)\n                        \"\n                        [class.z-sticky-right-first]=\"\n                          isColumnPinningActive &&\n                          cellPinned === 'end' &&\n                          (cell | zTableCellPin: 'isFirstRightPinned' : zConfig().columns : 'body' : visibleCells)\n                        \"\n                        [class.z-sticky-right-last]=\"\n                          isColumnPinningActive &&\n                          cellPinned === 'end' &&\n                          (cell | zTableCellPin: 'isLastRightPinned' : zConfig().columns : 'body' : visibleCells)\n                        \"\n                        [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                        [class.z-col-drag]=\"cell.column.id === 'rowDrag'\"\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-cell-selectable]=\"canUseCellSelection()\"\n                        [class.z-cell-active]=\"\n                          !hasMultipleSelectedCells() &&\n                          activeCell()?.rowId === row.id &&\n                          activeCell()?.columnId === cell.column.id\n                        \"\n                        [class.z-cell-range-selected]=\"visualSelectedCellIds().has(cellSelectionId)\"\n                        [class.z-cell-range-top]=\"selectedCellEdgeIds().top.has(cellSelectionId)\"\n                        [class.z-cell-range-right]=\"selectedCellEdgeIds().right.has(cellSelectionId)\"\n                        [class.z-cell-range-bottom]=\"selectedCellEdgeIds().bottom.has(cellSelectionId)\"\n                        [class.z-cell-range-left]=\"selectedCellEdgeIds().left.has(cellSelectionId)\"\n                        [class.z-content-edit-active]=\"\n                          activeContentEditCell()?.rowId === row.id &&\n                          activeContentEditCell()?.columnId === cell.column.id\n                        \"\n                        [class.z-at-bottom]=\"cell | zTableCellBottom: zConfig().columns : renderedBodyRows()\"\n                        [attr.rowspan]=\"cell | zTableSpan: zConfig().columns : 'cellRowSpan' : bodyRowSpanRows()\"\n                        [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan' : undefined : visibleCells\"\n                        [style.--z-cell-range-top]=\"(selectedCellRangeInsets().get(cellSelectionId)?.top ?? 0) + '%'\"\n                        [style.--z-cell-range-right]=\"\n                          (selectedCellRangeInsets().get(cellSelectionId)?.right ?? 0) + '%'\n                        \"\n                        [style.--z-cell-range-bottom]=\"\n                          (selectedCellRangeInsets().get(cellSelectionId)?.bottom ?? 0) + '%'\n                        \"\n                        [style.--z-cell-range-left]=\"(selectedCellRangeInsets().get(cellSelectionId)?.left ?? 0) + '%'\"\n                        (pointerdown)=\"onCellPointerDown($event, row, cell.column.id)\"\n                        (pointerenter)=\"onCellPointerEnter($event, row, cell.column.id)\"\n                        (contextmenu)=\"openCellMenu($event, row, cell.column.id)\">\n                        @if (cell.column.id === 'rowDrag') {\n                          <div class=\"flex items-center justify-center\">\n                            <button\n                              data-z-table-drag-handle\n                              type=\"button\"\n                              class=\"text-muted-foreground hover:bg-muted hover:text-foreground inline-flex size-7 items-center justify-center rounded-md transition-colors\"\n                              [class.cursor-grab]=\"isRowDragEnabled()\"\n                              [class.cursor-not-allowed]=\"!isRowDragEnabled()\"\n                              [class.opacity-40]=\"!isRowDragEnabled()\">\n                              <z-icon zType=\"lucideGripVertical\" zSize=\"14\" />\n                            </button>\n                          </div>\n                        } @else 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                              [zChecked]=\"canUseRowSelection() && cell.row.getIsSelected()\"\n                              [zIndeterminate]=\"\n                                canUseRowSelection() && cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\n                              \"\n                              [zDisabled]=\"!canUseRowSelection() || !cell.row.getCanSelect()\"\n                              (zChange)=\"canUseRowSelection() && cell.row.toggleSelected()\" />\n                            @if (zConfig().enableRowPinning && cell.row.depth === 0 && !hasBodyRowSpan()) {\n                              @if (cellRowPinned) {\n                                <button\n                                  type=\"button\"\n                                  class=\"z-row-pin-trigger z-row-pin-unpin-trigger flex h-6 w-6 cursor-pointer items-center justify-center rounded-sm\"\n                                  (click)=\"cell.row.pin(false)\">\n                                  <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                </button>\n                              } @else {\n                                <ng-template #rowPinPopoverContent>\n                                  <div\n                                    zHoverGlide\n                                    zHoverGlideSelector=\".z-column-menu-item\"\n                                    class=\"flex flex-col gap-1 py-1\">\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\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-sm p-1 outline-none\">\n                                  <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                                </button>\n                              }\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.getCanExpand()) {\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-sm\">\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                              @if (cellRowPinned) {\n                                <button\n                                  type=\"button\"\n                                  class=\"z-row-pin-trigger z-row-pin-unpin-trigger flex h-6 w-6 cursor-pointer items-center justify-center rounded-sm\"\n                                  (click)=\"cell.row.pin(false)\">\n                                  <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                </button>\n                              } @else {\n                                <ng-template #rowPinPopoverContent>\n                                  <div\n                                    zHoverGlide\n                                    zHoverGlideSelector=\".z-column-menu-item\"\n                                    class=\"flex flex-col gap-1 py-1\">\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\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-sm p-1 outline-none\">\n                                  <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                                </button>\n                              }\n                            }\n                          </div>\n                        } @else if (\n                          (cell.column.id === 'actionRowPin' || cell.column.id === 'actions') &&\n                          cell.column.id !== actionColumnInfo()?.columnId\n                        ) {\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                              @if (cellRowPinned) {\n                                <button\n                                  type=\"button\"\n                                  class=\"z-row-pin-trigger z-row-pin-unpin-trigger flex h-6 w-6 cursor-pointer items-center justify-center rounded-sm\"\n                                  (click)=\"cell.row.pin(false)\">\n                                  <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                </button>\n                              } @else {\n                                <ng-template #rowPinPopoverContent>\n                                  <div\n                                    zHoverGlide\n                                    zHoverGlideSelector=\".z-column-menu-item\"\n                                    class=\"flex flex-col gap-1 py-1\">\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\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-sm p-1 outline-none\">\n                                  <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                                </button>\n                              }\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                          @let isCellVisibleNormal = cell | zTableCellVisible: zConfig().columns;\n                          @if (isCellVisibleNormal) {\n                            @let editInfo = cell.getContext() | zTableCellEdit: zConfig().columns;\n                            @if (editInfo.enabled) {\n                              <!-- Editable Cell -->\n                              <z-table-edit-cell\n                                [zRow]=\"cell.row.original\"\n                                [zRowId]=\"cell.row.id\"\n                                [zRowIndex]=\"cell.row.index\"\n                                [zColumnId]=\"cell.column.id\"\n                                [zValue]=\"cell.getValue()\"\n                                [zRowUpdate]=\"_rowUpdate()\"\n                                [zEditConfig]=\"$any(editInfo.config)\"\n                                (zChange)=\"onCellEdit($any($event))\" />\n                            } @else if (editInfo.contentEnabled) {\n                              @let contentConfig = editInfo.contentConfig!;\n                              @if (\n                                activeContentEditCell()?.rowId === row.id &&\n                                activeContentEditCell()?.columnId === cell.column.id\n                              ) {\n                                <z-table-content-editor\n                                  [zValue]=\"cell.getValue()\"\n                                  [zConfig]=\"contentConfig\"\n                                  (zCommit)=\"onContentEditCommit($event, row, cell.column.id, cell.getValue())\"\n                                  (zCancel)=\"onContentEditCancel()\" />\n                              } @else {\n                                <button\n                                  type=\"button\"\n                                  class=\"z-table-content-trigger\"\n                                  [attr.data-z-table-edit-row]=\"row.id\"\n                                  [attr.data-z-table-edit-column]=\"cell.column.id\"\n                                  (keydown)=\"onContentEditKeydown($event, row.id, cell.column.id)\"\n                                  (click)=\"onContentEditStart($event, row.id, cell.column.id)\">\n                                  {{ contentConfig.displayValue }}\n                                </button>\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                                  @let isClickableTpl = cell.column.id | zTableCellClickable: zConfig().columns;\n                                  <div\n                                    class=\"z-template-content\"\n                                    [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                    [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                    (click)=\"isClickableTpl && onCellClick(row, cell.column.id, cell.getValue())\">\n                                    <ng-container\n                                      *ngTemplateOutlet=\"cellContent; context: { $implicit: cell.getContext() }\" />\n                                  </div>\n                                } @else if (cellContent | zTableHasIcon) {\n                                  <!-- Icon syntax rendering -->\n                                  @let isClickableIconTpl = cell.column.id | zTableCellClickable: zConfig().columns;\n                                  <z-table-icon-text\n                                    [zText]=\"cellContent\"\n                                    [zTooltip]=\"cell | zTableCellConfig: zConfig() : 'contentTooltip'\"\n                                    [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                    [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                    (click)=\"isClickableIconTpl && onCellClick(row, cell.column.id, cell.getValue())\" />\n                                } @else {\n                                  <!-- Default/innerHTML rendering -->\n                                  @let isClickableDefaultTpl = cell.column.id | zTableCellClickable: zConfig().columns;\n                                  @let cellTooltipConfigTpl = cell | zTableCellConfig: zConfig() : 'contentTooltip';\n                                  @let cellPopoverConfigTpl = cell | zTableCellConfig: zConfig() : 'contentPopover';\n                                  @let cellPopoverContentTpl = cellPopoverConfigTpl | zTablePopoverConfig: 'content';\n                                  <ng-template #cellPopoverTplNormal>\n                                    @if (cellPopoverContentTpl | zTableIsTemplateRef) {\n                                      <ng-container *ngTemplateOutlet=\"$any(cellPopoverContentTpl)\" />\n                                    }\n                                    @if (!(cellPopoverContentTpl | zTableIsTemplateRef)) {\n                                      <div [innerHTML]=\"$any(cellPopoverContentTpl) | zSafeHtml\"></div>\n                                    }\n                                  </ng-template>\n                                  @if (cellPopoverContentTpl) {\n                                    <div\n                                      class=\"z-table-cell-text\"\n                                      z-popover\n                                      z-tooltip\n                                      [zTriggerElement]=\"cellOverlayContentTpl\"\n                                      [zTriggerRef]=\"cellOverlayContentTpl\"\n                                      [zContent]=\"\n                                        (cellTooltipConfigTpl | zTableTooltipConfig: 'content') || cellContent\n                                      \"\n                                      [zTooltipPosition]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'position')\"\n                                      [zTooltipTrigger]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'trigger')\"\n                                      [zTooltipType]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'type')\"\n                                      [zTooltipSize]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'size')\"\n                                      [zTooltipClass]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'class')\"\n                                      [zTooltipShowDelay]=\"\n                                        $any(cellTooltipConfigTpl | zTableTooltipConfig: 'showDelay')\n                                      \"\n                                      [zTooltipHideDelay]=\"\n                                        $any(cellTooltipConfigTpl | zTableTooltipConfig: 'hideDelay')\n                                      \"\n                                      [zTooltipArrow]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'arrow')\"\n                                      [zTooltipOffset]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'offset')\"\n                                      [zAutoDetect]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'autoDetect')\"\n                                      [zAlwaysShow]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'alwaysShow')\"\n                                      [zMaxWidth]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'maxWidth')\"\n                                      [zPopoverContent]=\"cellPopoverTplNormal\"\n                                      [zPosition]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'position')\"\n                                      [zPopoverTrigger]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'trigger')\"\n                                      [zClass]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'class')\"\n                                      [zShowDelay]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'showDelay')\"\n                                      [zHideDelay]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'hideDelay')\"\n                                      [zDisabled]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'disabled')\"\n                                      [zOffset]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'offset')\"\n                                      [zPopoverWidth]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'width')\"\n                                      [zManualClose]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'manualClose')\"\n                                      [zOutsideClickClose]=\"\n                                        $any(cellPopoverConfigTpl | zTablePopoverConfig: 'outsideClickClose')\n                                      \"\n                                      [zScrollClose]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'scrollClose')\"\n                                      [zSticky]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'sticky')\"\n                                      [zShowArrow]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'showArrow')\"\n                                      [zKeyboardSafe]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'keyboardSafe')\"\n                                      (click)=\"\n                                        isClickableDefaultTpl && onCellClick(row, cell.column.id, cell.getValue())\n                                      \">\n                                      <span\n                                        #cellOverlayContentTpl\n                                        class=\"z-table-cell-content-trigger\"\n                                        [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                        [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                        [innerHTML]=\"cellContent | translate | zSafeHtml\"></span>\n                                    </div>\n                                  } @else {\n                                    <div\n                                      class=\"z-table-cell-text\"\n                                      z-tooltip\n                                      [zTriggerElement]=\"cellTooltipContentTpl\"\n                                      [zContent]=\"\n                                        (cellTooltipConfigTpl | zTableTooltipConfig: 'content') || cellContent\n                                      \"\n                                      [zTooltipPosition]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'position')\"\n                                      [zTooltipTrigger]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'trigger')\"\n                                      [zTooltipType]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'type')\"\n                                      [zTooltipSize]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'size')\"\n                                      [zTooltipClass]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'class')\"\n                                      [zTooltipShowDelay]=\"\n                                        $any(cellTooltipConfigTpl | zTableTooltipConfig: 'showDelay')\n                                      \"\n                                      [zTooltipHideDelay]=\"\n                                        $any(cellTooltipConfigTpl | zTableTooltipConfig: 'hideDelay')\n                                      \"\n                                      [zTooltipArrow]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'arrow')\"\n                                      [zTooltipOffset]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'offset')\"\n                                      [zAutoDetect]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'autoDetect')\"\n                                      [zAlwaysShow]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'alwaysShow')\"\n                                      [zMaxWidth]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'maxWidth')\"\n                                      (click)=\"\n                                        isClickableDefaultTpl && onCellClick(row, cell.column.id, cell.getValue())\n                                      \">\n                                      <span\n                                        #cellTooltipContentTpl\n                                        class=\"z-table-cell-content-trigger\"\n                                        [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                        [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                        [innerHTML]=\"cellContent | translate | zSafeHtml\"></span>\n                                    </div>\n                                  }\n                                }\n                              </ng-container>\n                            }\n                          }\n                        }\n                      </td>\n                    }\n                    @if (\n                      canUseVirtualColumns() &&\n                      virtualRightSpacerWidth() > 0 &&\n                      cell.column.id === lastVirtualCenterColumnId()\n                    ) {\n                      <td\n                        class=\"z-virtual-column-spacer pointer-events-none p-0\"\n                        [style.width.px]=\"virtualRenderedRightSpacerWidth()\"></td>\n                    }\n                  }\n                </tr>\n\n                <!-- Expanded Row Detail -->\n                @if (row.getIsExpanded() && row.depth === 0 && !row.subRows?.length) {\n                  @let resolvedSubTableConfig = row | zTableSubTableConfig: zConfig();\n                  <tr class=\"z-expanded-row\" animate.enter=\"z-expanded-row-enter\">\n                    <td [attr.colspan]=\"renderedColumnCount()\" class=\"p-0\">\n                      <!-- Animate this wrapper with clip-path, translate, and opacity. -->\n                      <div class=\"z-expanded-row-content\">\n                        @if (zConfig().expandedRowTemplate) {\n                          <ng-container\n                            *ngTemplateOutlet=\"zConfig().expandedRowTemplate!; context: { $implicit: row }\" />\n                        } @else if (resolvedSubTableConfig) {\n                          <div class=\"z-sub-table-container\">\n                            <z-table [zConfig]=\"$any(resolvedSubTableConfig)\" zVariant=\"borderless\" />\n                          </div>\n                        }\n                      </div>\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 (item of groupedCenterRowItems(); track item.type === 'group' ? item.id : item.row.id) {\n                @if (item.type === 'group') {\n                  <tr\n                    #groupRow\n                    class=\"z-group-row\"\n                    [class.z-group-row-has-totals]=\"item.totals\"\n                    [class.z-group-row-expanded]=\"item.expanded\"\n                    [class.z-group-row-sticky]=\"isStickyGroupHeaderEnabled()\"\n                    [class.z-group-row-sticky-shadow]=\"shadowGroupRowId() === item.id\"\n                    [style.top.px]=\"stickyGroupTopByDepth()[item.depth]\"\n                    [attr.data-group-id]=\"item.id\"\n                    [attr.data-group-depth]=\"item.depth\">\n                    @if (item.totals) {\n                      @let totalColumnMap = groupTotalColumnMap();\n                      @for (column of orderedLeafColumns(); track column.id; let isFirstGroupCell = $first) {\n                        <td\n                          [class.z-group-row-label-cell]=\"isFirstGroupCell\"\n                          [class.z-group-row-total-cell]=\"!isFirstGroupCell && totalColumnMap[column.id]\"\n                          [attr.data-column-id]=\"column.id\">\n                          @if (isFirstGroupCell) {\n                            <div class=\"z-group-row-sticky-wrapper\">\n                              <button\n                                type=\"button\"\n                                class=\"z-group-row-trigger\"\n                                [style.padding-left.rem]=\"0.75 + item.depth * 0.75\"\n                                [attr.aria-expanded]=\"item.expanded\"\n                                (click)=\"toggleGroupRow(item.id)\">\n                                <z-icon\n                                  zType=\"lucideChevronRight\"\n                                  zSize=\"14\"\n                                  class=\"transition-transform duration-200\"\n                                  [class.rotate-90]=\"item.expanded\" />\n                                <span\n                                  class=\"z-group-row-label\"\n                                  z-tooltip\n                                  [zContent]=\"(item.columnLabel ? item.columnLabel + ': ' : '') + item.label\">\n                                  @if (item.columnLabel) {\n                                    <span class=\"z-group-row-column-label\">{{ item.columnLabel }}:</span>\n                                  }\n                                  {{ item.label }}\n                                </span>\n                                @if (groupingConfig().showCount !== false) {\n                                  <span class=\"z-group-row-count\">{{ item.count }}</span>\n                                }\n                                @if (item.loading) {\n                                  <z-loading class=\"z-group-row-loading\" [zLoading]=\"true\" zSize=\"xs\" />\n                                }\n                              </button>\n                              @if (!isServerGrouping()) {\n                                <button\n                                  type=\"button\"\n                                  z-button\n                                  zType=\"ghost\"\n                                  zSize=\"sm\"\n                                  zTypeIcon=\"lucideX\"\n                                  zSizeIcon=\"14\"\n                                  [zWave]=\"false\"\n                                  z-tooltip\n                                  [zContent]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                                  [attr.aria-label]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                                  [zAlwaysShow]=\"true\"\n                                  zTooltipPosition=\"top\"\n                                  class=\"z-group-row-remove\"\n                                  (click)=\"removeGroupingColumn(item.columnId)\"></button>\n                              }\n                            </div>\n                          }\n                          @if (!isFirstGroupCell && totalColumnMap[column.id]) {\n                            @let totalConfig = groupTotalConfigMap()[column.id];\n                            @let totalTooltip = totalConfig.tooltip;\n                            @let totalPopover = totalConfig.popover;\n                            @let totalPopoverContent = totalPopover | zTablePopoverConfig: 'content';\n                            <ng-template #groupTotalPopoverTpl>\n                              @if (totalPopoverContent | zTableIsTemplateRef) {\n                                <ng-container *ngTemplateOutlet=\"$any(totalPopoverContent)\" />\n                              }\n                              @if (!(totalPopoverContent | zTableIsTemplateRef)) {\n                                <div [innerHTML]=\"$any(totalPopoverContent) | zSafeHtml\"></div>\n                              }\n                            </ng-template>\n                            <span\n                              class=\"z-group-row-total\"\n                              z-tooltip\n                              z-popover\n                              [class]=\"totalConfig.class\"\n                              [zContent]=\"\n                                $any((totalTooltip | zTableTooltipConfig: 'content') || item.totals[column.id])\n                              \"\n                              [zTooltipPosition]=\"$any(totalTooltip | zTableTooltipConfig: 'position')\"\n                              [zTooltipTrigger]=\"$any(totalTooltip | zTableTooltipConfig: 'trigger')\"\n                              [zTooltipType]=\"$any(totalTooltip | zTableTooltipConfig: 'type')\"\n                              [zTooltipSize]=\"$any(totalTooltip | zTableTooltipConfig: 'size')\"\n                              [zTooltipClass]=\"$any(totalTooltip | zTableTooltipConfig: 'class')\"\n                              [zTooltipShowDelay]=\"$any(totalTooltip | zTableTooltipConfig: 'showDelay')\"\n                              [zTooltipHideDelay]=\"$any(totalTooltip | zTableTooltipConfig: 'hideDelay')\"\n                              [zTooltipArrow]=\"$any(totalTooltip | zTableTooltipConfig: 'arrow')\"\n                              [zTooltipOffset]=\"$any(totalTooltip | zTableTooltipConfig: 'offset')\"\n                              [zAutoDetect]=\"$any(totalTooltip | zTableTooltipConfig: 'autoDetect')\"\n                              [zAlwaysShow]=\"$any(totalTooltip | zTableTooltipConfig: 'alwaysShow')\"\n                              [zMaxWidth]=\"$any(totalTooltip | zTableTooltipConfig: 'maxWidth')\"\n                              [zPopoverContent]=\"totalPopoverContent ? groupTotalPopoverTpl : null\"\n                              [zPosition]=\"$any(totalPopover | zTablePopoverConfig: 'position')\"\n                              [zPopoverTrigger]=\"$any(totalPopover | zTablePopoverConfig: 'trigger')\"\n                              [zClass]=\"$any(totalPopover | zTablePopoverConfig: 'class')\"\n                              [zShowDelay]=\"$any(totalPopover | zTablePopoverConfig: 'showDelay')\"\n                              [zHideDelay]=\"$any(totalPopover | zTablePopoverConfig: 'hideDelay')\"\n                              [zDisabled]=\"$any(totalPopover | zTablePopoverConfig: 'disabled')\"\n                              [zOffset]=\"$any(totalPopover | zTablePopoverConfig: 'offset')\"\n                              [zPopoverWidth]=\"$any(totalPopover | zTablePopoverConfig: 'width')\"\n                              [zManualClose]=\"$any(totalPopover | zTablePopoverConfig: 'manualClose')\"\n                              [zOutsideClickClose]=\"$any(totalPopover | zTablePopoverConfig: 'outsideClickClose')\"\n                              [zScrollClose]=\"$any(totalPopover | zTablePopoverConfig: 'scrollClose')\"\n                              [zSticky]=\"$any(totalPopover | zTablePopoverConfig: 'sticky')\"\n                              [zShowArrow]=\"$any(totalPopover | zTablePopoverConfig: 'showArrow')\"\n                              [zKeyboardSafe]=\"$any(totalPopover | zTablePopoverConfig: 'keyboardSafe')\">\n                              {{ item.totals[column.id] }}\n                            </span>\n                          }\n                        </td>\n                      }\n                    } @else {\n                      <td [attr.colspan]=\"renderedColumnCount()\">\n                        <div class=\"z-group-row-sticky-wrapper\">\n                          <button\n                            type=\"button\"\n                            class=\"z-group-row-trigger\"\n                            [style.padding-left.rem]=\"0.75 + item.depth * 0.75\"\n                            [attr.aria-expanded]=\"item.expanded\"\n                            (click)=\"toggleGroupRow(item.id)\">\n                            <z-icon\n                              zType=\"lucideChevronRight\"\n                              zSize=\"14\"\n                              class=\"transition-transform duration-200\"\n                              [class.rotate-90]=\"item.expanded\" />\n                            <span\n                              class=\"z-group-row-label\"\n                              z-tooltip\n                              [zContent]=\"(item.columnLabel ? item.columnLabel + ': ' : '') + item.label\">\n                              @if (item.columnLabel) {\n                                <span class=\"z-group-row-column-label\">{{ item.columnLabel }}:</span>\n                              }\n                              {{ item.label }}\n                            </span>\n                            @if (groupingConfig().showCount !== false) {\n                              <span class=\"z-group-row-count\">{{ item.count }}</span>\n                            }\n                            @if (item.loading) {\n                              <z-loading class=\"z-group-row-loading\" [zLoading]=\"true\" zSize=\"xs\" />\n                            }\n                          </button>\n                          @if (!isServerGrouping()) {\n                            <button\n                              type=\"button\"\n                              z-button\n                              zType=\"ghost\"\n                              zSize=\"sm\"\n                              zTypeIcon=\"lucideX\"\n                              zSizeIcon=\"14\"\n                              [zWave]=\"false\"\n                              z-tooltip\n                              [zContent]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                              [attr.aria-label]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                              [zAlwaysShow]=\"true\"\n                              zTooltipPosition=\"top\"\n                              class=\"z-group-row-remove\"\n                              (click)=\"removeGroupingColumn(item.columnId)\"></button>\n                          }\n                        </div>\n                      </td>\n                    }\n                  </tr>\n                }\n                @if (item.type === 'row') {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      rowTemplate;\n                      context: {\n                        $implicit: item.row,\n                        isGroupChild: item.isGroupChild,\n                        groupDepth: item.groupDepth,\n                      }\n                    \" />\n                }\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 [style.width.px]=\"renderedTableWidth()\">\n        <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n        <tfoot>\n          @for (footerGroup of orderedFooterGroups(); track footerGroup.id; let footerRowIndex = $index) {\n            @if (footerGroup | zTableFooterContent: zConfig().columns : footerRowIndex) {\n              <tr>\n                @for (footer of footerGroup.headers; track footer.id) {\n                  @if (\n                    canUseVirtualColumns() &&\n                    virtualLeftSpacerWidth() > 0 &&\n                    footer.column.id === firstVirtualCenterColumnId()\n                  ) {\n                    <th\n                      class=\"z-virtual-column-spacer z-virtual-footer-spacer pointer-events-none p-0\"\n                      [style.width.px]=\"virtualRenderedLeftSpacerWidth()\"></th>\n                  }\n                  @let rowSpan = footer | zTableSpan: zConfig().columns : 'footerRowSpan' : footerRowIndex;\n                  @let shouldRender =\n                    footer\n                      | zTableCellRender\n                        : footerGroup.headers\n                        : zConfig().columns\n                        : 'footer'\n                        : footerRowIndex\n                        : orderedFooterGroups();\n                  @let isVirtualColumnVisible =\n                    !canUseVirtualColumns() ||\n                    footer.column.getIsPinned() !== false ||\n                    virtualCenterColumnVisibilityMap()[footer.column.id];\n                  @if (rowSpan && shouldRender && isVirtualColumnVisible) {\n                    <th\n                      [attr.data-column-id]=\"footer.column.id\"\n                      [ngStyle]=\"\n                        footer.column\n                          | zTablePinningStyles\n                            : footer\n                            : 'footer'\n                            : table\n                            : zConfig().columns\n                            : columnResizing()\n                            : colDomWidthMap()\n                            : isColumnPinningActive\n                      \"\n                      [class]=\"\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerClass' : footerRowIndex) +\n                        ' ' +\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass' : footerRowIndex)\n                      \"\n                      [style]=\"\n                        footer.column.id | zTableColumnConfig: zConfig().columns : 'footerStyle' : footerRowIndex\n                      \"\n                      [class.z-sticky-left]=\"\n                        isColumnPinningActive && (footer | zTableCellPin: 'isLeftPinned' : zConfig().columns : 'footer')\n                      \"\n                      [class.z-sticky-right]=\"\n                        isColumnPinningActive &&\n                        (footer | zTableCellPin: 'isRightPinned' : zConfig().columns : 'footer')\n                      \"\n                      [class.z-sticky-left-last]=\"\n                        isColumnPinningActive &&\n                        (footer | zTableCellPin: 'isLastLeftPinned' : zConfig().columns : 'footer')\n                      \"\n                      [class.z-sticky-right-first]=\"\n                        isColumnPinningActive &&\n                        (footer | zTableCellPin: 'isFirstRightPinned' : zConfig().columns : 'footer')\n                      \"\n                      [class.z-sticky-right-last]=\"\n                        isColumnPinningActive &&\n                        (footer | zTableCellPin: 'isLastRightPinned' : zConfig().columns : 'footer')\n                      \"\n                      [class.z-at-left-edge]=\"footer | zTableCellOffset: orderedLeafColumns()\"\n                      [attr.rowspan]=\"rowSpan\"\n                      [attr.colspan]=\"\n                        footer | zTableSpan: zConfig().columns : 'footerColSpan' : footerRowIndex : footerGroup.headers\n                      \">\n                      @let configFooterContent =\n                        footer.column.id | zTableFooterRender: zConfig().columns : footerRowIndex;\n                      @if (configFooterContent !== undefined && configFooterContent !== '') {\n                        <ng-container *flexRender=\"configFooterContent; props: footer.getContext(); let footerContent\">\n                          <div\n                            class=\"flex w-full items-center\"\n                            [class.justify-center]=\"\n                              (footer.column.id\n                                | zTableColumnConfig: zConfig().columns : 'footerAlignClass' : footerRowIndex) ===\n                              'text-center'\n                            \"\n                            [class.justify-end]=\"\n                              (footer.column.id\n                                | zTableColumnConfig: zConfig().columns : 'footerAlignClass' : footerRowIndex) ===\n                              'text-right'\n                            \">\n                            @if (footerContent | zTableIsTemplateRef) {\n                              <!-- TemplateRef rendering -->\n                              <div\n                                class=\"z-template-content\"\n                                [class]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerContentClass' : footerRowIndex\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerContentStyle' : footerRowIndex\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]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerTooltip' : footerRowIndex\n                                \"\n                                [class]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerContentClass' : footerRowIndex\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerContentStyle' : footerRowIndex\n                                \" />\n                            } @else {\n                              <!-- Default/string rendering -->\n                              <span\n                                class=\"z-table-cell-text\"\n                                z-tooltip\n                                [zContent]=\"\n                                  (footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerTooltip' : footerRowIndex) ||\n                                  footerContent\n                                \"\n                                [class]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerContentClass' : footerRowIndex\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerContentStyle' : footerRowIndex\n                                \">\n                                {{ footerContent | translate }}\n                              </span>\n                            }\n                          </div>\n                        </ng-container>\n                      }\n                    </th>\n                  }\n                  @if (\n                    canUseVirtualColumns() &&\n                    virtualRightSpacerWidth() > 0 &&\n                    footer.column.id === lastVirtualCenterColumnId()\n                  ) {\n                    <th\n                      class=\"z-virtual-column-spacer z-virtual-footer-spacer pointer-events-none p-0\"\n                      [style.width.px]=\"virtualRenderedRightSpacerWidth()\"></th>\n                  }\n                }\n              </tr>\n            }\n          }\n        </tfoot>\n      </table>\n    </div>\n  }\n</div>\n\n<!-- Pagination -->\n@if (zConfig().pagination?.enabled !== false) {\n  <div class=\"mt-4 flex items-center justify-between gap-4\">\n    <div class=\"truncate text-sm text-gray-500\">\n      {{ 'i18n_z_ui_table_total_rows' | translate: { total: (paginationTotal() | zFormatNum) } }}\n    </div>\n    <z-pagination\n      [zTotal]=\"paginationTotal()\"\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 || isLoading() || isProcessing()\"\n      (zOnPageChange)=\"onPageChange($event)\" />\n  </div>\n}\n\n<!-- Floating Bulk Action Bar -->\n<ng-template #bulkBarTemplate>\n  @if (bulkBarConfig(); as config) {\n    <div class=\"z-bulk-action-bar-inner\" [class.z-leaving]=\"bulkBarClosing()\">\n      <div class=\"z-bulk-action-bar-count\">\n        {{ bulkBarContext()?.selectedRowIds?.length ?? 0 | zFormatNum }}\n        {{ config.selectedLabel ?? ('i18n_z_ui_table_selected' | translate) }}\n      </div>\n\n      <div class=\"z-bulk-action-bar-divider\"></div>\n\n      <div class=\"z-bulk-action-bar-actions\">\n        <div class=\"z-bulk-action-bar-buttons\">\n          @for (item of bulkBarItems(); track item.action.key) {\n            <button\n              type=\"button\"\n              z-button\n              zSize=\"sm\"\n              [zType]=\"item.buttonType\"\n              [zDisabled]=\"item.disabled\"\n              class=\"z-bulk-action-bar-button\"\n              [disabled]=\"item.disabled\"\n              (click)=\"onBulkActionClick(item.action)\">\n              @if (item.action.icon) {\n                <z-icon [zType]=\"item.action.icon\" [zSize]=\"item.action.iconSize ?? '14'\" />\n              }\n              @if (item.action.label) {\n                <span>{{ item.action.label | translate }}</span>\n              }\n            </button>\n          }\n        </div>\n\n        <z-dropdown-menu class=\"z-bulk-action-bar-menu\" [zItems]=\"bulkBarDropdownItems()\" zPosition=\"top-right\">\n          <button\n            type=\"button\"\n            z-button\n            zType=\"outline\"\n            zSize=\"sm\"\n            zTypeIcon=\"lucideEllipsis\"\n            class=\"z-bulk-action-bar-menu-trigger\"\n            [attr.aria-label]=\"'i18n_z_ui_table_bulk_actions' | translate\"></button>\n        </z-dropdown-menu>\n      </div>\n    </div>\n  }\n</ng-template>\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  zBodyClass=\"mx-0! px-0!\"\n  [zShadow]=\"true\"\n  [zOkText]=\"null\"\n  [zCancelText]=\"'i18n_z_ui_drawer_close' | translate\">\n  <div class=\"z-table-settings-drawer\">\n    <!-- Display Settings -->\n    <div class=\"mx-4 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          [zChecked]=\"showHorizontalBorder()\"\n          [zText]=\"'i18n_z_ui_table_horizontal_border' | translate\"\n          (zChange)=\"showHorizontalBorder.set(!showHorizontalBorder())\" />\n        <z-checkbox\n          [zChecked]=\"showVerticalBorder()\"\n          [zText]=\"'i18n_z_ui_table_vertical_border' | translate\"\n          (zChange)=\"showVerticalBorder.set(!showVerticalBorder())\" />\n        <z-checkbox\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    <div class=\"mx-4 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        [cdkDropListAutoScrollDisabled]=\"true\"\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' && columnId !== 'rowDrag') {\n            @let column = table.getColumn(columnId);\n            @let isPinned = column?.getIsPinned();\n            @let isVisible = pendingVisibleColumns().includes(columnId);\n            @let isVisibilityDisabled = pendingColumnVisibilityDisabledMap()[columnId];\n            @let isGroupedColumn = groupingColumnMap()[columnId];\n            @let columnEnablePinningConfig = columnId | zTableColumnConfig: zConfig().columns : 'enablePinning';\n            @let canPin =\n              (columnEnablePinningConfig ?? zConfig().enableColumnPinning ?? true) && column?.getCanPin() !== false;\n            @if (!isPinned) {\n              <div\n                cdkDrag\n                [cdkDragDisabled]=\"isGroupedColumn\"\n                [cdkDragData]=\"columnId\"\n                cdkDragLockAxis=\"y\"\n                cdkDragPreviewContainer=\"global\"\n                cdkDragPreviewClass=\"z-drag-preview\"\n                class=\"z-drag-item border-border bg-card hover:border-primary flex cursor-default items-center gap-2 rounded-sm border px-2 py-1.5 text-sm\"\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\"\n                  [class.cursor-pointer]=\"!isGroupedColumn\"\n                  [class.cursor-default]=\"isGroupedColumn\"\n                  [class.opacity-40]=\"isGroupedColumn\" />\n\n                <!-- Visibility Checkbox -->\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isVisible\"\n                  [disabled]=\"isVisibilityDisabled\"\n                  (change)=\"onToggleColumnVisibility(columnId)\"\n                  (mousedown)=\"$event.stopPropagation()\"\n                  class=\"border-input h-4 w-4 shrink-0 cursor-default rounded-sm disabled:opacity-50\" />\n\n                <!-- Column Name -->\n                <span class=\"flex min-w-0 flex-1 flex-col\">\n                  <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                    {{ columnId | zTableColumnHeader: zConfig().columns | translate }}\n                  </span>\n                  @let parents = columnId | zTableColumnParents: zConfig().columns;\n                  @if (parents) {\n                    <span class=\"text-muted-foreground truncate text-[0.625rem]\">({{ parents | translate }})</span>\n                  }\n                </span>\n\n                <!-- Pin Buttons -->\n                @if (canPin) {\n                  <div class=\"flex shrink-0 items-center gap-0.5\" (mousedown)=\"$event.stopPropagation()\">\n                    <button\n                      type=\"button\"\n                      [disabled]=\"!isVisible || isGroupedColumn || !pinAvailabilityMap()[columnId]?.left\"\n                      (click)=\"onToggleColumnPin(columnId, 'left')\"\n                      class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded-sm 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 || isGroupedColumn || !pinAvailabilityMap()[columnId]?.right\"\n                      (click)=\"onToggleColumnPin(columnId, 'right')\"\n                      class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded-sm 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 ?? true) {\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 = pendingVisibleColumns().includes(columnId);\n                @let isVisibilityDisabled = pendingColumnVisibilityDisabledMap()[columnId];\n                @let isGroupedColumn = groupingColumnMap()[columnId];\n                <div\n                  class=\"border-border bg-muted/30 flex items-center gap-2 rounded-sm border px-2 py-1.5 text-sm\"\n                  [class.opacity-60]=\"!isVisible\">\n                  <!-- Pin Icon -->\n                  <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"text-primary shrink-0\" />\n\n                  <!-- Visibility Checkbox -->\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isVisible\"\n                    [disabled]=\"isVisibilityDisabled\"\n                    (change)=\"onToggleColumnVisibility(columnId)\"\n                    class=\"border-input h-4 w-4 shrink-0 cursor-default rounded-sm disabled:opacity-50\" />\n\n                  <!-- Column Name -->\n                  <span class=\"flex min-w-0 flex-1 flex-col\">\n                    <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                      {{ columnId | zTableColumnHeader: zConfig().columns | translate }}\n                    </span>\n                    @let pinnedParents = columnId | zTableColumnParents: zConfig().columns;\n                    @if (pinnedParents) {\n                      <span class=\"text-muted-foreground truncate text-[0.625rem]\">\n                        ({{ pinnedParents | translate }})\n                      </span>\n                    }\n                  </span>\n\n                  <!-- Position Badge -->\n                  <span\n                    class=\"bg-primary/10 text-primary shrink-0 rounded-sm px-1.5 py-0.5 text-[0.625rem] font-medium\">\n                    {{\n                      isPinned === 'start'\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                    [disabled]=\"isGroupedColumn\"\n                    (click)=\"onToggleColumnPin(columnId, isPinned === 'start' ? 'left' : 'right')\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground cursor-pointer rounded-sm p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                    title=\"Unpin\">\n                    <z-icon zType=\"lucideX\" zSize=\"12\" />\n                  </button>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      }\n    </div>\n  </div>\n</z-drawer>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;contain:inline-size;width:100%;max-width:100%;min-width:0;height:100%;overflow-x:visible;--scrollbar-track-thickness: 7px;--scrollbar-track-color: transparent;--scrollbar-thumb-shape: 3px;--z-shadow-left-right: -1.875rem;--z-shadow-left-width: 1.875rem;--z-shadow-left-opacity: 0;--z-shadow-right-left: -1.875rem;--z-shadow-right-width: 1.875rem;--z-shadow-right-opacity: 0;--z-sticky-left-border-color: transparent;--z-sticky-right-border-color: var(--border);--z-cell-selection-background: color-mix(in srgb, var(--primary) 12%, transparent);--z-cell-selection-background-opaque: color-mix(in srgb, var(--primary) 12%, var(--card))}.z-table-container{display:flex;flex-direction:column;position:relative;box-sizing:border-box;contain:inline-size;width:100%;max-width:100%;min-width:0;height:100%;overflow:hidden;border-radius:var(--radius-sm);border:thin solid var(--border);background-color:var(--card)}.z-table-container:focus{outline:none}.z-table-container.z-table-borderless{border:none;border-radius:0;box-shadow:none!important;background-color:transparent}.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}.z-table-container.z-hide-pinned-top-border tbody tr.z-pinned-top.z-shadow-bottom>td{border-bottom-color:var(--border)!important}.z-table-container.z-hide-pinned-bottom-border tbody.z-has-bottom-pinned td.z-at-bottom{border-bottom-color:transparent}table{width:fit-content;min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:.875rem}.z-table-container.z-column-resizing table,.z-table-toolbar{min-width:0}.z-table-toolbar .z-settings-btn{transition:all .15s ease}.z-table-toolbar .z-settings-btn:hover{border-color:var(--muted-foreground)}.z-table-filter-header{min-width:0}.z-table-filter-header button{flex:none}.z-table-filter-header-overflow-chip{animation:z-table-filter-chip-enter .16s ease}@media(prefers-reduced-motion:reduce){.z-table-filter-header-overflow-chip{animation:none}}@keyframes z-table-filter-chip-enter{0%{opacity:0;transform:translate(-.25rem)}to{opacity:1;transform:translate(0)}}::ng-deep .z-bulk-action-bar-overlay{position:fixed!important;top:auto;left:50%;bottom:0;transform:translate(-50%);max-width:calc(100vw - 2rem);margin-bottom:1rem;transform-origin:center bottom}.z-bulk-action-bar-inner{border:thin solid color-mix(in srgb,var(--border) 88%,transparent);border-radius:var(--radius-md);background:color-mix(in srgb,var(--card) 96%,var(--background));color:var(--foreground);box-shadow:0 1rem 2.5rem color-mix(in srgb,var(--foreground) 20%,transparent),0 .25rem .75rem color-mix(in srgb,var(--foreground) 12%,transparent),0 0 0 1px color-mix(in srgb,var(--background) 65%,transparent) inset;display:flex;align-items:center;gap:.5rem;width:max-content;min-height:2.25rem;max-width:calc(100vw - 2rem);padding:.5rem;overflow:hidden;transform-origin:center bottom;animation:z-bulk-action-bar-enter .18s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}.z-bulk-action-bar-inner.z-leaving{pointer-events:none;animation:z-bulk-action-bar-exit .14s ease-in forwards}.z-bulk-action-bar-count{flex:none;padding:0 .25rem;white-space:nowrap;font-size:.8125rem;font-weight:500;color:var(--foreground)}.z-bulk-action-bar-divider{width:1px;height:1.5rem;flex:none;background:color-mix(in srgb,var(--border) 88%,transparent)}.z-bulk-action-bar-actions,.z-bulk-action-bar-buttons{display:flex;align-items:center;gap:.5rem;min-width:0}.z-bulk-action-bar-button{flex:none}.z-bulk-action-bar-menu{display:none;flex:none}@media(max-width:48rem){.z-bulk-action-bar-inner{width:calc(100vw - 2rem);gap:.375rem}.z-bulk-action-bar-count{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}.z-bulk-action-bar-buttons{display:none}.z-bulk-action-bar-menu{display:block}}@keyframes z-bulk-action-bar-enter{0%{opacity:0;transform:translateY(.875rem)}to{opacity:1;transform:translateY(0)}}@keyframes z-bulk-action-bar-exit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(.875rem)}}@media(prefers-reduced-motion:reduce){.z-bulk-action-bar-inner{animation:none}}:host ::ng-deep .z-table-cell-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;min-width:0;-webkit-user-select:text;user-select:text}:host ::ng-deep .z-table-cell-text>*,:host ::ng-deep .z-table-cell-text *{display:inline-block;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}:host ::ng-deep .z-table-cell-content-trigger{display:inline-block;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.z-template-content{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.z-template-content>*{min-width:0;max-width:100%}.z-template-content>[class*=flex]{min-width:0;max-width:100%}.z-template-content>[class*=flex]>*{min-width:0;flex-shrink:1}.z-template-content>[class*=grid]{min-width:0;max-width:100%}.z-thead-wrapper{flex-shrink:0;background:var(--muted);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;position:relative;z-index:4}.z-thead-wrapper::-webkit-scrollbar{display:none}.z-thead-wrapper th{height:auto;padding:.5rem;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;width:100%;max-width:100%;min-width:0;min-height:6.25rem;display:flex;flex-direction:column;overflow:hidden}.z-tbody-scrollbar{flex:1;width:100%;max-width:100%;min-width:0;height:100%}.z-empty-state,.z-loading-state{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:6.25rem;height:100%;color:var(--muted-foreground);font-size:.875rem;animation:z-fade-in .2s ease-out}.z-tbody-scrollbar,.z-tbody-scrollbar table{animation:z-fade-in .2s ease-out}@keyframes z-fade-in{0%{opacity:0;transform:translateY(.25rem)}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:.5rem 12px;height:var(--z-row-height, 2.375rem);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-color:transparent}.z-tbody-wrapper tbody.z-has-bottom-pinned td.z-at-bottom{border-bottom-color:var(--border)}.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:.75rem}.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:.5rem 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;box-sizing:border-box;width:100%}.z-virtual-row,.z-virtual-flow{position:absolute;top:0;left:0;width:100%}.z-virtual-row-flow{position:relative}.z-virtual-row-fixed{overflow:hidden}.z-virtual-row-group-header{z-index:2}.z-virtual-row-sticky-group{position:sticky}.z-virtual-row-sticky-group-shadow{box-shadow:0 1px 3px #00000014}.z-virtual-row-sticky-group-shadow:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d}tr.z-group-row-sticky{position:sticky;z-index:2}tr.z-group-row-sticky>td{background:var(--card)}tr.z-group-row-sticky-shadow{box-shadow:0 1px 3px #00000014}tr.z-group-row-sticky-shadow:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d}tr.z-child-row td:first-child{border-left:.125rem solid var(--primary)!important;padding-left:.75rem!important}tbody tr.z-context-menu-active,tbody tr.z-context-menu-active td{background-color:var(--muted)!important}tbody tr.z-selected,tbody tr.z-selected td{background-color:color-mix(in srgb,var(--primary) 15%,var(--background))!important}tbody tr.z-selected:hover,tbody tr.z-selected:hover td{background-color:color-mix(in srgb,var(--primary) 20%,var(--background))!important}tbody tr.z-indeterminate-selected,tbody tr.z-indeterminate-selected td{background-color:color-mix(in srgb,var(--primary) 10%,var(--background))!important}tbody tr.z-indeterminate-selected:hover,tbody tr.z-indeterminate-selected:hover td{background-color:color-mix(in srgb,var(--primary) 15%,var(--background))!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{background-color:var(--muted)!important}tbody tr.z-pinned-bottom-last>td{border-bottom-color:transparent!important}tbody tr.z-pinned-bottom-first>td{border-top:thin solid var(--border)}:host .z-tbody-wrapper tbody tr:not(.z-pinned-top):not(.z-pinned-bottom):has(+tr.z-pinned-bottom)>td{border-bottom-color:transparent}tr.z-expanded-row>td{border-left:.125rem solid var(--primary);background-color:var(--background)!important}.z-expanded-row-content{transform-origin:top center}@keyframes z-expanded-row-reveal{0%{clip-path:inset(0 0 100% 0);translate:0 -.375rem;opacity:0}to{clip-path:inset(0 0 0 0);translate:none;opacity:1}}@keyframes z-expanded-row-fade-in{0%{opacity:0}to{opacity:1}}tr.z-expanded-row-enter{animation:z-expanded-row-fade-in .18s ease-out}tr.z-expanded-row-enter .z-expanded-row-content{animation:z-expanded-row-reveal .18s ease-out}@keyframes z-child-row-slide-in{0%{translate:0 -.375rem;opacity:0}to{translate:none;opacity:1}}tr.z-child-row.z-row-enter,tr.z-group-child-row.z-row-enter{animation:z-child-row-slide-in .18s ease-out}@media(prefers-reduced-motion:reduce){tr.z-expanded-row-enter,tr.z-child-row.z-row-enter,tr.z-group-child-row.z-row-enter,tr.z-expanded-row-enter .z-expanded-row-content,tr.z-child-row.z-row-enter .z-expanded-row-content,tr.z-group-child-row.z-row-enter .z-expanded-row-content{animation-duration:1ms}}.z-sub-table-container{padding:.75rem 1rem .75rem 3rem;background-color:var(--background)}.z-table-content-trigger{display:block;width:100%;min-width:0;min-height:1.5rem;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;line-height:1.5rem;text-align:inherit;outline:0;cursor:text}.z-table-content-trigger:hover{color:var(--primary)}.z-content-edit-active{position:relative;z-index:2}td:has(>.z-table-content-trigger:focus-visible){position:relative;z-index:2}td:has(>.z-table-content-trigger:focus-visible):after{position:absolute;z-index:3;inset:0;border:1px solid var(--primary);content:\"\";pointer-events:none}td.z-cell-selectable{-webkit-user-select:none;user-select:none}td.z-cell-range-selected{position:relative;isolation:isolate}td.z-cell-range-selected:before{position:absolute;z-index:0;box-sizing:border-box;top:var(--z-cell-range-top, 0);right:var(--z-cell-range-right, 0);bottom:var(--z-cell-range-bottom, 0);left:var(--z-cell-range-left, 0);background-color:var(--z-cell-selection-background);content:\"\";pointer-events:none}td.z-cell-range-selected>*{position:relative;z-index:1}td.z-cell-range-top:before{border-top:1px solid var(--primary)}td.z-cell-range-right:before{border-right:1px solid var(--primary)}td.z-cell-range-bottom:before{border-bottom:1px solid var(--primary)}td.z-cell-range-left:before{border-left:1px solid var(--primary)}td.z-cell-active{position:relative;z-index:3;background-color:var(--z-cell-selection-background)!important}td.z-cell-active:after{position:absolute;z-index:4;inset:0;border:1px solid var(--primary);content:\"\";pointer-events:none}td.z-content-edit-active{-webkit-user-select:text;user-select:text}td.z-cell-active.z-row-hover,td.z-content-edit-active.z-row-hover{background-color:var(--card)!important}thead th{position:relative}thead th .z-resizer{position:absolute;right:0;top:0;height:100%;width:.5rem;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:.1875rem;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:.1875rem}thead th .z-resizer.z-is-resizing:after{opacity:1;background:var(--primary);width:.1875rem}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;border-right:thin solid var(--z-sticky-left-border-color)}.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:var(--z-shadow-left-right);width:var(--z-shadow-left-width);pointer-events:none;box-shadow:inset 10px 0 8px -8px #0000001a;z-index:10;opacity:var(--z-shadow-left-opacity)}:host-context(.dark) .z-thead-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-thead-wrapper td.z-sticky-left-last:after,:host-context(.dark) .z-tbody-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-tbody-wrapper td.z-sticky-left-last:after,:host-context(.dark) .z-tfoot-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-tfoot-wrapper td.z-sticky-left-last:after{box-shadow:inset 10px 0 10px -8px #0000004d}.z-thead-wrapper.z-scroll-left,.z-tbody-wrapper.z-scroll-left,.z-tfoot-wrapper.z-scroll-left{--z-shadow-left-opacity: 1}.z-thead-wrapper.z-scroll-left:where(.dark,.dark *),.z-tbody-wrapper.z-scroll-left:where(.dark,.dark *),.z-tfoot-wrapper.z-scroll-left:where(.dark,.dark *){--z-sticky-left-border-color: var(--border)}.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;border-left:thin solid var(--z-sticky-right-border-color)}.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:var(--z-shadow-right-left);width:var(--z-shadow-right-width);pointer-events:none;box-shadow:inset -10px 0 8px -8px #0000001a;z-index:10;opacity:var(--z-shadow-right-opacity)}:host-context(.dark) .z-thead-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-thead-wrapper td.z-sticky-right-first:before,:host-context(.dark) .z-tbody-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-tbody-wrapper td.z-sticky-right-first:before,:host-context(.dark) .z-tfoot-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-tfoot-wrapper td.z-sticky-right-first:before{box-shadow:inset -10px 0 10px -8px #0000004d}.z-thead-wrapper.z-scroll-right,.z-tbody-wrapper.z-scroll-right,.z-tfoot-wrapper.z-scroll-right{--z-shadow-right-opacity: 1}.z-thead-wrapper.z-scroll-right:not(:where(.dark,.dark *)),.z-tbody-wrapper.z-scroll-right:not(:where(.dark,.dark *)),.z-tfoot-wrapper.z-scroll-right:not(:where(.dark,.dark *)){--z-sticky-right-border-color: transparent}.z-pinning-overflow{--z-shadow-left-opacity: 0 !important;--z-shadow-right-opacity: 0 !important;--z-sticky-left-border-color: transparent !important;--z-sticky-right-border-color: transparent !important}.z-pinning-overflow .z-sticky-left,.z-pinning-overflow .z-sticky-right{position:relative!important;right:auto!important;left:auto!important}.z-pinning-overflow .z-sticky-left-last:after,.z-pinning-overflow .z-sticky-right-first:before,.z-pinning-overflow .z-sticky-right-last:after{display:none!important}.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:-1.875rem;width:1.875rem;background:var(--muted);pointer-events:none}.z-tfoot-wrapper{flex-shrink:0;width:100%;max-width:100%;min-width:0;background:var(--muted);overflow-x:hidden;overflow-y:hidden;touch-action:pan-y pinch-zoom}.z-tfoot-wrapper th{height:auto;padding:.5rem 12px;text-align:left;vertical-align:middle;font-weight:500;font-size:.75rem;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:.125rem 4px;border-radius:var(--radius-xs);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:focus-visible,.z-row-pin-trigger.z-popover-open{background-color:color-mix(in srgb,var(--foreground) 8%,transparent);color:var(--foreground)}.z-row-pin-trigger:active{background-color:color-mix(in srgb,var(--foreground) 12%,transparent)}.z-row-pin-trigger.text-primary{color:var(--primary)}.z-row-pin-unpin-trigger{color:var(--muted-foreground);outline:none}.z-row-pin-unpin-trigger:hover{color:var(--destructive);background-color:color-mix(in srgb,var(--destructive) 10%,transparent)}.z-row-pin-unpin-trigger:focus,.z-row-pin-unpin-trigger:focus-visible{color:var(--muted-foreground);background-color:transparent;outline:none;box-shadow:none}.z-row-pin-unpin-trigger:active{color:var(--destructive);background-color:color-mix(in srgb,var(--destructive) 14%,transparent)}.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:var(--radius-sm);min-width:0;overflow:hidden;flex-shrink:1}th .z-header-text-wrapper.z-has-options:hover,th .z-header-text-wrapper.z-has-options:focus-visible,th .z-header-text-wrapper.z-has-options.z-popover-open{background-color:color-mix(in srgb,var(--foreground) 8%,transparent);outline:none}th .z-header-text-wrapper.z-has-options:active{background-color:color-mix(in srgb,var(--foreground) 12%,transparent)}.z-column-menu-item{position:relative;z-index:1;line-height:1.25rem;transition:background-color .15s ease,color .15s ease}.z-column-menu-item:focus-visible,.z-column-menu-item.z-popover-open{background-color:var(--muted);outline:none}.z-table-drag-preview{box-sizing:border-box;border-radius:var(--radius-md);background-color:var(--card);border:1px solid var(--primary);box-shadow:0 10px 24px #00000029;overflow:hidden;z-index:10000!important;pointer-events:none}.z-table-drag-preview:where(.dark,.dark *){box-shadow:0 5px 20px #00000080}.z-table-drag-preview-row{border:0;border-radius:var(--radius-xs);background-color:var(--background);box-shadow:0 8px 20px #0000001f,inset 0 0 0 1px color-mix(in srgb,var(--primary) 45%,var(--border))}.z-table-drag-preview-row table,.z-table-drag-preview-row tbody,.z-table-drag-preview-row tr{height:100%}.z-table-drag-preview-row td{vertical-align:middle!important;background-color:var(--background)}.z-table-drag-preview-virtual{border:0;border-radius:0;box-shadow:0 8px 20px #0000001f,inset 0 0 0 1px color-mix(in srgb,var(--primary) 45%,var(--border))}.z-table-drag-source{display:none!important}.z-virtual-row.z-table-drag-source{display:block!important;pointer-events:none;outline:1px solid var(--border);outline-offset:-1px}.z-virtual-row.z-table-drag-source td{color:color-mix(in srgb,var(--foreground) 45%,transparent);border-color:var(--border)!important;background-color:var(--card)!important}.z-virtual-row.z-table-drag-source td>*{opacity:.45}[data-z-table-drag-handle]{touch-action:none;-webkit-user-select:none;user-select:none}.z-column-drop-list{min-height:3.125rem;overscroll-behavior:contain}.cdk-drag-preview.z-drag-preview,.cdk-drag-placeholder.z-drag-item{border-radius:var(--radius-sm)}.z-table-drag-placeholder{width:100%;min-height:2.625rem;box-sizing:border-box;border:2px dashed var(--primary);border-radius:0;background-color:color-mix(in srgb,var(--primary) 10%,var(--background));pointer-events:none}.z-table-drag-placeholder-row>td{padding:0!important;border:0!important;background:transparent!important}.z-table-drag-placeholder-row .z-table-drag-placeholder{border-radius:0;background-color:color-mix(in srgb,var(--primary) 10%,transparent)}.z-table-drag-placeholder-virtual{position:absolute;top:0;left:0;z-index:20;border-radius:0}.z-tbody-wrapper tr.z-group-row td{background:var(--card);border-top:none;border-bottom:1px solid var(--border)}.z-virtual-row:not(.z-virtual-row-flow) tr.z-group-row td{background:var(--card);border-top:none;border-bottom:none}.z-group-row-sticky-wrapper{display:inline-flex;align-items:center;translate:var(--z-scroll-x, 0px) 0}.z-table-container:not(.z-hide-horizontal-border) .z-virtual-row:not(.z-virtual-row-flow):after,.z-table-container:not(.z-hide-horizontal-border) .z-virtual-row-flow.z-virtual-row-group-header:after{content:\"\";position:absolute;right:0;bottom:0;left:0;z-index:3;height:1px;background:var(--border);pointer-events:none}.z-tbody-wrapper tr.z-group-child-row td.z-at-left-edge,.z-virtual-row tr.z-group-child-row td.z-at-left-edge{border-left:2px solid var(--primary)!important;padding-left:var(--z-group-content-indent, .75rem)}.z-group-row-trigger{display:inline-flex;min-height:2rem;max-width:100%;align-items:center;gap:.5rem;padding:.25rem .5rem .25rem .75rem;color:var(--primary);font-size:.8125rem;font-weight:600;vertical-align:middle;cursor:pointer}.z-group-row-remove{margin-left:.125rem;color:var(--muted-foreground);vertical-align:middle}.z-group-row-remove:hover,.z-group-row-remove:focus-visible{color:var(--destructive);background:color-mix(in srgb,var(--destructive) 10%,transparent);outline:none}.z-group-row-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.z-group-row-column-label{color:color-mix(in srgb,var(--primary) 65%,var(--foreground));font-weight:500;margin-right:.25rem}.z-group-row-count{display:inline-flex;min-width:1.25rem;height:1.25rem;align-items:center;justify-content:center;padding:0 .375rem;border-radius:var(--radius-pill);background:var(--primary);color:var(--primary-foreground);font-size:.6875rem;font-weight:600}.z-group-row-loading{display:inline-flex;align-items:center;margin-left:.25rem}.z-group-row-has-totals td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.z-group-row-has-totals .z-group-row-label-cell{position:sticky;left:0;z-index:2;background:var(--card)}.z-group-row-has-totals .z-group-row-label-cell .z-group-row-sticky-wrapper{max-width:100%;translate:none}.z-group-row-total{display:inline-block;max-width:100%;color:var(--foreground);font-size:.8125rem;font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.z-group-row-total-cell{text-align:right}:host .z-tbody-wrapper td.z-sticky-right-first.z-cell-range-selected:before,:host .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-selected:before{position:absolute!important;z-index:0!important;box-sizing:border-box!important;top:var(--z-cell-range-top, 0)!important;right:var(--z-cell-range-right, 0)!important;bottom:var(--z-cell-range-bottom, 0)!important;left:var(--z-cell-range-left, 0)!important;width:auto!important;background-color:var(--z-cell-selection-background-opaque)!important;box-shadow:none!important;content:\"\"!important;pointer-events:none!important;opacity:1!important}:host .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-selected:after{display:none!important}:host .z-tbody-wrapper td.z-sticky-right-first.z-cell-range-top:before,:host .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-top:before{border-top:1px solid var(--primary)}:host .z-tbody-wrapper td.z-sticky-right-first.z-cell-range-right:before,:host .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-right:before{border-right:1px solid var(--primary)}:host .z-tbody-wrapper td.z-sticky-right-first.z-cell-range-bottom:before,:host .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-bottom:before{border-bottom:1px solid var(--primary)}:host .z-tbody-wrapper td.z-sticky-right-first.z-cell-range-left:before,:host .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-left:before{border-left:1px solid var(--primary)}:host-context(.z-table-pointer-dragging) .z-tbody-wrapper td.z-sticky-right-first.z-cell-range-selected:before,:host-context(.z-table-pointer-dragging) .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-selected:before{background-color:transparent!important}:host td.z-cell-range-selected:before{position:absolute;z-index:0;box-sizing:border-box;top:var(--z-cell-range-top, 0);right:var(--z-cell-range-right, 0);bottom:var(--z-cell-range-bottom, 0);left:var(--z-cell-range-left, 0);background-color:var(--z-cell-selection-background);box-shadow:none;content:\"\";pointer-events:none;opacity:1}:host td.z-cell-range-top:before{border-top:1px solid var(--primary)}:host td.z-cell-range-right:before{border-right:1px solid var(--primary)}:host td.z-cell-range-bottom:before{border-bottom:1px solid var(--primary)}:host td.z-cell-range-left:before{border-left:1px solid var(--primary)}:host-context(.z-table-pointer-dragging) .z-tbody-wrapper td{pointer-events:none}:host-context(.z-table-pointer-dragging) td.z-row-hover{background-color:var(--background)!important}:host td.z-cell-active,:host td.z-cell-active.z-row-hover{background-color:var(--z-cell-selection-background)!important}:host td.z-content-edit-active.z-row-hover{background-color:var(--card)!important}:host tr.z-pinned-top td.z-cell-active,:host tr.z-pinned-top td.z-cell-active.z-row-hover,:host tr.z-pinned-bottom td.z-cell-active,:host tr.z-pinned-bottom td.z-cell-active.z-row-hover,:host td.z-cell-active.z-sticky-left,:host td.z-cell-active.z-sticky-left.z-row-hover,:host td.z-cell-active.z-sticky-right,:host td.z-cell-active.z-sticky-right.z-row-hover{background-color:var(--z-cell-selection-background-opaque)!important}:host tr.z-pinned-top td.z-cell-range-selected,:host tr.z-pinned-bottom td.z-cell-range-selected,:host td.z-cell-range-selected.z-sticky-left,:host td.z-cell-range-selected.z-sticky-right{background-color:var(--card)}:host tr.z-pinned-top td.z-cell-range-selected:before,:host tr.z-pinned-bottom td.z-cell-range-selected:before,:host td.z-cell-range-selected.z-sticky-left:before,:host td.z-cell-range-selected.z-sticky-right:before{background-color:var(--z-cell-selection-background-opaque)}:host-context(.z-table-pointer-dragging) td.z-cell-range-selected,:host-context(.z-table-pointer-dragging) td.z-cell-range-selected.z-row-hover,:host-context(.z-table-pointer-dragging) td.z-cell-active,:host-context(.z-table-pointer-dragging) td.z-cell-active.z-row-hover{background-color:var(--card)!important}:host-context(.z-table-pointer-dragging) td.z-cell-range-selected:before{background-color:transparent}:host .z-tbody-wrapper tbody tr.z-group-child-row:has(+tr.z-group-row)>td.z-at-bottom{border-bottom-color:var(--border)}:host .z-virtual-row:has(tr.z-group-child-row):has(+.z-virtual-row tr.z-group-row) tr.z-group-child-row>td.z-at-bottom{border-bottom-color:var(--border)}.z-thead-wrapper th.z-virtual-column-spacer,.z-tfoot-wrapper th.z-virtual-column-spacer{box-sizing:border-box;padding:0!important;background:var(--muted);border-left:thin solid var(--border)}.z-thead-wrapper th.z-virtual-header-spacer{border-bottom:thin solid var(--border)}.z-tfoot-wrapper th.z-virtual-footer-spacer{border-top:thin solid var(--border)}.z-tbody-wrapper td.z-virtual-column-spacer{box-sizing:border-box;height:auto;padding:0!important;background:var(--card);border-left:thin solid var(--border);border-bottom:thin solid var(--border)}.z-tbody-wrapper tr:hover td.z-virtual-column-spacer{background-color:var(--muted)}.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:var(--radius-sm);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 .125rem .125rem 0;transform:translate(-50%,-60%) rotate(45deg)}.z-table-settings-drawer input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}.z-virtual-pinned-top{position:sticky;top:0;left:0;z-index:3;width:100%}.z-virtual-pinned-bottom{position:sticky;bottom:0;left:0;z-index:3;width:100%}\n"], dependencies: [{ kind: "component", type: ZTableComponent, selector: "z-table", inputs: ["zClass", "zConfig", "zLoading", "zKey", "zVariant"], outputs: ["zChange", "zControl"], exportAs: ["zTable"] }, { 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: "ng-template[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: "directive", type: ZTableDraggableDirective, selector: "[z-table-draggable]", inputs: ["z-table-draggable", "z-table-drag-table-id", "z-table-drag-item-id", "z-table-drag-disabled", "z-table-drag-handle"] }, { kind: "directive", type: ZTableDropTargetDirective, selector: "[z-table-drop-target]", inputs: ["z-table-drop-target", "z-table-drop-table-id", "z-table-drop-item-id", "z-table-drop-disabled"], outputs: ["zTableDropped"] }, { kind: "component", type: ZCheckboxComponent, selector: "z-checkbox", inputs: ["class", "zType", "zSize", "zLabel", "zText", "zDisabled", "zIndeterminate", "zValue", "zOptions", "zOrientation", "zCheckAll", "zCheckAllText", "zChecked", "zGroupValue"], outputs: ["zChange", "zGroupChange", "zOnBlur", "zOnFocus", "zControl", "zEvent", "zCheckedChange", "zGroupValueChange"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zLoadingOutline", "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", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "component", type: ZLoadingComponent, selector: "z-loading", inputs: ["class", "zSpinner", "zSize", "zColor", "zText", "zOverlay", "zOverlayType", "zFullscreen", "zLoading"] }, { kind: "directive", type: ZHoverGlideDirective, selector: "[zHoverGlide]", inputs: ["zHoverGlideSelector", "zHoverGlideClass", "zHoverGlideDisabled"] }, { 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", "zBodyClass", "zVisible", "zTitle", "zDescription", "zWidth", "zHeight", "zPlacement", "zClosable", "zMaskClosable", "zDisableShadow", "zHeaderBorder", "zFooterBorder", "zHideFooter", "zHideHeader", "zOkText", "zCancelText", "zOkDestructive", "zOkDisabled", "zLoading", "zOverlay", "zShadow", "zShape", "zContentLoading", "zSkeletonRows", "zExpand", "zScrollMode"], outputs: ["zOnOk", "zOnCancel", "zAfterClose", "zScrollbar", "zVisibleChange"], exportAs: ["zDrawer"] }, { kind: "component", type: ZDropdownMenuComponent, selector: "z-dropdown-menu", inputs: ["zItems", "zLabel", "zIcon", "zButtonType", "zPosition", "zButtonSize", "zOffset", "zMinWidth", "zMaxWidth", "zDisabled", "zWave"], outputs: ["zOnItemClick"] }, { kind: "component", type: ZPaginationComponent, selector: "z-pagination", inputs: ["zPageIndex", "zPageSize", "zTotal", "zPageSizeOptions", "zShowSizeChanger", "zShowQuickJumper", "zShowTotal", "zSimple", "zSize", "zDisabled", "zTotalLabel", "zPerPageLabel", "zGoToLabel"], outputs: ["zOnPageChange", "zPageIndexChange", "zPageSizeChange"] }, { kind: "component", type: ZTableFilterComponent, selector: "z-table-filter", inputs: ["zColumn", "zTable", "zResetVersion", "zSortingState", "zEnableMultiSort"] }, { kind: "component", type: ZTableEditCellComponent, selector: "z-table-edit-cell", inputs: ["zRow", "zRowId", "zRowIndex", "zColumnId", "zValue", "zEditConfig", "zRowUpdate"], outputs: ["zChange"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zContext", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "directive", type: ZTableResizeDirective, selector: "[z-table-resize],[zTableResize]", inputs: ["zTableResize"] }, { kind: "directive", type: ZTableRowHoverDirective, selector: "[z-table-row-hover], [zTableRowHover]", inputs: ["zTableRowHover"] }, { kind: "component", type: ZTableIconTextComponent, selector: "z-table-icon-text", inputs: ["zText", "zTooltip", "zTriggerElement"] }, { kind: "component", type: ZTableActionsComponent, selector: "z-table-actions", inputs: ["zConfig", "zRow", "zRowId", "zDropdownButtonSize"], outputs: ["zActionClick"] }, { kind: "component", type: ZTableContentEditorComponent, selector: "z-table-content-editor", inputs: ["zValue", "zConfig"], outputs: ["zCommit", "zCancel"] }, { kind: "pipe", type: ZTableIsTemplateRefPipe, name: "zTableIsTemplateRef" }, { kind: "pipe", type: ZTableHasIconPipe, name: "zTableHasIcon" }, { kind: "pipe", type: ZTableCellBottomPipe, name: "zTableCellBottom" }, { kind: "pipe", type: ZTableCellClickablePipe, name: "zTableCellClickable" }, { kind: "pipe", type: ZTableCellConfigPipe, name: "zTableCellConfig" }, { kind: "pipe", type: ZTableCellEditPipe, name: "zTableCellEdit" }, { kind: "pipe", type: ZTableCellOffsetPipe, name: "zTableCellOffset" }, { kind: "pipe", type: ZTableCellPinPipe, name: "zTableCellPin" }, { kind: "pipe", type: ZTableCellVisiblePipe, name: "zTableCellVisible" }, { 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: ZTableFooterRenderPipe, name: "zTableFooterRender" }, { kind: "pipe", type: ZTablePinningStylesPipe, name: "zTablePinningStyles" }, { kind: "pipe", type: ZTablePopoverConfigPipe, name: "zTablePopoverConfig" }, { kind: "pipe", type: ZTableRowPipe, name: "zTableRow" }, { kind: "pipe", type: ZTableRowConfigPipe, name: "zTableRowConfig" }, { kind: "pipe", type: ZTableSpanPipe, name: "zTableSpan" }, { kind: "pipe", type: ZTableSubTableConfigPipe, name: "zTableSubTableConfig" }, { kind: "pipe", type: ZTableTooltipConfigPipe, name: "zTableTooltipConfig" }, { kind: "pipe", type: ZTableCellRenderPipe, name: "zTableCellRender" }, { kind: "pipe", type: ZFormatNumPipe, name: "zFormatNum" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZTableComponent, decorators: [{
             type: Component,
@@ -11479,7 +11413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         TranslatePipe,
                     ], standalone: true, providers: [TranslatePipe, ZTableDragService], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'z-table block relative py-1',
-                    }, exportAs: 'zTable', template: "<!-- Toolbar: Search & Settings -->\n@if (isSearchEnabled() || zConfig().enableSettings) {\n  <div class=\"z-table-toolbar mb-2 flex items-center justify-between gap-4\">\n    <!-- Search -->\n    @if (isSearchEnabled()) {\n      @let config = searchConfig();\n      <z-input\n        [class]=\"config?.width ?? 'w-64'\"\n        [zSize]=\"config?.size ?? 'sm'\"\n        [zPlaceholder]=\"config?.placeholder ?? 'i18n_z_ui_table_search' | translate\"\n        [zSearch]=\"true\"\n        [zDebounce]=\"config?.debounceTime ?? 300\"\n        (zOnSearch)=\"onSearchChange($event)\" />\n    } @else {\n      <div></div>\n    }\n\n    <!-- Settings Button -->\n    @if (zConfig().enableSettings) {\n      <z-button zType=\"outline\" zSize=\"sm\" zTypeIcon=\"lucideSettings\" (click)=\"openSettingsDrawer()\">\n        {{ 'i18n_z_ui_table_settings' | translate }}\n      </z-button>\n    }\n  </div>\n}\n\n@if (zConfig().enableFilterHeader && appliedFilterChips().length > 0) {\n  <div class=\"z-table-filter-header mb-2 flex min-w-0 items-center gap-2\">\n    <div class=\"flex min-w-0 flex-1 flex-wrap items-center gap-1.5\">\n      @for (chip of visibleAppliedFilterChips(); track chip.id) {\n        <span\n          class=\"border-border bg-muted/60 text-foreground inline-flex max-w-80 min-w-0 shrink-0 items-center gap-1 rounded-sm border px-2 py-1 text-[0.8125rem] shadow-xs\">\n          <span class=\"font-medium whitespace-nowrap\">{{ chip.label }}</span>\n          <span class=\"text-muted-foreground\">:</span>\n          <span class=\"truncate\" z-tooltip [zContent]=\"chip.value\" zTooltipTrigger=\"hover\" zTooltipPosition=\"top\">\n            {{ chip.value }}\n          </span>\n          <button\n            type=\"button\"\n            class=\"hover:bg-destructive/10 hover:text-destructive focus-visible:ring-ring -mr-1 inline-flex size-5 cursor-pointer items-center justify-center rounded-sm outline-none focus-visible:ring-2\"\n            [attr.aria-label]=\"'i18n_z_ui_table_filter_remove' | translate\"\n            (click)=\"clearAppliedFilterChip(chip)\">\n            <z-icon zType=\"lucideX\" zSize=\"12\" />\n          </button>\n        </span>\n      }\n      @if (hiddenAppliedFilterChipCount() > 0 && isFilterHeaderExpanded()) {\n        @for (chip of overflowAppliedFilterChips(); track chip.id) {\n          <span\n            class=\"z-table-filter-header-overflow-chip border-border bg-muted/60 text-foreground inline-flex max-w-80 min-w-0 shrink-0 items-center gap-1 rounded-sm border px-2 py-1 text-[0.8125rem] shadow-xs\"\n            [attr.aria-hidden]=\"!isFilterHeaderExpanded()\">\n            <span class=\"font-medium whitespace-nowrap\">{{ chip.label }}</span>\n            <span class=\"text-muted-foreground\">:</span>\n            <span class=\"truncate\" z-tooltip [zContent]=\"chip.value\" zTooltipTrigger=\"hover\" zTooltipPosition=\"top\">\n              {{ chip.value }}\n            </span>\n            <button\n              type=\"button\"\n              class=\"hover:bg-destructive/10 hover:text-destructive focus-visible:ring-ring -mr-1 inline-flex size-5 cursor-pointer items-center justify-center rounded-sm outline-none focus-visible:ring-2\"\n              [attr.aria-label]=\"'i18n_z_ui_table_filter_remove' | translate\"\n              (click)=\"clearAppliedFilterChip(chip)\">\n              <z-icon zType=\"lucideX\" zSize=\"12\" />\n            </button>\n          </span>\n        }\n      }\n      @if (hiddenAppliedFilterChipCount() > 0) {\n        <button\n          type=\"button\"\n          class=\"text-primary hover:bg-primary/10 focus-visible:ring-ring inline-flex h-7 cursor-pointer items-center rounded-sm px-2 text-xs font-medium outline-none focus-visible:ring-2\"\n          (click)=\"toggleFilterHeaderExpanded()\">\n          {{\n            isFilterHeaderExpanded()\n              ? ('i18n_z_ui_table_show_less' | translate)\n              : ('i18n_z_ui_table_show_more' | translate: { count: hiddenAppliedFilterChipCount() })\n          }}\n        </button>\n      }\n      <button\n        type=\"button\"\n        class=\"bg-destructive/10 text-destructive hover:bg-destructive/20 dark:bg-destructive/15 dark:text-destructive-foreground dark:hover:bg-destructive/25 focus-visible:ring-destructive inline-flex h-7 cursor-pointer items-center gap-1 rounded-sm px-2 text-xs font-medium shadow-xs outline-none focus-visible:ring-2\"\n        (click)=\"clearAppliedFilters()\">\n        <z-icon zType=\"lucideX\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_clear_filter' | translate }}</span>\n      </button>\n    </div>\n  </div>\n}\n\n<div\n  #tableContainer\n  [class]=\"classTable()\"\n  [ngStyle]=\"columnSizeVars()\"\n  [class.z-pinning-overflow]=\"!isPinnedLayoutWithinContainer()\"\n  [class.z-hide-horizontal-border]=\"!showHorizontalBorder()\"\n  [class.z-hide-vertical-border]=\"!showVerticalBorder()\"\n  [class.z-hide-pinned-top-border]=\"hasScrollTop()\"\n  [class.z-hide-pinned-bottom-border]=\"hasScrollBottom()\"\n  [style.width]=\"zConfig().width\"\n  [style.height]=\"zConfig().height\"\n  [style.max-height]=\"zConfig().maxHeight\"\n  [style.min-height]=\"zConfig().minHeight\"\n  [attr.tabindex]=\"canUseContentRowInsert() || canUseCellSelection() ? 0 : null\"\n  (keydown)=\"onContentTableKeydown($event)\">\n  @let isColumnPinningActive = isPinnedLayoutWithinContainer();\n  <ng-template #contentRowMenuContent>\n    <div class=\"flex min-w-36 flex-col gap-0.5 p-1\">\n      @if (contentRowMenu()?.columnId) {\n        <button\n          type=\"button\"\n          class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"copyContentCell()\">\n          <z-icon zType=\"lucideCopy\" zSize=\"12\" />\n          <span>{{ 'i18n_z_ui_table_copy_cell' | translate }}</span>\n        </button>\n        <div class=\"border-border my-0 border-t\"></div>\n      }\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none\"\n        (click)=\"copyContentRows()\">\n        <z-icon zType=\"lucideCopy\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_copy_row' | translate }}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none disabled:pointer-events-none disabled:opacity-40\"\n        [disabled]=\"contentRowClipboard().length === 0\"\n        (click)=\"pasteContentRows('below')\">\n        <z-icon zType=\"lucideClipboardPaste\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_paste_row_below' | translate }}</span>\n      </button>\n      <div class=\"border-border my-0 border-t\"></div>\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none disabled:pointer-events-none disabled:opacity-40\"\n        [disabled]=\"!canMoveContentRowUp()\"\n        (click)=\"moveContentRow('up')\">\n        <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_move_row_up' | translate }}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none disabled:pointer-events-none disabled:opacity-40\"\n        [disabled]=\"!canMoveContentRowDown()\"\n        (click)=\"moveContentRow('down')\">\n        <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_move_row_down' | translate }}</span>\n      </button>\n      <div class=\"border-border my-0 border-t\"></div>\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none\"\n        (click)=\"insertContentRow('above')\">\n        <z-icon zType=\"lucideArrowUpToLine\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_insert_row_above' | translate }}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none\"\n        (click)=\"insertContentRow('below')\">\n        <z-icon zType=\"lucideArrowDownToLine\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_insert_row_below' | translate }}</span>\n      </button>\n      <div class=\"border-border my-0 border-t\"></div>\n      <button\n        type=\"button\"\n        class=\"text-destructive hover:bg-destructive/10 focus:bg-destructive/10 flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none\"\n        (click)=\"deleteContentRows()\">\n        <z-icon zType=\"lucideTrash2\" zSize=\"12\" />\n        <span>\n          {{\n            contentRowDeleteCount() > 1\n              ? ('i18n_z_ui_table_delete_selected_rows' | translate)\n              : ('i18n_z_ui_table_delete_row' | translate)\n          }}\n        </span>\n      </button>\n    </div>\n  </ng-template>\n\n  <ng-template #cellMenuContent>\n    <div class=\"flex min-w-36 flex-col gap-0.5 p-1\">\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none disabled:pointer-events-none disabled:opacity-40\"\n        [disabled]=\"!canCopyCellMenuSelection()\"\n        (click)=\"copySelectedCells(false)\">\n        <z-icon zType=\"lucideCopy\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_copy_cell' | translate }}</span>\n      </button>\n      @if (cellSelectionOptions().copyWithHeaders) {\n        <button\n          type=\"button\"\n          class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none disabled:pointer-events-none disabled:opacity-40\"\n          [disabled]=\"!canCopyCellMenuSelection()\"\n          (click)=\"copySelectedCells(true)\">\n          <z-icon zType=\"lucideCopy\" zSize=\"12\" />\n          <span>{{ 'i18n_z_ui_table_copy_cell_with_headers' | translate }}</span>\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <div\n    class=\"pointer-events-none fixed size-px opacity-0\"\n    z-popover\n    [zPopoverContent]=\"contentRowMenuContent\"\n    zTrigger=\"manual\"\n    zPosition=\"bottom-left\"\n    zClass=\"z-table-content-row-menu\"\n    [zOffset]=\"0\"\n    [zManualClose]=\"true\"\n    [zScrollClose]=\"true\"\n    [style.left.px]=\"contentRowMenu()?.left ?? -9999\"\n    [style.top.px]=\"contentRowMenu()?.top ?? -9999\"\n    (zControl)=\"setContentRowMenuControl($event)\"\n    (zHide)=\"clearContentRowMenu()\"></div>\n\n  <div\n    class=\"pointer-events-none fixed size-px opacity-0\"\n    z-popover\n    [zPopoverContent]=\"cellMenuContent\"\n    zTrigger=\"manual\"\n    zPosition=\"bottom-left\"\n    zClass=\"z-table-cell-menu\"\n    [zOffset]=\"0\"\n    [zManualClose]=\"true\"\n    [zScrollClose]=\"true\"\n    [style.left.px]=\"cellMenu()?.left ?? -9999\"\n    [style.top.px]=\"cellMenu()?.top ?? -9999\"\n    (zControl)=\"setCellMenuControl($event)\"\n    (zHide)=\"clearCellMenu()\"></div>\n\n  <!-- Shared colgroup template -->\n  <ng-template #colGroupTpl>\n    <colgroup>\n      @if (canUseVirtualColumns()) {\n        @for (column of leftLeafColumns(); track column.id) {\n          @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n          <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n        @if (virtualLeftSpacerWidth() > 0) {\n          <col [style.width.px]=\"virtualRenderedLeftSpacerWidth()\" />\n        }\n        @for (column of virtualCenterColumns(); track column.id) {\n          @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n          <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n        @if (virtualRightSpacerWidth() > 0) {\n          <col [style.width.px]=\"virtualRenderedRightSpacerWidth()\" />\n        }\n        @for (column of rightLeafColumns(); track column.id) {\n          @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n          <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n      } @else {\n        @for (column of orderedLeafColumns(); track column.id) {\n          @if (column.getIsVisible()) {\n            @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n            <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n          }\n        }\n      }\n    </colgroup>\n  </ng-template>\n\n  <!-- Header table -->\n  <div\n    class=\"z-thead-wrapper\"\n    [class.z-shadow-header]=\"shouldHeaderShowShadow()\"\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\"\n    (wheel)=\"onTheadWheel($event)\"\n    #theadWrapper>\n    <table [style.width.px]=\"renderedTableWidth()\">\n      <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n      <thead>\n        @if (canUseVirtualColumns()) {\n          <tr>\n            @for (header of leftHeaderRow(); track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: leftHeaderRow() : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [ngStyle]=\"\n                    header.column\n                      | zTablePinningStyles\n                        : header\n                        : 'header'\n                        : table\n                        : zConfig().columns\n                        : columnResizing()\n                        : colDomWidthMap()\n                        : isColumnPinningActive\n                  \"\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]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isLeftPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-right]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isRightPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-left-last]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-right-first]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-right-last]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isLastRightPinned' : zConfig().columns)\n                  \"\n                  [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                  [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\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 === 'rowDrag') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                    </div>\n                  } @else if (header.column.id === 'select') {\n                    <div\n                      class=\"flex items-center\"\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                      <z-checkbox\n                        [zChecked]=\"canUseRowSelection() && table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"\n                          canUseRowSelection() && table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\n                        \"\n                        [zDisabled]=\"!canUseRowSelection()\"\n                        (zChange)=\"canUseRowSelection() && table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <div\n                      class=\"flex items-center\"\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                      <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-sm\">\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                    <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                      @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 ?? true;\n                      <ng-template #colOptionsPopoverContent>\n                        <div zHoverGlide zHoverGlideSelector=\".z-column-menu-item\" class=\"flex flex-col gap-1 py-1\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"14\" />\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                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"14\" />\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() !== 'start') {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"!pinAvailabilityMap()[header.column.id]?.left\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'end') {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"!pinAvailabilityMap()[header.column.id]?.right\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (\n                              header.column.getIsPinned() &&\n                              header.column.id !== 'expand' &&\n                              header.column.id !== actionColumnInfo()?.columnId\n                            ) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          @if (groupingHeaderMenuMap()[header.id]) {\n                            @let isActiveGroupingColumn = groupingColumnMap()[header.column.id];\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                            @if (!isActiveGroupingColumn) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"groupByColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideRows3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                                <span>{{ 'i18n_z_ui_table_group_by_column' | translate }}</span>\n                              </button>\n                            }\n                            @let groupMenuStateBoundary = isActiveGroupingColumn;\n                            @if (groupMenuStateBoundary) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"removeGroupingColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideUngroup\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_clear_grouping' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          <div class=\"border-border my-0.5 border-t\"></div>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"autosizeColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideChevronsLeftRight\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_autosize_column' | translate }}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"autosizeAllColumns(); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_autosize_all_columns' | translate }}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"resetColumns(); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideRotateCcw\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_reset_columns' | translate }}</span>\n                          </button>\n                          @if (hideableColumns().length > 0) {\n                            <button\n                              type=\"button\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"openSettingsDrawerFromColumnMenu(colOptionsPopover)\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                              <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span class=\"truncate\">\n                                {{ 'i18n_z_ui_table_choose_columns' | translate }}\n                              </span>\n                            </button>\n                          }\n                        </div>\n                      </ng-template>\n\n                      @let columnEnableHeaderMenu =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableHeaderMenu';\n                      @let hasColumnOptions =\n                        header.column.id !== 'actionRowPin' &&\n                        columnEnableHeaderMenu !== false &&\n                        (groupingHeaderMenuMap()[header.id] ||\n                          (header.column.getCanPin() && effectiveEnablePinning) ||\n                          effectiveEnableOrdering ||\n                          hideableColumns().length > 0);\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded-sm 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                        zClass=\"rounded-(--radius-sm) overflow-hidden\"\n                        [zOffset]=\"5\"\n                        (zOutsideClick)=\"hideColumnPopoversOnOutsideClick(colOptionsPopover)\"\n                        (mousedown)=\"$event.preventDefault()\"\n                        [attr.tabindex]=\"hasColumnOptions ? 0 : null\"\n                        [attr.role]=\"hasColumnOptions ? 'button' : null\"\n                        [attr.aria-haspopup]=\"hasColumnOptions ? 'menu' : null\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              class=\"z-template-content\"\n                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\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                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\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                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        @if (hasColumnOptions) {\n                          <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                        }\n                      </div>\n                      @if ((header.column.getCanSort() && !hasBodyRowSpan()) || header.column.getCanFilter()) {\n                        <z-table-filter\n                          [zColumn]=\"$any(header.column)\"\n                          [zTable]=\"$any(table)\"\n                          [zResetVersion]=\"filterResetVersion()\"\n                          [zSortingState]=\"sorting()\"\n                          [zEnableMultiSort]=\"zConfig().enableMultiSort ?? true\" />\n                      }\n                    </div>\n                  }\n                  @if (header.column.getCanResize() && zConfig().enableColumnResizing !== false) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"header.column.getIsPinned() === 'end' || header.column.getIsLastColumn()\"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n            @if (virtualLeftSpacerWidth() > 0) {\n              <th\n                class=\"z-virtual-column-spacer z-virtual-header-spacer z-virtual-left-spacer pointer-events-none p-0\"\n                [style.width.px]=\"virtualRenderedLeftSpacerWidth()\"></th>\n            }\n            @for (header of virtualCenterHeaderRow(); track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: virtualCenterHeaderRow() : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\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-col-drag]=\"header.column.id === 'rowDrag'\"\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 === 'rowDrag') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                    </div>\n                  } @else if (header.column.id === 'select') {\n                    <div\n                      class=\"flex items-center\"\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                      <z-checkbox\n                        [zChecked]=\"canUseRowSelection() && table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"\n                          canUseRowSelection() && table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\n                        \"\n                        [zDisabled]=\"!canUseRowSelection()\"\n                        (zChange)=\"canUseRowSelection() && table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <div\n                      class=\"flex items-center\"\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                      <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-sm\">\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                    <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                      @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 ?? true;\n                      <ng-template #colOptionsPopoverContent>\n                        <div zHoverGlide zHoverGlideSelector=\".z-column-menu-item\" class=\"flex flex-col gap-1 py-1\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"14\" />\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                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"14\" />\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() !== 'start') {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"!pinAvailabilityMap()[header.column.id]?.left\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'end') {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"!pinAvailabilityMap()[header.column.id]?.right\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (\n                              header.column.getIsPinned() &&\n                              header.column.id !== 'expand' &&\n                              header.column.id !== actionColumnInfo()?.columnId\n                            ) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          @if (groupingHeaderMenuMap()[header.id]) {\n                            @let isActiveGroupingColumn = groupingColumnMap()[header.column.id];\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                            @if (!isActiveGroupingColumn) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"groupByColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideRows3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                                <span>{{ 'i18n_z_ui_table_group_by_column' | translate }}</span>\n                              </button>\n                            }\n                            @let groupMenuStateBoundary = isActiveGroupingColumn;\n                            @if (groupMenuStateBoundary) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"removeGroupingColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideUngroup\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_clear_grouping' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          <div class=\"border-border my-0.5 border-t\"></div>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"autosizeColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideChevronsLeftRight\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_autosize_column' | translate }}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"autosizeAllColumns(); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_autosize_all_columns' | translate }}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"resetColumns(); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideRotateCcw\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_reset_columns' | translate }}</span>\n                          </button>\n                          @if (hideableColumns().length > 0) {\n                            <button\n                              type=\"button\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"openSettingsDrawerFromColumnMenu(colOptionsPopover)\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                              <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span class=\"truncate\">\n                                {{ 'i18n_z_ui_table_choose_columns' | translate }}\n                              </span>\n                            </button>\n                          }\n                        </div>\n                      </ng-template>\n\n                      @let columnEnableHeaderMenu =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableHeaderMenu';\n                      @let hasColumnOptions =\n                        header.column.id !== 'actionRowPin' &&\n                        columnEnableHeaderMenu !== false &&\n                        (groupingHeaderMenuMap()[header.id] ||\n                          (header.column.getCanPin() && effectiveEnablePinning) ||\n                          effectiveEnableOrdering ||\n                          hideableColumns().length > 0);\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded-sm 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                        zClass=\"rounded-(--radius-sm) overflow-hidden\"\n                        [zOffset]=\"5\"\n                        (zOutsideClick)=\"hideColumnPopoversOnOutsideClick(colOptionsPopover)\"\n                        (mousedown)=\"$event.preventDefault()\"\n                        [attr.tabindex]=\"hasColumnOptions ? 0 : null\"\n                        [attr.role]=\"hasColumnOptions ? 'button' : null\"\n                        [attr.aria-haspopup]=\"hasColumnOptions ? 'menu' : null\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              class=\"z-template-content\"\n                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\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                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\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                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        @if (hasColumnOptions) {\n                          <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                        }\n                      </div>\n                      @if ((header.column.getCanSort() && !hasBodyRowSpan()) || header.column.getCanFilter()) {\n                        <z-table-filter\n                          [zColumn]=\"$any(header.column)\"\n                          [zTable]=\"$any(table)\"\n                          [zResetVersion]=\"filterResetVersion()\"\n                          [zSortingState]=\"sorting()\"\n                          [zEnableMultiSort]=\"zConfig().enableMultiSort ?? true\" />\n                      }\n                    </div>\n                  }\n                  @if (header.column.getCanResize() && zConfig().enableColumnResizing !== false) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"header.column.getIsPinned() === 'end' || header.column.getIsLastColumn()\"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n            @if (virtualRightSpacerWidth() > 0) {\n              <th\n                class=\"z-virtual-column-spacer z-virtual-header-spacer z-virtual-right-spacer pointer-events-none p-0\"\n                [style.width.px]=\"virtualRenderedRightSpacerWidth()\"></th>\n            }\n            @for (header of rightHeaderRow(); track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: rightHeaderRow() : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [ngStyle]=\"\n                    header.column\n                      | zTablePinningStyles\n                        : header\n                        : 'header'\n                        : table\n                        : zConfig().columns\n                        : columnResizing()\n                        : colDomWidthMap()\n                        : isColumnPinningActive\n                  \"\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]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isLeftPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-right]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isRightPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-left-last]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-right-first]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-right-last]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isLastRightPinned' : zConfig().columns)\n                  \"\n                  [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                  [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\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 === 'rowDrag') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                    </div>\n                  } @else if (header.column.id === 'select') {\n                    <!-- Header Checkbox -->\n                    <div\n                      class=\"flex items-center\"\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                      <z-checkbox\n                        [zChecked]=\"canUseRowSelection() && table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"\n                          canUseRowSelection() && table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\n                        \"\n                        [zDisabled]=\"!canUseRowSelection()\"\n                        (zChange)=\"canUseRowSelection() && table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <!-- Expand All Button -->\n                    <div\n                      class=\"flex items-center\"\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                      <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-sm\">\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 ?? true;\n                      <ng-template #colOptionsPopoverContent>\n                        <div zHoverGlide zHoverGlideSelector=\".z-column-menu-item\" class=\"flex flex-col gap-1 py-1\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"14\" />\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                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"14\" />\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() !== 'start') {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"!pinAvailabilityMap()[header.column.id]?.left\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'end') {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"!pinAvailabilityMap()[header.column.id]?.right\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (\n                              header.column.getIsPinned() &&\n                              header.column.id !== 'expand' &&\n                              header.column.id !== actionColumnInfo()?.columnId\n                            ) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          @if (groupingHeaderMenuMap()[header.id]) {\n                            @let isActiveGroupingColumn = groupingColumnMap()[header.column.id];\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                            @if (!isActiveGroupingColumn) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"groupByColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideRows3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                                <span>{{ 'i18n_z_ui_table_group_by_column' | translate }}</span>\n                              </button>\n                            }\n                            @let groupMenuStateBoundary = isActiveGroupingColumn;\n                            @if (groupMenuStateBoundary) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"removeGroupingColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideUngroup\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_clear_grouping' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          <div class=\"border-border my-0.5 border-t\"></div>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"autosizeColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideChevronsLeftRight\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_autosize_column' | translate }}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"autosizeAllColumns(); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_autosize_all_columns' | translate }}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"resetColumns(); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideRotateCcw\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_reset_columns' | translate }}</span>\n                          </button>\n                          @if (hideableColumns().length > 0) {\n                            <button\n                              type=\"button\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"openSettingsDrawerFromColumnMenu(colOptionsPopover)\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                              <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span class=\"truncate\">\n                                {{ 'i18n_z_ui_table_choose_columns' | translate }}\n                              </span>\n                            </button>\n                          }\n                        </div>\n                      </ng-template>\n\n                      @let columnEnableHeaderMenu =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableHeaderMenu';\n                      @let hasColumnOptions =\n                        header.column.id !== 'actionRowPin' &&\n                        columnEnableHeaderMenu !== false &&\n                        (groupingHeaderMenuMap()[header.id] ||\n                          (header.column.getCanPin() && effectiveEnablePinning) ||\n                          effectiveEnableOrdering ||\n                          hideableColumns().length > 0);\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded-sm 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                        zClass=\"rounded-(--radius-sm) overflow-hidden\"\n                        [zOffset]=\"5\"\n                        (zOutsideClick)=\"hideColumnPopoversOnOutsideClick(colOptionsPopover)\"\n                        (mousedown)=\"$event.preventDefault()\"\n                        [attr.tabindex]=\"hasColumnOptions ? 0 : null\"\n                        [attr.role]=\"hasColumnOptions ? 'button' : null\"\n                        [attr.aria-haspopup]=\"hasColumnOptions ? 'menu' : null\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              class=\"z-template-content\"\n                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\n                              [ngStyle]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\">\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                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\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                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\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 zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                        }\n                      </div>\n                      <!-- Sort Icon (outside wrapper, no hover background) -->\n                      @if ((header.column.getCanSort() && !hasBodyRowSpan()) || header.column.getCanFilter()) {\n                        <z-table-filter\n                          [zColumn]=\"$any(header.column)\"\n                          [zTable]=\"$any(table)\"\n                          [zResetVersion]=\"filterResetVersion()\"\n                          [zSortingState]=\"sorting()\"\n                          [zEnableMultiSort]=\"zConfig().enableMultiSort ?? true\" />\n                      }\n                    </div>\n                  }\n                  <!-- Column Resizer -->\n                  @if (header.column.getCanResize() && zConfig().enableColumnResizing !== false) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"header.column.getIsPinned() === 'end' || header.column.getIsLastColumn()\"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n          </tr>\n        } @else {\n          @for (headerGroup of orderedHeaderGroups(); track headerGroup.id) {\n            <tr>\n              @for (header of headerGroup.headers; track header.id) {\n                @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n                @let shouldRender = header | zTableCellRender: headerGroup.headers : zConfig().columns : 'header';\n                @if (rowSpan && shouldRender) {\n                  <th\n                    [attr.id]=\"header.column.id\"\n                    [ngStyle]=\"\n                      header.column\n                        | zTablePinningStyles\n                          : header\n                          : 'header'\n                          : table\n                          : zConfig().columns\n                          : columnResizing()\n                          : colDomWidthMap()\n                          : isColumnPinningActive\n                    \"\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]=\"\n                      isColumnPinningActive && (header | zTableCellPin: 'isLeftPinned' : zConfig().columns)\n                    \"\n                    [class.z-sticky-right]=\"\n                      isColumnPinningActive && (header | zTableCellPin: 'isRightPinned' : zConfig().columns)\n                    \"\n                    [class.z-sticky-left-last]=\"\n                      isColumnPinningActive && (header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns)\n                    \"\n                    [class.z-sticky-right-first]=\"\n                      isColumnPinningActive && (header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns)\n                    \"\n                    [class.z-sticky-right-last]=\"\n                      isColumnPinningActive && (header | zTableCellPin: 'isLastRightPinned' : zConfig().columns)\n                    \"\n                    [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                    [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\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]=\"\n                      header | zTableSpan: zConfig().columns : 'headerColSpan' : undefined : headerGroup.headers\n                    \">\n                    @if (header.column.id === 'rowDrag') {\n                      <div class=\"flex items-center justify-center\">\n                        <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                      </div>\n                    } @else if (header.column.id === 'select') {\n                      <div\n                        class=\"flex items-center\"\n                        [class.justify-center]=\"\n                          (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                          'text-center'\n                        \"\n                        [class.justify-end]=\"\n                          (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                          'text-right'\n                        \">\n                        <z-checkbox\n                          [zChecked]=\"canUseRowSelection() && table.getIsAllRowsSelected()\"\n                          [zIndeterminate]=\"\n                            canUseRowSelection() && table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\n                          \"\n                          [zDisabled]=\"!canUseRowSelection()\"\n                          (zChange)=\"canUseRowSelection() && table.toggleAllRowsSelected()\" />\n                      </div>\n                    } @else if (header.column.id === 'expand') {\n                      <div\n                        class=\"flex items-center\"\n                        [class.justify-center]=\"\n                          (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                          'text-center'\n                        \"\n                        [class.justify-end]=\"\n                          (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                          'text-right'\n                        \">\n                        <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-sm\">\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                      <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') ===\n                          'text-right'\n                        \">\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 ?? true;\n                        <ng-template #colOptionsPopoverContent>\n                          <div zHoverGlide zHoverGlideSelector=\".z-column-menu-item\" class=\"flex flex-col gap-1 py-1\">\n                            @if (effectiveEnableOrdering) {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucideArrowLeft\" zSize=\"15\" />\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                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucideArrowRight\" zSize=\"15\" />\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() !== 'start') {\n                                <button\n                                  type=\"button\"\n                                  [disabled]=\"!pinAvailabilityMap()[header.column.id]?.left\"\n                                  (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                  (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                  class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                  <z-icon zType=\"lucidePin\" zSize=\"15\" class=\"rotate-90\" />\n                                  <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                                </button>\n                              }\n                              @if (header.column.getIsPinned() !== 'end') {\n                                <button\n                                  type=\"button\"\n                                  [disabled]=\"!pinAvailabilityMap()[header.column.id]?.right\"\n                                  (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                  (click)=\"\n                                    handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\n                                  \"\n                                  class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                  <z-icon zType=\"lucidePin\" zSize=\"15\" class=\"-rotate-90\" />\n                                  <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                                </button>\n                              }\n                              @if (\n                                header.column.getIsPinned() &&\n                                header.column.id !== 'expand' &&\n                                header.column.id !== actionColumnInfo()?.columnId\n                              ) {\n                                <button\n                                  type=\"button\"\n                                  (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                  (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                  class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                  <z-icon zType=\"lucideX\" zSize=\"15\" />\n                                  <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                </button>\n                              }\n                            }\n                            @if (groupingHeaderMenuMap()[header.id]) {\n                              @let isActiveGroupingColumn = groupingColumnMap()[header.column.id];\n                              <div class=\"border-border my-0.5 border-t\"></div>\n                              @if (!isActiveGroupingColumn) {\n                                <button\n                                  type=\"button\"\n                                  (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                  (click)=\"groupByColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                  class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                  <z-icon zType=\"lucideRows3\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                                  <span>{{ 'i18n_z_ui_table_group_by_column' | translate }}</span>\n                                </button>\n                              }\n                              @let groupMenuStateBoundary = isActiveGroupingColumn;\n                              @if (groupMenuStateBoundary) {\n                                <button\n                                  type=\"button\"\n                                  (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                  (click)=\"removeGroupingColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                  class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                  <z-icon zType=\"lucideUngroup\" zSize=\"15\" />\n                                  <span>{{ 'i18n_z_ui_table_clear_grouping' | translate }}</span>\n                                </button>\n                              }\n                            }\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                            <button\n                              type=\"button\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"autosizeColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                              <z-icon\n                                zType=\"lucideChevronsLeftRight\"\n                                zSize=\"14\"\n                                class=\"text-muted-foreground shrink-0\" />\n                              <span>{{ 'i18n_z_ui_table_autosize_column' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"autosizeAllColumns(); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                              <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span>{{ 'i18n_z_ui_table_autosize_all_columns' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"resetColumns(); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                              <z-icon zType=\"lucideRotateCcw\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span>{{ 'i18n_z_ui_table_reset_columns' | translate }}</span>\n                            </button>\n                            @if (hideableColumns().length > 0) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"openSettingsDrawerFromColumnMenu(colOptionsPopover)\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                                <span class=\"truncate\">\n                                  {{ 'i18n_z_ui_table_choose_columns' | translate }}\n                                </span>\n                              </button>\n                            }\n                          </div>\n                        </ng-template>\n\n                        @let columnEnableHeaderMenu =\n                          header.column.id | zTableColumnConfig: zConfig().columns : 'enableHeaderMenu';\n                        @let hasColumnOptions =\n                          header.column.id !== 'actionRowPin' &&\n                          columnEnableHeaderMenu !== false &&\n                          (groupingHeaderMenuMap()[header.id] ||\n                            (header.column.getCanPin() && effectiveEnablePinning) ||\n                            effectiveEnableOrdering ||\n                            hideableColumns().length > 0);\n                        <div\n                          class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded-sm 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                          zClass=\"rounded-(--radius-sm) overflow-hidden\"\n                          [zOffset]=\"5\"\n                          (zOutsideClick)=\"hideColumnPopoversOnOutsideClick(colOptionsPopover)\"\n                          (mousedown)=\"$event.preventDefault()\"\n                          [attr.tabindex]=\"hasColumnOptions ? 0 : null\"\n                          [attr.role]=\"hasColumnOptions ? 'button' : null\"\n                          [attr.aria-haspopup]=\"hasColumnOptions ? 'menu' : null\">\n                          <ng-container\n                            *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                            @if (headerContent | zTableIsTemplateRef) {\n                              <div\n                                class=\"z-template-content\"\n                                [class]=\"\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                                [class]=\"\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                                [class]=\"\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                          @if (hasColumnOptions) {\n                            <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                          }\n                        </div>\n                        @if ((header.column.getCanSort() && !hasBodyRowSpan()) || header.column.getCanFilter()) {\n                          <z-table-filter\n                            [zColumn]=\"$any(header.column)\"\n                            [zTable]=\"$any(table)\"\n                            [zResetVersion]=\"filterResetVersion()\"\n                            [zSortingState]=\"sorting()\"\n                            [zEnableMultiSort]=\"zConfig().enableMultiSort ?? true\" />\n                        }\n                      </div>\n                    }\n                    @if (header.column.getCanResize() && zConfig().enableColumnResizing !== false) {\n                      <div\n                        class=\"z-resizer\"\n                        [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                        [class.z-resizer-left]=\"\n                          header.column.getIsPinned() === 'end' || header.column.getIsLastColumn()\n                        \"\n                        (dblclick)=\"header.column.resetSize()\"\n                        [zTableResize]=\"header\"></div>\n                    }\n                  </th>\n                }\n              }\n            </tr>\n          }\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 (isLoading() || isProcessing()) {\n      <!-- Loading State -->\n      @if (zConfig().useSkeleton) {\n        <!-- Skeleton Loading -->\n        <div class=\"animate-in fade-in flex h-full flex-col duration-200\">\n          @for (i of skeletonRows(); track $index; let last = $last) {\n            <div\n              class=\"border-border box-border flex flex-1 flex-col items-start justify-center gap-1.5 px-2\"\n              [class.border-b]=\"!last\">\n              <z-skeleton zType=\"bar\" zWidth=\"100%\" zHeight=\"22px\" />\n              <z-skeleton zType=\"bar\" zWidth=\"50%\" zHeight=\"14px\" />\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 (scroll)=\"onTbodyScroll($event)\">\n        @if (isVirtual()) {\n          <!-- Virtual Scroll Mode -->\n\n          <div\n            class=\"z-virtual-scroll-inner\"\n            [style.height.px]=\"virtualizer.getTotalSize()\"\n            [style.min-width.px]=\"table.getTotalSize()\">\n            <!-- Pinned rows v\u00E0 center rows d\u00F9ng chung m\u1ED9t virtual canvas. -->\n            @if (virtualPinnedTopRows().length > 0) {\n              <div class=\"z-virtual-pinned-top\" [style.min-width.px]=\"table.getTotalSize()\">\n                @for (row of virtualPinnedTopRows(); track row.id) {\n                  <ng-container *ngTemplateOutlet=\"virtualPinnedRowTpl; context: { $implicit: row }\" />\n                }\n              </div>\n            }\n\n            @if (usesFlowVirtualRows()) {\n              <div\n                class=\"z-virtual-flow\"\n                [style.transform]=\"'translate3d(0,' + virtualFlowOffset() + 'px,0)'\"\n                [style.min-width.px]=\"table.getTotalSize()\">\n                <ng-container *ngTemplateOutlet=\"virtualRowsTpl\" />\n              </div>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"virtualRowsTpl\" />\n            }\n\n            <ng-template #virtualRowsTpl>\n              @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n                @let groupRows = dynamicGroupRows()[virtualItem.index] || [];\n                @let virtualFlatItem = virtualGroupedFlatItems()[virtualItem.index];\n                @let stickyGroupState = stickyGroupHeaderState();\n                @let stickyGroupTop = stickyGroupState.tops[virtualItem.index];\n                @let isStickyGroupHeader = stickyGroupTop !== undefined;\n                <div\n                  #virtualRow\n                  class=\"z-virtual-row\"\n                  [class.z-virtual-row-flow]=\"usesFlowVirtualRows()\"\n                  [class.z-virtual-row-fixed]=\"!effectiveDynamicRowSizing()\"\n                  [class.z-virtual-row-group-header]=\"virtualFlatItem?.type === 'group-header'\"\n                  [class.z-virtual-row-sticky-group]=\"isStickyGroupHeader\"\n                  [class.z-virtual-row-sticky-group-shadow]=\"stickyGroupState.shadowIndex === virtualItem.index\"\n                  [style.top.px]=\"stickyGroupTop\"\n                  z-table-draggable=\"row\"\n                  z-table-drop-target=\"row\"\n                  [z-table-drag-table-id]=\"dragInstanceId\"\n                  [z-table-drop-table-id]=\"dragInstanceId\"\n                  [z-table-drag-item-id]=\"groupRows.length > 0 ? groupRows[0].id : ''\"\n                  [z-table-drop-item-id]=\"groupRows.length > 0 ? groupRows[0].id : ''\"\n                  [z-table-drag-disabled]=\"!isVirtualRowDragEnabled() || groupRows.length !== 1\"\n                  [z-table-drop-disabled]=\"!isVirtualRowDragEnabled() || groupRows.length !== 1\"\n                  (zTableDropped)=\"_handleDragDrop($event)\"\n                  [attr.data-index]=\"virtualItem.index\"\n                  [style.height.px]=\"\n                    effectiveDynamicRowSizing()\n                      ? null\n                      : (dynamicGroupHeights()[virtualItem.index] ?? groupSize() * virtualRowHeight()) + 1\n                  \"\n                  [style.transform]=\"\n                    usesFlowVirtualRows() || isStickyGroupHeader ? null : 'translate3d(0,' + virtualItem.start + 'px,0)'\n                  \">\n                  <table [style.width.px]=\"renderedTableWidth()\">\n                    <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n                    <tbody\n                      [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n                      [class.z-has-bottom-pinned]=\"table.getBottomRows().length > 0\"\n                      [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n                      @let groupHeaderItem = _getVirtualGroupHeader(virtualFlatItem);\n                      @if (groupHeaderItem) {\n                        <tr\n                          class=\"z-group-row\"\n                          [class.z-group-row-has-totals]=\"groupHeaderItem.totals\"\n                          [class.z-group-row-expanded]=\"groupHeaderItem.expanded\"\n                          [attr.data-group-id]=\"groupHeaderItem.id\"\n                          [attr.data-group-depth]=\"groupHeaderItem.depth\">\n                          @if (groupHeaderItem.totals) {\n                            @let totalColumnMap = groupTotalColumnMap();\n                            @for (column of orderedLeafColumns(); track column.id; let isFirstGroupCell = $first) {\n                              <td\n                                [class.z-group-row-label-cell]=\"isFirstGroupCell\"\n                                [class.z-group-row-total-cell]=\"!isFirstGroupCell && totalColumnMap[column.id]\"\n                                [attr.data-column-id]=\"column.id\">\n                                @if (isFirstGroupCell) {\n                                  <div class=\"z-group-row-sticky-wrapper\">\n                                    <button\n                                      type=\"button\"\n                                      class=\"z-group-row-trigger\"\n                                      [style.padding-left.rem]=\"0.75 + groupHeaderItem.depth * 0.75\"\n                                      [attr.aria-expanded]=\"groupHeaderItem.expanded\"\n                                      (click)=\"toggleGroupRow(groupHeaderItem.id)\">\n                                      <z-icon\n                                        zType=\"lucideChevronRight\"\n                                        zSize=\"14\"\n                                        class=\"transition-transform duration-200\"\n                                        [class.rotate-90]=\"groupHeaderItem.expanded\" />\n                                      <span\n                                        class=\"z-group-row-label\"\n                                        z-tooltip\n                                        [zContent]=\"\n                                          (groupHeaderItem.columnLabel ? groupHeaderItem.columnLabel + ': ' : '') +\n                                          groupHeaderItem.label\n                                        \">\n                                        @if (groupHeaderItem.columnLabel) {\n                                          <span class=\"z-group-row-column-label\">\n                                            {{ groupHeaderItem.columnLabel }}:\n                                          </span>\n                                        }\n                                        {{ groupHeaderItem.label }}\n                                      </span>\n                                      @if (groupingConfig().showCount !== false) {\n                                        <span class=\"z-group-row-count\">{{ groupHeaderItem.count }}</span>\n                                      }\n                                      @if (groupHeaderItem.loading) {\n                                        <z-loading class=\"z-group-row-loading\" [zLoading]=\"true\" zSize=\"xs\" />\n                                      }\n                                    </button>\n                                    @if (!isServerGrouping()) {\n                                      <button\n                                        type=\"button\"\n                                        z-button\n                                        zType=\"ghost\"\n                                        zSize=\"sm\"\n                                        zTypeIcon=\"lucideX\"\n                                        [zWave]=\"false\"\n                                        z-tooltip\n                                        zSizeIcon=\"14\"\n                                        [zContent]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                                        [attr.aria-label]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                                        [zAlwaysShow]=\"true\"\n                                        zTooltipPosition=\"top\"\n                                        class=\"z-group-row-remove\"\n                                        (click)=\"removeGroupingColumn(groupHeaderItem.columnId)\"></button>\n                                    }\n                                  </div>\n                                }\n                                @if (!isFirstGroupCell && totalColumnMap[column.id]) {\n                                  @let totalConfig = groupTotalConfigMap()[column.id];\n                                  @let totalTooltip = totalConfig.tooltip;\n                                  @let totalPopover = totalConfig.popover;\n                                  @let totalPopoverContent = totalPopover | zTablePopoverConfig: 'content';\n                                  <ng-template #groupTotalPopoverTpl>\n                                    @if (totalPopoverContent | zTableIsTemplateRef) {\n                                      <ng-container *ngTemplateOutlet=\"$any(totalPopoverContent)\" />\n                                    }\n                                    @if (!(totalPopoverContent | zTableIsTemplateRef)) {\n                                      <div [innerHTML]=\"$any(totalPopoverContent) | zSafeHtml\"></div>\n                                    }\n                                  </ng-template>\n                                  <span\n                                    class=\"z-group-row-total\"\n                                    z-tooltip\n                                    z-popover\n                                    [class]=\"totalConfig.class\"\n                                    [zContent]=\"\n                                      $any(\n                                        (totalTooltip | zTableTooltipConfig: 'content') ||\n                                          groupHeaderItem.totals[column.id]\n                                      )\n                                    \"\n                                    [zTooltipPosition]=\"$any(totalTooltip | zTableTooltipConfig: 'position')\"\n                                    [zTooltipTrigger]=\"$any(totalTooltip | zTableTooltipConfig: 'trigger')\"\n                                    [zTooltipType]=\"$any(totalTooltip | zTableTooltipConfig: 'type')\"\n                                    [zTooltipSize]=\"$any(totalTooltip | zTableTooltipConfig: 'size')\"\n                                    [zTooltipClass]=\"$any(totalTooltip | zTableTooltipConfig: 'class')\"\n                                    [zTooltipShowDelay]=\"$any(totalTooltip | zTableTooltipConfig: 'showDelay')\"\n                                    [zTooltipHideDelay]=\"$any(totalTooltip | zTableTooltipConfig: 'hideDelay')\"\n                                    [zTooltipArrow]=\"$any(totalTooltip | zTableTooltipConfig: 'arrow')\"\n                                    [zTooltipOffset]=\"$any(totalTooltip | zTableTooltipConfig: 'offset')\"\n                                    [zAutoDetect]=\"$any(totalTooltip | zTableTooltipConfig: 'autoDetect')\"\n                                    [zAlwaysShow]=\"$any(totalTooltip | zTableTooltipConfig: 'alwaysShow')\"\n                                    [zMaxWidth]=\"$any(totalTooltip | zTableTooltipConfig: 'maxWidth')\"\n                                    [zPopoverContent]=\"totalPopoverContent ? groupTotalPopoverTpl : null\"\n                                    [zPosition]=\"$any(totalPopover | zTablePopoverConfig: 'position')\"\n                                    [zPopoverTrigger]=\"$any(totalPopover | zTablePopoverConfig: 'trigger')\"\n                                    [zClass]=\"$any(totalPopover | zTablePopoverConfig: 'class')\"\n                                    [zShowDelay]=\"$any(totalPopover | zTablePopoverConfig: 'showDelay')\"\n                                    [zHideDelay]=\"$any(totalPopover | zTablePopoverConfig: 'hideDelay')\"\n                                    [zDisabled]=\"$any(totalPopover | zTablePopoverConfig: 'disabled')\"\n                                    [zOffset]=\"$any(totalPopover | zTablePopoverConfig: 'offset')\"\n                                    [zPopoverWidth]=\"$any(totalPopover | zTablePopoverConfig: 'width')\"\n                                    [zManualClose]=\"$any(totalPopover | zTablePopoverConfig: 'manualClose')\"\n                                    [zOutsideClickClose]=\"$any(totalPopover | zTablePopoverConfig: 'outsideClickClose')\"\n                                    [zScrollClose]=\"$any(totalPopover | zTablePopoverConfig: 'scrollClose')\"\n                                    [zSticky]=\"$any(totalPopover | zTablePopoverConfig: 'sticky')\"\n                                    [zShowArrow]=\"$any(totalPopover | zTablePopoverConfig: 'showArrow')\"\n                                    [zKeyboardSafe]=\"$any(totalPopover | zTablePopoverConfig: 'keyboardSafe')\">\n                                    {{ groupHeaderItem.totals[column.id] }}\n                                  </span>\n                                }\n                              </td>\n                            }\n                          } @else {\n                            <td [attr.colspan]=\"renderedColumnCount()\">\n                              <div class=\"z-group-row-sticky-wrapper\">\n                                <button\n                                  type=\"button\"\n                                  class=\"z-group-row-trigger\"\n                                  [style.padding-left.rem]=\"0.75 + groupHeaderItem.depth * 0.75\"\n                                  [attr.aria-expanded]=\"groupHeaderItem.expanded\"\n                                  (click)=\"toggleGroupRow(groupHeaderItem.id)\">\n                                  <z-icon\n                                    zType=\"lucideChevronRight\"\n                                    zSize=\"14\"\n                                    class=\"transition-transform duration-200\"\n                                    [class.rotate-90]=\"groupHeaderItem.expanded\" />\n                                  <span\n                                    class=\"z-group-row-label\"\n                                    z-tooltip\n                                    [zContent]=\"\n                                      (groupHeaderItem.columnLabel ? groupHeaderItem.columnLabel + ': ' : '') +\n                                      groupHeaderItem.label\n                                    \">\n                                    @if (groupHeaderItem.columnLabel) {\n                                      <span class=\"z-group-row-column-label\">{{ groupHeaderItem.columnLabel }}:</span>\n                                    }\n                                    {{ groupHeaderItem.label }}\n                                  </span>\n                                  @if (groupingConfig().showCount !== false) {\n                                    <span class=\"z-group-row-count\">{{ groupHeaderItem.count }}</span>\n                                  }\n                                  @if (groupHeaderItem.loading) {\n                                    <z-loading class=\"z-group-row-loading\" [zLoading]=\"true\" zSize=\"xs\" />\n                                  }\n                                </button>\n                                @if (!isServerGrouping()) {\n                                  <button\n                                    type=\"button\"\n                                    z-button\n                                    zType=\"ghost\"\n                                    zSize=\"sm\"\n                                    zTypeIcon=\"lucideX\"\n                                    [zWave]=\"false\"\n                                    z-tooltip\n                                    zSizeIcon=\"14\"\n                                    [zContent]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                                    [attr.aria-label]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                                    [zAlwaysShow]=\"true\"\n                                    zTooltipPosition=\"top\"\n                                    class=\"z-group-row-remove\"\n                                    (click)=\"removeGroupingColumn(groupHeaderItem.columnId)\"></button>\n                                }\n                              </div>\n                            </td>\n                          }\n                        </tr>\n                      }\n                      @for (row of groupRows; track row.id) {\n                        @let virtualGroupDepth = _getVirtualGroupDepth(virtualFlatItem);\n                        @let visibleCells = row.getVisibleCells();\n                        @let rowSelected = canUseRowSelection() && row.getIsSelected();\n                        @let rowSomeSelected = canUseRowSelection() && row.getIsSomeSelected();\n                        @let rowPinned = row.getIsPinned();\n                        <tr\n                          z-table-row-hover\n                          [attr.data-row-id]=\"row.id\"\n                          [class]=\"row | zTableRowConfig: zConfig() : 'rowClass'\"\n                          [style]=\"row | zTableRowConfig: zConfig() : 'rowStyle'\"\n                          [style.height.px]=\"effectiveDynamicRowSizing() ? null : virtualRowHeight()\"\n                          [style.min-height.px]=\"effectiveDynamicRowSizing() ? virtualRowHeight() : null\"\n                          [style.--z-row-height]=\"effectiveDynamicRowSizing() ? 'auto' : virtualRowHeight() + 'px'\"\n                          [class.z-child-row]=\"row.depth > 0\"\n                          [class.z-group-child-row]=\"_isVirtualGroupChild(virtualFlatItem)\"\n                          [style.--z-group-content-indent]=\"\n                            virtualGroupDepth > 0 ? 1.75 + (virtualGroupDepth - 1) * 0.75 + 'rem' : null\n                          \"\n                          [class.z-selected]=\"rowSelected\"\n                          [class.z-indeterminate-selected]=\"rowSomeSelected && !rowSelected\"\n                          [class.z-context-menu-active]=\"contentRowMenu()?.row?.id === row.id\"\n                          [class.z-pinned-top]=\"rowPinned === 'top'\"\n                          [class.z-pinned-top-first]=\"rowPinned === 'top' && row.id === firstTopPinnedRowId()\"\n                          [class.z-pinned-bottom]=\"rowPinned === 'bottom'\"\n                          [class.z-pinned-bottom-last]=\"rowPinned === 'bottom' && row.id === lastBottomPinnedRowId()\"\n                          [class.z-pinned-bottom-first]=\"rowPinned === 'bottom' && row.id === firstBottomPinnedRowId()\"\n                          [class.z-shadow-bottom]=\"\n                            showHeaderFooterShadow() &&\n                            hasScrollTop() &&\n                            rowPinned === 'top' &&\n                            row.id === lastTopPinnedRowId() &&\n                            !isStickyGroupHeaderEnabled()\n                          \"\n                          [class.z-shadow-top]=\"\n                            showHeaderFooterShadow() &&\n                            hasScrollBottom() &&\n                            rowPinned === 'bottom' &&\n                            row.id === firstBottomPinnedRowId()\n                          \"\n                          (contextmenu)=\"openContentRowMenu($event, row)\">\n                          @for (cell of visibleCells; track cell.id) {\n                            @let cellPinned = cell.column.getIsPinned();\n                            @if (\n                              canUseVirtualColumns() &&\n                              virtualLeftSpacerWidth() > 0 &&\n                              cell.column.id === firstVirtualCenterColumnId()\n                            ) {\n                              <td\n                                class=\"z-virtual-column-spacer pointer-events-none p-0\"\n                                [style.width.px]=\"virtualRenderedLeftSpacerWidth()\"></td>\n                            }\n                            @let shouldRenderRowSpan =\n                              cell | zTableSpan: zConfig().columns : 'shouldRender' : bodyRowSpanRows();\n                            @let shouldRenderColSpan =\n                              cell | zTableCellRender: visibleCells : zConfig().columns : 'body';\n                            @let isVirtualColumnVisible =\n                              !canUseVirtualColumns() ||\n                              cellPinned !== false ||\n                              virtualCenterColumnVisibilityMap()[cell.column.id];\n                            @if (shouldRenderRowSpan && shouldRenderColSpan && isVirtualColumnVisible) {\n                              @let cellSelectionId = row.id + '::' + cell.column.id;\n                              <td\n                                [attr.data-column-id]=\"cell.column.id\"\n                                [ngStyle]=\"\n                                  cell.column\n                                    | zTablePinningStyles\n                                      : cell\n                                      : 'body'\n                                      : visibleCells\n                                      : zConfig().columns\n                                      : columnResizing()\n                                      : colDomWidthMap()\n                                      : isColumnPinningActive\n                                      : bodyRowSpanRows()\n                                \"\n                                [class]=\"cell | zTableCellConfig: zConfig() : 'cellClass'\"\n                                [class.z-sticky-left]=\"isColumnPinningActive && cellPinned === 'start'\"\n                                [class.z-sticky-right]=\"isColumnPinningActive && cellPinned === 'end'\"\n                                [class.z-sticky-left-last]=\"\n                                  isColumnPinningActive &&\n                                  cellPinned === 'start' &&\n                                  (cell | zTableCellPin: 'isLastLeftPinned' : zConfig().columns : 'body' : visibleCells)\n                                \"\n                                [class.z-sticky-right-first]=\"\n                                  isColumnPinningActive &&\n                                  cellPinned === 'end' &&\n                                  (cell\n                                    | zTableCellPin: 'isFirstRightPinned' : zConfig().columns : 'body' : visibleCells)\n                                \"\n                                [class.z-sticky-right-last]=\"\n                                  isColumnPinningActive &&\n                                  cellPinned === 'end' &&\n                                  (cell\n                                    | zTableCellPin: 'isLastRightPinned' : zConfig().columns : 'body' : visibleCells)\n                                \"\n                                [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                                [class.z-col-drag]=\"cell.column.id === 'rowDrag'\"\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-cell-selectable]=\"canUseCellSelection()\"\n                                [class.z-cell-active]=\"\n                                  !hasMultipleSelectedCells() &&\n                                  activeCell()?.rowId === row.id &&\n                                  activeCell()?.columnId === cell.column.id\n                                \"\n                                [class.z-cell-range-selected]=\"visualSelectedCellIds().has(cellSelectionId)\"\n                                [class.z-cell-range-top]=\"selectedCellEdgeIds().top.has(cellSelectionId)\"\n                                [class.z-cell-range-right]=\"selectedCellEdgeIds().right.has(cellSelectionId)\"\n                                [class.z-cell-range-bottom]=\"selectedCellEdgeIds().bottom.has(cellSelectionId)\"\n                                [class.z-cell-range-left]=\"selectedCellEdgeIds().left.has(cellSelectionId)\"\n                                [class.z-content-edit-active]=\"\n                                  activeContentEditCell()?.rowId === row.id &&\n                                  activeContentEditCell()?.columnId === cell.column.id\n                                \"\n                                [class.z-at-bottom]=\"cell | zTableCellBottom: zConfig().columns : renderedBodyRows()\"\n                                [attr.rowspan]=\"\n                                  cell | zTableSpan: zConfig().columns : 'cellRowSpan' : bodyRowSpanRows()\n                                \"\n                                [attr.colspan]=\"\n                                  cell | zTableSpan: zConfig().columns : 'cellColSpan' : undefined : visibleCells\n                                \"\n                                [style]=\"cell | zTableCellConfig: zConfig() : 'cellStyle'\"\n                                [style.--z-cell-range-top]=\"\n                                  (selectedCellRangeInsets().get(cellSelectionId)?.top ?? 0) + '%'\n                                \"\n                                [style.--z-cell-range-right]=\"\n                                  (selectedCellRangeInsets().get(cellSelectionId)?.right ?? 0) + '%'\n                                \"\n                                [style.--z-cell-range-bottom]=\"\n                                  (selectedCellRangeInsets().get(cellSelectionId)?.bottom ?? 0) + '%'\n                                \"\n                                [style.--z-cell-range-left]=\"\n                                  (selectedCellRangeInsets().get(cellSelectionId)?.left ?? 0) + '%'\n                                \"\n                                (pointerdown)=\"onCellPointerDown($event, row, cell.column.id)\"\n                                (pointerenter)=\"onCellPointerEnter($event, row, cell.column.id)\"\n                                (contextmenu)=\"openCellMenu($event, row, cell.column.id)\">\n                                @if (cell.column.id === 'rowDrag') {\n                                  <div class=\"flex items-center justify-center\">\n                                    <button\n                                      data-z-table-drag-handle\n                                      type=\"button\"\n                                      class=\"text-muted-foreground inline-flex size-7 items-center justify-center rounded-md\"\n                                      [class.cursor-grab]=\"isRowDragEnabled()\"\n                                      [class.opacity-40]=\"!isRowDragEnabled()\">\n                                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" />\n                                    </button>\n                                  </div>\n                                } @else if (cell.column.id === 'select') {\n                                  <!-- Row Checkbox -->\n                                  <div class=\"flex items-center justify-center\">\n                                    <z-checkbox\n                                      [zChecked]=\"canUseRowSelection() && cell.row.getIsSelected()\"\n                                      [zIndeterminate]=\"\n                                        canUseRowSelection() &&\n                                        cell.row.getIsSomeSelected() &&\n                                        !cell.row.getIsSelected()\n                                      \"\n                                      [zDisabled]=\"!canUseRowSelection() || !cell.row.getCanSelect()\"\n                                      (zChange)=\"canUseRowSelection() && 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.getCanExpand()) {\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-sm\">\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 (\n                                  (cell.column.id === 'actionRowPin' || cell.column.id === 'actions') &&\n                                  cell.column.id !== actionColumnInfo()?.columnId\n                                ) {\n                                  @if (cell.row.depth === 0 && !hasBodyRowSpan()) {\n                                    <div class=\"flex items-center justify-center\">\n                                      <ng-template #rowPinPopoverContent>\n                                        <div\n                                          zHoverGlide\n                                          zHoverGlideSelector=\".z-column-menu-item\"\n                                          class=\"flex flex-col gap-1 py-1\">\n                                          @if (cell.row.getIsPinned() !== 'top') {\n                                            <button\n                                              type=\"button\"\n                                              (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\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=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\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=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\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-sm p-1 outline-none\"\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                                  @let isCellVisible = cell | zTableCellVisible: zConfig().columns;\n                                  @if (isCellVisible) {\n                                    @let editInfoVirtual = cell.getContext() | zTableCellEdit: zConfig().columns;\n                                    @if (editInfoVirtual.enabled) {\n                                      <!-- Editable Cell (Virtual) -->\n                                      <z-table-edit-cell\n                                        [zRow]=\"cell.row.original\"\n                                        [zRowId]=\"cell.row.id\"\n                                        [zRowIndex]=\"cell.row.index\"\n                                        [zColumnId]=\"cell.column.id\"\n                                        [zValue]=\"cell.getValue()\"\n                                        [zRowUpdate]=\"_rowUpdate()\"\n                                        [zEditConfig]=\"$any(editInfoVirtual.config)\"\n                                        (zChange)=\"onCellEdit($any($event))\" />\n                                    } @else if (editInfoVirtual.contentEnabled) {\n                                      @let contentConfigVirtual = editInfoVirtual.contentConfig!;\n                                      @if (\n                                        activeContentEditCell()?.rowId === row.id &&\n                                        activeContentEditCell()?.columnId === cell.column.id\n                                      ) {\n                                        <z-table-content-editor\n                                          [zValue]=\"cell.getValue()\"\n                                          [zConfig]=\"contentConfigVirtual\"\n                                          (zCommit)=\"onContentEditCommit($event, row, cell.column.id, cell.getValue())\"\n                                          (zCancel)=\"onContentEditCancel()\" />\n                                      } @else {\n                                        <button\n                                          type=\"button\"\n                                          class=\"z-table-content-trigger\"\n                                          [attr.data-z-table-edit-row]=\"row.id\"\n                                          [attr.data-z-table-edit-column]=\"cell.column.id\"\n                                          (keydown)=\"onContentEditKeydown($event, row.id, cell.column.id)\"\n                                          (click)=\"onContentEditStart($event, row.id, cell.column.id)\">\n                                          {{ contentConfigVirtual.displayValue }}\n                                        </button>\n                                      }\n                                    } @else {\n                                      <ng-container\n                                        *flexRender=\"\n                                          cell.column.columnDef.cell;\n                                          props: cell.getContext();\n                                          let cellContent\n                                        \">\n                                        @if (cellContent | zTableIsTemplateRef) {\n                                          <!-- TemplateRef rendering -->\n                                          @let isClickable = cell.column.id | zTableCellClickable: zConfig().columns;\n                                          <div\n                                            class=\"z-template-content\"\n                                            [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                            [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                            (click)=\"isClickable && onCellClick(row, cell.column.id, cell.getValue())\">\n                                            <ng-container\n                                              *ngTemplateOutlet=\"\n                                                cellContent;\n                                                context: { $implicit: cell.getContext() }\n                                              \" />\n                                          </div>\n                                        } @else if (cellContent | zTableHasIcon) {\n                                          <!-- Icon syntax rendering -->\n                                          @let isClickableIcon =\n                                            cell.column.id | zTableCellClickable: zConfig().columns;\n                                          <z-table-icon-text\n                                            [zText]=\"cellContent\"\n                                            [zTooltip]=\"cell | zTableCellConfig: zConfig() : 'contentTooltip'\"\n                                            [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                            [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                            (click)=\"\n                                              isClickableIcon && onCellClick(row, cell.column.id, cell.getValue())\n                                            \" />\n                                        } @else {\n                                          <!-- Default/innerHTML rendering -->\n                                          @let isClickableDefault =\n                                            cell.column.id | zTableCellClickable: zConfig().columns;\n                                          @let cellTooltipConfig =\n                                            cell | zTableCellConfig: zConfig() : 'contentTooltip';\n                                          @let cellPopoverConfig =\n                                            cell | zTableCellConfig: zConfig() : 'contentPopover';\n                                          @let cellPopoverContent = cellPopoverConfig | zTablePopoverConfig: 'content';\n                                          <ng-template #cellPopoverTpl>\n                                            @if (cellPopoverContent | zTableIsTemplateRef) {\n                                              <ng-container *ngTemplateOutlet=\"$any(cellPopoverContent)\" />\n                                            }\n                                            @if (!(cellPopoverContent | zTableIsTemplateRef)) {\n                                              <div [innerHTML]=\"$any(cellPopoverContent) | zSafeHtml\"></div>\n                                            }\n                                          </ng-template>\n                                          @if (cellPopoverContent) {\n                                            <div\n                                              class=\"z-table-cell-text\"\n                                              z-popover\n                                              z-tooltip\n                                              [zTriggerElement]=\"cellOverlayContent\"\n                                              [zTriggerRef]=\"cellOverlayContent\"\n                                              [zContent]=\"\n                                                (cellTooltipConfig | zTableTooltipConfig: 'content') || cellContent\n                                              \"\n                                              [zTooltipPosition]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'position')\n                                              \"\n                                              [zTooltipTrigger]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'trigger')\n                                              \"\n                                              [zTooltipType]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'type')\"\n                                              [zTooltipSize]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'size')\"\n                                              [zTooltipClass]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'class')\"\n                                              [zTooltipShowDelay]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'showDelay')\n                                              \"\n                                              [zTooltipHideDelay]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'hideDelay')\n                                              \"\n                                              [zTooltipArrow]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'arrow')\"\n                                              [zTooltipOffset]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'offset')\"\n                                              [zAutoDetect]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'autoDetect')\n                                              \"\n                                              [zAlwaysShow]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'alwaysShow')\n                                              \"\n                                              [zMaxWidth]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'maxWidth')\"\n                                              [zPopoverContent]=\"cellPopoverTpl\"\n                                              [zPosition]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'position')\"\n                                              [zPopoverTrigger]=\"\n                                                $any(cellPopoverConfig | zTablePopoverConfig: 'trigger')\n                                              \"\n                                              [zClass]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'class')\"\n                                              [zShowDelay]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'showDelay')\"\n                                              [zHideDelay]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'hideDelay')\"\n                                              [zDisabled]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'disabled')\"\n                                              [zOffset]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'offset')\"\n                                              [zPopoverWidth]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'width')\"\n                                              [zManualClose]=\"\n                                                $any(cellPopoverConfig | zTablePopoverConfig: 'manualClose')\n                                              \"\n                                              [zOutsideClickClose]=\"\n                                                $any(cellPopoverConfig | zTablePopoverConfig: 'outsideClickClose')\n                                              \"\n                                              [zScrollClose]=\"\n                                                $any(cellPopoverConfig | zTablePopoverConfig: 'scrollClose')\n                                              \"\n                                              [zSticky]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'sticky')\"\n                                              [zShowArrow]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'showArrow')\"\n                                              [zKeyboardSafe]=\"\n                                                $any(cellPopoverConfig | zTablePopoverConfig: 'keyboardSafe')\n                                              \"\n                                              (click)=\"\n                                                isClickableDefault && onCellClick(row, cell.column.id, cell.getValue())\n                                              \">\n                                              <span\n                                                #cellOverlayContent\n                                                class=\"z-table-cell-content-trigger\"\n                                                [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                                [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                                [innerHTML]=\"cellContent | translate | zSafeHtml\"></span>\n                                            </div>\n                                          } @else {\n                                            <div\n                                              class=\"z-table-cell-text\"\n                                              z-tooltip\n                                              [zTriggerElement]=\"cellTooltipContent\"\n                                              [zContent]=\"\n                                                (cellTooltipConfig | zTableTooltipConfig: 'content') || cellContent\n                                              \"\n                                              [zTooltipPosition]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'position')\n                                              \"\n                                              [zTooltipTrigger]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'trigger')\n                                              \"\n                                              [zTooltipType]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'type')\"\n                                              [zTooltipSize]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'size')\"\n                                              [zTooltipClass]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'class')\"\n                                              [zTooltipShowDelay]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'showDelay')\n                                              \"\n                                              [zTooltipHideDelay]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'hideDelay')\n                                              \"\n                                              [zTooltipArrow]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'arrow')\"\n                                              [zTooltipOffset]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'offset')\"\n                                              [zAutoDetect]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'autoDetect')\n                                              \"\n                                              [zAlwaysShow]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'alwaysShow')\n                                              \"\n                                              [zMaxWidth]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'maxWidth')\"\n                                              (click)=\"\n                                                isClickableDefault && onCellClick(row, cell.column.id, cell.getValue())\n                                              \">\n                                              <span\n                                                #cellTooltipContent\n                                                class=\"z-table-cell-content-trigger\"\n                                                [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                                [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                                [innerHTML]=\"cellContent | translate | zSafeHtml\"></span>\n                                            </div>\n                                          }\n                                        }\n                                      </ng-container>\n                                    }\n                                  }\n                                }\n                              </td>\n                            }\n                            @if (\n                              canUseVirtualColumns() &&\n                              virtualRightSpacerWidth() > 0 &&\n                              cell.column.id === lastVirtualCenterColumnId()\n                            ) {\n                              <td\n                                class=\"z-virtual-column-spacer pointer-events-none p-0\"\n                                [style.width.px]=\"virtualRenderedRightSpacerWidth()\"></td>\n                            }\n                          }\n                        </tr>\n                      }\n                    </tbody>\n                  </table>\n                </div>\n              }\n            </ng-template>\n          </div>\n\n          <!--\n            Bottom pinned rows: sibling AFTER the virtual canvas (not absolute like the\n            center rows). The virtualizer reserves their height inside getTotalSize() via\n            `paddingEnd`, leaving an empty band at the canvas bottom. `margin-top: -bottomHeight`\n            pulls this real flow element back over that band, and `position: sticky; bottom: 0`\n            floats it to the viewport bottom while scrolling.\n          -->\n          @if (virtualPinnedBottomRows().length > 0) {\n            <div\n              class=\"z-virtual-pinned-bottom\"\n              [style.min-width.px]=\"table.getTotalSize()\"\n              [style.margin-top.px]=\"-virtualPinnedBottomHeight()\">\n              @for (row of virtualPinnedBottomRows(); track row.id) {\n                <ng-container *ngTemplateOutlet=\"virtualPinnedRowTpl; context: { $implicit: row }\" />\n              }\n            </div>\n          }\n\n          <!-- Template for rendering pinned rows in virtual scroll mode -->\n          <ng-template #virtualPinnedRowTpl let-row>\n            @let visibleCells = row.getVisibleCells();\n            @let rowSelected = canUseRowSelection() && row.getIsSelected();\n            @let rowSomeSelected = canUseRowSelection() && row.getIsSomeSelected();\n            @let rowPinned = row.getIsPinned();\n            <table [style.width.px]=\"renderedTableWidth()\">\n              <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n              <tbody [class.z-has-vertical-scroll]=\"hasVerticalScroll()\">\n                <tr\n                  z-table-row-hover\n                  [attr.data-row-id]=\"row.id\"\n                  [class]=\"row | zTableRowConfig: zConfig() : 'rowClass'\"\n                  [style]=\"row | zTableRowConfig: zConfig() : 'rowStyle'\"\n                  [style.height.px]=\"effectiveDynamicRowSizing() ? null : virtualRowHeight()\"\n                  [style.min-height.px]=\"effectiveDynamicRowSizing() ? virtualRowHeight() : null\"\n                  [style.--z-row-height]=\"effectiveDynamicRowSizing() ? 'auto' : virtualRowHeight() + 'px'\"\n                  [class.z-selected]=\"rowSelected\"\n                  [class.z-indeterminate-selected]=\"rowSomeSelected && !rowSelected\"\n                  [class.z-context-menu-active]=\"contentRowMenu()?.row?.id === row.id\"\n                  [class.z-pinned-top]=\"rowPinned === 'top'\"\n                  [class.z-pinned-top-first]=\"rowPinned === 'top' && row.id === firstTopPinnedRowId()\"\n                  [class.z-pinned-bottom]=\"rowPinned === 'bottom'\"\n                  [class.z-pinned-bottom-last]=\"rowPinned === 'bottom' && row.id === lastBottomPinnedRowId()\"\n                  [class.z-pinned-bottom-first]=\"rowPinned === 'bottom' && row.id === firstBottomPinnedRowId()\"\n                  [class.z-shadow-bottom]=\"\n                    showHeaderFooterShadow() &&\n                    hasScrollTop() &&\n                    rowPinned === 'top' &&\n                    row.id === lastTopPinnedRowId() &&\n                    !isStickyGroupHeaderEnabled()\n                  \"\n                  [class.z-shadow-top]=\"\n                    showHeaderFooterShadow() &&\n                    hasScrollBottom() &&\n                    rowPinned === 'bottom' &&\n                    row.id === firstBottomPinnedRowId()\n                  \"\n                  (contextmenu)=\"openContentRowMenu($event, row)\">\n                  @let isColumnPinningActivePinned = isPinnedLayoutWithinContainer();\n                  @for (cell of visibleCells; track cell.id) {\n                    @let cellPinned = cell.column.getIsPinned();\n                    @let cellSelectionId = row.id + '::' + cell.column.id;\n                    @if (\n                      canUseVirtualColumns() &&\n                      virtualLeftSpacerWidth() > 0 &&\n                      cell.column.id === firstVirtualCenterColumnId()\n                    ) {\n                      <td\n                        class=\"z-virtual-column-spacer pointer-events-none p-0\"\n                        [style.width.px]=\"virtualRenderedLeftSpacerWidth()\"></td>\n                    }\n                    @let isVirtualColumnVisible =\n                      !canUseVirtualColumns() ||\n                      cellPinned !== false ||\n                      virtualCenterColumnVisibilityMap()[cell.column.id];\n                    @if (isVirtualColumnVisible) {\n                      <td\n                        [attr.data-column-id]=\"cell.column.id\"\n                        [ngStyle]=\"\n                          cell.column\n                            | zTablePinningStyles\n                              : cell\n                              : 'body'\n                              : visibleCells\n                              : zConfig().columns\n                              : columnResizing()\n                              : colDomWidthMap()\n                              : isColumnPinningActivePinned\n                              : bodyRowSpanRows()\n                        \"\n                        [class]=\"cell | zTableCellConfig: zConfig() : 'cellClass'\"\n                        [class.z-sticky-left]=\"isColumnPinningActivePinned && cellPinned === 'start'\"\n                        [class.z-sticky-right]=\"isColumnPinningActivePinned && cellPinned === 'end'\"\n                        [class.z-sticky-left-last]=\"\n                          isColumnPinningActivePinned &&\n                          cellPinned === 'start' &&\n                          (cell | zTableCellPin: 'isLastLeftPinned' : zConfig().columns : 'body' : visibleCells)\n                        \"\n                        [class.z-sticky-right-first]=\"\n                          isColumnPinningActivePinned &&\n                          cellPinned === 'end' &&\n                          (cell | zTableCellPin: 'isFirstRightPinned' : zConfig().columns : 'body' : visibleCells)\n                        \"\n                        [class.z-sticky-right-last]=\"\n                          isColumnPinningActivePinned &&\n                          cellPinned === 'end' &&\n                          (cell | zTableCellPin: 'isLastRightPinned' : zConfig().columns : 'body' : visibleCells)\n                        \"\n                        [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                        [class.z-col-drag]=\"cell.column.id === 'rowDrag'\"\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-cell-selectable]=\"canUseCellSelection()\"\n                        [class.z-cell-active]=\"\n                          !hasMultipleSelectedCells() &&\n                          activeCell()?.rowId === row.id &&\n                          activeCell()?.columnId === cell.column.id\n                        \"\n                        [class.z-cell-range-selected]=\"visualSelectedCellIds().has(cellSelectionId)\"\n                        [class.z-cell-range-top]=\"selectedCellEdgeIds().top.has(cellSelectionId)\"\n                        [class.z-cell-range-right]=\"selectedCellEdgeIds().right.has(cellSelectionId)\"\n                        [class.z-cell-range-bottom]=\"selectedCellEdgeIds().bottom.has(cellSelectionId)\"\n                        [class.z-cell-range-left]=\"selectedCellEdgeIds().left.has(cellSelectionId)\"\n                        [style.--z-cell-range-top]=\"(selectedCellRangeInsets().get(cellSelectionId)?.top ?? 0) + '%'\"\n                        [style.--z-cell-range-right]=\"\n                          (selectedCellRangeInsets().get(cellSelectionId)?.right ?? 0) + '%'\n                        \"\n                        [style.--z-cell-range-bottom]=\"\n                          (selectedCellRangeInsets().get(cellSelectionId)?.bottom ?? 0) + '%'\n                        \"\n                        [style.--z-cell-range-left]=\"(selectedCellRangeInsets().get(cellSelectionId)?.left ?? 0) + '%'\"\n                        [style]=\"cell | zTableCellConfig: zConfig() : 'cellStyle'\"\n                        (pointerdown)=\"onCellPointerDown($event, row, cell.column.id)\"\n                        (pointerenter)=\"onCellPointerEnter($event, row, cell.column.id)\"\n                        (contextmenu)=\"openCellMenu($event, row, cell.column.id)\">\n                        @if (cell.column.id === 'select') {\n                          <z-checkbox\n                            [zChecked]=\"rowSelected\"\n                            [zIndeterminate]=\"rowSomeSelected && !rowSelected\"\n                            [zDisabled]=\"!canUseRowSelection()\"\n                            (zChange)=\"canUseRowSelection() && row.toggleSelected()\" />\n                        } @else if (cell.column.id === 'expand') {\n                          <button\n                            type=\"button\"\n                            class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded-sm\"\n                            (click)=\"row.toggleExpanded()\">\n                            <z-icon\n                              zType=\"lucideChevronRight\"\n                              zSize=\"14\"\n                              class=\"transition-transform duration-200\"\n                              [class.rotate-90]=\"row.getIsExpanded()\" />\n                          </button>\n                        } @else if (cell.column.id === 'actionRowPin') {\n                          <div class=\"flex items-center justify-center\">\n                            <button\n                              type=\"button\"\n                              class=\"z-row-pin-trigger z-row-pin-unpin-trigger flex h-6 w-6 cursor-pointer items-center justify-center rounded-sm\"\n                              (click)=\"cell.row.pin(false)\">\n                              <z-icon zType=\"lucideX\" zSize=\"14\" />\n                            </button>\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                          @let isCellVisible = cell | zTableCellVisible: zConfig().columns;\n                          @if (isCellVisible) {\n                            <ng-container\n                              *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellContent\">\n                              @if (cellContent | zTableIsTemplateRef) {\n                                <div\n                                  class=\"z-template-content\"\n                                  [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                  [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\">\n                                  <ng-container\n                                    *ngTemplateOutlet=\"cellContent; context: { $implicit: cell.getContext() }\" />\n                                </div>\n                              } @else if (cellContent | zTableHasIcon) {\n                                <z-table-icon-text\n                                  [zText]=\"cellContent\"\n                                  [zTooltip]=\"cell | zTableCellConfig: zConfig() : 'contentTooltip'\"\n                                  [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                  [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\" />\n                              } @else {\n                                <span\n                                  class=\"z-table-cell-text\"\n                                  z-tooltip\n                                  [zContent]=\"(cell | zTableCellConfig: zConfig() : 'contentTooltip') || cellContent\"\n                                  [innerHTML]=\"cellContent | translate | zSafeHtml\"\n                                  [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                  [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"></span>\n                              }\n                            </ng-container>\n                          }\n                        }\n                      </td>\n                    }\n                    @if (\n                      canUseVirtualColumns() &&\n                      virtualRightSpacerWidth() > 0 &&\n                      cell.column.id === lastVirtualCenterColumnId()\n                    ) {\n                      <td\n                        class=\"z-virtual-column-spacer pointer-events-none p-0\"\n                        [style.width.px]=\"virtualRenderedRightSpacerWidth()\"></td>\n                    }\n                  }\n                </tr>\n              </tbody>\n            </table>\n          </ng-template>\n        } @else {\n          <!-- Normal Scroll Mode -->\n\n          <table [style.width.px]=\"renderedTableWidth()\">\n            <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n            <tbody\n              class=\"z-table-drag-body\"\n              [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n              [class.z-has-bottom-pinned]=\"table.getBottomRows().length > 0\"\n              [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n              <!-- Row Template -->\n              <ng-template #rowTemplate let-row let-isGroupChild=\"isGroupChild\" let-groupDepth=\"groupDepth\">\n                @let visibleCells = row.getVisibleCells();\n                @let rowSelected = canUseRowSelection() && row.getIsSelected();\n                @let rowSomeSelected = canUseRowSelection() && row.getIsSomeSelected();\n                @let rowPinned = row.getIsPinned();\n                <tr\n                  z-table-row-hover\n                  z-table-draggable=\"row\"\n                  z-table-drop-target=\"row\"\n                  [animate.enter]=\"row.depth > 0 || isGroupChild ? 'z-row-enter' : ''\"\n                  [z-table-drag-table-id]=\"dragInstanceId\"\n                  [z-table-drop-table-id]=\"dragInstanceId\"\n                  [z-table-drag-item-id]=\"row.id\"\n                  [z-table-drop-item-id]=\"row.id\"\n                  [z-table-drag-disabled]=\"!isRowDragEnabled()\"\n                  [z-table-drop-disabled]=\"!isRowDragEnabled()\"\n                  (zTableDropped)=\"_handleDragDrop($event)\"\n                  [attr.data-row-id]=\"row.id\"\n                  [class]=\"row | zTableRowConfig: zConfig() : 'rowClass'\"\n                  [style]=\"row | zTableRowConfig: zConfig() : 'rowStyle'\"\n                  [ngStyle]=\"row | zTableRow: table : 'pinningStyles' : pinnedRowHeights() : virtualRowHeight()\"\n                  [class.z-child-row]=\"row.depth > 0\"\n                  [class.z-group-child-row]=\"isGroupChild\"\n                  [style.--z-group-content-indent]=\"groupDepth > 0 ? 1.75 + (groupDepth - 1) * 0.75 + 'rem' : null\"\n                  [class.z-selected]=\"rowSelected\"\n                  [class.z-indeterminate-selected]=\"rowSomeSelected && !rowSelected\"\n                  [class.z-context-menu-active]=\"contentRowMenu()?.row?.id === row.id\"\n                  [class.z-pinned-top]=\"rowPinned === 'top'\"\n                  [class.z-pinned-top-first]=\"rowPinned === 'top' && row.id === firstTopPinnedRowId()\"\n                  [class.z-pinned-bottom]=\"rowPinned === 'bottom'\"\n                  [class.z-pinned-bottom-last]=\"rowPinned === 'bottom' && row.id === lastBottomPinnedRowId()\"\n                  [class.z-pinned-bottom-first]=\"rowPinned === 'bottom' && row.id === firstBottomPinnedRowId()\"\n                  [class.z-shadow-bottom]=\"\n                    showHeaderFooterShadow() &&\n                    hasScrollTop() &&\n                    rowPinned === 'top' &&\n                    row.id === lastTopPinnedRowId() &&\n                    !isStickyGroupHeaderEnabled()\n                  \"\n                  [class.z-shadow-top]=\"\n                    showHeaderFooterShadow() &&\n                    hasScrollBottom() &&\n                    rowPinned === 'bottom' &&\n                    row.id === firstBottomPinnedRowId()\n                  \"\n                  [attr.data-depth]=\"row.depth\"\n                  (contextmenu)=\"openContentRowMenu($event, row)\">\n                  @for (cell of visibleCells; track cell.id) {\n                    @let cellPinned = cell.column.getIsPinned();\n                    @let cellRowPinned = cell.row.getIsPinned();\n                    @if (\n                      canUseVirtualColumns() &&\n                      virtualLeftSpacerWidth() > 0 &&\n                      cell.column.id === firstVirtualCenterColumnId()\n                    ) {\n                      <td\n                        class=\"z-virtual-column-spacer pointer-events-none p-0\"\n                        [style.width.px]=\"virtualRenderedLeftSpacerWidth()\"></td>\n                    }\n                    @let shouldRenderRowSpan =\n                      cell | zTableSpan: zConfig().columns : 'shouldRender' : bodyRowSpanRows();\n                    @let shouldRenderColSpan = cell | zTableCellRender: visibleCells : zConfig().columns : 'body';\n                    @let isVirtualColumnVisible =\n                      !canUseVirtualColumns() ||\n                      cellPinned !== false ||\n                      virtualCenterColumnVisibilityMap()[cell.column.id];\n                    @if (shouldRenderRowSpan && shouldRenderColSpan && isVirtualColumnVisible) {\n                      @let cellSelectionId = row.id + '::' + cell.column.id;\n                      <td\n                        [attr.data-column-id]=\"cell.column.id\"\n                        [ngStyle]=\"\n                          cell.column\n                            | zTablePinningStyles\n                              : cell\n                              : 'body'\n                              : visibleCells\n                              : zConfig().columns\n                              : columnResizing()\n                              : colDomWidthMap()\n                              : isColumnPinningActive\n                              : bodyRowSpanRows()\n                        \"\n                        [class]=\"cell | zTableCellConfig: zConfig() : 'cellClass'\"\n                        [style]=\"cell | zTableCellConfig: zConfig() : 'cellStyle'\"\n                        [class.z-sticky-left]=\"isColumnPinningActive && cellPinned === 'start'\"\n                        [class.z-sticky-right]=\"isColumnPinningActive && cellPinned === 'end'\"\n                        [class.z-sticky-left-last]=\"\n                          isColumnPinningActive &&\n                          cellPinned === 'start' &&\n                          (cell | zTableCellPin: 'isLastLeftPinned' : zConfig().columns : 'body' : visibleCells)\n                        \"\n                        [class.z-sticky-right-first]=\"\n                          isColumnPinningActive &&\n                          cellPinned === 'end' &&\n                          (cell | zTableCellPin: 'isFirstRightPinned' : zConfig().columns : 'body' : visibleCells)\n                        \"\n                        [class.z-sticky-right-last]=\"\n                          isColumnPinningActive &&\n                          cellPinned === 'end' &&\n                          (cell | zTableCellPin: 'isLastRightPinned' : zConfig().columns : 'body' : visibleCells)\n                        \"\n                        [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                        [class.z-col-drag]=\"cell.column.id === 'rowDrag'\"\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-cell-selectable]=\"canUseCellSelection()\"\n                        [class.z-cell-active]=\"\n                          !hasMultipleSelectedCells() &&\n                          activeCell()?.rowId === row.id &&\n                          activeCell()?.columnId === cell.column.id\n                        \"\n                        [class.z-cell-range-selected]=\"visualSelectedCellIds().has(cellSelectionId)\"\n                        [class.z-cell-range-top]=\"selectedCellEdgeIds().top.has(cellSelectionId)\"\n                        [class.z-cell-range-right]=\"selectedCellEdgeIds().right.has(cellSelectionId)\"\n                        [class.z-cell-range-bottom]=\"selectedCellEdgeIds().bottom.has(cellSelectionId)\"\n                        [class.z-cell-range-left]=\"selectedCellEdgeIds().left.has(cellSelectionId)\"\n                        [class.z-content-edit-active]=\"\n                          activeContentEditCell()?.rowId === row.id &&\n                          activeContentEditCell()?.columnId === cell.column.id\n                        \"\n                        [class.z-at-bottom]=\"cell | zTableCellBottom: zConfig().columns : renderedBodyRows()\"\n                        [attr.rowspan]=\"cell | zTableSpan: zConfig().columns : 'cellRowSpan' : bodyRowSpanRows()\"\n                        [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan' : undefined : visibleCells\"\n                        [style.--z-cell-range-top]=\"(selectedCellRangeInsets().get(cellSelectionId)?.top ?? 0) + '%'\"\n                        [style.--z-cell-range-right]=\"\n                          (selectedCellRangeInsets().get(cellSelectionId)?.right ?? 0) + '%'\n                        \"\n                        [style.--z-cell-range-bottom]=\"\n                          (selectedCellRangeInsets().get(cellSelectionId)?.bottom ?? 0) + '%'\n                        \"\n                        [style.--z-cell-range-left]=\"(selectedCellRangeInsets().get(cellSelectionId)?.left ?? 0) + '%'\"\n                        (pointerdown)=\"onCellPointerDown($event, row, cell.column.id)\"\n                        (pointerenter)=\"onCellPointerEnter($event, row, cell.column.id)\"\n                        (contextmenu)=\"openCellMenu($event, row, cell.column.id)\">\n                        @if (cell.column.id === 'rowDrag') {\n                          <div class=\"flex items-center justify-center\">\n                            <button\n                              data-z-table-drag-handle\n                              type=\"button\"\n                              class=\"text-muted-foreground hover:bg-muted hover:text-foreground inline-flex size-7 items-center justify-center rounded-md transition-colors\"\n                              [class.cursor-grab]=\"isRowDragEnabled()\"\n                              [class.cursor-not-allowed]=\"!isRowDragEnabled()\"\n                              [class.opacity-40]=\"!isRowDragEnabled()\">\n                              <z-icon zType=\"lucideGripVertical\" zSize=\"14\" />\n                            </button>\n                          </div>\n                        } @else 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                              [zChecked]=\"canUseRowSelection() && cell.row.getIsSelected()\"\n                              [zIndeterminate]=\"\n                                canUseRowSelection() && cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\n                              \"\n                              [zDisabled]=\"!canUseRowSelection() || !cell.row.getCanSelect()\"\n                              (zChange)=\"canUseRowSelection() && cell.row.toggleSelected()\" />\n                            @if (zConfig().enableRowPinning && cell.row.depth === 0 && !hasBodyRowSpan()) {\n                              @if (cellRowPinned) {\n                                <button\n                                  type=\"button\"\n                                  class=\"z-row-pin-trigger z-row-pin-unpin-trigger flex h-6 w-6 cursor-pointer items-center justify-center rounded-sm\"\n                                  (click)=\"cell.row.pin(false)\">\n                                  <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                </button>\n                              } @else {\n                                <ng-template #rowPinPopoverContent>\n                                  <div\n                                    zHoverGlide\n                                    zHoverGlideSelector=\".z-column-menu-item\"\n                                    class=\"flex flex-col gap-1 py-1\">\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\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-sm p-1 outline-none\">\n                                  <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                                </button>\n                              }\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.getCanExpand()) {\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-sm\">\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                              @if (cellRowPinned) {\n                                <button\n                                  type=\"button\"\n                                  class=\"z-row-pin-trigger z-row-pin-unpin-trigger flex h-6 w-6 cursor-pointer items-center justify-center rounded-sm\"\n                                  (click)=\"cell.row.pin(false)\">\n                                  <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                </button>\n                              } @else {\n                                <ng-template #rowPinPopoverContent>\n                                  <div\n                                    zHoverGlide\n                                    zHoverGlideSelector=\".z-column-menu-item\"\n                                    class=\"flex flex-col gap-1 py-1\">\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\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-sm p-1 outline-none\">\n                                  <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                                </button>\n                              }\n                            }\n                          </div>\n                        } @else if (\n                          (cell.column.id === 'actionRowPin' || cell.column.id === 'actions') &&\n                          cell.column.id !== actionColumnInfo()?.columnId\n                        ) {\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                              @if (cellRowPinned) {\n                                <button\n                                  type=\"button\"\n                                  class=\"z-row-pin-trigger z-row-pin-unpin-trigger flex h-6 w-6 cursor-pointer items-center justify-center rounded-sm\"\n                                  (click)=\"cell.row.pin(false)\">\n                                  <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                </button>\n                              } @else {\n                                <ng-template #rowPinPopoverContent>\n                                  <div\n                                    zHoverGlide\n                                    zHoverGlideSelector=\".z-column-menu-item\"\n                                    class=\"flex flex-col gap-1 py-1\">\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\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-sm p-1 outline-none\">\n                                  <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                                </button>\n                              }\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                          @let isCellVisibleNormal = cell | zTableCellVisible: zConfig().columns;\n                          @if (isCellVisibleNormal) {\n                            @let editInfo = cell.getContext() | zTableCellEdit: zConfig().columns;\n                            @if (editInfo.enabled) {\n                              <!-- Editable Cell -->\n                              <z-table-edit-cell\n                                [zRow]=\"cell.row.original\"\n                                [zRowId]=\"cell.row.id\"\n                                [zRowIndex]=\"cell.row.index\"\n                                [zColumnId]=\"cell.column.id\"\n                                [zValue]=\"cell.getValue()\"\n                                [zRowUpdate]=\"_rowUpdate()\"\n                                [zEditConfig]=\"$any(editInfo.config)\"\n                                (zChange)=\"onCellEdit($any($event))\" />\n                            } @else if (editInfo.contentEnabled) {\n                              @let contentConfig = editInfo.contentConfig!;\n                              @if (\n                                activeContentEditCell()?.rowId === row.id &&\n                                activeContentEditCell()?.columnId === cell.column.id\n                              ) {\n                                <z-table-content-editor\n                                  [zValue]=\"cell.getValue()\"\n                                  [zConfig]=\"contentConfig\"\n                                  (zCommit)=\"onContentEditCommit($event, row, cell.column.id, cell.getValue())\"\n                                  (zCancel)=\"onContentEditCancel()\" />\n                              } @else {\n                                <button\n                                  type=\"button\"\n                                  class=\"z-table-content-trigger\"\n                                  [attr.data-z-table-edit-row]=\"row.id\"\n                                  [attr.data-z-table-edit-column]=\"cell.column.id\"\n                                  (keydown)=\"onContentEditKeydown($event, row.id, cell.column.id)\"\n                                  (click)=\"onContentEditStart($event, row.id, cell.column.id)\">\n                                  {{ contentConfig.displayValue }}\n                                </button>\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                                  @let isClickableTpl = cell.column.id | zTableCellClickable: zConfig().columns;\n                                  <div\n                                    class=\"z-template-content\"\n                                    [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                    [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                    (click)=\"isClickableTpl && onCellClick(row, cell.column.id, cell.getValue())\">\n                                    <ng-container\n                                      *ngTemplateOutlet=\"cellContent; context: { $implicit: cell.getContext() }\" />\n                                  </div>\n                                } @else if (cellContent | zTableHasIcon) {\n                                  <!-- Icon syntax rendering -->\n                                  @let isClickableIconTpl = cell.column.id | zTableCellClickable: zConfig().columns;\n                                  <z-table-icon-text\n                                    [zText]=\"cellContent\"\n                                    [zTooltip]=\"cell | zTableCellConfig: zConfig() : 'contentTooltip'\"\n                                    [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                    [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                    (click)=\"isClickableIconTpl && onCellClick(row, cell.column.id, cell.getValue())\" />\n                                } @else {\n                                  <!-- Default/innerHTML rendering -->\n                                  @let isClickableDefaultTpl = cell.column.id | zTableCellClickable: zConfig().columns;\n                                  @let cellTooltipConfigTpl = cell | zTableCellConfig: zConfig() : 'contentTooltip';\n                                  @let cellPopoverConfigTpl = cell | zTableCellConfig: zConfig() : 'contentPopover';\n                                  @let cellPopoverContentTpl = cellPopoverConfigTpl | zTablePopoverConfig: 'content';\n                                  <ng-template #cellPopoverTplNormal>\n                                    @if (cellPopoverContentTpl | zTableIsTemplateRef) {\n                                      <ng-container *ngTemplateOutlet=\"$any(cellPopoverContentTpl)\" />\n                                    }\n                                    @if (!(cellPopoverContentTpl | zTableIsTemplateRef)) {\n                                      <div [innerHTML]=\"$any(cellPopoverContentTpl) | zSafeHtml\"></div>\n                                    }\n                                  </ng-template>\n                                  @if (cellPopoverContentTpl) {\n                                    <div\n                                      class=\"z-table-cell-text\"\n                                      z-popover\n                                      z-tooltip\n                                      [zTriggerElement]=\"cellOverlayContentTpl\"\n                                      [zTriggerRef]=\"cellOverlayContentTpl\"\n                                      [zContent]=\"\n                                        (cellTooltipConfigTpl | zTableTooltipConfig: 'content') || cellContent\n                                      \"\n                                      [zTooltipPosition]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'position')\"\n                                      [zTooltipTrigger]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'trigger')\"\n                                      [zTooltipType]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'type')\"\n                                      [zTooltipSize]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'size')\"\n                                      [zTooltipClass]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'class')\"\n                                      [zTooltipShowDelay]=\"\n                                        $any(cellTooltipConfigTpl | zTableTooltipConfig: 'showDelay')\n                                      \"\n                                      [zTooltipHideDelay]=\"\n                                        $any(cellTooltipConfigTpl | zTableTooltipConfig: 'hideDelay')\n                                      \"\n                                      [zTooltipArrow]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'arrow')\"\n                                      [zTooltipOffset]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'offset')\"\n                                      [zAutoDetect]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'autoDetect')\"\n                                      [zAlwaysShow]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'alwaysShow')\"\n                                      [zMaxWidth]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'maxWidth')\"\n                                      [zPopoverContent]=\"cellPopoverTplNormal\"\n                                      [zPosition]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'position')\"\n                                      [zPopoverTrigger]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'trigger')\"\n                                      [zClass]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'class')\"\n                                      [zShowDelay]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'showDelay')\"\n                                      [zHideDelay]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'hideDelay')\"\n                                      [zDisabled]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'disabled')\"\n                                      [zOffset]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'offset')\"\n                                      [zPopoverWidth]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'width')\"\n                                      [zManualClose]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'manualClose')\"\n                                      [zOutsideClickClose]=\"\n                                        $any(cellPopoverConfigTpl | zTablePopoverConfig: 'outsideClickClose')\n                                      \"\n                                      [zScrollClose]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'scrollClose')\"\n                                      [zSticky]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'sticky')\"\n                                      [zShowArrow]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'showArrow')\"\n                                      [zKeyboardSafe]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'keyboardSafe')\"\n                                      (click)=\"\n                                        isClickableDefaultTpl && onCellClick(row, cell.column.id, cell.getValue())\n                                      \">\n                                      <span\n                                        #cellOverlayContentTpl\n                                        class=\"z-table-cell-content-trigger\"\n                                        [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                        [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                        [innerHTML]=\"cellContent | translate | zSafeHtml\"></span>\n                                    </div>\n                                  } @else {\n                                    <div\n                                      class=\"z-table-cell-text\"\n                                      z-tooltip\n                                      [zTriggerElement]=\"cellTooltipContentTpl\"\n                                      [zContent]=\"\n                                        (cellTooltipConfigTpl | zTableTooltipConfig: 'content') || cellContent\n                                      \"\n                                      [zTooltipPosition]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'position')\"\n                                      [zTooltipTrigger]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'trigger')\"\n                                      [zTooltipType]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'type')\"\n                                      [zTooltipSize]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'size')\"\n                                      [zTooltipClass]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'class')\"\n                                      [zTooltipShowDelay]=\"\n                                        $any(cellTooltipConfigTpl | zTableTooltipConfig: 'showDelay')\n                                      \"\n                                      [zTooltipHideDelay]=\"\n                                        $any(cellTooltipConfigTpl | zTableTooltipConfig: 'hideDelay')\n                                      \"\n                                      [zTooltipArrow]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'arrow')\"\n                                      [zTooltipOffset]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'offset')\"\n                                      [zAutoDetect]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'autoDetect')\"\n                                      [zAlwaysShow]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'alwaysShow')\"\n                                      [zMaxWidth]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'maxWidth')\"\n                                      (click)=\"\n                                        isClickableDefaultTpl && onCellClick(row, cell.column.id, cell.getValue())\n                                      \">\n                                      <span\n                                        #cellTooltipContentTpl\n                                        class=\"z-table-cell-content-trigger\"\n                                        [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                        [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                        [innerHTML]=\"cellContent | translate | zSafeHtml\"></span>\n                                    </div>\n                                  }\n                                }\n                              </ng-container>\n                            }\n                          }\n                        }\n                      </td>\n                    }\n                    @if (\n                      canUseVirtualColumns() &&\n                      virtualRightSpacerWidth() > 0 &&\n                      cell.column.id === lastVirtualCenterColumnId()\n                    ) {\n                      <td\n                        class=\"z-virtual-column-spacer pointer-events-none p-0\"\n                        [style.width.px]=\"virtualRenderedRightSpacerWidth()\"></td>\n                    }\n                  }\n                </tr>\n\n                <!-- Expanded Row Detail -->\n                @if (row.getIsExpanded() && row.depth === 0 && !row.subRows?.length) {\n                  @let resolvedSubTableConfig = row | zTableSubTableConfig: zConfig();\n                  <tr class=\"z-expanded-row\" animate.enter=\"z-expanded-row-enter\">\n                    <td [attr.colspan]=\"renderedColumnCount()\" class=\"p-0\">\n                      <!-- Animate \u1EDF wrapper n\u00E0y b\u1EB1ng clip-path/translate/opacity \u2014 xem z-expanded-row-reveal. -->\n                      <div class=\"z-expanded-row-content\">\n                        @if (zConfig().expandedRowTemplate) {\n                          <ng-container\n                            *ngTemplateOutlet=\"zConfig().expandedRowTemplate!; context: { $implicit: row }\" />\n                        } @else if (resolvedSubTableConfig) {\n                          <div class=\"z-sub-table-container\">\n                            <z-table [zConfig]=\"$any(resolvedSubTableConfig)\" zVariant=\"borderless\" />\n                          </div>\n                        }\n                      </div>\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 (item of groupedCenterRowItems(); track item.type === 'group' ? item.id : item.row.id) {\n                @if (item.type === 'group') {\n                  <tr\n                    #groupRow\n                    class=\"z-group-row\"\n                    [class.z-group-row-has-totals]=\"item.totals\"\n                    [class.z-group-row-expanded]=\"item.expanded\"\n                    [class.z-group-row-sticky]=\"isStickyGroupHeaderEnabled()\"\n                    [class.z-group-row-sticky-shadow]=\"shadowGroupRowId() === item.id\"\n                    [style.top.px]=\"stickyGroupTopByDepth()[item.depth]\"\n                    [attr.data-group-id]=\"item.id\"\n                    [attr.data-group-depth]=\"item.depth\">\n                    @if (item.totals) {\n                      @let totalColumnMap = groupTotalColumnMap();\n                      @for (column of orderedLeafColumns(); track column.id; let isFirstGroupCell = $first) {\n                        <td\n                          [class.z-group-row-label-cell]=\"isFirstGroupCell\"\n                          [class.z-group-row-total-cell]=\"!isFirstGroupCell && totalColumnMap[column.id]\"\n                          [attr.data-column-id]=\"column.id\">\n                          @if (isFirstGroupCell) {\n                            <div class=\"z-group-row-sticky-wrapper\">\n                              <button\n                                type=\"button\"\n                                class=\"z-group-row-trigger\"\n                                [style.padding-left.rem]=\"0.75 + item.depth * 0.75\"\n                                [attr.aria-expanded]=\"item.expanded\"\n                                (click)=\"toggleGroupRow(item.id)\">\n                                <z-icon\n                                  zType=\"lucideChevronRight\"\n                                  zSize=\"14\"\n                                  class=\"transition-transform duration-200\"\n                                  [class.rotate-90]=\"item.expanded\" />\n                                <span\n                                  class=\"z-group-row-label\"\n                                  z-tooltip\n                                  [zContent]=\"(item.columnLabel ? item.columnLabel + ': ' : '') + item.label\">\n                                  @if (item.columnLabel) {\n                                    <span class=\"z-group-row-column-label\">{{ item.columnLabel }}:</span>\n                                  }\n                                  {{ item.label }}\n                                </span>\n                                @if (groupingConfig().showCount !== false) {\n                                  <span class=\"z-group-row-count\">{{ item.count }}</span>\n                                }\n                                @if (item.loading) {\n                                  <z-loading class=\"z-group-row-loading\" [zLoading]=\"true\" zSize=\"xs\" />\n                                }\n                              </button>\n                              @if (!isServerGrouping()) {\n                                <button\n                                  type=\"button\"\n                                  z-button\n                                  zType=\"ghost\"\n                                  zSize=\"sm\"\n                                  zTypeIcon=\"lucideX\"\n                                  zSizeIcon=\"14\"\n                                  [zWave]=\"false\"\n                                  z-tooltip\n                                  [zContent]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                                  [attr.aria-label]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                                  [zAlwaysShow]=\"true\"\n                                  zTooltipPosition=\"top\"\n                                  class=\"z-group-row-remove\"\n                                  (click)=\"removeGroupingColumn(item.columnId)\"></button>\n                              }\n                            </div>\n                          }\n                          @if (!isFirstGroupCell && totalColumnMap[column.id]) {\n                            @let totalConfig = groupTotalConfigMap()[column.id];\n                            @let totalTooltip = totalConfig.tooltip;\n                            @let totalPopover = totalConfig.popover;\n                            @let totalPopoverContent = totalPopover | zTablePopoverConfig: 'content';\n                            <ng-template #groupTotalPopoverTpl>\n                              @if (totalPopoverContent | zTableIsTemplateRef) {\n                                <ng-container *ngTemplateOutlet=\"$any(totalPopoverContent)\" />\n                              }\n                              @if (!(totalPopoverContent | zTableIsTemplateRef)) {\n                                <div [innerHTML]=\"$any(totalPopoverContent) | zSafeHtml\"></div>\n                              }\n                            </ng-template>\n                            <span\n                              class=\"z-group-row-total\"\n                              z-tooltip\n                              z-popover\n                              [class]=\"totalConfig.class\"\n                              [zContent]=\"\n                                $any((totalTooltip | zTableTooltipConfig: 'content') || item.totals[column.id])\n                              \"\n                              [zTooltipPosition]=\"$any(totalTooltip | zTableTooltipConfig: 'position')\"\n                              [zTooltipTrigger]=\"$any(totalTooltip | zTableTooltipConfig: 'trigger')\"\n                              [zTooltipType]=\"$any(totalTooltip | zTableTooltipConfig: 'type')\"\n                              [zTooltipSize]=\"$any(totalTooltip | zTableTooltipConfig: 'size')\"\n                              [zTooltipClass]=\"$any(totalTooltip | zTableTooltipConfig: 'class')\"\n                              [zTooltipShowDelay]=\"$any(totalTooltip | zTableTooltipConfig: 'showDelay')\"\n                              [zTooltipHideDelay]=\"$any(totalTooltip | zTableTooltipConfig: 'hideDelay')\"\n                              [zTooltipArrow]=\"$any(totalTooltip | zTableTooltipConfig: 'arrow')\"\n                              [zTooltipOffset]=\"$any(totalTooltip | zTableTooltipConfig: 'offset')\"\n                              [zAutoDetect]=\"$any(totalTooltip | zTableTooltipConfig: 'autoDetect')\"\n                              [zAlwaysShow]=\"$any(totalTooltip | zTableTooltipConfig: 'alwaysShow')\"\n                              [zMaxWidth]=\"$any(totalTooltip | zTableTooltipConfig: 'maxWidth')\"\n                              [zPopoverContent]=\"totalPopoverContent ? groupTotalPopoverTpl : null\"\n                              [zPosition]=\"$any(totalPopover | zTablePopoverConfig: 'position')\"\n                              [zPopoverTrigger]=\"$any(totalPopover | zTablePopoverConfig: 'trigger')\"\n                              [zClass]=\"$any(totalPopover | zTablePopoverConfig: 'class')\"\n                              [zShowDelay]=\"$any(totalPopover | zTablePopoverConfig: 'showDelay')\"\n                              [zHideDelay]=\"$any(totalPopover | zTablePopoverConfig: 'hideDelay')\"\n                              [zDisabled]=\"$any(totalPopover | zTablePopoverConfig: 'disabled')\"\n                              [zOffset]=\"$any(totalPopover | zTablePopoverConfig: 'offset')\"\n                              [zPopoverWidth]=\"$any(totalPopover | zTablePopoverConfig: 'width')\"\n                              [zManualClose]=\"$any(totalPopover | zTablePopoverConfig: 'manualClose')\"\n                              [zOutsideClickClose]=\"$any(totalPopover | zTablePopoverConfig: 'outsideClickClose')\"\n                              [zScrollClose]=\"$any(totalPopover | zTablePopoverConfig: 'scrollClose')\"\n                              [zSticky]=\"$any(totalPopover | zTablePopoverConfig: 'sticky')\"\n                              [zShowArrow]=\"$any(totalPopover | zTablePopoverConfig: 'showArrow')\"\n                              [zKeyboardSafe]=\"$any(totalPopover | zTablePopoverConfig: 'keyboardSafe')\">\n                              {{ item.totals[column.id] }}\n                            </span>\n                          }\n                        </td>\n                      }\n                    } @else {\n                      <td [attr.colspan]=\"renderedColumnCount()\">\n                        <div class=\"z-group-row-sticky-wrapper\">\n                          <button\n                            type=\"button\"\n                            class=\"z-group-row-trigger\"\n                            [style.padding-left.rem]=\"0.75 + item.depth * 0.75\"\n                            [attr.aria-expanded]=\"item.expanded\"\n                            (click)=\"toggleGroupRow(item.id)\">\n                            <z-icon\n                              zType=\"lucideChevronRight\"\n                              zSize=\"14\"\n                              class=\"transition-transform duration-200\"\n                              [class.rotate-90]=\"item.expanded\" />\n                            <span\n                              class=\"z-group-row-label\"\n                              z-tooltip\n                              [zContent]=\"(item.columnLabel ? item.columnLabel + ': ' : '') + item.label\">\n                              @if (item.columnLabel) {\n                                <span class=\"z-group-row-column-label\">{{ item.columnLabel }}:</span>\n                              }\n                              {{ item.label }}\n                            </span>\n                            @if (groupingConfig().showCount !== false) {\n                              <span class=\"z-group-row-count\">{{ item.count }}</span>\n                            }\n                            @if (item.loading) {\n                              <z-loading class=\"z-group-row-loading\" [zLoading]=\"true\" zSize=\"xs\" />\n                            }\n                          </button>\n                          @if (!isServerGrouping()) {\n                            <button\n                              type=\"button\"\n                              z-button\n                              zType=\"ghost\"\n                              zSize=\"sm\"\n                              zTypeIcon=\"lucideX\"\n                              zSizeIcon=\"14\"\n                              [zWave]=\"false\"\n                              z-tooltip\n                              [zContent]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                              [attr.aria-label]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                              [zAlwaysShow]=\"true\"\n                              zTooltipPosition=\"top\"\n                              class=\"z-group-row-remove\"\n                              (click)=\"removeGroupingColumn(item.columnId)\"></button>\n                          }\n                        </div>\n                      </td>\n                    }\n                  </tr>\n                }\n                @if (item.type === 'row') {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      rowTemplate;\n                      context: {\n                        $implicit: item.row,\n                        isGroupChild: item.isGroupChild,\n                        groupDepth: item.groupDepth,\n                      }\n                    \" />\n                }\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 [style.width.px]=\"renderedTableWidth()\">\n        <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n        <tfoot>\n          @for (footerGroup of orderedFooterGroups(); track footerGroup.id; let footerRowIndex = $index) {\n            @if (footerGroup | zTableFooterContent: zConfig().columns : footerRowIndex) {\n              <tr>\n                @for (footer of footerGroup.headers; track footer.id) {\n                  @if (\n                    canUseVirtualColumns() &&\n                    virtualLeftSpacerWidth() > 0 &&\n                    footer.column.id === firstVirtualCenterColumnId()\n                  ) {\n                    <th\n                      class=\"z-virtual-column-spacer z-virtual-footer-spacer pointer-events-none p-0\"\n                      [style.width.px]=\"virtualRenderedLeftSpacerWidth()\"></th>\n                  }\n                  @let rowSpan = footer | zTableSpan: zConfig().columns : 'footerRowSpan' : footerRowIndex;\n                  @let shouldRender =\n                    footer\n                      | zTableCellRender\n                        : footerGroup.headers\n                        : zConfig().columns\n                        : 'footer'\n                        : footerRowIndex\n                        : orderedFooterGroups();\n                  @let isVirtualColumnVisible =\n                    !canUseVirtualColumns() ||\n                    footer.column.getIsPinned() !== false ||\n                    virtualCenterColumnVisibilityMap()[footer.column.id];\n                  @if (rowSpan && shouldRender && isVirtualColumnVisible) {\n                    <th\n                      [attr.data-column-id]=\"footer.column.id\"\n                      [ngStyle]=\"\n                        footer.column\n                          | zTablePinningStyles\n                            : footer\n                            : 'footer'\n                            : table\n                            : zConfig().columns\n                            : columnResizing()\n                            : colDomWidthMap()\n                            : isColumnPinningActive\n                      \"\n                      [class]=\"\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerClass' : footerRowIndex) +\n                        ' ' +\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass' : footerRowIndex)\n                      \"\n                      [style]=\"\n                        footer.column.id | zTableColumnConfig: zConfig().columns : 'footerStyle' : footerRowIndex\n                      \"\n                      [class.z-sticky-left]=\"\n                        isColumnPinningActive && (footer | zTableCellPin: 'isLeftPinned' : zConfig().columns : 'footer')\n                      \"\n                      [class.z-sticky-right]=\"\n                        isColumnPinningActive &&\n                        (footer | zTableCellPin: 'isRightPinned' : zConfig().columns : 'footer')\n                      \"\n                      [class.z-sticky-left-last]=\"\n                        isColumnPinningActive &&\n                        (footer | zTableCellPin: 'isLastLeftPinned' : zConfig().columns : 'footer')\n                      \"\n                      [class.z-sticky-right-first]=\"\n                        isColumnPinningActive &&\n                        (footer | zTableCellPin: 'isFirstRightPinned' : zConfig().columns : 'footer')\n                      \"\n                      [class.z-sticky-right-last]=\"\n                        isColumnPinningActive &&\n                        (footer | zTableCellPin: 'isLastRightPinned' : zConfig().columns : 'footer')\n                      \"\n                      [class.z-at-left-edge]=\"footer | zTableCellOffset: orderedLeafColumns()\"\n                      [attr.rowspan]=\"rowSpan\"\n                      [attr.colspan]=\"\n                        footer | zTableSpan: zConfig().columns : 'footerColSpan' : footerRowIndex : footerGroup.headers\n                      \">\n                      @let configFooterContent =\n                        footer.column.id | zTableFooterRender: zConfig().columns : footerRowIndex;\n                      @if (configFooterContent !== undefined && configFooterContent !== '') {\n                        <ng-container *flexRender=\"configFooterContent; props: footer.getContext(); let footerContent\">\n                          <div\n                            class=\"flex w-full items-center\"\n                            [class.justify-center]=\"\n                              (footer.column.id\n                                | zTableColumnConfig: zConfig().columns : 'footerAlignClass' : footerRowIndex) ===\n                              'text-center'\n                            \"\n                            [class.justify-end]=\"\n                              (footer.column.id\n                                | zTableColumnConfig: zConfig().columns : 'footerAlignClass' : footerRowIndex) ===\n                              'text-right'\n                            \">\n                            @if (footerContent | zTableIsTemplateRef) {\n                              <!-- TemplateRef rendering -->\n                              <div\n                                class=\"z-template-content\"\n                                [class]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerContentClass' : footerRowIndex\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerContentStyle' : footerRowIndex\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]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerTooltip' : footerRowIndex\n                                \"\n                                [class]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerContentClass' : footerRowIndex\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerContentStyle' : footerRowIndex\n                                \" />\n                            } @else {\n                              <!-- Default/string rendering -->\n                              <span\n                                class=\"z-table-cell-text\"\n                                z-tooltip\n                                [zContent]=\"\n                                  (footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerTooltip' : footerRowIndex) ||\n                                  footerContent\n                                \"\n                                [class]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerContentClass' : footerRowIndex\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerContentStyle' : footerRowIndex\n                                \">\n                                {{ footerContent | translate }}\n                              </span>\n                            }\n                          </div>\n                        </ng-container>\n                      }\n                    </th>\n                  }\n                  @if (\n                    canUseVirtualColumns() &&\n                    virtualRightSpacerWidth() > 0 &&\n                    footer.column.id === lastVirtualCenterColumnId()\n                  ) {\n                    <th\n                      class=\"z-virtual-column-spacer z-virtual-footer-spacer pointer-events-none p-0\"\n                      [style.width.px]=\"virtualRenderedRightSpacerWidth()\"></th>\n                  }\n                }\n              </tr>\n            }\n          }\n        </tfoot>\n      </table>\n    </div>\n  }\n</div>\n\n<!-- Pagination -->\n@if (zConfig().pagination?.enabled !== false) {\n  <div class=\"mt-4 flex items-center justify-between gap-4\">\n    <div class=\"truncate text-sm text-gray-500\">\n      {{ 'i18n_z_ui_table_total_rows' | translate: { total: (paginationTotal() | zFormatNum) } }}\n    </div>\n    <z-pagination\n      [zTotal]=\"paginationTotal()\"\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 || isLoading() || isProcessing()\"\n      (zOnPageChange)=\"onPageChange($event)\" />\n  </div>\n}\n\n<!-- Floating Bulk Action Bar -->\n<ng-template #bulkBarTemplate>\n  @if (bulkBarConfig(); as config) {\n    <div class=\"z-bulk-action-bar-inner\" [class.z-leaving]=\"bulkBarClosing()\">\n      <div class=\"z-bulk-action-bar-count\">\n        {{ bulkBarContext()?.selectedRowIds?.length ?? 0 | zFormatNum }}\n        {{ config.selectedLabel ?? ('i18n_z_ui_table_selected' | translate) }}\n      </div>\n\n      <div class=\"z-bulk-action-bar-divider\"></div>\n\n      <div class=\"z-bulk-action-bar-actions\">\n        <div class=\"z-bulk-action-bar-buttons\">\n          @for (item of bulkBarItems(); track item.action.key) {\n            <button\n              type=\"button\"\n              z-button\n              zSize=\"sm\"\n              [zType]=\"item.buttonType\"\n              [zDisabled]=\"item.disabled\"\n              class=\"z-bulk-action-bar-button\"\n              [disabled]=\"item.disabled\"\n              (click)=\"onBulkActionClick(item.action)\">\n              @if (item.action.icon) {\n                <z-icon [zType]=\"item.action.icon\" [zSize]=\"item.action.iconSize ?? '14'\" />\n              }\n              @if (item.action.label) {\n                <span>{{ item.action.label | translate }}</span>\n              }\n            </button>\n          }\n        </div>\n\n        <z-dropdown-menu class=\"z-bulk-action-bar-menu\" [zItems]=\"bulkBarDropdownItems()\" zPosition=\"top-right\">\n          <button\n            type=\"button\"\n            z-button\n            zType=\"outline\"\n            zSize=\"sm\"\n            zTypeIcon=\"lucideEllipsis\"\n            class=\"z-bulk-action-bar-menu-trigger\"\n            [attr.aria-label]=\"'i18n_z_ui_table_bulk_actions' | translate\"></button>\n        </z-dropdown-menu>\n      </div>\n    </div>\n  }\n</ng-template>\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  zBodyClass=\"mx-0! px-0!\"\n  [zShadow]=\"true\"\n  [zOkText]=\"null\"\n  [zCancelText]=\"'i18n_z_ui_drawer_close' | translate\">\n  <div class=\"z-table-settings-drawer\">\n    <!-- Display Settings -->\n    <div class=\"mx-4 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          [zChecked]=\"showHorizontalBorder()\"\n          [zText]=\"'i18n_z_ui_table_horizontal_border' | translate\"\n          (zChange)=\"showHorizontalBorder.set(!showHorizontalBorder())\" />\n        <z-checkbox\n          [zChecked]=\"showVerticalBorder()\"\n          [zText]=\"'i18n_z_ui_table_vertical_border' | translate\"\n          (zChange)=\"showVerticalBorder.set(!showVerticalBorder())\" />\n        <z-checkbox\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    <!-- T\u1EA1m t\u1EAFt \u0111i\u1EC1u ki\u1EC7n: @if (zConfig().enableSettings) -->\n    <div class=\"mx-4 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        [cdkDropListAutoScrollDisabled]=\"true\"\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' && columnId !== 'rowDrag') {\n            @let column = table.getColumn(columnId);\n            @let isPinned = column?.getIsPinned();\n            @let isVisible = pendingVisibleColumns().includes(columnId);\n            @let isVisibilityDisabled = pendingColumnVisibilityDisabledMap()[columnId];\n            @let isGroupedColumn = groupingColumnMap()[columnId];\n            @let columnEnablePinningConfig = columnId | zTableColumnConfig: zConfig().columns : 'enablePinning';\n            @let canPin =\n              (columnEnablePinningConfig ?? zConfig().enableColumnPinning ?? true) && column?.getCanPin() !== false;\n            @if (!isPinned) {\n              <div\n                cdkDrag\n                [cdkDragDisabled]=\"isGroupedColumn\"\n                [cdkDragData]=\"columnId\"\n                cdkDragLockAxis=\"y\"\n                cdkDragPreviewContainer=\"global\"\n                cdkDragPreviewClass=\"z-drag-preview\"\n                class=\"z-drag-item border-border bg-card hover:border-primary flex cursor-default items-center gap-2 rounded-sm border px-2 py-1.5 text-sm\"\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\"\n                  [class.cursor-pointer]=\"!isGroupedColumn\"\n                  [class.cursor-default]=\"isGroupedColumn\"\n                  [class.opacity-40]=\"isGroupedColumn\" />\n\n                <!-- Visibility Checkbox -->\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isVisible\"\n                  [disabled]=\"isVisibilityDisabled\"\n                  (change)=\"onToggleColumnVisibility(columnId)\"\n                  (mousedown)=\"$event.stopPropagation()\"\n                  class=\"border-input h-4 w-4 shrink-0 cursor-default rounded-sm disabled:opacity-50\" />\n\n                <!-- Column Name -->\n                <span class=\"flex min-w-0 flex-1 flex-col\">\n                  <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                    {{ columnId | zTableColumnHeader: zConfig().columns | translate }}\n                  </span>\n                  @let parents = columnId | zTableColumnParents: zConfig().columns;\n                  @if (parents) {\n                    <span class=\"text-muted-foreground truncate text-[0.625rem]\">({{ parents | translate }})</span>\n                  }\n                </span>\n\n                <!-- Pin Buttons -->\n                @if (canPin) {\n                  <div class=\"flex shrink-0 items-center gap-0.5\" (mousedown)=\"$event.stopPropagation()\">\n                    <button\n                      type=\"button\"\n                      [disabled]=\"!isVisible || isGroupedColumn || !pinAvailabilityMap()[columnId]?.left\"\n                      (click)=\"onToggleColumnPin(columnId, 'left')\"\n                      class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded-sm 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 || isGroupedColumn || !pinAvailabilityMap()[columnId]?.right\"\n                      (click)=\"onToggleColumnPin(columnId, 'right')\"\n                      class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded-sm 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 ?? true) {\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 = pendingVisibleColumns().includes(columnId);\n                @let isVisibilityDisabled = pendingColumnVisibilityDisabledMap()[columnId];\n                @let isGroupedColumn = groupingColumnMap()[columnId];\n                <div\n                  class=\"border-border bg-muted/30 flex items-center gap-2 rounded-sm border px-2 py-1.5 text-sm\"\n                  [class.opacity-60]=\"!isVisible\">\n                  <!-- Pin Icon -->\n                  <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"text-primary shrink-0\" />\n\n                  <!-- Visibility Checkbox -->\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isVisible\"\n                    [disabled]=\"isVisibilityDisabled\"\n                    (change)=\"onToggleColumnVisibility(columnId)\"\n                    class=\"border-input h-4 w-4 shrink-0 cursor-default rounded-sm disabled:opacity-50\" />\n\n                  <!-- Column Name -->\n                  <span class=\"flex min-w-0 flex-1 flex-col\">\n                    <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                      {{ columnId | zTableColumnHeader: zConfig().columns | translate }}\n                    </span>\n                    @let pinnedParents = columnId | zTableColumnParents: zConfig().columns;\n                    @if (pinnedParents) {\n                      <span class=\"text-muted-foreground truncate text-[0.625rem]\">\n                        ({{ pinnedParents | translate }})\n                      </span>\n                    }\n                  </span>\n\n                  <!-- Position Badge -->\n                  <span\n                    class=\"bg-primary/10 text-primary shrink-0 rounded-sm px-1.5 py-0.5 text-[0.625rem] font-medium\">\n                    {{\n                      isPinned === 'start'\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                    [disabled]=\"isGroupedColumn\"\n                    (click)=\"onToggleColumnPin(columnId, isPinned === 'start' ? 'left' : 'right')\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground cursor-pointer rounded-sm p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                    title=\"Unpin\">\n                    <z-icon zType=\"lucideX\" zSize=\"12\" />\n                  </button>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      }\n    </div>\n  </div>\n</z-drawer>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;contain:inline-size;width:100%;max-width:100%;min-width:0;height:100%;overflow-x:visible;--scrollbar-track-thickness: 7px;--scrollbar-track-color: transparent;--scrollbar-thumb-shape: 3px;--z-shadow-left-right: -1.875rem;--z-shadow-left-width: 1.875rem;--z-shadow-left-opacity: 0;--z-shadow-right-left: -1.875rem;--z-shadow-right-width: 1.875rem;--z-shadow-right-opacity: 0;--z-sticky-left-border-color: transparent;--z-sticky-right-border-color: var(--border);--z-cell-selection-background: color-mix(in srgb, var(--primary) 12%, transparent);--z-cell-selection-background-opaque: color-mix(in srgb, var(--primary) 12%, var(--card))}.z-table-container{display:flex;flex-direction:column;position:relative;box-sizing:border-box;contain:inline-size;width:100%;max-width:100%;min-width:0;height:100%;overflow:hidden;border-radius:var(--radius-sm);border:thin solid var(--border);background-color:var(--card)}.z-table-container:focus{outline:none}.z-table-container.z-table-borderless{border:none;border-radius:0;box-shadow:none!important;background-color:transparent}.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}.z-table-container.z-hide-pinned-top-border tbody tr.z-pinned-top.z-shadow-bottom>td{border-bottom-color:var(--border)!important}.z-table-container.z-hide-pinned-bottom-border tbody.z-has-bottom-pinned td.z-at-bottom{border-bottom-color:transparent}table{width:fit-content;min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:.875rem}.z-table-container.z-column-resizing table,.z-table-toolbar{min-width:0}.z-table-toolbar .z-settings-btn{transition:all .15s ease}.z-table-toolbar .z-settings-btn:hover{border-color:var(--muted-foreground)}.z-table-filter-header{min-width:0}.z-table-filter-header button{flex:none}.z-table-filter-header-overflow-chip{animation:z-table-filter-chip-enter .16s ease}@media(prefers-reduced-motion:reduce){.z-table-filter-header-overflow-chip{animation:none}}@keyframes z-table-filter-chip-enter{0%{opacity:0;transform:translate(-.25rem)}to{opacity:1;transform:translate(0)}}::ng-deep .z-bulk-action-bar-overlay{position:fixed!important;top:auto;left:50%;bottom:0;transform:translate(-50%);max-width:calc(100vw - 2rem);margin-bottom:1rem;transform-origin:center bottom}.z-bulk-action-bar-inner{border:thin solid color-mix(in srgb,var(--border) 88%,transparent);border-radius:var(--radius-md);background:color-mix(in srgb,var(--card) 96%,var(--background));color:var(--foreground);box-shadow:0 1rem 2.5rem color-mix(in srgb,var(--foreground) 20%,transparent),0 .25rem .75rem color-mix(in srgb,var(--foreground) 12%,transparent),0 0 0 1px color-mix(in srgb,var(--background) 65%,transparent) inset;display:flex;align-items:center;gap:.5rem;width:max-content;min-height:2.25rem;max-width:calc(100vw - 2rem);padding:.5rem;overflow:hidden;transform-origin:center bottom;animation:z-bulk-action-bar-enter .18s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}.z-bulk-action-bar-inner.z-leaving{pointer-events:none;animation:z-bulk-action-bar-exit .14s ease-in forwards}.z-bulk-action-bar-count{flex:none;padding:0 .25rem;white-space:nowrap;font-size:.8125rem;font-weight:500;color:var(--foreground)}.z-bulk-action-bar-divider{width:1px;height:1.5rem;flex:none;background:color-mix(in srgb,var(--border) 88%,transparent)}.z-bulk-action-bar-actions,.z-bulk-action-bar-buttons{display:flex;align-items:center;gap:.5rem;min-width:0}.z-bulk-action-bar-button{flex:none}.z-bulk-action-bar-menu{display:none;flex:none}@media(max-width:48rem){.z-bulk-action-bar-inner{width:calc(100vw - 2rem);gap:.375rem}.z-bulk-action-bar-count{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}.z-bulk-action-bar-buttons{display:none}.z-bulk-action-bar-menu{display:block}}@keyframes z-bulk-action-bar-enter{0%{opacity:0;transform:translateY(.875rem)}to{opacity:1;transform:translateY(0)}}@keyframes z-bulk-action-bar-exit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(.875rem)}}@media(prefers-reduced-motion:reduce){.z-bulk-action-bar-inner{animation:none}}:host ::ng-deep .z-table-cell-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;min-width:0;-webkit-user-select:text;user-select:text}:host ::ng-deep .z-table-cell-text>*,:host ::ng-deep .z-table-cell-text *{display:inline-block;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}:host ::ng-deep .z-table-cell-content-trigger{display:inline-block;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.z-template-content{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.z-template-content>*{min-width:0;max-width:100%}.z-template-content>[class*=flex]{min-width:0;max-width:100%}.z-template-content>[class*=flex]>*{min-width:0;flex-shrink:1}.z-template-content>[class*=grid]{min-width:0;max-width:100%}.z-thead-wrapper{flex-shrink:0;background:var(--muted);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;position:relative;z-index:4}.z-thead-wrapper::-webkit-scrollbar{display:none}.z-thead-wrapper th{height:auto;padding:.5rem;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;width:100%;max-width:100%;min-width:0;min-height:6.25rem;display:flex;flex-direction:column;overflow:hidden}.z-tbody-scrollbar{flex:1;width:100%;max-width:100%;min-width:0;height:100%}.z-empty-state,.z-loading-state{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:6.25rem;height:100%;color:var(--muted-foreground);font-size:.875rem;animation:z-fade-in .2s ease-out}.z-tbody-scrollbar,.z-tbody-scrollbar table{animation:z-fade-in .2s ease-out}@keyframes z-fade-in{0%{opacity:0;transform:translateY(.25rem)}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:.5rem 12px;height:var(--z-row-height, 2.375rem);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-color:transparent}.z-tbody-wrapper tbody.z-has-bottom-pinned td.z-at-bottom{border-bottom-color:var(--border)}.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:.75rem}.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:.5rem 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;box-sizing:border-box;width:100%}.z-virtual-row,.z-virtual-flow{position:absolute;top:0;left:0;width:100%}.z-virtual-row-flow{position:relative}.z-virtual-row-fixed{overflow:hidden}.z-virtual-row-group-header{z-index:2}.z-virtual-row-sticky-group{position:sticky}.z-virtual-row-sticky-group-shadow{box-shadow:0 1px 3px #00000014}.z-virtual-row-sticky-group-shadow:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d}tr.z-group-row-sticky{position:sticky;z-index:2}tr.z-group-row-sticky>td{background:var(--card)}tr.z-group-row-sticky-shadow{box-shadow:0 1px 3px #00000014}tr.z-group-row-sticky-shadow:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d}tr.z-child-row td:first-child{border-left:.125rem solid var(--primary)!important;padding-left:.75rem!important}tbody tr.z-context-menu-active,tbody tr.z-context-menu-active td{background-color:var(--muted)!important}tbody tr.z-selected,tbody tr.z-selected td{background-color:color-mix(in srgb,var(--primary) 15%,var(--background))!important}tbody tr.z-selected:hover,tbody tr.z-selected:hover td{background-color:color-mix(in srgb,var(--primary) 20%,var(--background))!important}tbody tr.z-indeterminate-selected,tbody tr.z-indeterminate-selected td{background-color:color-mix(in srgb,var(--primary) 10%,var(--background))!important}tbody tr.z-indeterminate-selected:hover,tbody tr.z-indeterminate-selected:hover td{background-color:color-mix(in srgb,var(--primary) 15%,var(--background))!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{background-color:var(--muted)!important}tbody tr.z-pinned-bottom-last>td{border-bottom-color:transparent!important}tbody tr.z-pinned-bottom-first>td{border-top:thin solid var(--border)}:host .z-tbody-wrapper tbody tr:not(.z-pinned-top):not(.z-pinned-bottom):has(+tr.z-pinned-bottom)>td{border-bottom-color:transparent}tr.z-expanded-row>td{border-left:.125rem solid var(--primary);background-color:var(--background)!important}.z-expanded-row-content{transform-origin:top center}@keyframes z-expanded-row-reveal{0%{clip-path:inset(0 0 100% 0);translate:0 -.375rem;opacity:0}to{clip-path:inset(0 0 0 0);translate:none;opacity:1}}@keyframes z-expanded-row-fade-in{0%{opacity:0}to{opacity:1}}tr.z-expanded-row-enter{animation:z-expanded-row-fade-in .18s ease-out}tr.z-expanded-row-enter .z-expanded-row-content{animation:z-expanded-row-reveal .18s ease-out}@keyframes z-child-row-slide-in{0%{translate:0 -.375rem;opacity:0}to{translate:none;opacity:1}}tr.z-child-row.z-row-enter,tr.z-group-child-row.z-row-enter{animation:z-child-row-slide-in .18s ease-out}@media(prefers-reduced-motion:reduce){tr.z-expanded-row-enter,tr.z-child-row.z-row-enter,tr.z-group-child-row.z-row-enter,tr.z-expanded-row-enter .z-expanded-row-content,tr.z-child-row.z-row-enter .z-expanded-row-content,tr.z-group-child-row.z-row-enter .z-expanded-row-content{animation-duration:1ms}}.z-sub-table-container{padding:.75rem 1rem .75rem 3rem;background-color:var(--background)}.z-table-content-trigger{display:block;width:100%;min-width:0;min-height:1.5rem;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;line-height:1.5rem;text-align:inherit;outline:0;cursor:text}.z-table-content-trigger:hover{color:var(--primary)}.z-content-edit-active{position:relative;z-index:2}td:has(>.z-table-content-trigger:focus-visible){position:relative;z-index:2}td:has(>.z-table-content-trigger:focus-visible):after{position:absolute;z-index:3;inset:0;border:1px solid var(--primary);content:\"\";pointer-events:none}td.z-cell-selectable{-webkit-user-select:none;user-select:none}td.z-cell-range-selected{position:relative;isolation:isolate}td.z-cell-range-selected:before{position:absolute;z-index:0;box-sizing:border-box;top:var(--z-cell-range-top, 0);right:var(--z-cell-range-right, 0);bottom:var(--z-cell-range-bottom, 0);left:var(--z-cell-range-left, 0);background-color:var(--z-cell-selection-background);content:\"\";pointer-events:none}td.z-cell-range-selected>*{position:relative;z-index:1}td.z-cell-range-top:before{border-top:1px solid var(--primary)}td.z-cell-range-right:before{border-right:1px solid var(--primary)}td.z-cell-range-bottom:before{border-bottom:1px solid var(--primary)}td.z-cell-range-left:before{border-left:1px solid var(--primary)}td.z-cell-active{position:relative;z-index:3;background-color:var(--z-cell-selection-background)!important}td.z-cell-active:after{position:absolute;z-index:4;inset:0;border:1px solid var(--primary);content:\"\";pointer-events:none}td.z-content-edit-active{-webkit-user-select:text;user-select:text}td.z-cell-active.z-row-hover,td.z-content-edit-active.z-row-hover{background-color:var(--card)!important}thead th{position:relative}thead th .z-resizer{position:absolute;right:0;top:0;height:100%;width:.5rem;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:.1875rem;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:.1875rem}thead th .z-resizer.z-is-resizing:after{opacity:1;background:var(--primary);width:.1875rem}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;border-right:thin solid var(--z-sticky-left-border-color)}.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:var(--z-shadow-left-right);width:var(--z-shadow-left-width);pointer-events:none;box-shadow:inset 10px 0 8px -8px #0000001a;z-index:10;opacity:var(--z-shadow-left-opacity)}:host-context(.dark) .z-thead-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-thead-wrapper td.z-sticky-left-last:after,:host-context(.dark) .z-tbody-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-tbody-wrapper td.z-sticky-left-last:after,:host-context(.dark) .z-tfoot-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-tfoot-wrapper td.z-sticky-left-last:after{box-shadow:inset 10px 0 10px -8px #0000004d}.z-thead-wrapper.z-scroll-left,.z-tbody-wrapper.z-scroll-left,.z-tfoot-wrapper.z-scroll-left{--z-shadow-left-opacity: 1}.z-thead-wrapper.z-scroll-left:where(.dark,.dark *),.z-tbody-wrapper.z-scroll-left:where(.dark,.dark *),.z-tfoot-wrapper.z-scroll-left:where(.dark,.dark *){--z-sticky-left-border-color: var(--border)}.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;border-left:thin solid var(--z-sticky-right-border-color)}.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:var(--z-shadow-right-left);width:var(--z-shadow-right-width);pointer-events:none;box-shadow:inset -10px 0 8px -8px #0000001a;z-index:10;opacity:var(--z-shadow-right-opacity)}:host-context(.dark) .z-thead-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-thead-wrapper td.z-sticky-right-first:before,:host-context(.dark) .z-tbody-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-tbody-wrapper td.z-sticky-right-first:before,:host-context(.dark) .z-tfoot-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-tfoot-wrapper td.z-sticky-right-first:before{box-shadow:inset -10px 0 10px -8px #0000004d}.z-thead-wrapper.z-scroll-right,.z-tbody-wrapper.z-scroll-right,.z-tfoot-wrapper.z-scroll-right{--z-shadow-right-opacity: 1}.z-thead-wrapper.z-scroll-right:not(:where(.dark,.dark *)),.z-tbody-wrapper.z-scroll-right:not(:where(.dark,.dark *)),.z-tfoot-wrapper.z-scroll-right:not(:where(.dark,.dark *)){--z-sticky-right-border-color: transparent}.z-pinning-overflow{--z-shadow-left-opacity: 0 !important;--z-shadow-right-opacity: 0 !important;--z-sticky-left-border-color: transparent !important;--z-sticky-right-border-color: transparent !important}.z-pinning-overflow .z-sticky-left,.z-pinning-overflow .z-sticky-right{position:relative!important;right:auto!important;left:auto!important}.z-pinning-overflow .z-sticky-left-last:after,.z-pinning-overflow .z-sticky-right-first:before,.z-pinning-overflow .z-sticky-right-last:after{display:none!important}.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:-1.875rem;width:1.875rem;background:var(--muted);pointer-events:none}.z-tfoot-wrapper{flex-shrink:0;width:100%;max-width:100%;min-width:0;background:var(--muted);overflow-x:hidden;overflow-y:hidden;touch-action:pan-y pinch-zoom}.z-tfoot-wrapper th{height:auto;padding:.5rem 12px;text-align:left;vertical-align:middle;font-weight:500;font-size:.75rem;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:.125rem 4px;border-radius:var(--radius-xs);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:focus-visible,.z-row-pin-trigger.z-popover-open{background-color:color-mix(in srgb,var(--foreground) 8%,transparent);color:var(--foreground)}.z-row-pin-trigger:active{background-color:color-mix(in srgb,var(--foreground) 12%,transparent)}.z-row-pin-trigger.text-primary{color:var(--primary)}.z-row-pin-unpin-trigger{color:var(--muted-foreground);outline:none}.z-row-pin-unpin-trigger:hover{color:var(--destructive);background-color:color-mix(in srgb,var(--destructive) 10%,transparent)}.z-row-pin-unpin-trigger:focus,.z-row-pin-unpin-trigger:focus-visible{color:var(--muted-foreground);background-color:transparent;outline:none;box-shadow:none}.z-row-pin-unpin-trigger:active{color:var(--destructive);background-color:color-mix(in srgb,var(--destructive) 14%,transparent)}.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:var(--radius-sm);min-width:0;overflow:hidden;flex-shrink:1}th .z-header-text-wrapper.z-has-options:hover,th .z-header-text-wrapper.z-has-options:focus-visible,th .z-header-text-wrapper.z-has-options.z-popover-open{background-color:color-mix(in srgb,var(--foreground) 8%,transparent);outline:none}th .z-header-text-wrapper.z-has-options:active{background-color:color-mix(in srgb,var(--foreground) 12%,transparent)}.z-column-menu-item{position:relative;z-index:1;line-height:1.25rem;transition:background-color .15s ease,color .15s ease}.z-column-menu-item:focus-visible,.z-column-menu-item.z-popover-open{background-color:var(--muted);outline:none}.z-table-drag-preview{box-sizing:border-box;border-radius:var(--radius-md);background-color:var(--card);border:1px solid var(--primary);box-shadow:0 10px 24px #00000029;overflow:hidden;z-index:10000!important;pointer-events:none}.z-table-drag-preview:where(.dark,.dark *){box-shadow:0 5px 20px #00000080}.z-table-drag-preview-row{border:0;border-radius:var(--radius-xs);background-color:var(--background);box-shadow:0 8px 20px #0000001f,inset 0 0 0 1px color-mix(in srgb,var(--primary) 45%,var(--border))}.z-table-drag-preview-row table,.z-table-drag-preview-row tbody,.z-table-drag-preview-row tr{height:100%}.z-table-drag-preview-row td{vertical-align:middle!important;background-color:var(--background)}.z-table-drag-preview-virtual{border:0;border-radius:0;box-shadow:0 8px 20px #0000001f,inset 0 0 0 1px color-mix(in srgb,var(--primary) 45%,var(--border))}.z-table-drag-source{display:none!important}.z-virtual-row.z-table-drag-source{display:block!important;pointer-events:none;outline:1px solid var(--border);outline-offset:-1px}.z-virtual-row.z-table-drag-source td{color:color-mix(in srgb,var(--foreground) 45%,transparent);border-color:var(--border)!important;background-color:var(--card)!important}.z-virtual-row.z-table-drag-source td>*{opacity:.45}[data-z-table-drag-handle]{touch-action:none;-webkit-user-select:none;user-select:none}.z-column-drop-list{min-height:3.125rem;overscroll-behavior:contain}.cdk-drag-preview.z-drag-preview,.cdk-drag-placeholder.z-drag-item{border-radius:var(--radius-sm)}.z-table-drag-placeholder{width:100%;min-height:2.625rem;box-sizing:border-box;border:2px dashed var(--primary);border-radius:0;background-color:color-mix(in srgb,var(--primary) 10%,var(--background));pointer-events:none}.z-table-drag-placeholder-row>td{padding:0!important;border:0!important;background:transparent!important}.z-table-drag-placeholder-row .z-table-drag-placeholder{border-radius:0;background-color:color-mix(in srgb,var(--primary) 10%,transparent)}.z-table-drag-placeholder-virtual{position:absolute;top:0;left:0;z-index:20;border-radius:0}.z-tbody-wrapper tr.z-group-row td{background:var(--card);border-top:none;border-bottom:1px solid var(--border)}.z-virtual-row:not(.z-virtual-row-flow) tr.z-group-row td{background:var(--card);border-top:none;border-bottom:none}.z-group-row-sticky-wrapper{display:inline-flex;align-items:center;translate:var(--z-scroll-x, 0px) 0}.z-table-container:not(.z-hide-horizontal-border) .z-virtual-row:not(.z-virtual-row-flow):after,.z-table-container:not(.z-hide-horizontal-border) .z-virtual-row-flow.z-virtual-row-group-header:after{content:\"\";position:absolute;right:0;bottom:0;left:0;z-index:3;height:1px;background:var(--border);pointer-events:none}.z-tbody-wrapper tr.z-group-child-row td.z-at-left-edge,.z-virtual-row tr.z-group-child-row td.z-at-left-edge{border-left:2px solid var(--primary)!important;padding-left:var(--z-group-content-indent, .75rem)}.z-group-row-trigger{display:inline-flex;min-height:2rem;max-width:100%;align-items:center;gap:.5rem;padding:.25rem .5rem .25rem .75rem;color:var(--primary);font-size:.8125rem;font-weight:600;vertical-align:middle;cursor:pointer}.z-group-row-remove{margin-left:.125rem;color:var(--muted-foreground);vertical-align:middle}.z-group-row-remove:hover,.z-group-row-remove:focus-visible{color:var(--destructive);background:color-mix(in srgb,var(--destructive) 10%,transparent);outline:none}.z-group-row-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.z-group-row-column-label{color:color-mix(in srgb,var(--primary) 65%,var(--foreground));font-weight:500;margin-right:.25rem}.z-group-row-count{display:inline-flex;min-width:1.25rem;height:1.25rem;align-items:center;justify-content:center;padding:0 .375rem;border-radius:var(--radius-pill);background:var(--primary);color:var(--primary-foreground);font-size:.6875rem;font-weight:600}.z-group-row-loading{display:inline-flex;align-items:center;margin-left:.25rem}.z-group-row-has-totals td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.z-group-row-has-totals .z-group-row-label-cell{position:sticky;left:0;z-index:2;background:var(--card)}.z-group-row-has-totals .z-group-row-label-cell .z-group-row-sticky-wrapper{max-width:100%;translate:none}.z-group-row-total{display:inline-block;max-width:100%;color:var(--foreground);font-size:.8125rem;font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.z-group-row-total-cell{text-align:right}:host .z-tbody-wrapper td.z-sticky-right-first.z-cell-range-selected:before,:host .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-selected:before{position:absolute!important;z-index:0!important;box-sizing:border-box!important;top:var(--z-cell-range-top, 0)!important;right:var(--z-cell-range-right, 0)!important;bottom:var(--z-cell-range-bottom, 0)!important;left:var(--z-cell-range-left, 0)!important;width:auto!important;background-color:var(--z-cell-selection-background-opaque)!important;box-shadow:none!important;content:\"\"!important;pointer-events:none!important;opacity:1!important}:host .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-selected:after{display:none!important}:host .z-tbody-wrapper td.z-sticky-right-first.z-cell-range-top:before,:host .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-top:before{border-top:1px solid var(--primary)}:host .z-tbody-wrapper td.z-sticky-right-first.z-cell-range-right:before,:host .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-right:before{border-right:1px solid var(--primary)}:host .z-tbody-wrapper td.z-sticky-right-first.z-cell-range-bottom:before,:host .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-bottom:before{border-bottom:1px solid var(--primary)}:host .z-tbody-wrapper td.z-sticky-right-first.z-cell-range-left:before,:host .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-left:before{border-left:1px solid var(--primary)}:host-context(.z-table-pointer-dragging) .z-tbody-wrapper td.z-sticky-right-first.z-cell-range-selected:before,:host-context(.z-table-pointer-dragging) .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-selected:before{background-color:transparent!important}:host td.z-cell-range-selected:before{position:absolute;z-index:0;box-sizing:border-box;top:var(--z-cell-range-top, 0);right:var(--z-cell-range-right, 0);bottom:var(--z-cell-range-bottom, 0);left:var(--z-cell-range-left, 0);background-color:var(--z-cell-selection-background);box-shadow:none;content:\"\";pointer-events:none;opacity:1}:host td.z-cell-range-top:before{border-top:1px solid var(--primary)}:host td.z-cell-range-right:before{border-right:1px solid var(--primary)}:host td.z-cell-range-bottom:before{border-bottom:1px solid var(--primary)}:host td.z-cell-range-left:before{border-left:1px solid var(--primary)}:host-context(.z-table-pointer-dragging) .z-tbody-wrapper td{pointer-events:none}:host-context(.z-table-pointer-dragging) td.z-row-hover{background-color:var(--background)!important}:host td.z-cell-active,:host td.z-cell-active.z-row-hover{background-color:var(--z-cell-selection-background)!important}:host td.z-content-edit-active.z-row-hover{background-color:var(--card)!important}:host tr.z-pinned-top td.z-cell-active,:host tr.z-pinned-top td.z-cell-active.z-row-hover,:host tr.z-pinned-bottom td.z-cell-active,:host tr.z-pinned-bottom td.z-cell-active.z-row-hover,:host td.z-cell-active.z-sticky-left,:host td.z-cell-active.z-sticky-left.z-row-hover,:host td.z-cell-active.z-sticky-right,:host td.z-cell-active.z-sticky-right.z-row-hover{background-color:var(--z-cell-selection-background-opaque)!important}:host tr.z-pinned-top td.z-cell-range-selected,:host tr.z-pinned-bottom td.z-cell-range-selected,:host td.z-cell-range-selected.z-sticky-left,:host td.z-cell-range-selected.z-sticky-right{background-color:var(--card)}:host tr.z-pinned-top td.z-cell-range-selected:before,:host tr.z-pinned-bottom td.z-cell-range-selected:before,:host td.z-cell-range-selected.z-sticky-left:before,:host td.z-cell-range-selected.z-sticky-right:before{background-color:var(--z-cell-selection-background-opaque)}:host-context(.z-table-pointer-dragging) td.z-cell-range-selected,:host-context(.z-table-pointer-dragging) td.z-cell-range-selected.z-row-hover,:host-context(.z-table-pointer-dragging) td.z-cell-active,:host-context(.z-table-pointer-dragging) td.z-cell-active.z-row-hover{background-color:var(--card)!important}:host-context(.z-table-pointer-dragging) td.z-cell-range-selected:before{background-color:transparent}:host .z-tbody-wrapper tbody tr.z-group-child-row:has(+tr.z-group-row)>td.z-at-bottom{border-bottom-color:var(--border)}:host .z-virtual-row:has(tr.z-group-child-row):has(+.z-virtual-row tr.z-group-row) tr.z-group-child-row>td.z-at-bottom{border-bottom-color:var(--border)}.z-thead-wrapper th.z-virtual-column-spacer,.z-tfoot-wrapper th.z-virtual-column-spacer{box-sizing:border-box;padding:0!important;background:var(--muted);border-left:thin solid var(--border)}.z-thead-wrapper th.z-virtual-header-spacer{border-bottom:thin solid var(--border)}.z-tfoot-wrapper th.z-virtual-footer-spacer{border-top:thin solid var(--border)}.z-tbody-wrapper td.z-virtual-column-spacer{box-sizing:border-box;height:auto;padding:0!important;background:var(--card);border-left:thin solid var(--border);border-bottom:thin solid var(--border)}.z-tbody-wrapper tr:hover td.z-virtual-column-spacer{background-color:var(--muted)}.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:var(--radius-sm);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 .125rem .125rem 0;transform:translate(-50%,-60%) rotate(45deg)}.z-table-settings-drawer input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}.z-virtual-pinned-top{position:sticky;top:0;left:0;z-index:3;width:100%}.z-virtual-pinned-bottom{position:sticky;bottom:0;left:0;z-index:3;width:100%}\n"] }]
+                    }, exportAs: 'zTable', template: "<!-- Toolbar: Search & Settings -->\n@if (isSearchEnabled() || zConfig().enableSettings) {\n  <div class=\"z-table-toolbar mb-2 flex items-center justify-between gap-4\">\n    <!-- Search -->\n    @if (isSearchEnabled()) {\n      @let config = searchConfig();\n      <z-input\n        [class]=\"config?.width ?? 'w-64'\"\n        [zSize]=\"config?.size ?? 'sm'\"\n        [zPlaceholder]=\"config?.placeholder ?? 'i18n_z_ui_table_search' | translate\"\n        [zSearch]=\"true\"\n        [zDebounce]=\"config?.debounceTime ?? 300\"\n        (zOnSearch)=\"onSearchChange($event)\" />\n    } @else {\n      <div></div>\n    }\n\n    <!-- Settings Button -->\n    @if (zConfig().enableSettings) {\n      <z-button zType=\"outline\" zSize=\"sm\" zTypeIcon=\"lucideSettings\" (click)=\"openSettingsDrawer()\">\n        {{ 'i18n_z_ui_table_settings' | translate }}\n      </z-button>\n    }\n  </div>\n}\n\n@if (zConfig().enableFilterHeader && appliedFilterChips().length > 0) {\n  <div class=\"z-table-filter-header mb-2 flex min-w-0 items-center gap-2\">\n    <div class=\"flex min-w-0 flex-1 flex-wrap items-center gap-1.5\">\n      @for (chip of visibleAppliedFilterChips(); track chip.id) {\n        <span\n          class=\"border-border bg-muted/60 text-foreground inline-flex max-w-80 min-w-0 shrink-0 items-center gap-1 rounded-sm border px-2 py-1 text-[0.8125rem] shadow-xs\">\n          <span class=\"font-medium whitespace-nowrap\">{{ chip.label }}</span>\n          <span class=\"text-muted-foreground\">:</span>\n          <span class=\"truncate\" z-tooltip [zContent]=\"chip.value\" zTooltipTrigger=\"hover\" zTooltipPosition=\"top\">\n            {{ chip.value }}\n          </span>\n          <button\n            type=\"button\"\n            class=\"hover:bg-destructive/10 hover:text-destructive focus-visible:ring-ring -mr-1 inline-flex size-5 cursor-pointer items-center justify-center rounded-sm outline-none focus-visible:ring-2\"\n            [attr.aria-label]=\"'i18n_z_ui_table_filter_remove' | translate\"\n            (click)=\"clearAppliedFilterChip(chip)\">\n            <z-icon zType=\"lucideX\" zSize=\"12\" />\n          </button>\n        </span>\n      }\n      @if (hiddenAppliedFilterChipCount() > 0 && isFilterHeaderExpanded()) {\n        @for (chip of overflowAppliedFilterChips(); track chip.id) {\n          <span\n            class=\"z-table-filter-header-overflow-chip border-border bg-muted/60 text-foreground inline-flex max-w-80 min-w-0 shrink-0 items-center gap-1 rounded-sm border px-2 py-1 text-[0.8125rem] shadow-xs\"\n            [attr.aria-hidden]=\"!isFilterHeaderExpanded()\">\n            <span class=\"font-medium whitespace-nowrap\">{{ chip.label }}</span>\n            <span class=\"text-muted-foreground\">:</span>\n            <span class=\"truncate\" z-tooltip [zContent]=\"chip.value\" zTooltipTrigger=\"hover\" zTooltipPosition=\"top\">\n              {{ chip.value }}\n            </span>\n            <button\n              type=\"button\"\n              class=\"hover:bg-destructive/10 hover:text-destructive focus-visible:ring-ring -mr-1 inline-flex size-5 cursor-pointer items-center justify-center rounded-sm outline-none focus-visible:ring-2\"\n              [attr.aria-label]=\"'i18n_z_ui_table_filter_remove' | translate\"\n              (click)=\"clearAppliedFilterChip(chip)\">\n              <z-icon zType=\"lucideX\" zSize=\"12\" />\n            </button>\n          </span>\n        }\n      }\n      @if (hiddenAppliedFilterChipCount() > 0) {\n        <button\n          type=\"button\"\n          class=\"text-primary hover:bg-primary/10 focus-visible:ring-ring inline-flex h-7 cursor-pointer items-center rounded-sm px-2 text-xs font-medium outline-none focus-visible:ring-2\"\n          (click)=\"toggleFilterHeaderExpanded()\">\n          {{\n            isFilterHeaderExpanded()\n              ? ('i18n_z_ui_table_show_less' | translate)\n              : ('i18n_z_ui_table_show_more' | translate: { count: hiddenAppliedFilterChipCount() })\n          }}\n        </button>\n      }\n      <button\n        type=\"button\"\n        class=\"bg-destructive/10 text-destructive hover:bg-destructive/20 dark:bg-destructive/15 dark:text-destructive-foreground dark:hover:bg-destructive/25 focus-visible:ring-destructive inline-flex h-7 cursor-pointer items-center gap-1 rounded-sm px-2 text-xs font-medium shadow-xs outline-none focus-visible:ring-2\"\n        (click)=\"clearAppliedFilters()\">\n        <z-icon zType=\"lucideX\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_clear_filter' | translate }}</span>\n      </button>\n    </div>\n  </div>\n}\n\n<div\n  #tableContainer\n  [class]=\"classTable()\"\n  [ngStyle]=\"columnSizeVars()\"\n  [class.z-pinning-overflow]=\"!isPinnedLayoutWithinContainer()\"\n  [class.z-hide-horizontal-border]=\"!showHorizontalBorder()\"\n  [class.z-hide-vertical-border]=\"!showVerticalBorder()\"\n  [class.z-hide-pinned-top-border]=\"hasScrollTop()\"\n  [class.z-hide-pinned-bottom-border]=\"hasScrollBottom()\"\n  [style.width]=\"zConfig().width\"\n  [style.height]=\"zConfig().height\"\n  [style.max-height]=\"zConfig().maxHeight\"\n  [style.min-height]=\"zConfig().minHeight\"\n  [attr.tabindex]=\"canUseContentRowInsert() || canUseCellSelection() ? 0 : null\"\n  (keydown)=\"onContentTableKeydown($event)\">\n  @let isColumnPinningActive = isPinnedLayoutWithinContainer();\n  <ng-template #contentRowMenuContent>\n    <div class=\"flex min-w-36 flex-col gap-0.5 p-1\">\n      @if (contentRowMenu()?.columnId) {\n        <button\n          type=\"button\"\n          class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"copyContentCell()\">\n          <z-icon zType=\"lucideCopy\" zSize=\"12\" />\n          <span>{{ 'i18n_z_ui_table_copy_cell' | translate }}</span>\n        </button>\n        <div class=\"border-border my-0 border-t\"></div>\n      }\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none\"\n        (click)=\"copyContentRows()\">\n        <z-icon zType=\"lucideCopy\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_copy_row' | translate }}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none disabled:pointer-events-none disabled:opacity-40\"\n        [disabled]=\"contentRowClipboard().length === 0\"\n        (click)=\"pasteContentRows('below')\">\n        <z-icon zType=\"lucideClipboardPaste\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_paste_row_below' | translate }}</span>\n      </button>\n      <div class=\"border-border my-0 border-t\"></div>\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none disabled:pointer-events-none disabled:opacity-40\"\n        [disabled]=\"!canMoveContentRowUp()\"\n        (click)=\"moveContentRow('up')\">\n        <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_move_row_up' | translate }}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none disabled:pointer-events-none disabled:opacity-40\"\n        [disabled]=\"!canMoveContentRowDown()\"\n        (click)=\"moveContentRow('down')\">\n        <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_move_row_down' | translate }}</span>\n      </button>\n      <div class=\"border-border my-0 border-t\"></div>\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none\"\n        (click)=\"insertContentRow('above')\">\n        <z-icon zType=\"lucideArrowUpToLine\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_insert_row_above' | translate }}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none\"\n        (click)=\"insertContentRow('below')\">\n        <z-icon zType=\"lucideArrowDownToLine\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_insert_row_below' | translate }}</span>\n      </button>\n      <div class=\"border-border my-0 border-t\"></div>\n      <button\n        type=\"button\"\n        class=\"text-destructive hover:bg-destructive/10 focus:bg-destructive/10 flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none\"\n        (click)=\"deleteContentRows()\">\n        <z-icon zType=\"lucideTrash2\" zSize=\"12\" />\n        <span>\n          {{\n            contentRowDeleteCount() > 1\n              ? ('i18n_z_ui_table_delete_selected_rows' | translate)\n              : ('i18n_z_ui_table_delete_row' | translate)\n          }}\n        </span>\n      </button>\n    </div>\n  </ng-template>\n\n  <ng-template #cellMenuContent>\n    <div class=\"flex min-w-36 flex-col gap-0.5 p-1\">\n      <button\n        type=\"button\"\n        class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none disabled:pointer-events-none disabled:opacity-40\"\n        [disabled]=\"!canCopyCellMenuSelection()\"\n        (click)=\"copySelectedCells(false)\">\n        <z-icon zType=\"lucideCopy\" zSize=\"12\" />\n        <span>{{ 'i18n_z_ui_table_copy_cell' | translate }}</span>\n      </button>\n      @if (cellSelectionOptions().copyWithHeaders) {\n        <button\n          type=\"button\"\n          class=\"text-foreground hover:bg-muted focus:bg-muted flex min-h-6 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-[0.6875rem] outline-none disabled:pointer-events-none disabled:opacity-40\"\n          [disabled]=\"!canCopyCellMenuSelection()\"\n          (click)=\"copySelectedCells(true)\">\n          <z-icon zType=\"lucideCopy\" zSize=\"12\" />\n          <span>{{ 'i18n_z_ui_table_copy_cell_with_headers' | translate }}</span>\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <div\n    class=\"pointer-events-none fixed size-px opacity-0\"\n    z-popover\n    [zPopoverContent]=\"contentRowMenuContent\"\n    zTrigger=\"manual\"\n    zPosition=\"bottom-left\"\n    zClass=\"z-table-content-row-menu\"\n    [zOffset]=\"0\"\n    [zManualClose]=\"true\"\n    [zScrollClose]=\"true\"\n    [style.left.px]=\"contentRowMenu()?.left ?? -9999\"\n    [style.top.px]=\"contentRowMenu()?.top ?? -9999\"\n    (zControl)=\"setContentRowMenuControl($event)\"\n    (zHide)=\"clearContentRowMenu()\"></div>\n\n  <div\n    class=\"pointer-events-none fixed size-px opacity-0\"\n    z-popover\n    [zPopoverContent]=\"cellMenuContent\"\n    zTrigger=\"manual\"\n    zPosition=\"bottom-left\"\n    zClass=\"z-table-cell-menu\"\n    [zOffset]=\"0\"\n    [zManualClose]=\"true\"\n    [zScrollClose]=\"true\"\n    [style.left.px]=\"cellMenu()?.left ?? -9999\"\n    [style.top.px]=\"cellMenu()?.top ?? -9999\"\n    (zControl)=\"setCellMenuControl($event)\"\n    (zHide)=\"clearCellMenu()\"></div>\n\n  <!-- Shared colgroup template -->\n  <ng-template #colGroupTpl>\n    <colgroup>\n      @if (canUseVirtualColumns()) {\n        @for (column of leftLeafColumns(); track column.id) {\n          @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n          <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n        @if (virtualLeftSpacerWidth() > 0) {\n          <col [style.width.px]=\"virtualRenderedLeftSpacerWidth()\" />\n        }\n        @for (column of virtualCenterColumns(); track column.id) {\n          @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n          <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n        @if (virtualRightSpacerWidth() > 0) {\n          <col [style.width.px]=\"virtualRenderedRightSpacerWidth()\" />\n        }\n        @for (column of rightLeafColumns(); track column.id) {\n          @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n          <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n        }\n      } @else {\n        @for (column of orderedLeafColumns(); track column.id) {\n          @if (column.getIsVisible()) {\n            @let customWidth = column.id | zTableColumnConfig: zConfig().columns : 'width';\n            <col [style.width]=\"customWidth || 'calc(var(--col-' + column.id + '-size) * 1px)'\" />\n          }\n        }\n      }\n    </colgroup>\n  </ng-template>\n\n  <!-- Header table -->\n  <div\n    class=\"z-thead-wrapper\"\n    [class.z-shadow-header]=\"shouldHeaderShowShadow()\"\n    [class.z-scroll-left]=\"hasScrollLeft()\"\n    [class.z-scroll-right]=\"hasScrollRight()\"\n    (wheel)=\"onTheadWheel($event)\"\n    #theadWrapper>\n    <table [style.width.px]=\"renderedTableWidth()\">\n      <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n      <thead>\n        @if (canUseVirtualColumns()) {\n          <tr>\n            @for (header of leftHeaderRow(); track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: leftHeaderRow() : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [ngStyle]=\"\n                    header.column\n                      | zTablePinningStyles\n                        : header\n                        : 'header'\n                        : table\n                        : zConfig().columns\n                        : columnResizing()\n                        : colDomWidthMap()\n                        : isColumnPinningActive\n                  \"\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]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isLeftPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-right]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isRightPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-left-last]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-right-first]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-right-last]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isLastRightPinned' : zConfig().columns)\n                  \"\n                  [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                  [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\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 === 'rowDrag') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                    </div>\n                  } @else if (header.column.id === 'select') {\n                    <div\n                      class=\"flex items-center\"\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                      <z-checkbox\n                        [zChecked]=\"canUseRowSelection() && table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"\n                          canUseRowSelection() && table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\n                        \"\n                        [zDisabled]=\"!canUseRowSelection()\"\n                        (zChange)=\"canUseRowSelection() && table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <div\n                      class=\"flex items-center\"\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                      <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-sm\">\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                    <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                      @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 ?? true;\n                      <ng-template #colOptionsPopoverContent>\n                        <div zHoverGlide zHoverGlideSelector=\".z-column-menu-item\" class=\"flex flex-col gap-1 py-1\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"14\" />\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                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"14\" />\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() !== 'start') {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"!pinAvailabilityMap()[header.column.id]?.left\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'end') {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"!pinAvailabilityMap()[header.column.id]?.right\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (\n                              header.column.getIsPinned() &&\n                              header.column.id !== 'expand' &&\n                              header.column.id !== actionColumnInfo()?.columnId\n                            ) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          @if (groupingHeaderMenuMap()[header.id]) {\n                            @let isActiveGroupingColumn = groupingColumnMap()[header.column.id];\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                            @if (!isActiveGroupingColumn) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"groupByColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideRows3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                                <span>{{ 'i18n_z_ui_table_group_by_column' | translate }}</span>\n                              </button>\n                            }\n                            @let groupMenuStateBoundary = isActiveGroupingColumn;\n                            @if (groupMenuStateBoundary) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"removeGroupingColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideUngroup\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_clear_grouping' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          <div class=\"border-border my-0.5 border-t\"></div>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"autosizeColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideChevronsLeftRight\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_autosize_column' | translate }}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"autosizeAllColumns(); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_autosize_all_columns' | translate }}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"resetColumns(); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideRotateCcw\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_reset_columns' | translate }}</span>\n                          </button>\n                          @if (hideableColumns().length > 0) {\n                            <button\n                              type=\"button\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"openSettingsDrawerFromColumnMenu(colOptionsPopover)\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                              <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span class=\"truncate\">\n                                {{ 'i18n_z_ui_table_choose_columns' | translate }}\n                              </span>\n                            </button>\n                          }\n                        </div>\n                      </ng-template>\n\n                      @let columnEnableHeaderMenu =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableHeaderMenu';\n                      @let hasColumnOptions =\n                        header.column.id !== 'actionRowPin' &&\n                        columnEnableHeaderMenu !== false &&\n                        (groupingHeaderMenuMap()[header.id] ||\n                          (header.column.getCanPin() && effectiveEnablePinning) ||\n                          effectiveEnableOrdering ||\n                          hideableColumns().length > 0);\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded-sm 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                        zClass=\"rounded-(--radius-sm) overflow-hidden\"\n                        [zOffset]=\"5\"\n                        (zOutsideClick)=\"hideColumnPopoversOnOutsideClick(colOptionsPopover)\"\n                        (mousedown)=\"$event.preventDefault()\"\n                        [attr.tabindex]=\"hasColumnOptions ? 0 : null\"\n                        [attr.role]=\"hasColumnOptions ? 'button' : null\"\n                        [attr.aria-haspopup]=\"hasColumnOptions ? 'menu' : null\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              class=\"z-template-content\"\n                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\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                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\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                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        @if (hasColumnOptions) {\n                          <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                        }\n                      </div>\n                      @if ((header.column.getCanSort() && !hasBodyRowSpan()) || header.column.getCanFilter()) {\n                        <z-table-filter\n                          [zColumn]=\"$any(header.column)\"\n                          [zTable]=\"$any(table)\"\n                          [zResetVersion]=\"filterResetVersion()\"\n                          [zSortingState]=\"sorting()\"\n                          [zEnableMultiSort]=\"zConfig().enableMultiSort ?? true\" />\n                      }\n                    </div>\n                  }\n                  @if (header.column.getCanResize() && zConfig().enableColumnResizing !== false) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"header.column.getIsPinned() === 'end' || header.column.getIsLastColumn()\"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n            @if (virtualLeftSpacerWidth() > 0) {\n              <th\n                class=\"z-virtual-column-spacer z-virtual-header-spacer z-virtual-left-spacer pointer-events-none p-0\"\n                [style.width.px]=\"virtualRenderedLeftSpacerWidth()\"></th>\n            }\n            @for (header of virtualCenterHeaderRow(); track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: virtualCenterHeaderRow() : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\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-col-drag]=\"header.column.id === 'rowDrag'\"\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 === 'rowDrag') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                    </div>\n                  } @else if (header.column.id === 'select') {\n                    <div\n                      class=\"flex items-center\"\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                      <z-checkbox\n                        [zChecked]=\"canUseRowSelection() && table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"\n                          canUseRowSelection() && table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\n                        \"\n                        [zDisabled]=\"!canUseRowSelection()\"\n                        (zChange)=\"canUseRowSelection() && table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <div\n                      class=\"flex items-center\"\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                      <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-sm\">\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                    <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                      @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 ?? true;\n                      <ng-template #colOptionsPopoverContent>\n                        <div zHoverGlide zHoverGlideSelector=\".z-column-menu-item\" class=\"flex flex-col gap-1 py-1\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"14\" />\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                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"14\" />\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() !== 'start') {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"!pinAvailabilityMap()[header.column.id]?.left\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'end') {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"!pinAvailabilityMap()[header.column.id]?.right\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (\n                              header.column.getIsPinned() &&\n                              header.column.id !== 'expand' &&\n                              header.column.id !== actionColumnInfo()?.columnId\n                            ) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          @if (groupingHeaderMenuMap()[header.id]) {\n                            @let isActiveGroupingColumn = groupingColumnMap()[header.column.id];\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                            @if (!isActiveGroupingColumn) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"groupByColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideRows3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                                <span>{{ 'i18n_z_ui_table_group_by_column' | translate }}</span>\n                              </button>\n                            }\n                            @let groupMenuStateBoundary = isActiveGroupingColumn;\n                            @if (groupMenuStateBoundary) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"removeGroupingColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideUngroup\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_clear_grouping' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          <div class=\"border-border my-0.5 border-t\"></div>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"autosizeColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideChevronsLeftRight\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_autosize_column' | translate }}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"autosizeAllColumns(); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_autosize_all_columns' | translate }}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"resetColumns(); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideRotateCcw\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_reset_columns' | translate }}</span>\n                          </button>\n                          @if (hideableColumns().length > 0) {\n                            <button\n                              type=\"button\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"openSettingsDrawerFromColumnMenu(colOptionsPopover)\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                              <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span class=\"truncate\">\n                                {{ 'i18n_z_ui_table_choose_columns' | translate }}\n                              </span>\n                            </button>\n                          }\n                        </div>\n                      </ng-template>\n\n                      @let columnEnableHeaderMenu =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableHeaderMenu';\n                      @let hasColumnOptions =\n                        header.column.id !== 'actionRowPin' &&\n                        columnEnableHeaderMenu !== false &&\n                        (groupingHeaderMenuMap()[header.id] ||\n                          (header.column.getCanPin() && effectiveEnablePinning) ||\n                          effectiveEnableOrdering ||\n                          hideableColumns().length > 0);\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded-sm 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                        zClass=\"rounded-(--radius-sm) overflow-hidden\"\n                        [zOffset]=\"5\"\n                        (zOutsideClick)=\"hideColumnPopoversOnOutsideClick(colOptionsPopover)\"\n                        (mousedown)=\"$event.preventDefault()\"\n                        [attr.tabindex]=\"hasColumnOptions ? 0 : null\"\n                        [attr.role]=\"hasColumnOptions ? 'button' : null\"\n                        [attr.aria-haspopup]=\"hasColumnOptions ? 'menu' : null\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              class=\"z-template-content\"\n                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\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                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\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                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\n                              [ngStyle]=\"\n                                header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentStyle'\n                              \"></span>\n                          }\n                        </ng-container>\n                        @if (hasColumnOptions) {\n                          <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                        }\n                      </div>\n                      @if ((header.column.getCanSort() && !hasBodyRowSpan()) || header.column.getCanFilter()) {\n                        <z-table-filter\n                          [zColumn]=\"$any(header.column)\"\n                          [zTable]=\"$any(table)\"\n                          [zResetVersion]=\"filterResetVersion()\"\n                          [zSortingState]=\"sorting()\"\n                          [zEnableMultiSort]=\"zConfig().enableMultiSort ?? true\" />\n                      }\n                    </div>\n                  }\n                  @if (header.column.getCanResize() && zConfig().enableColumnResizing !== false) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"header.column.getIsPinned() === 'end' || header.column.getIsLastColumn()\"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n            @if (virtualRightSpacerWidth() > 0) {\n              <th\n                class=\"z-virtual-column-spacer z-virtual-header-spacer z-virtual-right-spacer pointer-events-none p-0\"\n                [style.width.px]=\"virtualRenderedRightSpacerWidth()\"></th>\n            }\n            @for (header of rightHeaderRow(); track header.id) {\n              @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n              @let shouldRender = header | zTableCellRender: rightHeaderRow() : zConfig().columns : 'header';\n              @if (rowSpan && shouldRender) {\n                <th\n                  [attr.id]=\"header.column.id\"\n                  [ngStyle]=\"\n                    header.column\n                      | zTablePinningStyles\n                        : header\n                        : 'header'\n                        : table\n                        : zConfig().columns\n                        : columnResizing()\n                        : colDomWidthMap()\n                        : isColumnPinningActive\n                  \"\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]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isLeftPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-right]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isRightPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-left-last]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-right-first]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns)\n                  \"\n                  [class.z-sticky-right-last]=\"\n                    isColumnPinningActive && (header | zTableCellPin: 'isLastRightPinned' : zConfig().columns)\n                  \"\n                  [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                  [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\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 === 'rowDrag') {\n                    <div class=\"flex items-center justify-center\">\n                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                    </div>\n                  } @else if (header.column.id === 'select') {\n                    <!-- Header Checkbox -->\n                    <div\n                      class=\"flex items-center\"\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                      <z-checkbox\n                        [zChecked]=\"canUseRowSelection() && table.getIsAllRowsSelected()\"\n                        [zIndeterminate]=\"\n                          canUseRowSelection() && table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\n                        \"\n                        [zDisabled]=\"!canUseRowSelection()\"\n                        (zChange)=\"canUseRowSelection() && table.toggleAllRowsSelected()\" />\n                    </div>\n                  } @else if (header.column.id === 'expand') {\n                    <!-- Expand All Button -->\n                    <div\n                      class=\"flex items-center\"\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                      <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-sm\">\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 ?? true;\n                      <ng-template #colOptionsPopoverContent>\n                        <div zHoverGlide zHoverGlideSelector=\".z-column-menu-item\" class=\"flex flex-col gap-1 py-1\">\n                          @if (effectiveEnableOrdering) {\n                            <button\n                              type=\"button\"\n                              [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowLeft\" zSize=\"14\" />\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                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                              <z-icon zType=\"lucideArrowRight\" zSize=\"14\" />\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() !== 'start') {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"!pinAvailabilityMap()[header.column.id]?.left\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                              </button>\n                            }\n                            @if (header.column.getIsPinned() !== 'end') {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"!pinAvailabilityMap()[header.column.id]?.right\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"-rotate-90\" />\n                                <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                              </button>\n                            }\n                            @if (\n                              header.column.getIsPinned() &&\n                              header.column.id !== 'expand' &&\n                              header.column.id !== actionColumnInfo()?.columnId\n                            ) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          @if (groupingHeaderMenuMap()[header.id]) {\n                            @let isActiveGroupingColumn = groupingColumnMap()[header.column.id];\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                            @if (!isActiveGroupingColumn) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"groupByColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideRows3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                                <span>{{ 'i18n_z_ui_table_group_by_column' | translate }}</span>\n                              </button>\n                            }\n                            @let groupMenuStateBoundary = isActiveGroupingColumn;\n                            @if (groupMenuStateBoundary) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"removeGroupingColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideUngroup\" zSize=\"14\" />\n                                <span>{{ 'i18n_z_ui_table_clear_grouping' | translate }}</span>\n                              </button>\n                            }\n                          }\n                          <div class=\"border-border my-0.5 border-t\"></div>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"autosizeColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideChevronsLeftRight\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_autosize_column' | translate }}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"autosizeAllColumns(); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_autosize_all_columns' | translate }}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                            (click)=\"resetColumns(); colOptionsPopover.hideImmediate()\"\n                            class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                            <z-icon zType=\"lucideRotateCcw\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                            <span>{{ 'i18n_z_ui_table_reset_columns' | translate }}</span>\n                          </button>\n                          @if (hideableColumns().length > 0) {\n                            <button\n                              type=\"button\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"openSettingsDrawerFromColumnMenu(colOptionsPopover)\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                              <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span class=\"truncate\">\n                                {{ 'i18n_z_ui_table_choose_columns' | translate }}\n                              </span>\n                            </button>\n                          }\n                        </div>\n                      </ng-template>\n\n                      @let columnEnableHeaderMenu =\n                        header.column.id | zTableColumnConfig: zConfig().columns : 'enableHeaderMenu';\n                      @let hasColumnOptions =\n                        header.column.id !== 'actionRowPin' &&\n                        columnEnableHeaderMenu !== false &&\n                        (groupingHeaderMenuMap()[header.id] ||\n                          (header.column.getCanPin() && effectiveEnablePinning) ||\n                          effectiveEnableOrdering ||\n                          hideableColumns().length > 0);\n                      <div\n                        class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded-sm 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                        zClass=\"rounded-(--radius-sm) overflow-hidden\"\n                        [zOffset]=\"5\"\n                        (zOutsideClick)=\"hideColumnPopoversOnOutsideClick(colOptionsPopover)\"\n                        (mousedown)=\"$event.preventDefault()\"\n                        [attr.tabindex]=\"hasColumnOptions ? 0 : null\"\n                        [attr.role]=\"hasColumnOptions ? 'button' : null\"\n                        [attr.aria-haspopup]=\"hasColumnOptions ? 'menu' : null\">\n                        <ng-container\n                          *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                          @if (headerContent | zTableIsTemplateRef) {\n                            <div\n                              class=\"z-template-content\"\n                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\n                              [ngStyle]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerStyle'\">\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                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\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                              [class]=\"header.column.id | zTableColumnConfig: zConfig().columns : 'headerContentClass'\"\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 zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                        }\n                      </div>\n                      <!-- Sort Icon (outside wrapper, no hover background) -->\n                      @if ((header.column.getCanSort() && !hasBodyRowSpan()) || header.column.getCanFilter()) {\n                        <z-table-filter\n                          [zColumn]=\"$any(header.column)\"\n                          [zTable]=\"$any(table)\"\n                          [zResetVersion]=\"filterResetVersion()\"\n                          [zSortingState]=\"sorting()\"\n                          [zEnableMultiSort]=\"zConfig().enableMultiSort ?? true\" />\n                      }\n                    </div>\n                  }\n                  <!-- Column Resizer -->\n                  @if (header.column.getCanResize() && zConfig().enableColumnResizing !== false) {\n                    <div\n                      class=\"z-resizer\"\n                      [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                      [class.z-resizer-left]=\"header.column.getIsPinned() === 'end' || header.column.getIsLastColumn()\"\n                      (dblclick)=\"header.column.resetSize()\"\n                      [zTableResize]=\"header\"></div>\n                  }\n                </th>\n              }\n            }\n          </tr>\n        } @else {\n          @for (headerGroup of orderedHeaderGroups(); track headerGroup.id) {\n            <tr>\n              @for (header of headerGroup.headers; track header.id) {\n                @let rowSpan = header | zTableSpan: zConfig().columns : 'headerRowSpan';\n                @let shouldRender = header | zTableCellRender: headerGroup.headers : zConfig().columns : 'header';\n                @if (rowSpan && shouldRender) {\n                  <th\n                    [attr.id]=\"header.column.id\"\n                    [ngStyle]=\"\n                      header.column\n                        | zTablePinningStyles\n                          : header\n                          : 'header'\n                          : table\n                          : zConfig().columns\n                          : columnResizing()\n                          : colDomWidthMap()\n                          : isColumnPinningActive\n                    \"\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]=\"\n                      isColumnPinningActive && (header | zTableCellPin: 'isLeftPinned' : zConfig().columns)\n                    \"\n                    [class.z-sticky-right]=\"\n                      isColumnPinningActive && (header | zTableCellPin: 'isRightPinned' : zConfig().columns)\n                    \"\n                    [class.z-sticky-left-last]=\"\n                      isColumnPinningActive && (header | zTableCellPin: 'isLastLeftPinned' : zConfig().columns)\n                    \"\n                    [class.z-sticky-right-first]=\"\n                      isColumnPinningActive && (header | zTableCellPin: 'isFirstRightPinned' : zConfig().columns)\n                    \"\n                    [class.z-sticky-right-last]=\"\n                      isColumnPinningActive && (header | zTableCellPin: 'isLastRightPinned' : zConfig().columns)\n                    \"\n                    [class.z-at-left-edge]=\"header | zTableCellOffset: orderedLeafColumns()\"\n                    [class.z-col-drag]=\"header.column.id === 'rowDrag'\"\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]=\"\n                      header | zTableSpan: zConfig().columns : 'headerColSpan' : undefined : headerGroup.headers\n                    \">\n                    @if (header.column.id === 'rowDrag') {\n                      <div class=\"flex items-center justify-center\">\n                        <z-icon zType=\"lucideGripVertical\" zSize=\"14\" class=\"text-muted-foreground opacity-70\" />\n                      </div>\n                    } @else if (header.column.id === 'select') {\n                      <div\n                        class=\"flex items-center\"\n                        [class.justify-center]=\"\n                          (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                          'text-center'\n                        \"\n                        [class.justify-end]=\"\n                          (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                          'text-right'\n                        \">\n                        <z-checkbox\n                          [zChecked]=\"canUseRowSelection() && table.getIsAllRowsSelected()\"\n                          [zIndeterminate]=\"\n                            canUseRowSelection() && table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()\n                          \"\n                          [zDisabled]=\"!canUseRowSelection()\"\n                          (zChange)=\"canUseRowSelection() && table.toggleAllRowsSelected()\" />\n                      </div>\n                    } @else if (header.column.id === 'expand') {\n                      <div\n                        class=\"flex items-center\"\n                        [class.justify-center]=\"\n                          (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                          'text-center'\n                        \"\n                        [class.justify-end]=\"\n                          (header.column.id | zTableColumnConfig: zConfig().columns : 'headerAlignClass') ===\n                          'text-right'\n                        \">\n                        <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-sm\">\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                      <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') ===\n                          'text-right'\n                        \">\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 ?? true;\n                        <ng-template #colOptionsPopoverContent>\n                          <div zHoverGlide zHoverGlideSelector=\".z-column-menu-item\" class=\"flex flex-col gap-1 py-1\">\n                            @if (effectiveEnableOrdering) {\n                              <button\n                                type=\"button\"\n                                [disabled]=\"isFirstMovableColumn(header.column.id) || header.column.getIsPinned()\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"moveColumnLeft(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucideArrowLeft\" zSize=\"15\" />\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                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"moveColumnRight(header.column.id); colOptionsPopover.hideImmediate()\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                <z-icon zType=\"lucideArrowRight\" zSize=\"15\" />\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() !== 'start') {\n                                <button\n                                  type=\"button\"\n                                  [disabled]=\"!pinAvailabilityMap()[header.column.id]?.left\"\n                                  (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                  (click)=\"handleColumnPin(header.column.id, 'left'); colOptionsPopover.hideImmediate()\"\n                                  class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                  <z-icon zType=\"lucidePin\" zSize=\"15\" class=\"rotate-90\" />\n                                  <span>{{ 'i18n_z_ui_table_pin_left' | translate }}</span>\n                                </button>\n                              }\n                              @if (header.column.getIsPinned() !== 'end') {\n                                <button\n                                  type=\"button\"\n                                  [disabled]=\"!pinAvailabilityMap()[header.column.id]?.right\"\n                                  (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                  (click)=\"\n                                    handleColumnPin(header.column.id, 'right'); colOptionsPopover.hideImmediate()\n                                  \"\n                                  class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none disabled:pointer-events-none disabled:opacity-40\">\n                                  <z-icon zType=\"lucidePin\" zSize=\"15\" class=\"-rotate-90\" />\n                                  <span>{{ 'i18n_z_ui_table_pin_right' | translate }}</span>\n                                </button>\n                              }\n                              @if (\n                                header.column.getIsPinned() &&\n                                header.column.id !== 'expand' &&\n                                header.column.id !== actionColumnInfo()?.columnId\n                              ) {\n                                <button\n                                  type=\"button\"\n                                  (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                  (click)=\"handleColumnPin(header.column.id, false); colOptionsPopover.hideImmediate()\"\n                                  class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                  <z-icon zType=\"lucideX\" zSize=\"15\" />\n                                  <span>{{ 'i18n_z_ui_table_unpin' | translate }}</span>\n                                </button>\n                              }\n                            }\n                            @if (groupingHeaderMenuMap()[header.id]) {\n                              @let isActiveGroupingColumn = groupingColumnMap()[header.column.id];\n                              <div class=\"border-border my-0.5 border-t\"></div>\n                              @if (!isActiveGroupingColumn) {\n                                <button\n                                  type=\"button\"\n                                  (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                  (click)=\"groupByColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                  class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                  <z-icon zType=\"lucideRows3\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                                  <span>{{ 'i18n_z_ui_table_group_by_column' | translate }}</span>\n                                </button>\n                              }\n                              @let groupMenuStateBoundary = isActiveGroupingColumn;\n                              @if (groupMenuStateBoundary) {\n                                <button\n                                  type=\"button\"\n                                  (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                  (click)=\"removeGroupingColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                                  class=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                  <z-icon zType=\"lucideUngroup\" zSize=\"15\" />\n                                  <span>{{ 'i18n_z_ui_table_clear_grouping' | translate }}</span>\n                                </button>\n                              }\n                            }\n                            <div class=\"border-border my-0.5 border-t\"></div>\n                            <button\n                              type=\"button\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"autosizeColumn(header.column.id); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                              <z-icon\n                                zType=\"lucideChevronsLeftRight\"\n                                zSize=\"14\"\n                                class=\"text-muted-foreground shrink-0\" />\n                              <span>{{ 'i18n_z_ui_table_autosize_column' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"autosizeAllColumns(); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                              <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span>{{ 'i18n_z_ui_table_autosize_all_columns' | translate }}</span>\n                            </button>\n                            <button\n                              type=\"button\"\n                              (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                              (click)=\"resetColumns(); colOptionsPopover.hideImmediate()\"\n                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                              <z-icon zType=\"lucideRotateCcw\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                              <span>{{ 'i18n_z_ui_table_reset_columns' | translate }}</span>\n                            </button>\n                            @if (hideableColumns().length > 0) {\n                              <button\n                                type=\"button\"\n                                (mouseenter)=\"hideActiveColumnVisibilityPopover()\"\n                                (click)=\"openSettingsDrawerFromColumnMenu(colOptionsPopover)\"\n                                class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                <z-icon zType=\"lucideColumns3\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n                                <span class=\"truncate\">\n                                  {{ 'i18n_z_ui_table_choose_columns' | translate }}\n                                </span>\n                              </button>\n                            }\n                          </div>\n                        </ng-template>\n\n                        @let columnEnableHeaderMenu =\n                          header.column.id | zTableColumnConfig: zConfig().columns : 'enableHeaderMenu';\n                        @let hasColumnOptions =\n                          header.column.id !== 'actionRowPin' &&\n                          columnEnableHeaderMenu !== false &&\n                          (groupingHeaderMenuMap()[header.id] ||\n                            (header.column.getCanPin() && effectiveEnablePinning) ||\n                            effectiveEnableOrdering ||\n                            hideableColumns().length > 0);\n                        <div\n                          class=\"z-header-text-wrapper inline-flex max-w-full items-center gap-1 rounded-sm 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                          zClass=\"rounded-(--radius-sm) overflow-hidden\"\n                          [zOffset]=\"5\"\n                          (zOutsideClick)=\"hideColumnPopoversOnOutsideClick(colOptionsPopover)\"\n                          (mousedown)=\"$event.preventDefault()\"\n                          [attr.tabindex]=\"hasColumnOptions ? 0 : null\"\n                          [attr.role]=\"hasColumnOptions ? 'button' : null\"\n                          [attr.aria-haspopup]=\"hasColumnOptions ? 'menu' : null\">\n                          <ng-container\n                            *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerContent\">\n                            @if (headerContent | zTableIsTemplateRef) {\n                              <div\n                                class=\"z-template-content\"\n                                [class]=\"\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                                [class]=\"\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                                [class]=\"\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                          @if (hasColumnOptions) {\n                            <z-icon zType=\"lucideChevronDown\" zSize=\"15\" class=\"text-muted-foreground shrink-0\" />\n                          }\n                        </div>\n                        @if ((header.column.getCanSort() && !hasBodyRowSpan()) || header.column.getCanFilter()) {\n                          <z-table-filter\n                            [zColumn]=\"$any(header.column)\"\n                            [zTable]=\"$any(table)\"\n                            [zResetVersion]=\"filterResetVersion()\"\n                            [zSortingState]=\"sorting()\"\n                            [zEnableMultiSort]=\"zConfig().enableMultiSort ?? true\" />\n                        }\n                      </div>\n                    }\n                    @if (header.column.getCanResize() && zConfig().enableColumnResizing !== false) {\n                      <div\n                        class=\"z-resizer\"\n                        [class.z-is-resizing]=\"header.column.getIsResizing()\"\n                        [class.z-resizer-left]=\"\n                          header.column.getIsPinned() === 'end' || header.column.getIsLastColumn()\n                        \"\n                        (dblclick)=\"header.column.resetSize()\"\n                        [zTableResize]=\"header\"></div>\n                    }\n                  </th>\n                }\n              }\n            </tr>\n          }\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 (isLoading() || isProcessing()) {\n      <!-- Loading State -->\n      @if (zConfig().useSkeleton) {\n        <!-- Skeleton Loading -->\n        <div class=\"animate-in fade-in flex h-full flex-col duration-200\">\n          @for (i of skeletonRows(); track $index; let last = $last) {\n            <div\n              class=\"border-border box-border flex flex-1 flex-col items-start justify-center gap-1.5 px-2\"\n              [class.border-b]=\"!last\">\n              <z-skeleton zType=\"bar\" zWidth=\"100%\" zHeight=\"22px\" />\n              <z-skeleton zType=\"bar\" zWidth=\"50%\" zHeight=\"14px\" />\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 (scroll)=\"onTbodyScroll($event)\">\n        @if (isVirtual()) {\n          <!-- Virtual Scroll Mode -->\n\n          <div\n            class=\"z-virtual-scroll-inner\"\n            [style.height.px]=\"virtualizer.getTotalSize()\"\n            [style.min-width.px]=\"table.getTotalSize()\">\n            <!-- Pinned and center rows share one virtual canvas. -->\n            @if (virtualPinnedTopRows().length > 0) {\n              <div class=\"z-virtual-pinned-top\" [style.min-width.px]=\"table.getTotalSize()\">\n                @for (row of virtualPinnedTopRows(); track row.id) {\n                  <ng-container *ngTemplateOutlet=\"virtualPinnedRowTpl; context: { $implicit: row }\" />\n                }\n              </div>\n            }\n\n            @if (usesFlowVirtualRows()) {\n              <div\n                class=\"z-virtual-flow\"\n                [style.transform]=\"'translate3d(0,' + virtualFlowOffset() + 'px,0)'\"\n                [style.min-width.px]=\"table.getTotalSize()\">\n                <ng-container *ngTemplateOutlet=\"virtualRowsTpl\" />\n              </div>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"virtualRowsTpl\" />\n            }\n\n            <ng-template #virtualRowsTpl>\n              @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n                @let groupRows = dynamicGroupRows()[virtualItem.index] || [];\n                @let virtualFlatItem = virtualGroupedFlatItems()[virtualItem.index];\n                @let stickyGroupState = stickyGroupHeaderState();\n                @let stickyGroupTop = stickyGroupState.tops[virtualItem.index];\n                @let isStickyGroupHeader = stickyGroupTop !== undefined;\n                <div\n                  #virtualRow\n                  class=\"z-virtual-row\"\n                  [class.z-virtual-row-flow]=\"usesFlowVirtualRows()\"\n                  [class.z-virtual-row-fixed]=\"!effectiveDynamicRowSizing()\"\n                  [class.z-virtual-row-group-header]=\"virtualFlatItem?.type === 'group-header'\"\n                  [class.z-virtual-row-sticky-group]=\"isStickyGroupHeader\"\n                  [class.z-virtual-row-sticky-group-shadow]=\"stickyGroupState.shadowIndex === virtualItem.index\"\n                  [style.top.px]=\"stickyGroupTop\"\n                  z-table-draggable=\"row\"\n                  z-table-drop-target=\"row\"\n                  [z-table-drag-table-id]=\"dragInstanceId\"\n                  [z-table-drop-table-id]=\"dragInstanceId\"\n                  [z-table-drag-item-id]=\"groupRows.length > 0 ? groupRows[0].id : ''\"\n                  [z-table-drop-item-id]=\"groupRows.length > 0 ? groupRows[0].id : ''\"\n                  [z-table-drag-disabled]=\"!isVirtualRowDragEnabled() || groupRows.length !== 1\"\n                  [z-table-drop-disabled]=\"!isVirtualRowDragEnabled() || groupRows.length !== 1\"\n                  (zTableDropped)=\"_handleDragDrop($event)\"\n                  [attr.data-index]=\"virtualItem.index\"\n                  [style.height.px]=\"\n                    effectiveDynamicRowSizing()\n                      ? null\n                      : (dynamicGroupHeights()[virtualItem.index] ?? groupSize() * virtualRowHeight()) + 1\n                  \"\n                  [style.transform]=\"\n                    usesFlowVirtualRows() || isStickyGroupHeader ? null : 'translate3d(0,' + virtualItem.start + 'px,0)'\n                  \">\n                  <table [style.width.px]=\"renderedTableWidth()\">\n                    <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n                    <tbody\n                      [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n                      [class.z-has-bottom-pinned]=\"table.getBottomRows().length > 0\"\n                      [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n                      @let groupHeaderItem = _getVirtualGroupHeader(virtualFlatItem);\n                      @if (groupHeaderItem) {\n                        <tr\n                          class=\"z-group-row\"\n                          [class.z-group-row-has-totals]=\"groupHeaderItem.totals\"\n                          [class.z-group-row-expanded]=\"groupHeaderItem.expanded\"\n                          [attr.data-group-id]=\"groupHeaderItem.id\"\n                          [attr.data-group-depth]=\"groupHeaderItem.depth\">\n                          @if (groupHeaderItem.totals) {\n                            @let totalColumnMap = groupTotalColumnMap();\n                            @for (column of orderedLeafColumns(); track column.id; let isFirstGroupCell = $first) {\n                              <td\n                                [class.z-group-row-label-cell]=\"isFirstGroupCell\"\n                                [class.z-group-row-total-cell]=\"!isFirstGroupCell && totalColumnMap[column.id]\"\n                                [attr.data-column-id]=\"column.id\">\n                                @if (isFirstGroupCell) {\n                                  <div class=\"z-group-row-sticky-wrapper\">\n                                    <button\n                                      type=\"button\"\n                                      class=\"z-group-row-trigger\"\n                                      [style.padding-left.rem]=\"0.75 + groupHeaderItem.depth * 0.75\"\n                                      [attr.aria-expanded]=\"groupHeaderItem.expanded\"\n                                      (click)=\"toggleGroupRow(groupHeaderItem.id)\">\n                                      <z-icon\n                                        zType=\"lucideChevronRight\"\n                                        zSize=\"14\"\n                                        class=\"transition-transform duration-200\"\n                                        [class.rotate-90]=\"groupHeaderItem.expanded\" />\n                                      <span\n                                        class=\"z-group-row-label\"\n                                        z-tooltip\n                                        [zContent]=\"\n                                          (groupHeaderItem.columnLabel ? groupHeaderItem.columnLabel + ': ' : '') +\n                                          groupHeaderItem.label\n                                        \">\n                                        @if (groupHeaderItem.columnLabel) {\n                                          <span class=\"z-group-row-column-label\">\n                                            {{ groupHeaderItem.columnLabel }}:\n                                          </span>\n                                        }\n                                        {{ groupHeaderItem.label }}\n                                      </span>\n                                      @if (groupingConfig().showCount !== false) {\n                                        <span class=\"z-group-row-count\">{{ groupHeaderItem.count }}</span>\n                                      }\n                                      @if (groupHeaderItem.loading) {\n                                        <z-loading class=\"z-group-row-loading\" [zLoading]=\"true\" zSize=\"xs\" />\n                                      }\n                                    </button>\n                                    @if (!isServerGrouping()) {\n                                      <button\n                                        type=\"button\"\n                                        z-button\n                                        zType=\"ghost\"\n                                        zSize=\"sm\"\n                                        zTypeIcon=\"lucideX\"\n                                        [zWave]=\"false\"\n                                        z-tooltip\n                                        zSizeIcon=\"14\"\n                                        [zContent]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                                        [attr.aria-label]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                                        [zAlwaysShow]=\"true\"\n                                        zTooltipPosition=\"top\"\n                                        class=\"z-group-row-remove\"\n                                        (click)=\"removeGroupingColumn(groupHeaderItem.columnId)\"></button>\n                                    }\n                                  </div>\n                                }\n                                @if (!isFirstGroupCell && totalColumnMap[column.id]) {\n                                  @let totalConfig = groupTotalConfigMap()[column.id];\n                                  @let totalTooltip = totalConfig.tooltip;\n                                  @let totalPopover = totalConfig.popover;\n                                  @let totalPopoverContent = totalPopover | zTablePopoverConfig: 'content';\n                                  <ng-template #groupTotalPopoverTpl>\n                                    @if (totalPopoverContent | zTableIsTemplateRef) {\n                                      <ng-container *ngTemplateOutlet=\"$any(totalPopoverContent)\" />\n                                    }\n                                    @if (!(totalPopoverContent | zTableIsTemplateRef)) {\n                                      <div [innerHTML]=\"$any(totalPopoverContent) | zSafeHtml\"></div>\n                                    }\n                                  </ng-template>\n                                  <span\n                                    class=\"z-group-row-total\"\n                                    z-tooltip\n                                    z-popover\n                                    [class]=\"totalConfig.class\"\n                                    [zContent]=\"\n                                      $any(\n                                        (totalTooltip | zTableTooltipConfig: 'content') ||\n                                          groupHeaderItem.totals[column.id]\n                                      )\n                                    \"\n                                    [zTooltipPosition]=\"$any(totalTooltip | zTableTooltipConfig: 'position')\"\n                                    [zTooltipTrigger]=\"$any(totalTooltip | zTableTooltipConfig: 'trigger')\"\n                                    [zTooltipType]=\"$any(totalTooltip | zTableTooltipConfig: 'type')\"\n                                    [zTooltipSize]=\"$any(totalTooltip | zTableTooltipConfig: 'size')\"\n                                    [zTooltipClass]=\"$any(totalTooltip | zTableTooltipConfig: 'class')\"\n                                    [zTooltipShowDelay]=\"$any(totalTooltip | zTableTooltipConfig: 'showDelay')\"\n                                    [zTooltipHideDelay]=\"$any(totalTooltip | zTableTooltipConfig: 'hideDelay')\"\n                                    [zTooltipArrow]=\"$any(totalTooltip | zTableTooltipConfig: 'arrow')\"\n                                    [zTooltipOffset]=\"$any(totalTooltip | zTableTooltipConfig: 'offset')\"\n                                    [zAutoDetect]=\"$any(totalTooltip | zTableTooltipConfig: 'autoDetect')\"\n                                    [zAlwaysShow]=\"$any(totalTooltip | zTableTooltipConfig: 'alwaysShow')\"\n                                    [zMaxWidth]=\"$any(totalTooltip | zTableTooltipConfig: 'maxWidth')\"\n                                    [zPopoverContent]=\"totalPopoverContent ? groupTotalPopoverTpl : null\"\n                                    [zPosition]=\"$any(totalPopover | zTablePopoverConfig: 'position')\"\n                                    [zPopoverTrigger]=\"$any(totalPopover | zTablePopoverConfig: 'trigger')\"\n                                    [zClass]=\"$any(totalPopover | zTablePopoverConfig: 'class')\"\n                                    [zShowDelay]=\"$any(totalPopover | zTablePopoverConfig: 'showDelay')\"\n                                    [zHideDelay]=\"$any(totalPopover | zTablePopoverConfig: 'hideDelay')\"\n                                    [zDisabled]=\"$any(totalPopover | zTablePopoverConfig: 'disabled')\"\n                                    [zOffset]=\"$any(totalPopover | zTablePopoverConfig: 'offset')\"\n                                    [zPopoverWidth]=\"$any(totalPopover | zTablePopoverConfig: 'width')\"\n                                    [zManualClose]=\"$any(totalPopover | zTablePopoverConfig: 'manualClose')\"\n                                    [zOutsideClickClose]=\"$any(totalPopover | zTablePopoverConfig: 'outsideClickClose')\"\n                                    [zScrollClose]=\"$any(totalPopover | zTablePopoverConfig: 'scrollClose')\"\n                                    [zSticky]=\"$any(totalPopover | zTablePopoverConfig: 'sticky')\"\n                                    [zShowArrow]=\"$any(totalPopover | zTablePopoverConfig: 'showArrow')\"\n                                    [zKeyboardSafe]=\"$any(totalPopover | zTablePopoverConfig: 'keyboardSafe')\">\n                                    {{ groupHeaderItem.totals[column.id] }}\n                                  </span>\n                                }\n                              </td>\n                            }\n                          } @else {\n                            <td [attr.colspan]=\"renderedColumnCount()\">\n                              <div class=\"z-group-row-sticky-wrapper\">\n                                <button\n                                  type=\"button\"\n                                  class=\"z-group-row-trigger\"\n                                  [style.padding-left.rem]=\"0.75 + groupHeaderItem.depth * 0.75\"\n                                  [attr.aria-expanded]=\"groupHeaderItem.expanded\"\n                                  (click)=\"toggleGroupRow(groupHeaderItem.id)\">\n                                  <z-icon\n                                    zType=\"lucideChevronRight\"\n                                    zSize=\"14\"\n                                    class=\"transition-transform duration-200\"\n                                    [class.rotate-90]=\"groupHeaderItem.expanded\" />\n                                  <span\n                                    class=\"z-group-row-label\"\n                                    z-tooltip\n                                    [zContent]=\"\n                                      (groupHeaderItem.columnLabel ? groupHeaderItem.columnLabel + ': ' : '') +\n                                      groupHeaderItem.label\n                                    \">\n                                    @if (groupHeaderItem.columnLabel) {\n                                      <span class=\"z-group-row-column-label\">{{ groupHeaderItem.columnLabel }}:</span>\n                                    }\n                                    {{ groupHeaderItem.label }}\n                                  </span>\n                                  @if (groupingConfig().showCount !== false) {\n                                    <span class=\"z-group-row-count\">{{ groupHeaderItem.count }}</span>\n                                  }\n                                  @if (groupHeaderItem.loading) {\n                                    <z-loading class=\"z-group-row-loading\" [zLoading]=\"true\" zSize=\"xs\" />\n                                  }\n                                </button>\n                                @if (!isServerGrouping()) {\n                                  <button\n                                    type=\"button\"\n                                    z-button\n                                    zType=\"ghost\"\n                                    zSize=\"sm\"\n                                    zTypeIcon=\"lucideX\"\n                                    [zWave]=\"false\"\n                                    z-tooltip\n                                    zSizeIcon=\"14\"\n                                    [zContent]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                                    [attr.aria-label]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                                    [zAlwaysShow]=\"true\"\n                                    zTooltipPosition=\"top\"\n                                    class=\"z-group-row-remove\"\n                                    (click)=\"removeGroupingColumn(groupHeaderItem.columnId)\"></button>\n                                }\n                              </div>\n                            </td>\n                          }\n                        </tr>\n                      }\n                      @for (row of groupRows; track row.id) {\n                        @let virtualGroupDepth = _getVirtualGroupDepth(virtualFlatItem);\n                        @let visibleCells = row.getVisibleCells();\n                        @let rowSelected = canUseRowSelection() && row.getIsSelected();\n                        @let rowSomeSelected = canUseRowSelection() && row.getIsSomeSelected();\n                        @let rowPinned = row.getIsPinned();\n                        <tr\n                          z-table-row-hover\n                          [attr.data-row-id]=\"row.id\"\n                          [class]=\"row | zTableRowConfig: zConfig() : 'rowClass'\"\n                          [style]=\"row | zTableRowConfig: zConfig() : 'rowStyle'\"\n                          [style.height.px]=\"effectiveDynamicRowSizing() ? null : virtualRowHeight()\"\n                          [style.min-height.px]=\"effectiveDynamicRowSizing() ? virtualRowHeight() : null\"\n                          [style.--z-row-height]=\"effectiveDynamicRowSizing() ? 'auto' : virtualRowHeight() + 'px'\"\n                          [class.z-child-row]=\"row.depth > 0\"\n                          [class.z-group-child-row]=\"_isVirtualGroupChild(virtualFlatItem)\"\n                          [style.--z-group-content-indent]=\"\n                            virtualGroupDepth > 0 ? 1.75 + (virtualGroupDepth - 1) * 0.75 + 'rem' : null\n                          \"\n                          [class.z-selected]=\"rowSelected\"\n                          [class.z-indeterminate-selected]=\"rowSomeSelected && !rowSelected\"\n                          [class.z-context-menu-active]=\"contentRowMenu()?.row?.id === row.id\"\n                          [class.z-pinned-top]=\"rowPinned === 'top'\"\n                          [class.z-pinned-top-first]=\"rowPinned === 'top' && row.id === firstTopPinnedRowId()\"\n                          [class.z-pinned-bottom]=\"rowPinned === 'bottom'\"\n                          [class.z-pinned-bottom-last]=\"rowPinned === 'bottom' && row.id === lastBottomPinnedRowId()\"\n                          [class.z-pinned-bottom-first]=\"rowPinned === 'bottom' && row.id === firstBottomPinnedRowId()\"\n                          [class.z-shadow-bottom]=\"\n                            showHeaderFooterShadow() &&\n                            hasScrollTop() &&\n                            rowPinned === 'top' &&\n                            row.id === lastTopPinnedRowId() &&\n                            !isStickyGroupHeaderEnabled()\n                          \"\n                          [class.z-shadow-top]=\"\n                            showHeaderFooterShadow() &&\n                            hasScrollBottom() &&\n                            rowPinned === 'bottom' &&\n                            row.id === firstBottomPinnedRowId()\n                          \"\n                          (contextmenu)=\"openContentRowMenu($event, row)\">\n                          @for (cell of visibleCells; track cell.id) {\n                            @let cellPinned = cell.column.getIsPinned();\n                            @if (\n                              canUseVirtualColumns() &&\n                              virtualLeftSpacerWidth() > 0 &&\n                              cell.column.id === firstVirtualCenterColumnId()\n                            ) {\n                              <td\n                                class=\"z-virtual-column-spacer pointer-events-none p-0\"\n                                [style.width.px]=\"virtualRenderedLeftSpacerWidth()\"></td>\n                            }\n                            @let shouldRenderRowSpan =\n                              cell | zTableSpan: zConfig().columns : 'shouldRender' : bodyRowSpanRows();\n                            @let shouldRenderColSpan =\n                              cell | zTableCellRender: visibleCells : zConfig().columns : 'body';\n                            @let isVirtualColumnVisible =\n                              !canUseVirtualColumns() ||\n                              cellPinned !== false ||\n                              virtualCenterColumnVisibilityMap()[cell.column.id];\n                            @if (shouldRenderRowSpan && shouldRenderColSpan && isVirtualColumnVisible) {\n                              @let cellSelectionId = row.id + '::' + cell.column.id;\n                              <td\n                                [attr.data-column-id]=\"cell.column.id\"\n                                [ngStyle]=\"\n                                  cell.column\n                                    | zTablePinningStyles\n                                      : cell\n                                      : 'body'\n                                      : visibleCells\n                                      : zConfig().columns\n                                      : columnResizing()\n                                      : colDomWidthMap()\n                                      : isColumnPinningActive\n                                      : bodyRowSpanRows()\n                                \"\n                                [class]=\"cell | zTableCellConfig: zConfig() : 'cellClass'\"\n                                [class.z-sticky-left]=\"isColumnPinningActive && cellPinned === 'start'\"\n                                [class.z-sticky-right]=\"isColumnPinningActive && cellPinned === 'end'\"\n                                [class.z-sticky-left-last]=\"\n                                  isColumnPinningActive &&\n                                  cellPinned === 'start' &&\n                                  (cell | zTableCellPin: 'isLastLeftPinned' : zConfig().columns : 'body' : visibleCells)\n                                \"\n                                [class.z-sticky-right-first]=\"\n                                  isColumnPinningActive &&\n                                  cellPinned === 'end' &&\n                                  (cell\n                                    | zTableCellPin: 'isFirstRightPinned' : zConfig().columns : 'body' : visibleCells)\n                                \"\n                                [class.z-sticky-right-last]=\"\n                                  isColumnPinningActive &&\n                                  cellPinned === 'end' &&\n                                  (cell\n                                    | zTableCellPin: 'isLastRightPinned' : zConfig().columns : 'body' : visibleCells)\n                                \"\n                                [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                                [class.z-col-drag]=\"cell.column.id === 'rowDrag'\"\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-cell-selectable]=\"canUseCellSelection()\"\n                                [class.z-cell-active]=\"\n                                  !hasMultipleSelectedCells() &&\n                                  activeCell()?.rowId === row.id &&\n                                  activeCell()?.columnId === cell.column.id\n                                \"\n                                [class.z-cell-range-selected]=\"visualSelectedCellIds().has(cellSelectionId)\"\n                                [class.z-cell-range-top]=\"selectedCellEdgeIds().top.has(cellSelectionId)\"\n                                [class.z-cell-range-right]=\"selectedCellEdgeIds().right.has(cellSelectionId)\"\n                                [class.z-cell-range-bottom]=\"selectedCellEdgeIds().bottom.has(cellSelectionId)\"\n                                [class.z-cell-range-left]=\"selectedCellEdgeIds().left.has(cellSelectionId)\"\n                                [class.z-content-edit-active]=\"\n                                  activeContentEditCell()?.rowId === row.id &&\n                                  activeContentEditCell()?.columnId === cell.column.id\n                                \"\n                                [class.z-at-bottom]=\"cell | zTableCellBottom: zConfig().columns : renderedBodyRows()\"\n                                [attr.rowspan]=\"\n                                  cell | zTableSpan: zConfig().columns : 'cellRowSpan' : bodyRowSpanRows()\n                                \"\n                                [attr.colspan]=\"\n                                  cell | zTableSpan: zConfig().columns : 'cellColSpan' : undefined : visibleCells\n                                \"\n                                [style]=\"cell | zTableCellConfig: zConfig() : 'cellStyle'\"\n                                [style.--z-cell-range-top]=\"\n                                  (selectedCellRangeInsets().get(cellSelectionId)?.top ?? 0) + '%'\n                                \"\n                                [style.--z-cell-range-right]=\"\n                                  (selectedCellRangeInsets().get(cellSelectionId)?.right ?? 0) + '%'\n                                \"\n                                [style.--z-cell-range-bottom]=\"\n                                  (selectedCellRangeInsets().get(cellSelectionId)?.bottom ?? 0) + '%'\n                                \"\n                                [style.--z-cell-range-left]=\"\n                                  (selectedCellRangeInsets().get(cellSelectionId)?.left ?? 0) + '%'\n                                \"\n                                (pointerdown)=\"onCellPointerDown($event, row, cell.column.id)\"\n                                (pointerenter)=\"onCellPointerEnter($event, row, cell.column.id)\"\n                                (contextmenu)=\"openCellMenu($event, row, cell.column.id)\">\n                                @if (cell.column.id === 'rowDrag') {\n                                  <div class=\"flex items-center justify-center\">\n                                    <button\n                                      data-z-table-drag-handle\n                                      type=\"button\"\n                                      class=\"text-muted-foreground inline-flex size-7 items-center justify-center rounded-md\"\n                                      [class.cursor-grab]=\"isRowDragEnabled()\"\n                                      [class.opacity-40]=\"!isRowDragEnabled()\">\n                                      <z-icon zType=\"lucideGripVertical\" zSize=\"14\" />\n                                    </button>\n                                  </div>\n                                } @else if (cell.column.id === 'select') {\n                                  <!-- Row Checkbox -->\n                                  <div class=\"flex items-center justify-center\">\n                                    <z-checkbox\n                                      [zChecked]=\"canUseRowSelection() && cell.row.getIsSelected()\"\n                                      [zIndeterminate]=\"\n                                        canUseRowSelection() &&\n                                        cell.row.getIsSomeSelected() &&\n                                        !cell.row.getIsSelected()\n                                      \"\n                                      [zDisabled]=\"!canUseRowSelection() || !cell.row.getCanSelect()\"\n                                      (zChange)=\"canUseRowSelection() && 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.getCanExpand()) {\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-sm\">\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 (\n                                  (cell.column.id === 'actionRowPin' || cell.column.id === 'actions') &&\n                                  cell.column.id !== actionColumnInfo()?.columnId\n                                ) {\n                                  @if (cell.row.depth === 0 && !hasBodyRowSpan()) {\n                                    <div class=\"flex items-center justify-center\">\n                                      <ng-template #rowPinPopoverContent>\n                                        <div\n                                          zHoverGlide\n                                          zHoverGlideSelector=\".z-column-menu-item\"\n                                          class=\"flex flex-col gap-1 py-1\">\n                                          @if (cell.row.getIsPinned() !== 'top') {\n                                            <button\n                                              type=\"button\"\n                                              (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                              class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\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=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\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=\"z-column-menu-item text-destructive hover:bg-destructive/10 focus:bg-destructive/10 mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\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-sm p-1 outline-none\"\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                                  @let isCellVisible = cell | zTableCellVisible: zConfig().columns;\n                                  @if (isCellVisible) {\n                                    @let editInfoVirtual = cell.getContext() | zTableCellEdit: zConfig().columns;\n                                    @if (editInfoVirtual.enabled) {\n                                      <!-- Editable Cell (Virtual) -->\n                                      <z-table-edit-cell\n                                        [zRow]=\"cell.row.original\"\n                                        [zRowId]=\"cell.row.id\"\n                                        [zRowIndex]=\"cell.row.index\"\n                                        [zColumnId]=\"cell.column.id\"\n                                        [zValue]=\"cell.getValue()\"\n                                        [zRowUpdate]=\"_rowUpdate()\"\n                                        [zEditConfig]=\"$any(editInfoVirtual.config)\"\n                                        (zChange)=\"onCellEdit($any($event))\" />\n                                    } @else if (editInfoVirtual.contentEnabled) {\n                                      @let contentConfigVirtual = editInfoVirtual.contentConfig!;\n                                      @if (\n                                        activeContentEditCell()?.rowId === row.id &&\n                                        activeContentEditCell()?.columnId === cell.column.id\n                                      ) {\n                                        <z-table-content-editor\n                                          [zValue]=\"cell.getValue()\"\n                                          [zConfig]=\"contentConfigVirtual\"\n                                          (zCommit)=\"onContentEditCommit($event, row, cell.column.id, cell.getValue())\"\n                                          (zCancel)=\"onContentEditCancel()\" />\n                                      } @else {\n                                        <button\n                                          type=\"button\"\n                                          class=\"z-table-content-trigger\"\n                                          [attr.data-z-table-edit-row]=\"row.id\"\n                                          [attr.data-z-table-edit-column]=\"cell.column.id\"\n                                          (keydown)=\"onContentEditKeydown($event, row.id, cell.column.id)\"\n                                          (click)=\"onContentEditStart($event, row.id, cell.column.id)\">\n                                          {{ contentConfigVirtual.displayValue }}\n                                        </button>\n                                      }\n                                    } @else {\n                                      <ng-container\n                                        *flexRender=\"\n                                          cell.column.columnDef.cell;\n                                          props: cell.getContext();\n                                          let cellContent\n                                        \">\n                                        @if (cellContent | zTableIsTemplateRef) {\n                                          <!-- TemplateRef rendering -->\n                                          @let isClickable = cell.column.id | zTableCellClickable: zConfig().columns;\n                                          <div\n                                            class=\"z-template-content\"\n                                            [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                            [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                            (click)=\"isClickable && onCellClick(row, cell.column.id, cell.getValue())\">\n                                            <ng-container\n                                              *ngTemplateOutlet=\"\n                                                cellContent;\n                                                context: { $implicit: cell.getContext() }\n                                              \" />\n                                          </div>\n                                        } @else if (cellContent | zTableHasIcon) {\n                                          <!-- Icon syntax rendering -->\n                                          @let isClickableIcon =\n                                            cell.column.id | zTableCellClickable: zConfig().columns;\n                                          <z-table-icon-text\n                                            [zText]=\"cellContent\"\n                                            [zTooltip]=\"cell | zTableCellConfig: zConfig() : 'contentTooltip'\"\n                                            [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                            [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                            (click)=\"\n                                              isClickableIcon && onCellClick(row, cell.column.id, cell.getValue())\n                                            \" />\n                                        } @else {\n                                          <!-- Default/innerHTML rendering -->\n                                          @let isClickableDefault =\n                                            cell.column.id | zTableCellClickable: zConfig().columns;\n                                          @let cellTooltipConfig =\n                                            cell | zTableCellConfig: zConfig() : 'contentTooltip';\n                                          @let cellPopoverConfig =\n                                            cell | zTableCellConfig: zConfig() : 'contentPopover';\n                                          @let cellPopoverContent = cellPopoverConfig | zTablePopoverConfig: 'content';\n                                          <ng-template #cellPopoverTpl>\n                                            @if (cellPopoverContent | zTableIsTemplateRef) {\n                                              <ng-container *ngTemplateOutlet=\"$any(cellPopoverContent)\" />\n                                            }\n                                            @if (!(cellPopoverContent | zTableIsTemplateRef)) {\n                                              <div [innerHTML]=\"$any(cellPopoverContent) | zSafeHtml\"></div>\n                                            }\n                                          </ng-template>\n                                          @if (cellPopoverContent) {\n                                            <div\n                                              class=\"z-table-cell-text\"\n                                              z-popover\n                                              z-tooltip\n                                              [zTriggerElement]=\"cellOverlayContent\"\n                                              [zTriggerRef]=\"cellOverlayContent\"\n                                              [zContent]=\"\n                                                (cellTooltipConfig | zTableTooltipConfig: 'content') || cellContent\n                                              \"\n                                              [zTooltipPosition]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'position')\n                                              \"\n                                              [zTooltipTrigger]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'trigger')\n                                              \"\n                                              [zTooltipType]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'type')\"\n                                              [zTooltipSize]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'size')\"\n                                              [zTooltipClass]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'class')\"\n                                              [zTooltipShowDelay]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'showDelay')\n                                              \"\n                                              [zTooltipHideDelay]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'hideDelay')\n                                              \"\n                                              [zTooltipArrow]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'arrow')\"\n                                              [zTooltipOffset]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'offset')\"\n                                              [zAutoDetect]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'autoDetect')\n                                              \"\n                                              [zAlwaysShow]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'alwaysShow')\n                                              \"\n                                              [zMaxWidth]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'maxWidth')\"\n                                              [zPopoverContent]=\"cellPopoverTpl\"\n                                              [zPosition]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'position')\"\n                                              [zPopoverTrigger]=\"\n                                                $any(cellPopoverConfig | zTablePopoverConfig: 'trigger')\n                                              \"\n                                              [zClass]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'class')\"\n                                              [zShowDelay]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'showDelay')\"\n                                              [zHideDelay]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'hideDelay')\"\n                                              [zDisabled]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'disabled')\"\n                                              [zOffset]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'offset')\"\n                                              [zPopoverWidth]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'width')\"\n                                              [zManualClose]=\"\n                                                $any(cellPopoverConfig | zTablePopoverConfig: 'manualClose')\n                                              \"\n                                              [zOutsideClickClose]=\"\n                                                $any(cellPopoverConfig | zTablePopoverConfig: 'outsideClickClose')\n                                              \"\n                                              [zScrollClose]=\"\n                                                $any(cellPopoverConfig | zTablePopoverConfig: 'scrollClose')\n                                              \"\n                                              [zSticky]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'sticky')\"\n                                              [zShowArrow]=\"$any(cellPopoverConfig | zTablePopoverConfig: 'showArrow')\"\n                                              [zKeyboardSafe]=\"\n                                                $any(cellPopoverConfig | zTablePopoverConfig: 'keyboardSafe')\n                                              \"\n                                              (click)=\"\n                                                isClickableDefault && onCellClick(row, cell.column.id, cell.getValue())\n                                              \">\n                                              <span\n                                                #cellOverlayContent\n                                                class=\"z-table-cell-content-trigger\"\n                                                [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                                [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                                [innerHTML]=\"cellContent | translate | zSafeHtml\"></span>\n                                            </div>\n                                          } @else {\n                                            <div\n                                              class=\"z-table-cell-text\"\n                                              z-tooltip\n                                              [zTriggerElement]=\"cellTooltipContent\"\n                                              [zContent]=\"\n                                                (cellTooltipConfig | zTableTooltipConfig: 'content') || cellContent\n                                              \"\n                                              [zTooltipPosition]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'position')\n                                              \"\n                                              [zTooltipTrigger]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'trigger')\n                                              \"\n                                              [zTooltipType]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'type')\"\n                                              [zTooltipSize]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'size')\"\n                                              [zTooltipClass]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'class')\"\n                                              [zTooltipShowDelay]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'showDelay')\n                                              \"\n                                              [zTooltipHideDelay]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'hideDelay')\n                                              \"\n                                              [zTooltipArrow]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'arrow')\"\n                                              [zTooltipOffset]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'offset')\"\n                                              [zAutoDetect]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'autoDetect')\n                                              \"\n                                              [zAlwaysShow]=\"\n                                                $any(cellTooltipConfig | zTableTooltipConfig: 'alwaysShow')\n                                              \"\n                                              [zMaxWidth]=\"$any(cellTooltipConfig | zTableTooltipConfig: 'maxWidth')\"\n                                              (click)=\"\n                                                isClickableDefault && onCellClick(row, cell.column.id, cell.getValue())\n                                              \">\n                                              <span\n                                                #cellTooltipContent\n                                                class=\"z-table-cell-content-trigger\"\n                                                [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                                [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                                [innerHTML]=\"cellContent | translate | zSafeHtml\"></span>\n                                            </div>\n                                          }\n                                        }\n                                      </ng-container>\n                                    }\n                                  }\n                                }\n                              </td>\n                            }\n                            @if (\n                              canUseVirtualColumns() &&\n                              virtualRightSpacerWidth() > 0 &&\n                              cell.column.id === lastVirtualCenterColumnId()\n                            ) {\n                              <td\n                                class=\"z-virtual-column-spacer pointer-events-none p-0\"\n                                [style.width.px]=\"virtualRenderedRightSpacerWidth()\"></td>\n                            }\n                          }\n                        </tr>\n                      }\n                    </tbody>\n                  </table>\n                </div>\n              }\n            </ng-template>\n          </div>\n\n          <!--\n            Bottom pinned rows: sibling AFTER the virtual canvas (not absolute like the\n            center rows). The virtualizer reserves their height inside getTotalSize() via\n            `paddingEnd`, leaving an empty band at the canvas bottom. `margin-top: -bottomHeight`\n            pulls this real flow element back over that band, and `position: sticky; bottom: 0`\n            floats it to the viewport bottom while scrolling.\n          -->\n          @if (virtualPinnedBottomRows().length > 0) {\n            <div\n              class=\"z-virtual-pinned-bottom\"\n              [style.min-width.px]=\"table.getTotalSize()\"\n              [style.margin-top.px]=\"-virtualPinnedBottomHeight()\">\n              @for (row of virtualPinnedBottomRows(); track row.id) {\n                <ng-container *ngTemplateOutlet=\"virtualPinnedRowTpl; context: { $implicit: row }\" />\n              }\n            </div>\n          }\n\n          <!-- Template for rendering pinned rows in virtual scroll mode -->\n          <ng-template #virtualPinnedRowTpl let-row>\n            @let visibleCells = row.getVisibleCells();\n            @let rowSelected = canUseRowSelection() && row.getIsSelected();\n            @let rowSomeSelected = canUseRowSelection() && row.getIsSomeSelected();\n            @let rowPinned = row.getIsPinned();\n            <table [style.width.px]=\"renderedTableWidth()\">\n              <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n              <tbody [class.z-has-vertical-scroll]=\"hasVerticalScroll()\">\n                <tr\n                  z-table-row-hover\n                  [attr.data-row-id]=\"row.id\"\n                  [class]=\"row | zTableRowConfig: zConfig() : 'rowClass'\"\n                  [style]=\"row | zTableRowConfig: zConfig() : 'rowStyle'\"\n                  [style.height.px]=\"effectiveDynamicRowSizing() ? null : virtualRowHeight()\"\n                  [style.min-height.px]=\"effectiveDynamicRowSizing() ? virtualRowHeight() : null\"\n                  [style.--z-row-height]=\"effectiveDynamicRowSizing() ? 'auto' : virtualRowHeight() + 'px'\"\n                  [class.z-selected]=\"rowSelected\"\n                  [class.z-indeterminate-selected]=\"rowSomeSelected && !rowSelected\"\n                  [class.z-context-menu-active]=\"contentRowMenu()?.row?.id === row.id\"\n                  [class.z-pinned-top]=\"rowPinned === 'top'\"\n                  [class.z-pinned-top-first]=\"rowPinned === 'top' && row.id === firstTopPinnedRowId()\"\n                  [class.z-pinned-bottom]=\"rowPinned === 'bottom'\"\n                  [class.z-pinned-bottom-last]=\"rowPinned === 'bottom' && row.id === lastBottomPinnedRowId()\"\n                  [class.z-pinned-bottom-first]=\"rowPinned === 'bottom' && row.id === firstBottomPinnedRowId()\"\n                  [class.z-shadow-bottom]=\"\n                    showHeaderFooterShadow() &&\n                    hasScrollTop() &&\n                    rowPinned === 'top' &&\n                    row.id === lastTopPinnedRowId() &&\n                    !isStickyGroupHeaderEnabled()\n                  \"\n                  [class.z-shadow-top]=\"\n                    showHeaderFooterShadow() &&\n                    hasScrollBottom() &&\n                    rowPinned === 'bottom' &&\n                    row.id === firstBottomPinnedRowId()\n                  \"\n                  (contextmenu)=\"openContentRowMenu($event, row)\">\n                  @let isColumnPinningActivePinned = isPinnedLayoutWithinContainer();\n                  @for (cell of visibleCells; track cell.id) {\n                    @let cellPinned = cell.column.getIsPinned();\n                    @let cellSelectionId = row.id + '::' + cell.column.id;\n                    @if (\n                      canUseVirtualColumns() &&\n                      virtualLeftSpacerWidth() > 0 &&\n                      cell.column.id === firstVirtualCenterColumnId()\n                    ) {\n                      <td\n                        class=\"z-virtual-column-spacer pointer-events-none p-0\"\n                        [style.width.px]=\"virtualRenderedLeftSpacerWidth()\"></td>\n                    }\n                    @let isVirtualColumnVisible =\n                      !canUseVirtualColumns() ||\n                      cellPinned !== false ||\n                      virtualCenterColumnVisibilityMap()[cell.column.id];\n                    @if (isVirtualColumnVisible) {\n                      <td\n                        [attr.data-column-id]=\"cell.column.id\"\n                        [ngStyle]=\"\n                          cell.column\n                            | zTablePinningStyles\n                              : cell\n                              : 'body'\n                              : visibleCells\n                              : zConfig().columns\n                              : columnResizing()\n                              : colDomWidthMap()\n                              : isColumnPinningActivePinned\n                              : bodyRowSpanRows()\n                        \"\n                        [class]=\"cell | zTableCellConfig: zConfig() : 'cellClass'\"\n                        [class.z-sticky-left]=\"isColumnPinningActivePinned && cellPinned === 'start'\"\n                        [class.z-sticky-right]=\"isColumnPinningActivePinned && cellPinned === 'end'\"\n                        [class.z-sticky-left-last]=\"\n                          isColumnPinningActivePinned &&\n                          cellPinned === 'start' &&\n                          (cell | zTableCellPin: 'isLastLeftPinned' : zConfig().columns : 'body' : visibleCells)\n                        \"\n                        [class.z-sticky-right-first]=\"\n                          isColumnPinningActivePinned &&\n                          cellPinned === 'end' &&\n                          (cell | zTableCellPin: 'isFirstRightPinned' : zConfig().columns : 'body' : visibleCells)\n                        \"\n                        [class.z-sticky-right-last]=\"\n                          isColumnPinningActivePinned &&\n                          cellPinned === 'end' &&\n                          (cell | zTableCellPin: 'isLastRightPinned' : zConfig().columns : 'body' : visibleCells)\n                        \"\n                        [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                        [class.z-col-drag]=\"cell.column.id === 'rowDrag'\"\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-cell-selectable]=\"canUseCellSelection()\"\n                        [class.z-cell-active]=\"\n                          !hasMultipleSelectedCells() &&\n                          activeCell()?.rowId === row.id &&\n                          activeCell()?.columnId === cell.column.id\n                        \"\n                        [class.z-cell-range-selected]=\"visualSelectedCellIds().has(cellSelectionId)\"\n                        [class.z-cell-range-top]=\"selectedCellEdgeIds().top.has(cellSelectionId)\"\n                        [class.z-cell-range-right]=\"selectedCellEdgeIds().right.has(cellSelectionId)\"\n                        [class.z-cell-range-bottom]=\"selectedCellEdgeIds().bottom.has(cellSelectionId)\"\n                        [class.z-cell-range-left]=\"selectedCellEdgeIds().left.has(cellSelectionId)\"\n                        [style.--z-cell-range-top]=\"(selectedCellRangeInsets().get(cellSelectionId)?.top ?? 0) + '%'\"\n                        [style.--z-cell-range-right]=\"\n                          (selectedCellRangeInsets().get(cellSelectionId)?.right ?? 0) + '%'\n                        \"\n                        [style.--z-cell-range-bottom]=\"\n                          (selectedCellRangeInsets().get(cellSelectionId)?.bottom ?? 0) + '%'\n                        \"\n                        [style.--z-cell-range-left]=\"(selectedCellRangeInsets().get(cellSelectionId)?.left ?? 0) + '%'\"\n                        [style]=\"cell | zTableCellConfig: zConfig() : 'cellStyle'\"\n                        (pointerdown)=\"onCellPointerDown($event, row, cell.column.id)\"\n                        (pointerenter)=\"onCellPointerEnter($event, row, cell.column.id)\"\n                        (contextmenu)=\"openCellMenu($event, row, cell.column.id)\">\n                        @if (cell.column.id === 'select') {\n                          <z-checkbox\n                            [zChecked]=\"rowSelected\"\n                            [zIndeterminate]=\"rowSomeSelected && !rowSelected\"\n                            [zDisabled]=\"!canUseRowSelection()\"\n                            (zChange)=\"canUseRowSelection() && row.toggleSelected()\" />\n                        } @else if (cell.column.id === 'expand') {\n                          <button\n                            type=\"button\"\n                            class=\"hover:bg-muted flex h-6 w-6 cursor-pointer items-center justify-center rounded-sm\"\n                            (click)=\"row.toggleExpanded()\">\n                            <z-icon\n                              zType=\"lucideChevronRight\"\n                              zSize=\"14\"\n                              class=\"transition-transform duration-200\"\n                              [class.rotate-90]=\"row.getIsExpanded()\" />\n                          </button>\n                        } @else if (cell.column.id === 'actionRowPin') {\n                          <div class=\"flex items-center justify-center\">\n                            <button\n                              type=\"button\"\n                              class=\"z-row-pin-trigger z-row-pin-unpin-trigger flex h-6 w-6 cursor-pointer items-center justify-center rounded-sm\"\n                              (click)=\"cell.row.pin(false)\">\n                              <z-icon zType=\"lucideX\" zSize=\"14\" />\n                            </button>\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                          @let isCellVisible = cell | zTableCellVisible: zConfig().columns;\n                          @if (isCellVisible) {\n                            <ng-container\n                              *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cellContent\">\n                              @if (cellContent | zTableIsTemplateRef) {\n                                <div\n                                  class=\"z-template-content\"\n                                  [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                  [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\">\n                                  <ng-container\n                                    *ngTemplateOutlet=\"cellContent; context: { $implicit: cell.getContext() }\" />\n                                </div>\n                              } @else if (cellContent | zTableHasIcon) {\n                                <z-table-icon-text\n                                  [zText]=\"cellContent\"\n                                  [zTooltip]=\"cell | zTableCellConfig: zConfig() : 'contentTooltip'\"\n                                  [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                  [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\" />\n                              } @else {\n                                <span\n                                  class=\"z-table-cell-text\"\n                                  z-tooltip\n                                  [zContent]=\"(cell | zTableCellConfig: zConfig() : 'contentTooltip') || cellContent\"\n                                  [innerHTML]=\"cellContent | translate | zSafeHtml\"\n                                  [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                  [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"></span>\n                              }\n                            </ng-container>\n                          }\n                        }\n                      </td>\n                    }\n                    @if (\n                      canUseVirtualColumns() &&\n                      virtualRightSpacerWidth() > 0 &&\n                      cell.column.id === lastVirtualCenterColumnId()\n                    ) {\n                      <td\n                        class=\"z-virtual-column-spacer pointer-events-none p-0\"\n                        [style.width.px]=\"virtualRenderedRightSpacerWidth()\"></td>\n                    }\n                  }\n                </tr>\n              </tbody>\n            </table>\n          </ng-template>\n        } @else {\n          <!-- Normal Scroll Mode -->\n\n          <table [style.width.px]=\"renderedTableWidth()\">\n            <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n            <tbody\n              class=\"z-table-drag-body\"\n              [class.z-has-vertical-scroll]=\"hasVerticalScroll()\"\n              [class.z-has-bottom-pinned]=\"table.getBottomRows().length > 0\"\n              [class.z-last-row-touches-bottom]=\"lastRowTouchesBottom()\">\n              <!-- Row Template -->\n              <ng-template #rowTemplate let-row let-isGroupChild=\"isGroupChild\" let-groupDepth=\"groupDepth\">\n                @let visibleCells = row.getVisibleCells();\n                @let rowSelected = canUseRowSelection() && row.getIsSelected();\n                @let rowSomeSelected = canUseRowSelection() && row.getIsSomeSelected();\n                @let rowPinned = row.getIsPinned();\n                <tr\n                  z-table-row-hover\n                  z-table-draggable=\"row\"\n                  z-table-drop-target=\"row\"\n                  [animate.enter]=\"row.depth > 0 || isGroupChild ? 'z-row-enter' : ''\"\n                  [z-table-drag-table-id]=\"dragInstanceId\"\n                  [z-table-drop-table-id]=\"dragInstanceId\"\n                  [z-table-drag-item-id]=\"row.id\"\n                  [z-table-drop-item-id]=\"row.id\"\n                  [z-table-drag-disabled]=\"!isRowDragEnabled()\"\n                  [z-table-drop-disabled]=\"!isRowDragEnabled()\"\n                  (zTableDropped)=\"_handleDragDrop($event)\"\n                  [attr.data-row-id]=\"row.id\"\n                  [class]=\"row | zTableRowConfig: zConfig() : 'rowClass'\"\n                  [style]=\"row | zTableRowConfig: zConfig() : 'rowStyle'\"\n                  [ngStyle]=\"row | zTableRow: table : 'pinningStyles' : pinnedRowHeights() : virtualRowHeight()\"\n                  [class.z-child-row]=\"row.depth > 0\"\n                  [class.z-group-child-row]=\"isGroupChild\"\n                  [style.--z-group-content-indent]=\"groupDepth > 0 ? 1.75 + (groupDepth - 1) * 0.75 + 'rem' : null\"\n                  [class.z-selected]=\"rowSelected\"\n                  [class.z-indeterminate-selected]=\"rowSomeSelected && !rowSelected\"\n                  [class.z-context-menu-active]=\"contentRowMenu()?.row?.id === row.id\"\n                  [class.z-pinned-top]=\"rowPinned === 'top'\"\n                  [class.z-pinned-top-first]=\"rowPinned === 'top' && row.id === firstTopPinnedRowId()\"\n                  [class.z-pinned-bottom]=\"rowPinned === 'bottom'\"\n                  [class.z-pinned-bottom-last]=\"rowPinned === 'bottom' && row.id === lastBottomPinnedRowId()\"\n                  [class.z-pinned-bottom-first]=\"rowPinned === 'bottom' && row.id === firstBottomPinnedRowId()\"\n                  [class.z-shadow-bottom]=\"\n                    showHeaderFooterShadow() &&\n                    hasScrollTop() &&\n                    rowPinned === 'top' &&\n                    row.id === lastTopPinnedRowId() &&\n                    !isStickyGroupHeaderEnabled()\n                  \"\n                  [class.z-shadow-top]=\"\n                    showHeaderFooterShadow() &&\n                    hasScrollBottom() &&\n                    rowPinned === 'bottom' &&\n                    row.id === firstBottomPinnedRowId()\n                  \"\n                  [attr.data-depth]=\"row.depth\"\n                  (contextmenu)=\"openContentRowMenu($event, row)\">\n                  @for (cell of visibleCells; track cell.id) {\n                    @let cellPinned = cell.column.getIsPinned();\n                    @let cellRowPinned = cell.row.getIsPinned();\n                    @if (\n                      canUseVirtualColumns() &&\n                      virtualLeftSpacerWidth() > 0 &&\n                      cell.column.id === firstVirtualCenterColumnId()\n                    ) {\n                      <td\n                        class=\"z-virtual-column-spacer pointer-events-none p-0\"\n                        [style.width.px]=\"virtualRenderedLeftSpacerWidth()\"></td>\n                    }\n                    @let shouldRenderRowSpan =\n                      cell | zTableSpan: zConfig().columns : 'shouldRender' : bodyRowSpanRows();\n                    @let shouldRenderColSpan = cell | zTableCellRender: visibleCells : zConfig().columns : 'body';\n                    @let isVirtualColumnVisible =\n                      !canUseVirtualColumns() ||\n                      cellPinned !== false ||\n                      virtualCenterColumnVisibilityMap()[cell.column.id];\n                    @if (shouldRenderRowSpan && shouldRenderColSpan && isVirtualColumnVisible) {\n                      @let cellSelectionId = row.id + '::' + cell.column.id;\n                      <td\n                        [attr.data-column-id]=\"cell.column.id\"\n                        [ngStyle]=\"\n                          cell.column\n                            | zTablePinningStyles\n                              : cell\n                              : 'body'\n                              : visibleCells\n                              : zConfig().columns\n                              : columnResizing()\n                              : colDomWidthMap()\n                              : isColumnPinningActive\n                              : bodyRowSpanRows()\n                        \"\n                        [class]=\"cell | zTableCellConfig: zConfig() : 'cellClass'\"\n                        [style]=\"cell | zTableCellConfig: zConfig() : 'cellStyle'\"\n                        [class.z-sticky-left]=\"isColumnPinningActive && cellPinned === 'start'\"\n                        [class.z-sticky-right]=\"isColumnPinningActive && cellPinned === 'end'\"\n                        [class.z-sticky-left-last]=\"\n                          isColumnPinningActive &&\n                          cellPinned === 'start' &&\n                          (cell | zTableCellPin: 'isLastLeftPinned' : zConfig().columns : 'body' : visibleCells)\n                        \"\n                        [class.z-sticky-right-first]=\"\n                          isColumnPinningActive &&\n                          cellPinned === 'end' &&\n                          (cell | zTableCellPin: 'isFirstRightPinned' : zConfig().columns : 'body' : visibleCells)\n                        \"\n                        [class.z-sticky-right-last]=\"\n                          isColumnPinningActive &&\n                          cellPinned === 'end' &&\n                          (cell | zTableCellPin: 'isLastRightPinned' : zConfig().columns : 'body' : visibleCells)\n                        \"\n                        [class.z-at-left-edge]=\"cell | zTableCellOffset: orderedLeafColumns()\"\n                        [class.z-col-drag]=\"cell.column.id === 'rowDrag'\"\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-cell-selectable]=\"canUseCellSelection()\"\n                        [class.z-cell-active]=\"\n                          !hasMultipleSelectedCells() &&\n                          activeCell()?.rowId === row.id &&\n                          activeCell()?.columnId === cell.column.id\n                        \"\n                        [class.z-cell-range-selected]=\"visualSelectedCellIds().has(cellSelectionId)\"\n                        [class.z-cell-range-top]=\"selectedCellEdgeIds().top.has(cellSelectionId)\"\n                        [class.z-cell-range-right]=\"selectedCellEdgeIds().right.has(cellSelectionId)\"\n                        [class.z-cell-range-bottom]=\"selectedCellEdgeIds().bottom.has(cellSelectionId)\"\n                        [class.z-cell-range-left]=\"selectedCellEdgeIds().left.has(cellSelectionId)\"\n                        [class.z-content-edit-active]=\"\n                          activeContentEditCell()?.rowId === row.id &&\n                          activeContentEditCell()?.columnId === cell.column.id\n                        \"\n                        [class.z-at-bottom]=\"cell | zTableCellBottom: zConfig().columns : renderedBodyRows()\"\n                        [attr.rowspan]=\"cell | zTableSpan: zConfig().columns : 'cellRowSpan' : bodyRowSpanRows()\"\n                        [attr.colspan]=\"cell | zTableSpan: zConfig().columns : 'cellColSpan' : undefined : visibleCells\"\n                        [style.--z-cell-range-top]=\"(selectedCellRangeInsets().get(cellSelectionId)?.top ?? 0) + '%'\"\n                        [style.--z-cell-range-right]=\"\n                          (selectedCellRangeInsets().get(cellSelectionId)?.right ?? 0) + '%'\n                        \"\n                        [style.--z-cell-range-bottom]=\"\n                          (selectedCellRangeInsets().get(cellSelectionId)?.bottom ?? 0) + '%'\n                        \"\n                        [style.--z-cell-range-left]=\"(selectedCellRangeInsets().get(cellSelectionId)?.left ?? 0) + '%'\"\n                        (pointerdown)=\"onCellPointerDown($event, row, cell.column.id)\"\n                        (pointerenter)=\"onCellPointerEnter($event, row, cell.column.id)\"\n                        (contextmenu)=\"openCellMenu($event, row, cell.column.id)\">\n                        @if (cell.column.id === 'rowDrag') {\n                          <div class=\"flex items-center justify-center\">\n                            <button\n                              data-z-table-drag-handle\n                              type=\"button\"\n                              class=\"text-muted-foreground hover:bg-muted hover:text-foreground inline-flex size-7 items-center justify-center rounded-md transition-colors\"\n                              [class.cursor-grab]=\"isRowDragEnabled()\"\n                              [class.cursor-not-allowed]=\"!isRowDragEnabled()\"\n                              [class.opacity-40]=\"!isRowDragEnabled()\">\n                              <z-icon zType=\"lucideGripVertical\" zSize=\"14\" />\n                            </button>\n                          </div>\n                        } @else 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                              [zChecked]=\"canUseRowSelection() && cell.row.getIsSelected()\"\n                              [zIndeterminate]=\"\n                                canUseRowSelection() && cell.row.getIsSomeSelected() && !cell.row.getIsSelected()\n                              \"\n                              [zDisabled]=\"!canUseRowSelection() || !cell.row.getCanSelect()\"\n                              (zChange)=\"canUseRowSelection() && cell.row.toggleSelected()\" />\n                            @if (zConfig().enableRowPinning && cell.row.depth === 0 && !hasBodyRowSpan()) {\n                              @if (cellRowPinned) {\n                                <button\n                                  type=\"button\"\n                                  class=\"z-row-pin-trigger z-row-pin-unpin-trigger flex h-6 w-6 cursor-pointer items-center justify-center rounded-sm\"\n                                  (click)=\"cell.row.pin(false)\">\n                                  <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                </button>\n                              } @else {\n                                <ng-template #rowPinPopoverContent>\n                                  <div\n                                    zHoverGlide\n                                    zHoverGlideSelector=\".z-column-menu-item\"\n                                    class=\"flex flex-col gap-1 py-1\">\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\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-sm p-1 outline-none\">\n                                  <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                                </button>\n                              }\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.getCanExpand()) {\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-sm\">\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                              @if (cellRowPinned) {\n                                <button\n                                  type=\"button\"\n                                  class=\"z-row-pin-trigger z-row-pin-unpin-trigger flex h-6 w-6 cursor-pointer items-center justify-center rounded-sm\"\n                                  (click)=\"cell.row.pin(false)\">\n                                  <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                </button>\n                              } @else {\n                                <ng-template #rowPinPopoverContent>\n                                  <div\n                                    zHoverGlide\n                                    zHoverGlideSelector=\".z-column-menu-item\"\n                                    class=\"flex flex-col gap-1 py-1\">\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\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-sm p-1 outline-none\">\n                                  <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                                </button>\n                              }\n                            }\n                          </div>\n                        } @else if (\n                          (cell.column.id === 'actionRowPin' || cell.column.id === 'actions') &&\n                          cell.column.id !== actionColumnInfo()?.columnId\n                        ) {\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                              @if (cellRowPinned) {\n                                <button\n                                  type=\"button\"\n                                  class=\"z-row-pin-trigger z-row-pin-unpin-trigger flex h-6 w-6 cursor-pointer items-center justify-center rounded-sm\"\n                                  (click)=\"cell.row.pin(false)\">\n                                  <z-icon zType=\"lucideX\" zSize=\"14\" />\n                                </button>\n                              } @else {\n                                <ng-template #rowPinPopoverContent>\n                                  <div\n                                    zHoverGlide\n                                    zHoverGlideSelector=\".z-column-menu-item\"\n                                    class=\"flex flex-col gap-1 py-1\">\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('top'); rowPinPopover.hideImmediate()\"\n                                      class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                      <z-icon zType=\"lucideArrowUp\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_top' | translate }}</span>\n                                    </button>\n                                    <button\n                                      type=\"button\"\n                                      (click)=\"cell.row.pin('bottom'); rowPinPopover.hideImmediate()\"\n                                      class=\"z-column-menu-item text-foreground hover:bg-muted focus:bg-muted mx-1 flex min-h-7 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-xs outline-none\">\n                                      <z-icon zType=\"lucideArrowDown\" zSize=\"12\" />\n                                      <span>{{ 'i18n_z_ui_table_pin_bottom' | translate }}</span>\n                                    </button>\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-sm p-1 outline-none\">\n                                  <z-icon zType=\"lucideEllipsis\" zSize=\"14\" class=\"rotate-90\" />\n                                </button>\n                              }\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                          @let isCellVisibleNormal = cell | zTableCellVisible: zConfig().columns;\n                          @if (isCellVisibleNormal) {\n                            @let editInfo = cell.getContext() | zTableCellEdit: zConfig().columns;\n                            @if (editInfo.enabled) {\n                              <!-- Editable Cell -->\n                              <z-table-edit-cell\n                                [zRow]=\"cell.row.original\"\n                                [zRowId]=\"cell.row.id\"\n                                [zRowIndex]=\"cell.row.index\"\n                                [zColumnId]=\"cell.column.id\"\n                                [zValue]=\"cell.getValue()\"\n                                [zRowUpdate]=\"_rowUpdate()\"\n                                [zEditConfig]=\"$any(editInfo.config)\"\n                                (zChange)=\"onCellEdit($any($event))\" />\n                            } @else if (editInfo.contentEnabled) {\n                              @let contentConfig = editInfo.contentConfig!;\n                              @if (\n                                activeContentEditCell()?.rowId === row.id &&\n                                activeContentEditCell()?.columnId === cell.column.id\n                              ) {\n                                <z-table-content-editor\n                                  [zValue]=\"cell.getValue()\"\n                                  [zConfig]=\"contentConfig\"\n                                  (zCommit)=\"onContentEditCommit($event, row, cell.column.id, cell.getValue())\"\n                                  (zCancel)=\"onContentEditCancel()\" />\n                              } @else {\n                                <button\n                                  type=\"button\"\n                                  class=\"z-table-content-trigger\"\n                                  [attr.data-z-table-edit-row]=\"row.id\"\n                                  [attr.data-z-table-edit-column]=\"cell.column.id\"\n                                  (keydown)=\"onContentEditKeydown($event, row.id, cell.column.id)\"\n                                  (click)=\"onContentEditStart($event, row.id, cell.column.id)\">\n                                  {{ contentConfig.displayValue }}\n                                </button>\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                                  @let isClickableTpl = cell.column.id | zTableCellClickable: zConfig().columns;\n                                  <div\n                                    class=\"z-template-content\"\n                                    [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                    [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                    (click)=\"isClickableTpl && onCellClick(row, cell.column.id, cell.getValue())\">\n                                    <ng-container\n                                      *ngTemplateOutlet=\"cellContent; context: { $implicit: cell.getContext() }\" />\n                                  </div>\n                                } @else if (cellContent | zTableHasIcon) {\n                                  <!-- Icon syntax rendering -->\n                                  @let isClickableIconTpl = cell.column.id | zTableCellClickable: zConfig().columns;\n                                  <z-table-icon-text\n                                    [zText]=\"cellContent\"\n                                    [zTooltip]=\"cell | zTableCellConfig: zConfig() : 'contentTooltip'\"\n                                    [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                    [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                    (click)=\"isClickableIconTpl && onCellClick(row, cell.column.id, cell.getValue())\" />\n                                } @else {\n                                  <!-- Default/innerHTML rendering -->\n                                  @let isClickableDefaultTpl = cell.column.id | zTableCellClickable: zConfig().columns;\n                                  @let cellTooltipConfigTpl = cell | zTableCellConfig: zConfig() : 'contentTooltip';\n                                  @let cellPopoverConfigTpl = cell | zTableCellConfig: zConfig() : 'contentPopover';\n                                  @let cellPopoverContentTpl = cellPopoverConfigTpl | zTablePopoverConfig: 'content';\n                                  <ng-template #cellPopoverTplNormal>\n                                    @if (cellPopoverContentTpl | zTableIsTemplateRef) {\n                                      <ng-container *ngTemplateOutlet=\"$any(cellPopoverContentTpl)\" />\n                                    }\n                                    @if (!(cellPopoverContentTpl | zTableIsTemplateRef)) {\n                                      <div [innerHTML]=\"$any(cellPopoverContentTpl) | zSafeHtml\"></div>\n                                    }\n                                  </ng-template>\n                                  @if (cellPopoverContentTpl) {\n                                    <div\n                                      class=\"z-table-cell-text\"\n                                      z-popover\n                                      z-tooltip\n                                      [zTriggerElement]=\"cellOverlayContentTpl\"\n                                      [zTriggerRef]=\"cellOverlayContentTpl\"\n                                      [zContent]=\"\n                                        (cellTooltipConfigTpl | zTableTooltipConfig: 'content') || cellContent\n                                      \"\n                                      [zTooltipPosition]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'position')\"\n                                      [zTooltipTrigger]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'trigger')\"\n                                      [zTooltipType]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'type')\"\n                                      [zTooltipSize]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'size')\"\n                                      [zTooltipClass]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'class')\"\n                                      [zTooltipShowDelay]=\"\n                                        $any(cellTooltipConfigTpl | zTableTooltipConfig: 'showDelay')\n                                      \"\n                                      [zTooltipHideDelay]=\"\n                                        $any(cellTooltipConfigTpl | zTableTooltipConfig: 'hideDelay')\n                                      \"\n                                      [zTooltipArrow]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'arrow')\"\n                                      [zTooltipOffset]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'offset')\"\n                                      [zAutoDetect]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'autoDetect')\"\n                                      [zAlwaysShow]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'alwaysShow')\"\n                                      [zMaxWidth]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'maxWidth')\"\n                                      [zPopoverContent]=\"cellPopoverTplNormal\"\n                                      [zPosition]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'position')\"\n                                      [zPopoverTrigger]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'trigger')\"\n                                      [zClass]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'class')\"\n                                      [zShowDelay]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'showDelay')\"\n                                      [zHideDelay]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'hideDelay')\"\n                                      [zDisabled]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'disabled')\"\n                                      [zOffset]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'offset')\"\n                                      [zPopoverWidth]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'width')\"\n                                      [zManualClose]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'manualClose')\"\n                                      [zOutsideClickClose]=\"\n                                        $any(cellPopoverConfigTpl | zTablePopoverConfig: 'outsideClickClose')\n                                      \"\n                                      [zScrollClose]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'scrollClose')\"\n                                      [zSticky]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'sticky')\"\n                                      [zShowArrow]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'showArrow')\"\n                                      [zKeyboardSafe]=\"$any(cellPopoverConfigTpl | zTablePopoverConfig: 'keyboardSafe')\"\n                                      (click)=\"\n                                        isClickableDefaultTpl && onCellClick(row, cell.column.id, cell.getValue())\n                                      \">\n                                      <span\n                                        #cellOverlayContentTpl\n                                        class=\"z-table-cell-content-trigger\"\n                                        [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                        [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                        [innerHTML]=\"cellContent | translate | zSafeHtml\"></span>\n                                    </div>\n                                  } @else {\n                                    <div\n                                      class=\"z-table-cell-text\"\n                                      z-tooltip\n                                      [zTriggerElement]=\"cellTooltipContentTpl\"\n                                      [zContent]=\"\n                                        (cellTooltipConfigTpl | zTableTooltipConfig: 'content') || cellContent\n                                      \"\n                                      [zTooltipPosition]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'position')\"\n                                      [zTooltipTrigger]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'trigger')\"\n                                      [zTooltipType]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'type')\"\n                                      [zTooltipSize]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'size')\"\n                                      [zTooltipClass]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'class')\"\n                                      [zTooltipShowDelay]=\"\n                                        $any(cellTooltipConfigTpl | zTableTooltipConfig: 'showDelay')\n                                      \"\n                                      [zTooltipHideDelay]=\"\n                                        $any(cellTooltipConfigTpl | zTableTooltipConfig: 'hideDelay')\n                                      \"\n                                      [zTooltipArrow]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'arrow')\"\n                                      [zTooltipOffset]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'offset')\"\n                                      [zAutoDetect]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'autoDetect')\"\n                                      [zAlwaysShow]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'alwaysShow')\"\n                                      [zMaxWidth]=\"$any(cellTooltipConfigTpl | zTableTooltipConfig: 'maxWidth')\"\n                                      (click)=\"\n                                        isClickableDefaultTpl && onCellClick(row, cell.column.id, cell.getValue())\n                                      \">\n                                      <span\n                                        #cellTooltipContentTpl\n                                        class=\"z-table-cell-content-trigger\"\n                                        [class]=\"cell | zTableCellConfig: zConfig() : 'contentClass'\"\n                                        [ngStyle]=\"cell | zTableCellConfig: zConfig() : 'contentStyle'\"\n                                        [innerHTML]=\"cellContent | translate | zSafeHtml\"></span>\n                                    </div>\n                                  }\n                                }\n                              </ng-container>\n                            }\n                          }\n                        }\n                      </td>\n                    }\n                    @if (\n                      canUseVirtualColumns() &&\n                      virtualRightSpacerWidth() > 0 &&\n                      cell.column.id === lastVirtualCenterColumnId()\n                    ) {\n                      <td\n                        class=\"z-virtual-column-spacer pointer-events-none p-0\"\n                        [style.width.px]=\"virtualRenderedRightSpacerWidth()\"></td>\n                    }\n                  }\n                </tr>\n\n                <!-- Expanded Row Detail -->\n                @if (row.getIsExpanded() && row.depth === 0 && !row.subRows?.length) {\n                  @let resolvedSubTableConfig = row | zTableSubTableConfig: zConfig();\n                  <tr class=\"z-expanded-row\" animate.enter=\"z-expanded-row-enter\">\n                    <td [attr.colspan]=\"renderedColumnCount()\" class=\"p-0\">\n                      <!-- Animate this wrapper with clip-path, translate, and opacity. -->\n                      <div class=\"z-expanded-row-content\">\n                        @if (zConfig().expandedRowTemplate) {\n                          <ng-container\n                            *ngTemplateOutlet=\"zConfig().expandedRowTemplate!; context: { $implicit: row }\" />\n                        } @else if (resolvedSubTableConfig) {\n                          <div class=\"z-sub-table-container\">\n                            <z-table [zConfig]=\"$any(resolvedSubTableConfig)\" zVariant=\"borderless\" />\n                          </div>\n                        }\n                      </div>\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 (item of groupedCenterRowItems(); track item.type === 'group' ? item.id : item.row.id) {\n                @if (item.type === 'group') {\n                  <tr\n                    #groupRow\n                    class=\"z-group-row\"\n                    [class.z-group-row-has-totals]=\"item.totals\"\n                    [class.z-group-row-expanded]=\"item.expanded\"\n                    [class.z-group-row-sticky]=\"isStickyGroupHeaderEnabled()\"\n                    [class.z-group-row-sticky-shadow]=\"shadowGroupRowId() === item.id\"\n                    [style.top.px]=\"stickyGroupTopByDepth()[item.depth]\"\n                    [attr.data-group-id]=\"item.id\"\n                    [attr.data-group-depth]=\"item.depth\">\n                    @if (item.totals) {\n                      @let totalColumnMap = groupTotalColumnMap();\n                      @for (column of orderedLeafColumns(); track column.id; let isFirstGroupCell = $first) {\n                        <td\n                          [class.z-group-row-label-cell]=\"isFirstGroupCell\"\n                          [class.z-group-row-total-cell]=\"!isFirstGroupCell && totalColumnMap[column.id]\"\n                          [attr.data-column-id]=\"column.id\">\n                          @if (isFirstGroupCell) {\n                            <div class=\"z-group-row-sticky-wrapper\">\n                              <button\n                                type=\"button\"\n                                class=\"z-group-row-trigger\"\n                                [style.padding-left.rem]=\"0.75 + item.depth * 0.75\"\n                                [attr.aria-expanded]=\"item.expanded\"\n                                (click)=\"toggleGroupRow(item.id)\">\n                                <z-icon\n                                  zType=\"lucideChevronRight\"\n                                  zSize=\"14\"\n                                  class=\"transition-transform duration-200\"\n                                  [class.rotate-90]=\"item.expanded\" />\n                                <span\n                                  class=\"z-group-row-label\"\n                                  z-tooltip\n                                  [zContent]=\"(item.columnLabel ? item.columnLabel + ': ' : '') + item.label\">\n                                  @if (item.columnLabel) {\n                                    <span class=\"z-group-row-column-label\">{{ item.columnLabel }}:</span>\n                                  }\n                                  {{ item.label }}\n                                </span>\n                                @if (groupingConfig().showCount !== false) {\n                                  <span class=\"z-group-row-count\">{{ item.count }}</span>\n                                }\n                                @if (item.loading) {\n                                  <z-loading class=\"z-group-row-loading\" [zLoading]=\"true\" zSize=\"xs\" />\n                                }\n                              </button>\n                              @if (!isServerGrouping()) {\n                                <button\n                                  type=\"button\"\n                                  z-button\n                                  zType=\"ghost\"\n                                  zSize=\"sm\"\n                                  zTypeIcon=\"lucideX\"\n                                  zSizeIcon=\"14\"\n                                  [zWave]=\"false\"\n                                  z-tooltip\n                                  [zContent]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                                  [attr.aria-label]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                                  [zAlwaysShow]=\"true\"\n                                  zTooltipPosition=\"top\"\n                                  class=\"z-group-row-remove\"\n                                  (click)=\"removeGroupingColumn(item.columnId)\"></button>\n                              }\n                            </div>\n                          }\n                          @if (!isFirstGroupCell && totalColumnMap[column.id]) {\n                            @let totalConfig = groupTotalConfigMap()[column.id];\n                            @let totalTooltip = totalConfig.tooltip;\n                            @let totalPopover = totalConfig.popover;\n                            @let totalPopoverContent = totalPopover | zTablePopoverConfig: 'content';\n                            <ng-template #groupTotalPopoverTpl>\n                              @if (totalPopoverContent | zTableIsTemplateRef) {\n                                <ng-container *ngTemplateOutlet=\"$any(totalPopoverContent)\" />\n                              }\n                              @if (!(totalPopoverContent | zTableIsTemplateRef)) {\n                                <div [innerHTML]=\"$any(totalPopoverContent) | zSafeHtml\"></div>\n                              }\n                            </ng-template>\n                            <span\n                              class=\"z-group-row-total\"\n                              z-tooltip\n                              z-popover\n                              [class]=\"totalConfig.class\"\n                              [zContent]=\"\n                                $any((totalTooltip | zTableTooltipConfig: 'content') || item.totals[column.id])\n                              \"\n                              [zTooltipPosition]=\"$any(totalTooltip | zTableTooltipConfig: 'position')\"\n                              [zTooltipTrigger]=\"$any(totalTooltip | zTableTooltipConfig: 'trigger')\"\n                              [zTooltipType]=\"$any(totalTooltip | zTableTooltipConfig: 'type')\"\n                              [zTooltipSize]=\"$any(totalTooltip | zTableTooltipConfig: 'size')\"\n                              [zTooltipClass]=\"$any(totalTooltip | zTableTooltipConfig: 'class')\"\n                              [zTooltipShowDelay]=\"$any(totalTooltip | zTableTooltipConfig: 'showDelay')\"\n                              [zTooltipHideDelay]=\"$any(totalTooltip | zTableTooltipConfig: 'hideDelay')\"\n                              [zTooltipArrow]=\"$any(totalTooltip | zTableTooltipConfig: 'arrow')\"\n                              [zTooltipOffset]=\"$any(totalTooltip | zTableTooltipConfig: 'offset')\"\n                              [zAutoDetect]=\"$any(totalTooltip | zTableTooltipConfig: 'autoDetect')\"\n                              [zAlwaysShow]=\"$any(totalTooltip | zTableTooltipConfig: 'alwaysShow')\"\n                              [zMaxWidth]=\"$any(totalTooltip | zTableTooltipConfig: 'maxWidth')\"\n                              [zPopoverContent]=\"totalPopoverContent ? groupTotalPopoverTpl : null\"\n                              [zPosition]=\"$any(totalPopover | zTablePopoverConfig: 'position')\"\n                              [zPopoverTrigger]=\"$any(totalPopover | zTablePopoverConfig: 'trigger')\"\n                              [zClass]=\"$any(totalPopover | zTablePopoverConfig: 'class')\"\n                              [zShowDelay]=\"$any(totalPopover | zTablePopoverConfig: 'showDelay')\"\n                              [zHideDelay]=\"$any(totalPopover | zTablePopoverConfig: 'hideDelay')\"\n                              [zDisabled]=\"$any(totalPopover | zTablePopoverConfig: 'disabled')\"\n                              [zOffset]=\"$any(totalPopover | zTablePopoverConfig: 'offset')\"\n                              [zPopoverWidth]=\"$any(totalPopover | zTablePopoverConfig: 'width')\"\n                              [zManualClose]=\"$any(totalPopover | zTablePopoverConfig: 'manualClose')\"\n                              [zOutsideClickClose]=\"$any(totalPopover | zTablePopoverConfig: 'outsideClickClose')\"\n                              [zScrollClose]=\"$any(totalPopover | zTablePopoverConfig: 'scrollClose')\"\n                              [zSticky]=\"$any(totalPopover | zTablePopoverConfig: 'sticky')\"\n                              [zShowArrow]=\"$any(totalPopover | zTablePopoverConfig: 'showArrow')\"\n                              [zKeyboardSafe]=\"$any(totalPopover | zTablePopoverConfig: 'keyboardSafe')\">\n                              {{ item.totals[column.id] }}\n                            </span>\n                          }\n                        </td>\n                      }\n                    } @else {\n                      <td [attr.colspan]=\"renderedColumnCount()\">\n                        <div class=\"z-group-row-sticky-wrapper\">\n                          <button\n                            type=\"button\"\n                            class=\"z-group-row-trigger\"\n                            [style.padding-left.rem]=\"0.75 + item.depth * 0.75\"\n                            [attr.aria-expanded]=\"item.expanded\"\n                            (click)=\"toggleGroupRow(item.id)\">\n                            <z-icon\n                              zType=\"lucideChevronRight\"\n                              zSize=\"14\"\n                              class=\"transition-transform duration-200\"\n                              [class.rotate-90]=\"item.expanded\" />\n                            <span\n                              class=\"z-group-row-label\"\n                              z-tooltip\n                              [zContent]=\"(item.columnLabel ? item.columnLabel + ': ' : '') + item.label\">\n                              @if (item.columnLabel) {\n                                <span class=\"z-group-row-column-label\">{{ item.columnLabel }}:</span>\n                              }\n                              {{ item.label }}\n                            </span>\n                            @if (groupingConfig().showCount !== false) {\n                              <span class=\"z-group-row-count\">{{ item.count }}</span>\n                            }\n                            @if (item.loading) {\n                              <z-loading class=\"z-group-row-loading\" [zLoading]=\"true\" zSize=\"xs\" />\n                            }\n                          </button>\n                          @if (!isServerGrouping()) {\n                            <button\n                              type=\"button\"\n                              z-button\n                              zType=\"ghost\"\n                              zSize=\"sm\"\n                              zTypeIcon=\"lucideX\"\n                              zSizeIcon=\"14\"\n                              [zWave]=\"false\"\n                              z-tooltip\n                              [zContent]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                              [attr.aria-label]=\"'i18n_z_ui_table_clear_grouping' | translate\"\n                              [zAlwaysShow]=\"true\"\n                              zTooltipPosition=\"top\"\n                              class=\"z-group-row-remove\"\n                              (click)=\"removeGroupingColumn(item.columnId)\"></button>\n                          }\n                        </div>\n                      </td>\n                    }\n                  </tr>\n                }\n                @if (item.type === 'row') {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      rowTemplate;\n                      context: {\n                        $implicit: item.row,\n                        isGroupChild: item.isGroupChild,\n                        groupDepth: item.groupDepth,\n                      }\n                    \" />\n                }\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 [style.width.px]=\"renderedTableWidth()\">\n        <ng-container *ngTemplateOutlet=\"colGroupTpl\" />\n        <tfoot>\n          @for (footerGroup of orderedFooterGroups(); track footerGroup.id; let footerRowIndex = $index) {\n            @if (footerGroup | zTableFooterContent: zConfig().columns : footerRowIndex) {\n              <tr>\n                @for (footer of footerGroup.headers; track footer.id) {\n                  @if (\n                    canUseVirtualColumns() &&\n                    virtualLeftSpacerWidth() > 0 &&\n                    footer.column.id === firstVirtualCenterColumnId()\n                  ) {\n                    <th\n                      class=\"z-virtual-column-spacer z-virtual-footer-spacer pointer-events-none p-0\"\n                      [style.width.px]=\"virtualRenderedLeftSpacerWidth()\"></th>\n                  }\n                  @let rowSpan = footer | zTableSpan: zConfig().columns : 'footerRowSpan' : footerRowIndex;\n                  @let shouldRender =\n                    footer\n                      | zTableCellRender\n                        : footerGroup.headers\n                        : zConfig().columns\n                        : 'footer'\n                        : footerRowIndex\n                        : orderedFooterGroups();\n                  @let isVirtualColumnVisible =\n                    !canUseVirtualColumns() ||\n                    footer.column.getIsPinned() !== false ||\n                    virtualCenterColumnVisibilityMap()[footer.column.id];\n                  @if (rowSpan && shouldRender && isVirtualColumnVisible) {\n                    <th\n                      [attr.data-column-id]=\"footer.column.id\"\n                      [ngStyle]=\"\n                        footer.column\n                          | zTablePinningStyles\n                            : footer\n                            : 'footer'\n                            : table\n                            : zConfig().columns\n                            : columnResizing()\n                            : colDomWidthMap()\n                            : isColumnPinningActive\n                      \"\n                      [class]=\"\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerClass' : footerRowIndex) +\n                        ' ' +\n                        (footer.column.id | zTableColumnConfig: zConfig().columns : 'footerAlignClass' : footerRowIndex)\n                      \"\n                      [style]=\"\n                        footer.column.id | zTableColumnConfig: zConfig().columns : 'footerStyle' : footerRowIndex\n                      \"\n                      [class.z-sticky-left]=\"\n                        isColumnPinningActive && (footer | zTableCellPin: 'isLeftPinned' : zConfig().columns : 'footer')\n                      \"\n                      [class.z-sticky-right]=\"\n                        isColumnPinningActive &&\n                        (footer | zTableCellPin: 'isRightPinned' : zConfig().columns : 'footer')\n                      \"\n                      [class.z-sticky-left-last]=\"\n                        isColumnPinningActive &&\n                        (footer | zTableCellPin: 'isLastLeftPinned' : zConfig().columns : 'footer')\n                      \"\n                      [class.z-sticky-right-first]=\"\n                        isColumnPinningActive &&\n                        (footer | zTableCellPin: 'isFirstRightPinned' : zConfig().columns : 'footer')\n                      \"\n                      [class.z-sticky-right-last]=\"\n                        isColumnPinningActive &&\n                        (footer | zTableCellPin: 'isLastRightPinned' : zConfig().columns : 'footer')\n                      \"\n                      [class.z-at-left-edge]=\"footer | zTableCellOffset: orderedLeafColumns()\"\n                      [attr.rowspan]=\"rowSpan\"\n                      [attr.colspan]=\"\n                        footer | zTableSpan: zConfig().columns : 'footerColSpan' : footerRowIndex : footerGroup.headers\n                      \">\n                      @let configFooterContent =\n                        footer.column.id | zTableFooterRender: zConfig().columns : footerRowIndex;\n                      @if (configFooterContent !== undefined && configFooterContent !== '') {\n                        <ng-container *flexRender=\"configFooterContent; props: footer.getContext(); let footerContent\">\n                          <div\n                            class=\"flex w-full items-center\"\n                            [class.justify-center]=\"\n                              (footer.column.id\n                                | zTableColumnConfig: zConfig().columns : 'footerAlignClass' : footerRowIndex) ===\n                              'text-center'\n                            \"\n                            [class.justify-end]=\"\n                              (footer.column.id\n                                | zTableColumnConfig: zConfig().columns : 'footerAlignClass' : footerRowIndex) ===\n                              'text-right'\n                            \">\n                            @if (footerContent | zTableIsTemplateRef) {\n                              <!-- TemplateRef rendering -->\n                              <div\n                                class=\"z-template-content\"\n                                [class]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerContentClass' : footerRowIndex\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerContentStyle' : footerRowIndex\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]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerTooltip' : footerRowIndex\n                                \"\n                                [class]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerContentClass' : footerRowIndex\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerContentStyle' : footerRowIndex\n                                \" />\n                            } @else {\n                              <!-- Default/string rendering -->\n                              <span\n                                class=\"z-table-cell-text\"\n                                z-tooltip\n                                [zContent]=\"\n                                  (footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerTooltip' : footerRowIndex) ||\n                                  footerContent\n                                \"\n                                [class]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerContentClass' : footerRowIndex\n                                \"\n                                [ngStyle]=\"\n                                  footer.column.id\n                                    | zTableColumnConfig: zConfig().columns : 'footerContentStyle' : footerRowIndex\n                                \">\n                                {{ footerContent | translate }}\n                              </span>\n                            }\n                          </div>\n                        </ng-container>\n                      }\n                    </th>\n                  }\n                  @if (\n                    canUseVirtualColumns() &&\n                    virtualRightSpacerWidth() > 0 &&\n                    footer.column.id === lastVirtualCenterColumnId()\n                  ) {\n                    <th\n                      class=\"z-virtual-column-spacer z-virtual-footer-spacer pointer-events-none p-0\"\n                      [style.width.px]=\"virtualRenderedRightSpacerWidth()\"></th>\n                  }\n                }\n              </tr>\n            }\n          }\n        </tfoot>\n      </table>\n    </div>\n  }\n</div>\n\n<!-- Pagination -->\n@if (zConfig().pagination?.enabled !== false) {\n  <div class=\"mt-4 flex items-center justify-between gap-4\">\n    <div class=\"truncate text-sm text-gray-500\">\n      {{ 'i18n_z_ui_table_total_rows' | translate: { total: (paginationTotal() | zFormatNum) } }}\n    </div>\n    <z-pagination\n      [zTotal]=\"paginationTotal()\"\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 || isLoading() || isProcessing()\"\n      (zOnPageChange)=\"onPageChange($event)\" />\n  </div>\n}\n\n<!-- Floating Bulk Action Bar -->\n<ng-template #bulkBarTemplate>\n  @if (bulkBarConfig(); as config) {\n    <div class=\"z-bulk-action-bar-inner\" [class.z-leaving]=\"bulkBarClosing()\">\n      <div class=\"z-bulk-action-bar-count\">\n        {{ bulkBarContext()?.selectedRowIds?.length ?? 0 | zFormatNum }}\n        {{ config.selectedLabel ?? ('i18n_z_ui_table_selected' | translate) }}\n      </div>\n\n      <div class=\"z-bulk-action-bar-divider\"></div>\n\n      <div class=\"z-bulk-action-bar-actions\">\n        <div class=\"z-bulk-action-bar-buttons\">\n          @for (item of bulkBarItems(); track item.action.key) {\n            <button\n              type=\"button\"\n              z-button\n              zSize=\"sm\"\n              [zType]=\"item.buttonType\"\n              [zDisabled]=\"item.disabled\"\n              class=\"z-bulk-action-bar-button\"\n              [disabled]=\"item.disabled\"\n              (click)=\"onBulkActionClick(item.action)\">\n              @if (item.action.icon) {\n                <z-icon [zType]=\"item.action.icon\" [zSize]=\"item.action.iconSize ?? '14'\" />\n              }\n              @if (item.action.label) {\n                <span>{{ item.action.label | translate }}</span>\n              }\n            </button>\n          }\n        </div>\n\n        <z-dropdown-menu class=\"z-bulk-action-bar-menu\" [zItems]=\"bulkBarDropdownItems()\" zPosition=\"top-right\">\n          <button\n            type=\"button\"\n            z-button\n            zType=\"outline\"\n            zSize=\"sm\"\n            zTypeIcon=\"lucideEllipsis\"\n            class=\"z-bulk-action-bar-menu-trigger\"\n            [attr.aria-label]=\"'i18n_z_ui_table_bulk_actions' | translate\"></button>\n        </z-dropdown-menu>\n      </div>\n    </div>\n  }\n</ng-template>\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  zBodyClass=\"mx-0! px-0!\"\n  [zShadow]=\"true\"\n  [zOkText]=\"null\"\n  [zCancelText]=\"'i18n_z_ui_drawer_close' | translate\">\n  <div class=\"z-table-settings-drawer\">\n    <!-- Display Settings -->\n    <div class=\"mx-4 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          [zChecked]=\"showHorizontalBorder()\"\n          [zText]=\"'i18n_z_ui_table_horizontal_border' | translate\"\n          (zChange)=\"showHorizontalBorder.set(!showHorizontalBorder())\" />\n        <z-checkbox\n          [zChecked]=\"showVerticalBorder()\"\n          [zText]=\"'i18n_z_ui_table_vertical_border' | translate\"\n          (zChange)=\"showVerticalBorder.set(!showVerticalBorder())\" />\n        <z-checkbox\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    <div class=\"mx-4 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        [cdkDropListAutoScrollDisabled]=\"true\"\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' && columnId !== 'rowDrag') {\n            @let column = table.getColumn(columnId);\n            @let isPinned = column?.getIsPinned();\n            @let isVisible = pendingVisibleColumns().includes(columnId);\n            @let isVisibilityDisabled = pendingColumnVisibilityDisabledMap()[columnId];\n            @let isGroupedColumn = groupingColumnMap()[columnId];\n            @let columnEnablePinningConfig = columnId | zTableColumnConfig: zConfig().columns : 'enablePinning';\n            @let canPin =\n              (columnEnablePinningConfig ?? zConfig().enableColumnPinning ?? true) && column?.getCanPin() !== false;\n            @if (!isPinned) {\n              <div\n                cdkDrag\n                [cdkDragDisabled]=\"isGroupedColumn\"\n                [cdkDragData]=\"columnId\"\n                cdkDragLockAxis=\"y\"\n                cdkDragPreviewContainer=\"global\"\n                cdkDragPreviewClass=\"z-drag-preview\"\n                class=\"z-drag-item border-border bg-card hover:border-primary flex cursor-default items-center gap-2 rounded-sm border px-2 py-1.5 text-sm\"\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\"\n                  [class.cursor-pointer]=\"!isGroupedColumn\"\n                  [class.cursor-default]=\"isGroupedColumn\"\n                  [class.opacity-40]=\"isGroupedColumn\" />\n\n                <!-- Visibility Checkbox -->\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isVisible\"\n                  [disabled]=\"isVisibilityDisabled\"\n                  (change)=\"onToggleColumnVisibility(columnId)\"\n                  (mousedown)=\"$event.stopPropagation()\"\n                  class=\"border-input h-4 w-4 shrink-0 cursor-default rounded-sm disabled:opacity-50\" />\n\n                <!-- Column Name -->\n                <span class=\"flex min-w-0 flex-1 flex-col\">\n                  <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                    {{ columnId | zTableColumnHeader: zConfig().columns | translate }}\n                  </span>\n                  @let parents = columnId | zTableColumnParents: zConfig().columns;\n                  @if (parents) {\n                    <span class=\"text-muted-foreground truncate text-[0.625rem]\">({{ parents | translate }})</span>\n                  }\n                </span>\n\n                <!-- Pin Buttons -->\n                @if (canPin) {\n                  <div class=\"flex shrink-0 items-center gap-0.5\" (mousedown)=\"$event.stopPropagation()\">\n                    <button\n                      type=\"button\"\n                      [disabled]=\"!isVisible || isGroupedColumn || !pinAvailabilityMap()[columnId]?.left\"\n                      (click)=\"onToggleColumnPin(columnId, 'left')\"\n                      class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded-sm 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 || isGroupedColumn || !pinAvailabilityMap()[columnId]?.right\"\n                      (click)=\"onToggleColumnPin(columnId, 'right')\"\n                      class=\"text-muted-foreground hover:bg-muted cursor-pointer rounded-sm 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 ?? true) {\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 = pendingVisibleColumns().includes(columnId);\n                @let isVisibilityDisabled = pendingColumnVisibilityDisabledMap()[columnId];\n                @let isGroupedColumn = groupingColumnMap()[columnId];\n                <div\n                  class=\"border-border bg-muted/30 flex items-center gap-2 rounded-sm border px-2 py-1.5 text-sm\"\n                  [class.opacity-60]=\"!isVisible\">\n                  <!-- Pin Icon -->\n                  <z-icon zType=\"lucidePin\" zSize=\"14\" class=\"text-primary shrink-0\" />\n\n                  <!-- Visibility Checkbox -->\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isVisible\"\n                    [disabled]=\"isVisibilityDisabled\"\n                    (change)=\"onToggleColumnVisibility(columnId)\"\n                    class=\"border-input h-4 w-4 shrink-0 cursor-default rounded-sm disabled:opacity-50\" />\n\n                  <!-- Column Name -->\n                  <span class=\"flex min-w-0 flex-1 flex-col\">\n                    <span class=\"truncate\" [class.text-muted-foreground]=\"!isVisible\">\n                      {{ columnId | zTableColumnHeader: zConfig().columns | translate }}\n                    </span>\n                    @let pinnedParents = columnId | zTableColumnParents: zConfig().columns;\n                    @if (pinnedParents) {\n                      <span class=\"text-muted-foreground truncate text-[0.625rem]\">\n                        ({{ pinnedParents | translate }})\n                      </span>\n                    }\n                  </span>\n\n                  <!-- Position Badge -->\n                  <span\n                    class=\"bg-primary/10 text-primary shrink-0 rounded-sm px-1.5 py-0.5 text-[0.625rem] font-medium\">\n                    {{\n                      isPinned === 'start'\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                    [disabled]=\"isGroupedColumn\"\n                    (click)=\"onToggleColumnPin(columnId, isPinned === 'start' ? 'left' : 'right')\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground cursor-pointer rounded-sm p-1 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-40\"\n                    title=\"Unpin\">\n                    <z-icon zType=\"lucideX\" zSize=\"12\" />\n                  </button>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      }\n    </div>\n  </div>\n</z-drawer>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;contain:inline-size;width:100%;max-width:100%;min-width:0;height:100%;overflow-x:visible;--scrollbar-track-thickness: 7px;--scrollbar-track-color: transparent;--scrollbar-thumb-shape: 3px;--z-shadow-left-right: -1.875rem;--z-shadow-left-width: 1.875rem;--z-shadow-left-opacity: 0;--z-shadow-right-left: -1.875rem;--z-shadow-right-width: 1.875rem;--z-shadow-right-opacity: 0;--z-sticky-left-border-color: transparent;--z-sticky-right-border-color: var(--border);--z-cell-selection-background: color-mix(in srgb, var(--primary) 12%, transparent);--z-cell-selection-background-opaque: color-mix(in srgb, var(--primary) 12%, var(--card))}.z-table-container{display:flex;flex-direction:column;position:relative;box-sizing:border-box;contain:inline-size;width:100%;max-width:100%;min-width:0;height:100%;overflow:hidden;border-radius:var(--radius-sm);border:thin solid var(--border);background-color:var(--card)}.z-table-container:focus{outline:none}.z-table-container.z-table-borderless{border:none;border-radius:0;box-shadow:none!important;background-color:transparent}.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}.z-table-container.z-hide-pinned-top-border tbody tr.z-pinned-top.z-shadow-bottom>td{border-bottom-color:var(--border)!important}.z-table-container.z-hide-pinned-bottom-border tbody.z-has-bottom-pinned td.z-at-bottom{border-bottom-color:transparent}table{width:fit-content;min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:.875rem}.z-table-container.z-column-resizing table,.z-table-toolbar{min-width:0}.z-table-toolbar .z-settings-btn{transition:all .15s ease}.z-table-toolbar .z-settings-btn:hover{border-color:var(--muted-foreground)}.z-table-filter-header{min-width:0}.z-table-filter-header button{flex:none}.z-table-filter-header-overflow-chip{animation:z-table-filter-chip-enter .16s ease}@media(prefers-reduced-motion:reduce){.z-table-filter-header-overflow-chip{animation:none}}@keyframes z-table-filter-chip-enter{0%{opacity:0;transform:translate(-.25rem)}to{opacity:1;transform:translate(0)}}::ng-deep .z-bulk-action-bar-overlay{position:fixed!important;top:auto;left:50%;bottom:0;transform:translate(-50%);max-width:calc(100vw - 2rem);margin-bottom:1rem;transform-origin:center bottom}.z-bulk-action-bar-inner{border:thin solid color-mix(in srgb,var(--border) 88%,transparent);border-radius:var(--radius-md);background:color-mix(in srgb,var(--card) 96%,var(--background));color:var(--foreground);box-shadow:0 1rem 2.5rem color-mix(in srgb,var(--foreground) 20%,transparent),0 .25rem .75rem color-mix(in srgb,var(--foreground) 12%,transparent),0 0 0 1px color-mix(in srgb,var(--background) 65%,transparent) inset;display:flex;align-items:center;gap:.5rem;width:max-content;min-height:2.25rem;max-width:calc(100vw - 2rem);padding:.5rem;overflow:hidden;transform-origin:center bottom;animation:z-bulk-action-bar-enter .18s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}.z-bulk-action-bar-inner.z-leaving{pointer-events:none;animation:z-bulk-action-bar-exit .14s ease-in forwards}.z-bulk-action-bar-count{flex:none;padding:0 .25rem;white-space:nowrap;font-size:.8125rem;font-weight:500;color:var(--foreground)}.z-bulk-action-bar-divider{width:1px;height:1.5rem;flex:none;background:color-mix(in srgb,var(--border) 88%,transparent)}.z-bulk-action-bar-actions,.z-bulk-action-bar-buttons{display:flex;align-items:center;gap:.5rem;min-width:0}.z-bulk-action-bar-button{flex:none}.z-bulk-action-bar-menu{display:none;flex:none}@media(max-width:48rem){.z-bulk-action-bar-inner{width:calc(100vw - 2rem);gap:.375rem}.z-bulk-action-bar-count{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}.z-bulk-action-bar-buttons{display:none}.z-bulk-action-bar-menu{display:block}}@keyframes z-bulk-action-bar-enter{0%{opacity:0;transform:translateY(.875rem)}to{opacity:1;transform:translateY(0)}}@keyframes z-bulk-action-bar-exit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(.875rem)}}@media(prefers-reduced-motion:reduce){.z-bulk-action-bar-inner{animation:none}}:host ::ng-deep .z-table-cell-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;min-width:0;-webkit-user-select:text;user-select:text}:host ::ng-deep .z-table-cell-text>*,:host ::ng-deep .z-table-cell-text *{display:inline-block;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}:host ::ng-deep .z-table-cell-content-trigger{display:inline-block;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.z-template-content{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.z-template-content>*{min-width:0;max-width:100%}.z-template-content>[class*=flex]{min-width:0;max-width:100%}.z-template-content>[class*=flex]>*{min-width:0;flex-shrink:1}.z-template-content>[class*=grid]{min-width:0;max-width:100%}.z-thead-wrapper{flex-shrink:0;background:var(--muted);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;position:relative;z-index:4}.z-thead-wrapper::-webkit-scrollbar{display:none}.z-thead-wrapper th{height:auto;padding:.5rem;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;width:100%;max-width:100%;min-width:0;min-height:6.25rem;display:flex;flex-direction:column;overflow:hidden}.z-tbody-scrollbar{flex:1;width:100%;max-width:100%;min-width:0;height:100%}.z-empty-state,.z-loading-state{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:6.25rem;height:100%;color:var(--muted-foreground);font-size:.875rem;animation:z-fade-in .2s ease-out}.z-tbody-scrollbar,.z-tbody-scrollbar table{animation:z-fade-in .2s ease-out}@keyframes z-fade-in{0%{opacity:0;transform:translateY(.25rem)}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:.5rem 12px;height:var(--z-row-height, 2.375rem);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-color:transparent}.z-tbody-wrapper tbody.z-has-bottom-pinned td.z-at-bottom{border-bottom-color:var(--border)}.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:.75rem}.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:.5rem 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;box-sizing:border-box;width:100%}.z-virtual-row,.z-virtual-flow{position:absolute;top:0;left:0;width:100%}.z-virtual-row-flow{position:relative}.z-virtual-row-fixed{overflow:hidden}.z-virtual-row-group-header{z-index:2}.z-virtual-row-sticky-group{position:sticky}.z-virtual-row-sticky-group-shadow{box-shadow:0 1px 3px #00000014}.z-virtual-row-sticky-group-shadow:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d}tr.z-group-row-sticky{position:sticky;z-index:2}tr.z-group-row-sticky>td{background:var(--card)}tr.z-group-row-sticky-shadow{box-shadow:0 1px 3px #00000014}tr.z-group-row-sticky-shadow:where(.dark,.dark *){box-shadow:0 1px 3px #0000004d}tr.z-child-row td:first-child{border-left:.125rem solid var(--primary)!important;padding-left:.75rem!important}tbody tr.z-context-menu-active,tbody tr.z-context-menu-active td{background-color:var(--muted)!important}tbody tr.z-selected,tbody tr.z-selected td{background-color:color-mix(in srgb,var(--primary) 15%,var(--background))!important}tbody tr.z-selected:hover,tbody tr.z-selected:hover td{background-color:color-mix(in srgb,var(--primary) 20%,var(--background))!important}tbody tr.z-indeterminate-selected,tbody tr.z-indeterminate-selected td{background-color:color-mix(in srgb,var(--primary) 10%,var(--background))!important}tbody tr.z-indeterminate-selected:hover,tbody tr.z-indeterminate-selected:hover td{background-color:color-mix(in srgb,var(--primary) 15%,var(--background))!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{background-color:var(--muted)!important}tbody tr.z-pinned-bottom-last>td{border-bottom-color:transparent!important}tbody tr.z-pinned-bottom-first>td{border-top:thin solid var(--border)}:host .z-tbody-wrapper tbody tr:not(.z-pinned-top):not(.z-pinned-bottom):has(+tr.z-pinned-bottom)>td{border-bottom-color:transparent}tr.z-expanded-row>td{border-left:.125rem solid var(--primary);background-color:var(--background)!important}.z-expanded-row-content{transform-origin:top center}@keyframes z-expanded-row-reveal{0%{clip-path:inset(0 0 100% 0);translate:0 -.375rem;opacity:0}to{clip-path:inset(0 0 0 0);translate:none;opacity:1}}@keyframes z-expanded-row-fade-in{0%{opacity:0}to{opacity:1}}tr.z-expanded-row-enter{animation:z-expanded-row-fade-in .18s ease-out}tr.z-expanded-row-enter .z-expanded-row-content{animation:z-expanded-row-reveal .18s ease-out}@keyframes z-child-row-slide-in{0%{translate:0 -.375rem;opacity:0}to{translate:none;opacity:1}}tr.z-child-row.z-row-enter,tr.z-group-child-row.z-row-enter{animation:z-child-row-slide-in .18s ease-out}@media(prefers-reduced-motion:reduce){tr.z-expanded-row-enter,tr.z-child-row.z-row-enter,tr.z-group-child-row.z-row-enter,tr.z-expanded-row-enter .z-expanded-row-content,tr.z-child-row.z-row-enter .z-expanded-row-content,tr.z-group-child-row.z-row-enter .z-expanded-row-content{animation-duration:1ms}}.z-sub-table-container{padding:.75rem 1rem .75rem 3rem;background-color:var(--background)}.z-table-content-trigger{display:block;width:100%;min-width:0;min-height:1.5rem;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;line-height:1.5rem;text-align:inherit;outline:0;cursor:text}.z-table-content-trigger:hover{color:var(--primary)}.z-content-edit-active{position:relative;z-index:2}td:has(>.z-table-content-trigger:focus-visible){position:relative;z-index:2}td:has(>.z-table-content-trigger:focus-visible):after{position:absolute;z-index:3;inset:0;border:1px solid var(--primary);content:\"\";pointer-events:none}td.z-cell-selectable{-webkit-user-select:none;user-select:none}td.z-cell-range-selected{position:relative;isolation:isolate}td.z-cell-range-selected:before{position:absolute;z-index:0;box-sizing:border-box;top:var(--z-cell-range-top, 0);right:var(--z-cell-range-right, 0);bottom:var(--z-cell-range-bottom, 0);left:var(--z-cell-range-left, 0);background-color:var(--z-cell-selection-background);content:\"\";pointer-events:none}td.z-cell-range-selected>*{position:relative;z-index:1}td.z-cell-range-top:before{border-top:1px solid var(--primary)}td.z-cell-range-right:before{border-right:1px solid var(--primary)}td.z-cell-range-bottom:before{border-bottom:1px solid var(--primary)}td.z-cell-range-left:before{border-left:1px solid var(--primary)}td.z-cell-active{position:relative;z-index:3;background-color:var(--z-cell-selection-background)!important}td.z-cell-active:after{position:absolute;z-index:4;inset:0;border:1px solid var(--primary);content:\"\";pointer-events:none}td.z-content-edit-active{-webkit-user-select:text;user-select:text}td.z-cell-active.z-row-hover,td.z-content-edit-active.z-row-hover{background-color:var(--card)!important}thead th{position:relative}thead th .z-resizer{position:absolute;right:0;top:0;height:100%;width:.5rem;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:.1875rem;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:.1875rem}thead th .z-resizer.z-is-resizing:after{opacity:1;background:var(--primary);width:.1875rem}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;border-right:thin solid var(--z-sticky-left-border-color)}.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:var(--z-shadow-left-right);width:var(--z-shadow-left-width);pointer-events:none;box-shadow:inset 10px 0 8px -8px #0000001a;z-index:10;opacity:var(--z-shadow-left-opacity)}:host-context(.dark) .z-thead-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-thead-wrapper td.z-sticky-left-last:after,:host-context(.dark) .z-tbody-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-tbody-wrapper td.z-sticky-left-last:after,:host-context(.dark) .z-tfoot-wrapper th.z-sticky-left-last:after,:host-context(.dark) .z-tfoot-wrapper td.z-sticky-left-last:after{box-shadow:inset 10px 0 10px -8px #0000004d}.z-thead-wrapper.z-scroll-left,.z-tbody-wrapper.z-scroll-left,.z-tfoot-wrapper.z-scroll-left{--z-shadow-left-opacity: 1}.z-thead-wrapper.z-scroll-left:where(.dark,.dark *),.z-tbody-wrapper.z-scroll-left:where(.dark,.dark *),.z-tfoot-wrapper.z-scroll-left:where(.dark,.dark *){--z-sticky-left-border-color: var(--border)}.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;border-left:thin solid var(--z-sticky-right-border-color)}.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:var(--z-shadow-right-left);width:var(--z-shadow-right-width);pointer-events:none;box-shadow:inset -10px 0 8px -8px #0000001a;z-index:10;opacity:var(--z-shadow-right-opacity)}:host-context(.dark) .z-thead-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-thead-wrapper td.z-sticky-right-first:before,:host-context(.dark) .z-tbody-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-tbody-wrapper td.z-sticky-right-first:before,:host-context(.dark) .z-tfoot-wrapper th.z-sticky-right-first:before,:host-context(.dark) .z-tfoot-wrapper td.z-sticky-right-first:before{box-shadow:inset -10px 0 10px -8px #0000004d}.z-thead-wrapper.z-scroll-right,.z-tbody-wrapper.z-scroll-right,.z-tfoot-wrapper.z-scroll-right{--z-shadow-right-opacity: 1}.z-thead-wrapper.z-scroll-right:not(:where(.dark,.dark *)),.z-tbody-wrapper.z-scroll-right:not(:where(.dark,.dark *)),.z-tfoot-wrapper.z-scroll-right:not(:where(.dark,.dark *)){--z-sticky-right-border-color: transparent}.z-pinning-overflow{--z-shadow-left-opacity: 0 !important;--z-shadow-right-opacity: 0 !important;--z-sticky-left-border-color: transparent !important;--z-sticky-right-border-color: transparent !important}.z-pinning-overflow .z-sticky-left,.z-pinning-overflow .z-sticky-right{position:relative!important;right:auto!important;left:auto!important}.z-pinning-overflow .z-sticky-left-last:after,.z-pinning-overflow .z-sticky-right-first:before,.z-pinning-overflow .z-sticky-right-last:after{display:none!important}.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:-1.875rem;width:1.875rem;background:var(--muted);pointer-events:none}.z-tfoot-wrapper{flex-shrink:0;width:100%;max-width:100%;min-width:0;background:var(--muted);overflow-x:hidden;overflow-y:hidden;touch-action:pan-y pinch-zoom}.z-tfoot-wrapper th{height:auto;padding:.5rem 12px;text-align:left;vertical-align:middle;font-weight:500;font-size:.75rem;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:.125rem 4px;border-radius:var(--radius-xs);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:focus-visible,.z-row-pin-trigger.z-popover-open{background-color:color-mix(in srgb,var(--foreground) 8%,transparent);color:var(--foreground)}.z-row-pin-trigger:active{background-color:color-mix(in srgb,var(--foreground) 12%,transparent)}.z-row-pin-trigger.text-primary{color:var(--primary)}.z-row-pin-unpin-trigger{color:var(--muted-foreground);outline:none}.z-row-pin-unpin-trigger:hover{color:var(--destructive);background-color:color-mix(in srgb,var(--destructive) 10%,transparent)}.z-row-pin-unpin-trigger:focus,.z-row-pin-unpin-trigger:focus-visible{color:var(--muted-foreground);background-color:transparent;outline:none;box-shadow:none}.z-row-pin-unpin-trigger:active{color:var(--destructive);background-color:color-mix(in srgb,var(--destructive) 14%,transparent)}.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:var(--radius-sm);min-width:0;overflow:hidden;flex-shrink:1}th .z-header-text-wrapper.z-has-options:hover,th .z-header-text-wrapper.z-has-options:focus-visible,th .z-header-text-wrapper.z-has-options.z-popover-open{background-color:color-mix(in srgb,var(--foreground) 8%,transparent);outline:none}th .z-header-text-wrapper.z-has-options:active{background-color:color-mix(in srgb,var(--foreground) 12%,transparent)}.z-column-menu-item{position:relative;z-index:1;line-height:1.25rem;transition:background-color .15s ease,color .15s ease}.z-column-menu-item:focus-visible,.z-column-menu-item.z-popover-open{background-color:var(--muted);outline:none}.z-table-drag-preview{box-sizing:border-box;border-radius:var(--radius-md);background-color:var(--card);border:1px solid var(--primary);box-shadow:0 10px 24px #00000029;overflow:hidden;z-index:10000!important;pointer-events:none}.z-table-drag-preview:where(.dark,.dark *){box-shadow:0 5px 20px #00000080}.z-table-drag-preview-row{border:0;border-radius:var(--radius-xs);background-color:var(--background);box-shadow:0 8px 20px #0000001f,inset 0 0 0 1px color-mix(in srgb,var(--primary) 45%,var(--border))}.z-table-drag-preview-row table,.z-table-drag-preview-row tbody,.z-table-drag-preview-row tr{height:100%}.z-table-drag-preview-row td{vertical-align:middle!important;background-color:var(--background)}.z-table-drag-preview-virtual{border:0;border-radius:0;box-shadow:0 8px 20px #0000001f,inset 0 0 0 1px color-mix(in srgb,var(--primary) 45%,var(--border))}.z-table-drag-source{display:none!important}.z-virtual-row.z-table-drag-source{display:block!important;pointer-events:none;outline:1px solid var(--border);outline-offset:-1px}.z-virtual-row.z-table-drag-source td{color:color-mix(in srgb,var(--foreground) 45%,transparent);border-color:var(--border)!important;background-color:var(--card)!important}.z-virtual-row.z-table-drag-source td>*{opacity:.45}[data-z-table-drag-handle]{touch-action:none;-webkit-user-select:none;user-select:none}.z-column-drop-list{min-height:3.125rem;overscroll-behavior:contain}.cdk-drag-preview.z-drag-preview,.cdk-drag-placeholder.z-drag-item{border-radius:var(--radius-sm)}.z-table-drag-placeholder{width:100%;min-height:2.625rem;box-sizing:border-box;border:2px dashed var(--primary);border-radius:0;background-color:color-mix(in srgb,var(--primary) 10%,var(--background));pointer-events:none}.z-table-drag-placeholder-row>td{padding:0!important;border:0!important;background:transparent!important}.z-table-drag-placeholder-row .z-table-drag-placeholder{border-radius:0;background-color:color-mix(in srgb,var(--primary) 10%,transparent)}.z-table-drag-placeholder-virtual{position:absolute;top:0;left:0;z-index:20;border-radius:0}.z-tbody-wrapper tr.z-group-row td{background:var(--card);border-top:none;border-bottom:1px solid var(--border)}.z-virtual-row:not(.z-virtual-row-flow) tr.z-group-row td{background:var(--card);border-top:none;border-bottom:none}.z-group-row-sticky-wrapper{display:inline-flex;align-items:center;translate:var(--z-scroll-x, 0px) 0}.z-table-container:not(.z-hide-horizontal-border) .z-virtual-row:not(.z-virtual-row-flow):after,.z-table-container:not(.z-hide-horizontal-border) .z-virtual-row-flow.z-virtual-row-group-header:after{content:\"\";position:absolute;right:0;bottom:0;left:0;z-index:3;height:1px;background:var(--border);pointer-events:none}.z-tbody-wrapper tr.z-group-child-row td.z-at-left-edge,.z-virtual-row tr.z-group-child-row td.z-at-left-edge{border-left:2px solid var(--primary)!important;padding-left:var(--z-group-content-indent, .75rem)}.z-group-row-trigger{display:inline-flex;min-height:2rem;max-width:100%;align-items:center;gap:.5rem;padding:.25rem .5rem .25rem .75rem;color:var(--primary);font-size:.8125rem;font-weight:600;vertical-align:middle;cursor:pointer}.z-group-row-remove{margin-left:.125rem;color:var(--muted-foreground);vertical-align:middle}.z-group-row-remove:hover,.z-group-row-remove:focus-visible{color:var(--destructive);background:color-mix(in srgb,var(--destructive) 10%,transparent);outline:none}.z-group-row-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.z-group-row-column-label{color:color-mix(in srgb,var(--primary) 65%,var(--foreground));font-weight:500;margin-right:.25rem}.z-group-row-count{display:inline-flex;min-width:1.25rem;height:1.25rem;align-items:center;justify-content:center;padding:0 .375rem;border-radius:var(--radius-pill);background:var(--primary);color:var(--primary-foreground);font-size:.6875rem;font-weight:600}.z-group-row-loading{display:inline-flex;align-items:center;margin-left:.25rem}.z-group-row-has-totals td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.z-group-row-has-totals .z-group-row-label-cell{position:sticky;left:0;z-index:2;background:var(--card)}.z-group-row-has-totals .z-group-row-label-cell .z-group-row-sticky-wrapper{max-width:100%;translate:none}.z-group-row-total{display:inline-block;max-width:100%;color:var(--foreground);font-size:.8125rem;font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.z-group-row-total-cell{text-align:right}:host .z-tbody-wrapper td.z-sticky-right-first.z-cell-range-selected:before,:host .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-selected:before{position:absolute!important;z-index:0!important;box-sizing:border-box!important;top:var(--z-cell-range-top, 0)!important;right:var(--z-cell-range-right, 0)!important;bottom:var(--z-cell-range-bottom, 0)!important;left:var(--z-cell-range-left, 0)!important;width:auto!important;background-color:var(--z-cell-selection-background-opaque)!important;box-shadow:none!important;content:\"\"!important;pointer-events:none!important;opacity:1!important}:host .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-selected:after{display:none!important}:host .z-tbody-wrapper td.z-sticky-right-first.z-cell-range-top:before,:host .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-top:before{border-top:1px solid var(--primary)}:host .z-tbody-wrapper td.z-sticky-right-first.z-cell-range-right:before,:host .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-right:before{border-right:1px solid var(--primary)}:host .z-tbody-wrapper td.z-sticky-right-first.z-cell-range-bottom:before,:host .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-bottom:before{border-bottom:1px solid var(--primary)}:host .z-tbody-wrapper td.z-sticky-right-first.z-cell-range-left:before,:host .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-left:before{border-left:1px solid var(--primary)}:host-context(.z-table-pointer-dragging) .z-tbody-wrapper td.z-sticky-right-first.z-cell-range-selected:before,:host-context(.z-table-pointer-dragging) .z-tbody-wrapper td.z-sticky-left-last.z-cell-range-selected:before{background-color:transparent!important}:host td.z-cell-range-selected:before{position:absolute;z-index:0;box-sizing:border-box;top:var(--z-cell-range-top, 0);right:var(--z-cell-range-right, 0);bottom:var(--z-cell-range-bottom, 0);left:var(--z-cell-range-left, 0);background-color:var(--z-cell-selection-background);box-shadow:none;content:\"\";pointer-events:none;opacity:1}:host td.z-cell-range-top:before{border-top:1px solid var(--primary)}:host td.z-cell-range-right:before{border-right:1px solid var(--primary)}:host td.z-cell-range-bottom:before{border-bottom:1px solid var(--primary)}:host td.z-cell-range-left:before{border-left:1px solid var(--primary)}:host-context(.z-table-pointer-dragging) .z-tbody-wrapper td{pointer-events:none}:host-context(.z-table-pointer-dragging) td.z-row-hover{background-color:var(--background)!important}:host td.z-cell-active,:host td.z-cell-active.z-row-hover{background-color:var(--z-cell-selection-background)!important}:host td.z-content-edit-active.z-row-hover{background-color:var(--card)!important}:host tr.z-pinned-top td.z-cell-active,:host tr.z-pinned-top td.z-cell-active.z-row-hover,:host tr.z-pinned-bottom td.z-cell-active,:host tr.z-pinned-bottom td.z-cell-active.z-row-hover,:host td.z-cell-active.z-sticky-left,:host td.z-cell-active.z-sticky-left.z-row-hover,:host td.z-cell-active.z-sticky-right,:host td.z-cell-active.z-sticky-right.z-row-hover{background-color:var(--z-cell-selection-background-opaque)!important}:host tr.z-pinned-top td.z-cell-range-selected,:host tr.z-pinned-bottom td.z-cell-range-selected,:host td.z-cell-range-selected.z-sticky-left,:host td.z-cell-range-selected.z-sticky-right{background-color:var(--card)}:host tr.z-pinned-top td.z-cell-range-selected:before,:host tr.z-pinned-bottom td.z-cell-range-selected:before,:host td.z-cell-range-selected.z-sticky-left:before,:host td.z-cell-range-selected.z-sticky-right:before{background-color:var(--z-cell-selection-background-opaque)}:host-context(.z-table-pointer-dragging) td.z-cell-range-selected,:host-context(.z-table-pointer-dragging) td.z-cell-range-selected.z-row-hover,:host-context(.z-table-pointer-dragging) td.z-cell-active,:host-context(.z-table-pointer-dragging) td.z-cell-active.z-row-hover{background-color:var(--card)!important}:host-context(.z-table-pointer-dragging) td.z-cell-range-selected:before{background-color:transparent}:host .z-tbody-wrapper tbody tr.z-group-child-row:has(+tr.z-group-row)>td.z-at-bottom{border-bottom-color:var(--border)}:host .z-virtual-row:has(tr.z-group-child-row):has(+.z-virtual-row tr.z-group-row) tr.z-group-child-row>td.z-at-bottom{border-bottom-color:var(--border)}.z-thead-wrapper th.z-virtual-column-spacer,.z-tfoot-wrapper th.z-virtual-column-spacer{box-sizing:border-box;padding:0!important;background:var(--muted);border-left:thin solid var(--border)}.z-thead-wrapper th.z-virtual-header-spacer{border-bottom:thin solid var(--border)}.z-tfoot-wrapper th.z-virtual-footer-spacer{border-top:thin solid var(--border)}.z-tbody-wrapper td.z-virtual-column-spacer{box-sizing:border-box;height:auto;padding:0!important;background:var(--card);border-left:thin solid var(--border);border-bottom:thin solid var(--border)}.z-tbody-wrapper tr:hover td.z-virtual-column-spacer{background-color:var(--muted)}.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:var(--radius-sm);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 .125rem .125rem 0;transform:translate(-50%,-60%) rotate(45deg)}.z-table-settings-drawer input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}.z-virtual-pinned-top{position:sticky;top:0;left:0;z-index:3;width:100%}.z-virtual-pinned-bottom{position:sticky;bottom:0;left:0;z-index:3;width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { zChange: [{ type: i0.Output, args: ["zChange"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClass", required: false }] }], 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 }] }], zVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVariant", required: false }] }], theadWrapper: [{ type: i0.ViewChild, args: ['theadWrapper', { isSignal: true }] }], tableContainer: [{ type: i0.ViewChild, args: ['tableContainer', { 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 }] }], virtualRowElements: [{ type: i0.ViewChildren, args: ['virtualRow', { isSignal: true }] }], groupRowElements: [{ type: i0.ViewChildren, args: ['groupRow', { isSignal: true }] }], bulkBarTemplateRef: [{ type: i0.ViewChild, args: ['bulkBarTemplate', { isSignal: true }] }] } });
 
 /**