@acorex/components 7.18.0 → 7.19.1

package/fesm2022/acorex-components-data-table.mjs

@@ -4,7 +4,7 @@ import { __metadata, __decorate } from 'tslib';
 import * as i2$2 from '@acorex/core/format';
 import { AXFormatService, AXFormatModule } from '@acorex/core/format';
 import { Memorize } from '@acorex/core/memorize';
-import * as i6 from '@acorex/components/common';
+import * as i5$1 from '@acorex/components/common';
 import { MXBaseComponent, convertArrayToDataSource, AXListDataSource, AXPagedComponent, AXCommonModule, AXRippleDirective } from '@acorex/components/common';
 import * as i2 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
@@ -12,15 +12,15 @@ import sum from 'lodash-es/sum';
 import { Subject, debounceTime, buffer, filter } from 'rxjs';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@acorex/components/decorators';
+import * as i2$1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i4 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
 import * as i5 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
-import * as i2$1 from '@acorex/components/loading';
+import * as i1$1 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
-import * as i5$1 from '@acorex/components/dropdown';
+import * as i4$1 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
 import { AXUnsubscriber } from '@acorex/core/utils';
 import { AXResultModule } from '@acorex/components/result';
@@ -37,10 +37,10 @@ class AXDataTableColumnComponent {
     get cssClass() {
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXDataTableColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXDataTableColumnComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AXDataTableColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AXDataTableColumnComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXDataTableColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AXDataTableColumnComponent, decorators: [{
             type: Injectable
         }], propDecorators: { caption: [{
                 type: Input
@@ -81,8 +81,8 @@ class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
         const value = rowData[dataField];
         return !this.format ? value : this.formatService.format(value, this.format, this.formatOptions);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXDataTableTextColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: { width: "width", caption: "caption", headerTemplate: "headerTemplate", cellTemplate: "cellTemplate", allowSorting: "allowSorting", allowResizing: "allowResizing", fixed: "fixed", dataField: "dataField", wrapText: "wrapText", format: "format", formatOptions: "formatOptions" }, providers: [{ provide: AXDataTableColumnComponent, useExisting: AXDataTableTextColumnComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AXDataTableTextColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: { width: "width", caption: "caption", headerTemplate: "headerTemplate", cellTemplate: "cellTemplate", allowSorting: "allowSorting", allowResizing: "allowResizing", fixed: "fixed", dataField: "dataField", wrapText: "wrapText", format: "format", formatOptions: "formatOptions" }, providers: [{ provide: AXDataTableColumnComponent, useExisting: AXDataTableTextColumnComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
     {{ getDisplayText(row.data, this.dataField) }}
   </ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -92,7 +92,7 @@ __decorate([
     __metadata("design:paramtypes", [Object, String]),
     __metadata("design:returntype", String)
 ], AXDataTableTextColumnComponent.prototype, "getDisplayText", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXDataTableTextColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AXDataTableTextColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-text-column',
@@ -329,15 +329,15 @@ class AXDataTableComponent extends MXBaseComponent {
         }
         return undefined;
     }
-    _handleOnScroll(e) {
+    _handleOnScroll() {
         this.updateHScroll();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: AXDataTableComponent, selector: "ax-data-table", inputs: { rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", showHeader: "showHeader", fetchDataMode: "fetchDataMode", dataSource: "dataSource", loading: "loading", focusedRow: "focusedRow", selectedRows: "selectedRows", itemHeight: "itemHeight" }, outputs: { onPageChanged: "onPageChanged", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick", focusedRowChange: "focusedRowChange", selectedRowsChange: "selectedRowsChange", onScrolledIndexChanged: "onScrolledIndexChanged" }, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], queries: [{ propertyName: "columns", predicate: AXDataTableColumnComponent }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, static: true }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true }, { propertyName: "footerContainer", first: true, predicate: ["footerContainer"], descendants: true }, { propertyName: "scrollableContainer", first: true, predicate: ["scrolling"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"> </ng-content>\n<!------------------- Header contents ------------------->\n<div class=\"ax-header-content\" *ngIf=\"showHeader\">\n  <div class=\"ax-header-columns\">\n    <table tabindex=\"0\" [style.width]=\"width\" #headerContainer>\n      <thead>\n        <tr>\n          @for(c of notFixedColumn();track c.name)\n          {\n          <th [class.ax-interactive]=\"c.allowSorting\" (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n            [style.width]=\"c.width\">\n            @if(c.headerTemplate)\n            {\n            <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            }\n            @else {\n            <div class=\"ax-caption\">\n              {{ c.caption }}\n              <ax-icon *ngIf=\"getSort(c)\" icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n            </div>\n            }\n            <!-- @if(c.allowResizing)\n            {\n            <div class=\"ax-resize-handle\" [ax-table-column-resizble]=\"c\"></div>\n            } -->\n          </th>\n          }\n          <th></th>\n        </tr>\n      </thead>\n    </table>\n  </div>\n</div>\n<!------------------- Body contents ------------------->\n<div [style.height]=\"height\" class=\"ax-body-content\">\n  <div class=\"ax-body-columns\">\n    <div cdkVirtualScrollingElement #scrolling [style.height]=\"'100%'\" (scroll)=\"_handleOnScroll($event)\">\n      <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight + 'px'\"\n        (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\n        <table tabindex=\"0\" class=\"ax-table-body ax-relative\" [style.width]=\"width\">\n          <colgroup>\n            @for(c of notFixedColumn();track c.name)\n            {\n            <col [style.width]=\"c.width\" />\n            }\n            <col />\n          </colgroup>\n          <tbody>\n            <ng-container *cdkVirtualFor=\"\n                let item of listDataSource;\n                templateCacheSize: 100;\n                let i = index;\n                trackBy: trackByIdx;\n                let rIndex = index\n              \">\n              <!------------------- custom row template------------------->\n              @if (rowTemplate != null) {\n              <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: item, rowIndex: rIndex } }\">\n              </ng-container>\n              } @else {\n              <!------------------- normal row template------------------->\n              <tr [class.ax-state-focused]=\"focusedRow && item === focusedRow\" [attr.data-index]=\"rIndex\"\n                [class.ax-state-selected]=\"selectedRows.includes(item)\" (click)=\"handleRowClick($event, item)\">\n                <!------------------- start fixed column ------------------->\n\n                <!------------------- Not fixed column ------------------->\n                @for (c of notFixedColumn(); track c.name) {\n                <!------------------- custom cell template ------------------->\n                @if (c.cellTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: { data: item, rowIndex: rIndex } }\">\n                </ng-container>\n                } @else {\n                <!------------------- default cell template ------------------->\n                <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n                  @if (item) {\n                  <!------------------- render cell ------------------->\n                  <ng-container\n                    *ngTemplateOutlet=\"c.template;context: { $implicit: { data: item, rowIndex: rIndex } }\"></ng-container>\n                  }\n                  @else {\n                  <!------------------- render loading ------------------->\n                  @if (c.loadingEnabled && loading) {\n                  <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                  }\n                  }\n                </td>\n                }\n                }\n                <td></td>\n              </tr>\n              }\n            </ng-container>\n          </tbody>\n        </table>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  </div>\n</div>\n<div class=\"ax-table-footer\" #footerContainer>\n  <div class=\"ax-table-info\">\n    <div>Showing {{ startRowIndex }} of {{ totalRows }} items</div>\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n      <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n    </ax-button>\n  </div>\n  <ng-content select=\"ax-footer\"> </ng-content>\n</div>", styles: [".ax-dark ax-data-table .ax-header-content th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-data-table .ax-body-content tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}ax-data-table{display:block;height:100%;overflow:hidden;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));font-size:.875rem;line-height:1.25rem}ax-data-table table{table-layout:fixed}ax-data-table .ax-header-content{position:relative;height:3rem;overflow:hidden}ax-data-table .ax-header-content .ax-header-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-header-content .ax-header-fixed-columns th.ax-column-fixed{pointer-events:auto}ax-data-table .ax-header-content .ax-header-fixed-columns th:not(.ax-column-fixed){visibility:hidden;background-color:transparent}ax-data-table .ax-header-content .ax-header-columns{height:100%}ax-data-table .ax-header-content .ax-header-columns>table{height:100%;overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-data-table .ax-header-content .ax-header-columns>table th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding:.75rem 1rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive{cursor:pointer}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-data-table .ax-header-content .ax-header-columns>table th .ax-resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent}ax-data-table .ax-header-content .ax-header-columns>table th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-neutral-300))}ax-data-table .ax-header-content .ax-header-columns>table th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-header-content .ax-header-columns>table th:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content{position:relative}ax-data-table .ax-body-content .ax-body-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-body-content .ax-body-columns{height:100%}ax-data-table .ax-body-content .ax-body-columns table{border-collapse:collapse}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-body-content .ax-body-columns table tr{height:2.5rem}ax-data-table .ax-body-content .ax-body-columns table tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-400));color:rgba(var(--ax-color-primary-fore))}ax-data-table .ax-body-content .ax-body-columns table td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));padding:.5rem 1rem;vertical-align:middle}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-color-on-surface));text-align:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover:not(ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:active{opacity:1}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-body-content .ax-body-columns table td:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content .ax-body-columns table td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-data-table .ax-table-footer{border-collapse:collapse;overflow:hidden;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem .875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i2.CdkVirtualScrollableElement, selector: "[cdkVirtualScrollingElement]" }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.9", type: AXDataTableComponent, selector: "ax-data-table", inputs: { rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", showHeader: "showHeader", fetchDataMode: "fetchDataMode", dataSource: "dataSource", loading: "loading", focusedRow: "focusedRow", selectedRows: "selectedRows", itemHeight: "itemHeight" }, outputs: { onPageChanged: "onPageChanged", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick", focusedRowChange: "focusedRowChange", selectedRowsChange: "selectedRowsChange", onScrolledIndexChanged: "onScrolledIndexChanged" }, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], queries: [{ propertyName: "columns", predicate: AXDataTableColumnComponent }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, static: true }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true }, { propertyName: "footerContainer", first: true, predicate: ["footerContainer"], descendants: true }, { propertyName: "scrollableContainer", first: true, predicate: ["scrolling"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"> </ng-content>\n<!------------------- Header contents ------------------->\n@if(showHeader){\n<div class=\"ax-header-content\">\n  <div class=\"ax-header-columns\">\n    <table tabindex=\"0\" [style.width]=\"width\" #headerContainer>\n      <thead>\n        <tr>\n          @for(c of notFixedColumn();track c.name)\n          {\n          <th [class.ax-interactive]=\"c.allowSorting\" (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n            [style.width]=\"c.width\">\n            @if(c.headerTemplate)\n            {\n            <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            }\n            @else {\n            <div class=\"ax-caption\">\n              {{ c.caption }}\n              @if(getSort(c)){\n              <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n              }\n            </div>\n            }\n            <!-- @if(c.allowResizing)\n              {\n              <div class=\"ax-resize-handle\" [ax-table-column-resizble]=\"c\"></div>\n              } -->\n          </th>\n          }\n          <th></th>\n        </tr>\n      </thead>\n    </table>\n  </div>\n</div>\n}\n\n<!------------------- Body contents ------------------->\n<div [style.height]=\"height\" class=\"ax-body-content\">\n  <div class=\"ax-body-columns\">\n    <div cdkVirtualScrollingElement #scrolling [style.height]=\"'100%'\" (scroll)=\"_handleOnScroll()\">\n      <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight + 'px'\"\n        (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\n        <table tabindex=\"0\" class=\"ax-table-body ax-relative\" [style.width]=\"width\">\n          <colgroup>\n            @for(c of notFixedColumn();track c.name)\n            {\n            <col [style.width]=\"c.width\" />\n            }\n            <col />\n          </colgroup>\n          <tbody>\n            <ng-container *cdkVirtualFor=\"\n                let item of listDataSource;\n                templateCacheSize: 100;\n                let i = index;\n                trackBy: trackByIdx;\n                let rIndex = index\n              \">\n              <!------------------- custom row template------------------->\n              @if (rowTemplate != null) {\n              <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: item, rowIndex: rIndex } }\">\n              </ng-container>\n              } @else {\n              <!------------------- normal row template------------------->\n              <tr [class.ax-state-focused]=\"focusedRow && item === focusedRow\" [attr.data-index]=\"rIndex\"\n                [class.ax-state-selected]=\"selectedRows.includes(item)\" (click)=\"handleRowClick($event, item)\">\n                <!------------------- start fixed column ------------------->\n\n                <!------------------- Not fixed column ------------------->\n                @for (c of notFixedColumn(); track c.name) {\n                <!------------------- custom cell template ------------------->\n                @if (c.cellTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: { data: item, rowIndex: rIndex } }\">\n                </ng-container>\n                } @else {\n                <!------------------- default cell template ------------------->\n                <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n                  @if (item) {\n                  <!------------------- render cell ------------------->\n                  <ng-container\n                    *ngTemplateOutlet=\"c.template;context: { $implicit: { data: item, rowIndex: rIndex } }\"></ng-container>\n                  }\n                  @else {\n                  <!------------------- render loading ------------------->\n                  @if (c.loadingEnabled && loading) {\n                  <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                  }\n                  }\n                </td>\n                }\n                }\n                <td></td>\n              </tr>\n              }\n            </ng-container>\n          </tbody>\n        </table>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  </div>\n</div>\n<div class=\"ax-table-footer\" #footerContainer>\n  <div class=\"ax-table-info\">\n    <div>Showing {{ startRowIndex }} of {{ totalRows }} items</div>\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n      <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n    </ax-button>\n  </div>\n  <ng-content select=\"ax-footer\"> </ng-content>\n</div>", styles: [".ax-dark ax-data-table .ax-header-content th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-data-table .ax-body-content tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}ax-data-table{display:block;height:100%;overflow:hidden;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));font-size:.875rem;line-height:1.25rem}ax-data-table table{table-layout:fixed}ax-data-table .ax-header-content{position:relative;height:3rem;overflow:hidden}ax-data-table .ax-header-content .ax-header-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-header-content .ax-header-fixed-columns th.ax-column-fixed{pointer-events:auto}ax-data-table .ax-header-content .ax-header-fixed-columns th:not(.ax-column-fixed){visibility:hidden;background-color:transparent}ax-data-table .ax-header-content .ax-header-columns{height:100%}ax-data-table .ax-header-content .ax-header-columns>table{height:100%;overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-data-table .ax-header-content .ax-header-columns>table th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding:.75rem 1rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive{cursor:pointer}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-data-table .ax-header-content .ax-header-columns>table th .ax-resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent}ax-data-table .ax-header-content .ax-header-columns>table th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-neutral-300))}ax-data-table .ax-header-content .ax-header-columns>table th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-header-content .ax-header-columns>table th:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content{position:relative}ax-data-table .ax-body-content .ax-body-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-body-content .ax-body-columns{height:100%}ax-data-table .ax-body-content .ax-body-columns table{border-collapse:collapse}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-body-content .ax-body-columns table tr{height:2.5rem}ax-data-table .ax-body-content .ax-body-columns table tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-400));color:rgba(var(--ax-color-primary-fore))}ax-data-table .ax-body-content .ax-body-columns table td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));padding:.5rem 1rem;vertical-align:middle}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-color-on-surface));text-align:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover:not(ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:active{opacity:1}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-body-content .ax-body-columns table td:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content .ax-body-columns table td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-data-table .ax-table-footer{border-collapse:collapse;overflow:hidden;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem .875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i2.CdkVirtualScrollableElement, selector: "[cdkVirtualScrollingElement]" }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXDataTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AXDataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-data-table', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], template: "<ng-content select=\"ax-header\"> </ng-content>\n<!------------------- Header contents ------------------->\n<div class=\"ax-header-content\" *ngIf=\"showHeader\">\n  <div class=\"ax-header-columns\">\n    <table tabindex=\"0\" [style.width]=\"width\" #headerContainer>\n      <thead>\n        <tr>\n          @for(c of notFixedColumn();track c.name)\n          {\n          <th [class.ax-interactive]=\"c.allowSorting\" (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n            [style.width]=\"c.width\">\n            @if(c.headerTemplate)\n            {\n            <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            }\n            @else {\n            <div class=\"ax-caption\">\n              {{ c.caption }}\n              <ax-icon *ngIf=\"getSort(c)\" icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n            </div>\n            }\n            <!-- @if(c.allowResizing)\n            {\n            <div class=\"ax-resize-handle\" [ax-table-column-resizble]=\"c\"></div>\n            } -->\n          </th>\n          }\n          <th></th>\n        </tr>\n      </thead>\n    </table>\n  </div>\n</div>\n<!------------------- Body contents ------------------->\n<div [style.height]=\"height\" class=\"ax-body-content\">\n  <div class=\"ax-body-columns\">\n    <div cdkVirtualScrollingElement #scrolling [style.height]=\"'100%'\" (scroll)=\"_handleOnScroll($event)\">\n      <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight + 'px'\"\n        (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\n        <table tabindex=\"0\" class=\"ax-table-body ax-relative\" [style.width]=\"width\">\n          <colgroup>\n            @for(c of notFixedColumn();track c.name)\n            {\n            <col [style.width]=\"c.width\" />\n            }\n            <col />\n          </colgroup>\n          <tbody>\n            <ng-container *cdkVirtualFor=\"\n                let item of listDataSource;\n                templateCacheSize: 100;\n                let i = index;\n                trackBy: trackByIdx;\n                let rIndex = index\n              \">\n              <!------------------- custom row template------------------->\n              @if (rowTemplate != null) {\n              <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: item, rowIndex: rIndex } }\">\n              </ng-container>\n              } @else {\n              <!------------------- normal row template------------------->\n              <tr [class.ax-state-focused]=\"focusedRow && item === focusedRow\" [attr.data-index]=\"rIndex\"\n                [class.ax-state-selected]=\"selectedRows.includes(item)\" (click)=\"handleRowClick($event, item)\">\n                <!------------------- start fixed column ------------------->\n\n                <!------------------- Not fixed column ------------------->\n                @for (c of notFixedColumn(); track c.name) {\n                <!------------------- custom cell template ------------------->\n                @if (c.cellTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: { data: item, rowIndex: rIndex } }\">\n                </ng-container>\n                } @else {\n                <!------------------- default cell template ------------------->\n                <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n                  @if (item) {\n                  <!------------------- render cell ------------------->\n                  <ng-container\n                    *ngTemplateOutlet=\"c.template;context: { $implicit: { data: item, rowIndex: rIndex } }\"></ng-container>\n                  }\n                  @else {\n                  <!------------------- render loading ------------------->\n                  @if (c.loadingEnabled && loading) {\n                  <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                  }\n                  }\n                </td>\n                }\n                }\n                <td></td>\n              </tr>\n              }\n            </ng-container>\n          </tbody>\n        </table>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  </div>\n</div>\n<div class=\"ax-table-footer\" #footerContainer>\n  <div class=\"ax-table-info\">\n    <div>Showing {{ startRowIndex }} of {{ totalRows }} items</div>\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n      <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n    </ax-button>\n  </div>\n  <ng-content select=\"ax-footer\"> </ng-content>\n</div>", styles: [".ax-dark ax-data-table .ax-header-content th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-data-table .ax-body-content tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}ax-data-table{display:block;height:100%;overflow:hidden;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));font-size:.875rem;line-height:1.25rem}ax-data-table table{table-layout:fixed}ax-data-table .ax-header-content{position:relative;height:3rem;overflow:hidden}ax-data-table .ax-header-content .ax-header-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-header-content .ax-header-fixed-columns th.ax-column-fixed{pointer-events:auto}ax-data-table .ax-header-content .ax-header-fixed-columns th:not(.ax-column-fixed){visibility:hidden;background-color:transparent}ax-data-table .ax-header-content .ax-header-columns{height:100%}ax-data-table .ax-header-content .ax-header-columns>table{height:100%;overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-data-table .ax-header-content .ax-header-columns>table th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding:.75rem 1rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive{cursor:pointer}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-data-table .ax-header-content .ax-header-columns>table th .ax-resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent}ax-data-table .ax-header-content .ax-header-columns>table th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-neutral-300))}ax-data-table .ax-header-content .ax-header-columns>table th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-header-content .ax-header-columns>table th:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content{position:relative}ax-data-table .ax-body-content .ax-body-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-body-content .ax-body-columns{height:100%}ax-data-table .ax-body-content .ax-body-columns table{border-collapse:collapse}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-body-content .ax-body-columns table tr{height:2.5rem}ax-data-table .ax-body-content .ax-body-columns table tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-400));color:rgba(var(--ax-color-primary-fore))}ax-data-table .ax-body-content .ax-body-columns table td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));padding:.5rem 1rem;vertical-align:middle}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-color-on-surface));text-align:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover:not(ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:active{opacity:1}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-body-content .ax-body-columns table td:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content .ax-body-columns table td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-data-table .ax-table-footer{border-collapse:collapse;overflow:hidden;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem .875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}\n"] }]
+            args: [{ selector: 'ax-data-table', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], template: "<ng-content select=\"ax-header\"> </ng-content>\n<!------------------- Header contents ------------------->\n@if(showHeader){\n<div class=\"ax-header-content\">\n  <div class=\"ax-header-columns\">\n    <table tabindex=\"0\" [style.width]=\"width\" #headerContainer>\n      <thead>\n        <tr>\n          @for(c of notFixedColumn();track c.name)\n          {\n          <th [class.ax-interactive]=\"c.allowSorting\" (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n            [style.width]=\"c.width\">\n            @if(c.headerTemplate)\n            {\n            <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            }\n            @else {\n            <div class=\"ax-caption\">\n              {{ c.caption }}\n              @if(getSort(c)){\n              <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n              }\n            </div>\n            }\n            <!-- @if(c.allowResizing)\n              {\n              <div class=\"ax-resize-handle\" [ax-table-column-resizble]=\"c\"></div>\n              } -->\n          </th>\n          }\n          <th></th>\n        </tr>\n      </thead>\n    </table>\n  </div>\n</div>\n}\n\n<!------------------- Body contents ------------------->\n<div [style.height]=\"height\" class=\"ax-body-content\">\n  <div class=\"ax-body-columns\">\n    <div cdkVirtualScrollingElement #scrolling [style.height]=\"'100%'\" (scroll)=\"_handleOnScroll()\">\n      <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight + 'px'\"\n        (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\n        <table tabindex=\"0\" class=\"ax-table-body ax-relative\" [style.width]=\"width\">\n          <colgroup>\n            @for(c of notFixedColumn();track c.name)\n            {\n            <col [style.width]=\"c.width\" />\n            }\n            <col />\n          </colgroup>\n          <tbody>\n            <ng-container *cdkVirtualFor=\"\n                let item of listDataSource;\n                templateCacheSize: 100;\n                let i = index;\n                trackBy: trackByIdx;\n                let rIndex = index\n              \">\n              <!------------------- custom row template------------------->\n              @if (rowTemplate != null) {\n              <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: item, rowIndex: rIndex } }\">\n              </ng-container>\n              } @else {\n              <!------------------- normal row template------------------->\n              <tr [class.ax-state-focused]=\"focusedRow && item === focusedRow\" [attr.data-index]=\"rIndex\"\n                [class.ax-state-selected]=\"selectedRows.includes(item)\" (click)=\"handleRowClick($event, item)\">\n                <!------------------- start fixed column ------------------->\n\n                <!------------------- Not fixed column ------------------->\n                @for (c of notFixedColumn(); track c.name) {\n                <!------------------- custom cell template ------------------->\n                @if (c.cellTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: { data: item, rowIndex: rIndex } }\">\n                </ng-container>\n                } @else {\n                <!------------------- default cell template ------------------->\n                <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n                  @if (item) {\n                  <!------------------- render cell ------------------->\n                  <ng-container\n                    *ngTemplateOutlet=\"c.template;context: { $implicit: { data: item, rowIndex: rIndex } }\"></ng-container>\n                  }\n                  @else {\n                  <!------------------- render loading ------------------->\n                  @if (c.loadingEnabled && loading) {\n                  <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                  }\n                  }\n                </td>\n                }\n                }\n                <td></td>\n              </tr>\n              }\n            </ng-container>\n          </tbody>\n        </table>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  </div>\n</div>\n<div class=\"ax-table-footer\" #footerContainer>\n  <div class=\"ax-table-info\">\n    <div>Showing {{ startRowIndex }} of {{ totalRows }} items</div>\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n      <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n    </ax-button>\n  </div>\n  <ng-content select=\"ax-footer\"> </ng-content>\n</div>", styles: [".ax-dark ax-data-table .ax-header-content th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-data-table .ax-body-content tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}ax-data-table{display:block;height:100%;overflow:hidden;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));font-size:.875rem;line-height:1.25rem}ax-data-table table{table-layout:fixed}ax-data-table .ax-header-content{position:relative;height:3rem;overflow:hidden}ax-data-table .ax-header-content .ax-header-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-header-content .ax-header-fixed-columns th.ax-column-fixed{pointer-events:auto}ax-data-table .ax-header-content .ax-header-fixed-columns th:not(.ax-column-fixed){visibility:hidden;background-color:transparent}ax-data-table .ax-header-content .ax-header-columns{height:100%}ax-data-table .ax-header-content .ax-header-columns>table{height:100%;overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-data-table .ax-header-content .ax-header-columns>table th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding:.75rem 1rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive{cursor:pointer}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-data-table .ax-header-content .ax-header-columns>table th .ax-resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent}ax-data-table .ax-header-content .ax-header-columns>table th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-neutral-300))}ax-data-table .ax-header-content .ax-header-columns>table th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-header-content .ax-header-columns>table th:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content{position:relative}ax-data-table .ax-body-content .ax-body-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-body-content .ax-body-columns{height:100%}ax-data-table .ax-body-content .ax-body-columns table{border-collapse:collapse}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-body-content .ax-body-columns table tr{height:2.5rem}ax-data-table .ax-body-content .ax-body-columns table tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-400));color:rgba(var(--ax-color-primary-fore))}ax-data-table .ax-body-content .ax-body-columns table td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));padding:.5rem 1rem;vertical-align:middle}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-color-on-surface));text-align:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover:not(ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:active{opacity:1}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-body-content .ax-body-columns table td:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content .ax-body-columns table td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-data-table .ax-table-footer{border-collapse:collapse;overflow:hidden;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem .875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}\n"] }]
         }], propDecorators: { columns: [{
                 type: ContentChildren,
                 args: [AXDataTableColumnComponent]
@@ -442,60 +442,62 @@ class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnComponen
         };
         this.onItemClick.emit(args);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXRowDropdownCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [{ provide: AXDataTableColumnComponent, useExisting: AXRowDropdownCommandColumnComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
-    <div *ngIf="row.data">
-      <button [axRipple]>
-        <ax-icon icon="ax-icon ax-icon-solid ax-icon-more-horizontal"></ax-icon>
-        <ax-dropdown-panel
-          [adaptivityEnabled]="true"
-          (onOpened)="handleOnOpened(row.data)"
-          (onClosed)="handleOnClosed()"
-        >
-          <ng-container *ngIf="_items.length; else loading">
-            <ax-button-item-list (onItemClick)="handleOnItemClick($event, row.data)" [items]="_items">
-            </ax-button-item-list>
-          </ng-container>
-          <ng-template #loading>
-            <div panel style="padding: 0.875rem;">
-              <ax-loading></ax-loading>
-            </div>
-          </ng-template>
-        </ax-dropdown-panel>
-      </button>
-    </div>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AXRowDropdownCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.9", type: AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [{ provide: AXDataTableColumnComponent, useExisting: AXRowDropdownCommandColumnComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
+    @if (row.data) {
+      <div>
+        <button [axRipple]>
+          <ax-icon icon="ax-icon ax-icon-solid ax-icon-more-horizontal"></ax-icon>
+          <ax-dropdown-panel
+            [adaptivityEnabled]="true"
+            (onOpened)="handleOnOpened(row.data)"
+            (onClosed)="handleOnClosed()"
+          >
+            @if (_items.length) {
+              <ax-button-item-list (onItemClick)="handleOnItemClick($event, row.data)" [items]="_items">
+              </ax-button-item-list>
+            } @else {
+              <div panel style="padding: 0.875rem;">
+                <ax-loading></ax-loading>
+              </div>
+            }
+          </ax-dropdown-panel>
+        </button>
+      </div>
+    }
     <ng-template #loading>
       <div panel style="padding: 0.875rem;">
         <ax-loading></ax-loading>
       </div>
     </ng-template>
-  </ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i5$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: i6.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  </ng-template>`, isInline: true, dependencies: [{ kind: "component", type: i1$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i4$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: i5$1.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXRowDropdownCommandColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AXRowDropdownCommandColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-dropdown-command-column',
                     template: ` <ng-template let-row>
-    <div *ngIf="row.data">
-      <button [axRipple]>
-        <ax-icon icon="ax-icon ax-icon-solid ax-icon-more-horizontal"></ax-icon>
-        <ax-dropdown-panel
-          [adaptivityEnabled]="true"
-          (onOpened)="handleOnOpened(row.data)"
-          (onClosed)="handleOnClosed()"
-        >
-          <ng-container *ngIf="_items.length; else loading">
-            <ax-button-item-list (onItemClick)="handleOnItemClick($event, row.data)" [items]="_items">
-            </ax-button-item-list>
-          </ng-container>
-          <ng-template #loading>
-            <div panel style="padding: 0.875rem;">
-              <ax-loading></ax-loading>
-            </div>
-          </ng-template>
-        </ax-dropdown-panel>
-      </button>
-    </div>
+    @if (row.data) {
+      <div>
+        <button [axRipple]>
+          <ax-icon icon="ax-icon ax-icon-solid ax-icon-more-horizontal"></ax-icon>
+          <ax-dropdown-panel
+            [adaptivityEnabled]="true"
+            (onOpened)="handleOnOpened(row.data)"
+            (onClosed)="handleOnClosed()"
+          >
+            @if (_items.length) {
+              <ax-button-item-list (onItemClick)="handleOnItemClick($event, row.data)" [items]="_items">
+              </ax-button-item-list>
+            } @else {
+              <div panel style="padding: 0.875rem;">
+                <ax-loading></ax-loading>
+              </div>
+            }
+          </ax-dropdown-panel>
+        </button>
+      </div>
+    }
     <ng-template #loading>
       <div panel style="padding: 0.875rem;">
         <ax-loading></ax-loading>
@@ -546,39 +548,41 @@ class AXRowCommandColumnComponent extends AXBaseRowCommandColumnComponent {
         };
         this.onItemClick.emit(args);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXRowCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AXRowCommandColumnComponent, selector: "ax-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [{ provide: AXDataTableColumnComponent, useExisting: AXRowCommandColumnComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
-    <div *ngIf="row.data">
-      <button
-        [style.color]="'rgba(var(--ax-color-' + (item.color ?? 'primary)')"
-        [disabled]="item.disabled"
-        [class.ax-state-disabled]="item.disabled"
-        [axRipple]="!item.disabled"
-        *ngFor="let item of getItems(row.data)"
-        (click)="handleOnItemClick($event, item, row.data)"
-      >
-        <ax-icon [icon]="item.icon"></ax-icon>
-      </button>
-    </div>
-  </ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: i6.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AXRowCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.9", type: AXRowCommandColumnComponent, selector: "ax-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [{ provide: AXDataTableColumnComponent, useExisting: AXRowCommandColumnComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
+    @if (row.data) {
+      @for (item of getItems(row.data); track $index) {
+        <button
+          [style.color]="'rgba(var(--ax-color-' + (item.color ?? 'primary)')"
+          [disabled]="item.disabled"
+          [class.ax-state-disabled]="item.disabled"
+          [axRipple]="!item.disabled"
+          (click)="handleOnItemClick($event, item, row.data)"
+        >
+          <ax-icon [icon]="item.icon"></ax-icon>
+        </button>
+      }
+    }
+  </ng-template>`, isInline: true, dependencies: [{ kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: i5$1.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXRowCommandColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AXRowCommandColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-command-column',
                     template: ` <ng-template let-row>
-    <div *ngIf="row.data">
-      <button
-        [style.color]="'rgba(var(--ax-color-' + (item.color ?? 'primary)')"
-        [disabled]="item.disabled"
-        [class.ax-state-disabled]="item.disabled"
-        [axRipple]="!item.disabled"
-        *ngFor="let item of getItems(row.data)"
-        (click)="handleOnItemClick($event, item, row.data)"
-      >
-        <ax-icon [icon]="item.icon"></ax-icon>
-      </button>
-    </div>
+    @if (row.data) {
+      @for (item of getItems(row.data); track $index) {
+        <button
+          [style.color]="'rgba(var(--ax-color-' + (item.color ?? 'primary)')"
+          [disabled]="item.disabled"
+          [class.ax-state-disabled]="item.disabled"
+          [axRipple]="!item.disabled"
+          (click)="handleOnItemClick($event, item, row.data)"
+        >
+          <ax-icon [icon]="item.icon"></ax-icon>
+        </button>
+      }
+    }
   </ng-template>`,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -621,15 +625,15 @@ class AXRowIndexColumnComponent extends AXDataTableColumnComponent {
     get cssClass() {
         return 'ax-index-column';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXRowIndexColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AXRowIndexColumnComponent, selector: "ax-index-column", inputs: { width: "width", caption: "caption", fixed: "fixed", padZero: "padZero" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AXRowIndexColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: AXRowIndexColumnComponent, selector: "ax-index-column", inputs: { width: "width", caption: "caption", fixed: "fixed", padZero: "padZero" }, providers: [
             AXUnsubscriber,
             { provide: AXDataTableColumnComponent, useExisting: AXRowIndexColumnComponent },
         ], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
     {{ row.rowIndex + 1 | format:'number': {zeroPadLength:this.formatCount, thousandSeparator:false} | async }}
   </ng-template>`, isInline: true, dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$2.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXRowIndexColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AXRowIndexColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-index-column',
@@ -676,8 +680,8 @@ class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
     get loadingEnabled() {
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXRowSelectColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AXRowSelectColumnComponent, selector: "ax-select-column", inputs: { width: "width", caption: "caption", fixed: "fixed" }, providers: [{ provide: AXDataTableColumnComponent, useExisting: AXRowSelectColumnComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AXRowSelectColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: AXRowSelectColumnComponent, selector: "ax-select-column", inputs: { width: "width", caption: "caption", fixed: "fixed" }, providers: [{ provide: AXDataTableColumnComponent, useExisting: AXRowSelectColumnComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
     <input
       class="ax-checkbox"
       type="checkbox"
@@ -687,7 +691,7 @@ class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
     />
   </ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXRowSelectColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AXRowSelectColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-select-column',
@@ -744,10 +748,10 @@ class AXDataTableColumnResizableDirective {
         document.removeEventListener('mouseup', this.onMouseUpBound);
         this.cdr.reattach(); // Reattach the change detector
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXDataTableColumnResizableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: AXDataTableColumnResizableDirective, selector: "[ax-table-column-resizble]", inputs: { column: ["ax-table-column-resizble", "column"] }, host: { listeners: { "mousedown": "onMouseDown($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AXDataTableColumnResizableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: AXDataTableColumnResizableDirective, selector: "[ax-table-column-resizble]", inputs: { column: ["ax-table-column-resizble", "column"] }, host: { listeners: { "mousedown": "onMouseDown($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXDataTableColumnResizableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AXDataTableColumnResizableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ax-table-column-resizble]'
@@ -784,8 +788,8 @@ const MODULES = [
     AXRippleDirective,
 ];
 class AXDataTableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXDataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: AXDataTableModule, declarations: [AXDataTableComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AXDataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.9", ngImport: i0, type: AXDataTableModule, declarations: [AXDataTableComponent,
             AXDataTableTextColumnComponent,
             AXRowIndexColumnComponent,
             AXRowSelectColumnComponent,
@@ -809,7 +813,7 @@ class AXDataTableModule {
             AXRowCommandColumnComponent,
             AXRowDropdownCommandColumnComponent,
             AXDataTableColumnResizableDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXDataTableModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AXDataTableModule, imports: [CommonModule,
             AXCommonModule,
             ScrollingModule,
             AXTranslationModule,
@@ -821,7 +825,7 @@ class AXDataTableModule {
             AXDropdownModule,
             AXFormatModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXDataTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AXDataTableModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],