@acorex/components 7.11.0 → 7.11.2

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

@@ -1,200 +1,173 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, ContentChildren, Output, ViewChild, NgModule } from '@angular/core';
-import { MXBaseComponent, AXPagedComponent, convertArrayToDataSource, AXListDataSource } from '@acorex/components/common';
+import { Injectable, Input, inject, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, EventEmitter, ContentChildren, Output, ChangeDetectorRef, NgModule } from '@angular/core';
+import { __decorate, __metadata } from 'tslib';
+import * as i1$1 from '@acorex/core/format';
+import { AXFormatService, AXFormatModule } from '@acorex/core/format';
+import { Memorize } from '@acorex/core/memorize';
+import * as i2$1 from '@acorex/components/common';
+import { MXBaseComponent, convertArrayToDataSource, AXListDataSource, AXPagedComponent, AXCommonModule } from '@acorex/components/common';
+import * as i2 from '@angular/cdk/scrolling';
+import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
+import sum from 'lodash-es/sum';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@acorex/components/result';
+import * as i3 from '@acorex/components/result';
 import { AXResultModule } from '@acorex/components/result';
-import * as i3 from '@acorex/core/translation';
-import { AXTranslationModule } from '@acorex/core/translation';
 import * as i4 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import { AXLoadingModule } from '@acorex/components/loading';
-import * as i2$1 from '@angular/cdk/scrolling';
-import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
-import _ from 'lodash';
 import * as i5 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
 import * as i6 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
+import * as i7 from '@acorex/core/translation';
+import { AXTranslationModule } from '@acorex/core/translation';
+import { AXUnsubscriber } from '@acorex/core/utils';
+import * as i3$1 from '@acorex/components/loading';
+import { AXLoadingModule } from '@acorex/components/loading';
+import * as i6$1 from '@acorex/components/dropdown';
+import { AXDropdownModule } from '@acorex/components/dropdown';
 
-class AXDataColumnComponent {
+class AXDataTableColumnComponent {
     constructor() {
         this.width = 'auto';
+        this.allowSorting = false;
+        this.sortIndex = undefined;
+        this.sortOrder = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.6", type: AXDataColumnComponent, selector: "ax-data-column", inputs: { headerTemplate: "headerTemplate", cellTemplate: "cellTemplate", valueField: "valueField", caption: "caption", width: "width" }, ngImport: i0 }); }
+    get cssClass() {
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableColumnComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataColumnComponent, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ax-data-column',
-                }]
-        }], propDecorators: { headerTemplate: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableColumnComponent, decorators: [{
+            type: Injectable
+        }], propDecorators: { caption: [{
                 type: Input
-            }], cellTemplate: [{
+            }], width: [{
                 type: Input
-            }], valueField: [{
+            }], fixed: [{
                 type: Input
-            }], caption: [{
+            }], allowSorting: [{
                 type: Input
-            }], width: [{
+            }], sortIndex: [{
+                type: Input
+            }], sortOrder: [{
+                type: Input
+            }], headerTemplate: [{
+                type: Input
+            }], cellTemplate: [{
                 type: Input
             }] } });
 
-class AXDataTableComponent extends MXBaseComponent {
+class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
     constructor() {
         super(...arguments);
-        this.onPageChanged = new EventEmitter();
-        this.showHeader = true;
-        this._pageSize = 20;
-        this.fetchDataMode = 'auto';
-        this._currentPage = 1;
-        this._loadedItems = [];
-        this._totalItems = 0;
-        this._isLazy = false;
-        this._isLoading = false;
-        this._items = [];
-    }
-    get pageSize() {
-        return this._pageSize;
+        this.formatService = inject(AXFormatService);
     }
-    set pageSize(v) {
-        this._pageSize = v;
-    }
-    get totalCount() {
-        return this._totalItems;
-    }
-    get isLazy() {
-        return this._isLazy;
-    }
-    get isLoading() {
-        return this._isLoading;
-    }
-    get loadedCount() {
-        return this._loadedItems?.length || 0;
-    }
-    get items() {
-        return this._items;
-    }
-    set items(v) {
-        if (Array.isArray(v)) {
-            this._items = v;
-        }
-        else if (typeof v === 'function') {
-            this._isLazy = true;
-            this._items = v;
-        }
-        else {
-            this._items = [];
-        }
-    }
-    get displayItems() {
-        if (Array.isArray(this.items)) {
-            return (this._items || []);
-        }
-        else if (typeof this._items == 'function') {
-            return this._loadedItems || [];
-        }
-        return [];
-    }
-    ngAfterViewInit() {
-        if (this.fetchDataMode == 'auto')
-            this._fetchData();
-    }
-    _fetchData(opts) {
-        const skip = (this._currentPage - 1) * this.pageSize, take = this.pageSize;
-        if ((this.loadedCount >= this.totalCount && this.totalCount != 0) ||
-            this._isLoading ||
-            !this._isLazy ||
-            skip > this.totalCount) {
-            return;
-        }
-        if (this._items) {
-            this._isLoading = true;
-            this.cdr.markForCheck();
-            const fetchFn = this._items;
-            fetchFn({ skip, take, searchQuery: opts?.searchQuery })
-                .then((c) => {
-                if (Array.isArray(c)) {
-                    this._loadedItems = c;
-                    this._totalItems = c.length;
-                }
-                else {
-                    this._totalItems = c.total || c.items?.length || 0;
-                    this._loadedItems = [...new Set(c.items)];
-                }
-            })
-                .finally(() => {
-                this._isLoading = false;
-                this.onPageChanged.next({
-                    component: this,
-                    isUserInteraction: false,
-                    name: 'page',
-                    value: this._currentPage,
-                });
-                this.cdr.markForCheck();
-            });
-        }
+    get template() {
+        return this._template;
     }
-    refresh() {
-        this._totalItems = 0;
-        this._loadedItems = [];
-        this._fetchData();
+    get skeleton() {
+        return true;
     }
-    goToPage(page) {
-        this._currentPage = page;
-        this._fetchData();
+    getDisplayText(rowData, dataField) {
+        const value = rowData[dataField];
+        const options = Array.isArray(this.formatOptions) ? this.formatOptions : [this.formatOptions];
+        return !this.format ? value : this.formatService.format(value, this.format, ...options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXDataTableComponent, selector: "ax-data-table", inputs: { rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", showHeader: "showHeader", pageSize: "pageSize", fetchDataMode: "fetchDataMode", items: "items" }, outputs: { onPageChanged: "onPageChanged" }, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], queries: [{ propertyName: "_columns", predicate: AXDataColumnComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\">\n</ng-content>\n<div class=\"ax-wrapper\">\n  <!-- [axIsLoading]=\"isLoading\" -->\n  <table class=\"ax-table ax-table-bordered\" tabindex=\"0\">\n    <thead *ngIf=\"showHeader\">\n      <tr>\n        <th *ngFor=\"let c of _columns\">\n          <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n            <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n          </ng-template>\n          <ng-template #captionTpl>\n            {{c.caption}}\n          </ng-template>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <ng-container *ngIf=\"displayItems.length; else emptyTpl\">\n        <ng-container *ngFor=\"let d of displayItems;let rIndex=index\">\n          <ng-template [ngIf]=\"rowTemplate\" [ngIfElse]=\"rowTpl\">\n            <ng-container *ngTemplateOutlet=\"rowTemplate;context: { $implicit: {data:d,rowIndex:rIndex} }\">\n            </ng-container>\n          </ng-template>\n          <ng-template #rowTpl>\n            <tr>\n              <ng-container *ngFor=\"let c of _columns\">\n                <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n                  <ng-container *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:d,rowIndex:rIndex} }\">\n                  </ng-container>\n                </ng-template>\n                <ng-template #cellTpl>\n                  <td [attr.data-label]=\"c.caption\" tabindex=\"0\">\n                    {{d[c.valueField]}}\n                  </td>\n                </ng-template>\n              </ng-container>\n            </tr>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n      <ng-template #emptyTpl>\n        <tr>\n          <td [attr.colspan]=\"_columns.length\">\n            <ng-template [ngIf]=\"emptyTemplate\" [ngIfElse]=\"defaultEmptyTemplate\">\n              <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n            </ng-template>\n            <ng-template #defaultEmptyTemplate>\n              <ax-result type=\"empty\" caption=\" {{'common.no-result-found' | trans }}\"></ax-result>\n            </ng-template>\n          </td>\n        </tr>\n      </ng-template>\n    </tbody>\n  </table>\n</div>\n<ng-content select=\"ax-footer\">\n</ng-content>", styles: ["ax-data-table{display:flex;flex-direction:column;border-radius:var(--ax-rounded-border-default);border:1px solid;border-color:rgba(var(--ax-color-border-default));outline-color:transparent}ax-data-table .ax-wrapper{display:flex;flex:1 1 0%;overflow:auto}ax-data-table>ax-header{border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table>ax-footer{border-top:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table table{position:relative;border:0}ax-data-table table thead{position:sticky;top:0}ax-data-table table tbody{height:100%}ax-data-table table td,ax-data-table table th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-data-table2{border-radius:var(--ax-rounded-border-default);border:1px solid;border-color:rgba(var(--ax-color-border-default));height:100%;font-size:.875rem;overflow-y:hidden;overflow-x:hidden}ax-data-table2 table{table-layout:fixed}ax-data-table2 .ax-table-header{border-start-start-radius:var(--ax-rounded-border-default);border-start-end-radius:var(--ax-rounded-border-default);background-color:rgba(var(--ax-color-on-surface));border-collapse:collapse;overflow:hidden}ax-data-table2 .ax-table-header th{text-transform:uppercase;font-weight:500;text-align:start;padding:.875rem 1rem;border-block-end:1px solid;border-inline-end:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table2 .ax-table-header th:last-child{border-inline-end:0px solid}ax-data-table2 .ax-table-footer{border-top:1px solid;border-color:rgba(var(--ax-color-border-default));border-collapse:collapse;overflow:hidden;padding:.875rem}ax-data-table2 .ax-table-footer .ax-table-info{display:flex;flex:1;flex-direction:row;justify-content:space-between;align-items:center}ax-data-table2 .ax-table-body{border-collapse:collapse}ax-data-table2 .ax-table-body tr:nth-child(odd){background-color:rgba(var(--ax-color-on-surface),.7)}ax-data-table2 .ax-table-body tr:last-child td{border-block-end:none}ax-data-table2 .ax-table-body td{text-align:start;padding:.875rem 1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-block-end:1px solid;border-inline-end:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table2 .ax-table-body td:last-child{border-inline-end:0px solid}\n"], 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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.AXResultComponent, selector: "ax-result", inputs: ["type", "caption", "description"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableTextColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: { width: "width", caption: "caption", headerTemplate: "headerTemplate", cellTemplate: "cellTemplate", allowSorting: "allowSorting", fixed: "fixed", dataField: "dataField", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableComponent, decorators: [{
+__decorate([
+    Memorize(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object, String]),
+    __metadata("design:returntype", String)
+], AXDataTableTextColumnComponent.prototype, "getDisplayText", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableTextColumnComponent, 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\">\n</ng-content>\n<div class=\"ax-wrapper\">\n  <!-- [axIsLoading]=\"isLoading\" -->\n  <table class=\"ax-table ax-table-bordered\" tabindex=\"0\">\n    <thead *ngIf=\"showHeader\">\n      <tr>\n        <th *ngFor=\"let c of _columns\">\n          <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n            <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n          </ng-template>\n          <ng-template #captionTpl>\n            {{c.caption}}\n          </ng-template>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <ng-container *ngIf=\"displayItems.length; else emptyTpl\">\n        <ng-container *ngFor=\"let d of displayItems;let rIndex=index\">\n          <ng-template [ngIf]=\"rowTemplate\" [ngIfElse]=\"rowTpl\">\n            <ng-container *ngTemplateOutlet=\"rowTemplate;context: { $implicit: {data:d,rowIndex:rIndex} }\">\n            </ng-container>\n          </ng-template>\n          <ng-template #rowTpl>\n            <tr>\n              <ng-container *ngFor=\"let c of _columns\">\n                <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n                  <ng-container *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:d,rowIndex:rIndex} }\">\n                  </ng-container>\n                </ng-template>\n                <ng-template #cellTpl>\n                  <td [attr.data-label]=\"c.caption\" tabindex=\"0\">\n                    {{d[c.valueField]}}\n                  </td>\n                </ng-template>\n              </ng-container>\n            </tr>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n      <ng-template #emptyTpl>\n        <tr>\n          <td [attr.colspan]=\"_columns.length\">\n            <ng-template [ngIf]=\"emptyTemplate\" [ngIfElse]=\"defaultEmptyTemplate\">\n              <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n            </ng-template>\n            <ng-template #defaultEmptyTemplate>\n              <ax-result type=\"empty\" caption=\" {{'common.no-result-found' | trans }}\"></ax-result>\n            </ng-template>\n          </td>\n        </tr>\n      </ng-template>\n    </tbody>\n  </table>\n</div>\n<ng-content select=\"ax-footer\">\n</ng-content>", styles: ["ax-data-table{display:flex;flex-direction:column;border-radius:var(--ax-rounded-border-default);border:1px solid;border-color:rgba(var(--ax-color-border-default));outline-color:transparent}ax-data-table .ax-wrapper{display:flex;flex:1 1 0%;overflow:auto}ax-data-table>ax-header{border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table>ax-footer{border-top:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table table{position:relative;border:0}ax-data-table table thead{position:sticky;top:0}ax-data-table table tbody{height:100%}ax-data-table table td,ax-data-table table th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-data-table2{border-radius:var(--ax-rounded-border-default);border:1px solid;border-color:rgba(var(--ax-color-border-default));height:100%;font-size:.875rem;overflow-y:hidden;overflow-x:hidden}ax-data-table2 table{table-layout:fixed}ax-data-table2 .ax-table-header{border-start-start-radius:var(--ax-rounded-border-default);border-start-end-radius:var(--ax-rounded-border-default);background-color:rgba(var(--ax-color-on-surface));border-collapse:collapse;overflow:hidden}ax-data-table2 .ax-table-header th{text-transform:uppercase;font-weight:500;text-align:start;padding:.875rem 1rem;border-block-end:1px solid;border-inline-end:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table2 .ax-table-header th:last-child{border-inline-end:0px solid}ax-data-table2 .ax-table-footer{border-top:1px solid;border-color:rgba(var(--ax-color-border-default));border-collapse:collapse;overflow:hidden;padding:.875rem}ax-data-table2 .ax-table-footer .ax-table-info{display:flex;flex:1;flex-direction:row;justify-content:space-between;align-items:center}ax-data-table2 .ax-table-body{border-collapse:collapse}ax-data-table2 .ax-table-body tr:nth-child(odd){background-color:rgba(var(--ax-color-on-surface),.7)}ax-data-table2 .ax-table-body tr:last-child td{border-block-end:none}ax-data-table2 .ax-table-body td{text-align:start;padding:.875rem 1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-block-end:1px solid;border-inline-end:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table2 .ax-table-body td:last-child{border-inline-end:0px solid}\n"] }]
-        }], propDecorators: { _columns: [{
-                type: ContentChildren,
-                args: [AXDataColumnComponent]
-            }], onPageChanged: [{
-                type: Output
-            }], rowTemplate: [{
-                type: Input
-            }], emptyTemplate: [{
-                type: Input
-            }], showHeader: [{
-                type: Input
-            }], pageSize: [{
+            args: [{
+                    selector: 'ax-text-column',
+                    template: `
+    <ng-template let-row>
+        {{getDisplayText(row.data,this.dataField)}}
+    </ng-template>`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: AXDataTableColumnComponent, useExisting: AXDataTableTextColumnComponent }],
+                    inputs: ['width', 'caption', 'headerTemplate', 'cellTemplate', 'allowSorting', 'fixed'],
+                }]
+        }], propDecorators: { dataField: [{
                 type: Input
-            }], fetchDataMode: [{
+            }], _template: [{
+                type: ViewChild,
+                args: [TemplateRef]
+            }], getDisplayText: [], format: [{
                 type: Input
-            }], items: [{
+            }], formatOptions: [{
                 type: Input
             }] } });
 
-class AXDataTable2Component extends MXBaseComponent {
+class AXDataTableComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
         this.onPageChanged = new EventEmitter();
         this.showHeader = true;
-        this._pageSize = 20;
         this.fetchDataMode = 'auto';
         this.dataSource = convertArrayToDataSource([]);
         this.isLoading = true;
         this.hasItems = false;
         this.totalRows = 0;
+        this.currentPage = 0;
+        this.totalPages = 0;
         this.startRowIndex = 0;
-        this.endRowIndex = 0;
         this.lastIndex = 0;
+        this.focusedRowChange = new EventEmitter();
+        this.selectedRowsChange = new EventEmitter();
+        this._selectedRows = [];
         this.itemHeight = 40;
         this.width = "100%";
         this.height = "100%";
         this.onScrolledIndexChanged = new EventEmitter();
     }
-    get pageSize() {
-        return this._pageSize;
+    startFixedColumn() {
+        return this.columns?.toArray().filter(c => c.fixed == 'start') ?? [];
+    }
+    endFixedColumn() {
+        return this.columns?.toArray().filter(c => c.fixed == 'end') ?? [];
+    }
+    notFixedColumn() {
+        return this.columns?.toArray().filter(c => !c.fixed) ?? [];
+    }
+    notFixedColumnCount() {
+        return this.columns?.toArray().filter(c => !c.fixed).length ?? 0;
+    }
+    fixedColumnCount() {
+        return this.columns?.toArray().filter(c => c.fixed).length ?? 0;
     }
-    set pageSize(v) {
-        this._pageSize = v;
+    get focusedRow() {
+        return this._focusedRow;
+    }
+    set focusedRow(v) {
+        this._focusedRow = v;
+        this.focusedRowChange.emit(v);
+    }
+    get selectedRows() {
+        return this._selectedRows;
+    }
+    set selectedRows(v) {
+        this._selectedRows = v;
+        this.selectedRowsChange.emit(v);
+    }
+    selectRows(...rows) {
+        this.selectedRows = [...this.selectedRows, ...rows];
+    }
+    unSelectRows(...rows) {
+        this.selectedRows = this.selectedRows.filter(c => !rows.includes(c));
     }
     trackByIdx(i) {
         return i;
@@ -228,17 +201,39 @@ class AXDataTable2Component extends MXBaseComponent {
         });
     }
     ngDoCheck() {
+        //this.copyFixedColumns();
         if (this.headerContainer) {
             const headerContainer = this.headerContainer.nativeElement;
             const left = this.getHostElement().querySelector('.cdk-virtual-scrollable').scrollLeft;
-            headerContainer.scrollLeft = left;
+            headerContainer.style.transform = `translateX(${-left}px)`;
         }
         if (this.columns && this.columns.length) {
-            const sum = _.sum(this.columns.toArray().map(c => typeof c.width == 'number' ? c.width : Number(c.width.replace('px', ''))));
-            this.width = `${Math.max(sum, this.getHostElement().clientWidth - 5)}px`;
+            const sumPx = sum(this.columns.toArray().map(c => typeof c.width == 'number' ? c.width : Number(c.width.replace('px', ''))));
+            this.width = `${Math.max(sumPx, this.getHostElement().clientWidth - 5)}px`;
         }
         this.height = `calc(100% - ${((this.headerContainer?.nativeElement.clientHeight ?? 0) + (this.footerContainer?.nativeElement.clientHeight ?? 0))}px)`;
-        this.startRowIndex = (this.listDataSource?.range.start ?? 0) + this.pageSize;
+        this.startRowIndex = this.lastIndex;
+        if (this.startRowIndex < 1)
+            this.startRowIndex = 1;
+        if (this.startRowIndex > this.totalRows)
+            this.startRowIndex = this.totalRows;
+    }
+    // Function to copy fixed columns
+    copyFixedColumns() {
+        const originalRows = Array.from(this.viewport._contentWrapper.nativeElement.querySelectorAll('tr'));
+        const fixedColumnTable = this.getHostElement().querySelector('.ax-body-fixed-columns > table > tbody');
+        fixedColumnTable.querySelectorAll('tr').forEach(n => n.remove());
+        for (const row of originalRows) {
+            const fixedCells = Array.from(row.querySelectorAll('[data-fixed="start"]'));
+            const fixedRow = document.createElement('tr');
+            for (const cell of fixedCells) {
+                const clonedCell = cell.cloneNode(true);
+                fixedRow.appendChild(clonedCell);
+            }
+            fixedColumnTable.appendChild(fixedRow);
+        }
+        const scrollTop = this.getHostElement().querySelector('.cdk-virtual-scrollable').scrollTop;
+        fixedColumnTable.style.transform = `translateY(${-scrollTop}px)`;
     }
     render() {
         this.viewport.checkViewportSize();
@@ -246,17 +241,53 @@ class AXDataTable2Component extends MXBaseComponent {
         this.cdr.markForCheck();
     }
     refresh() {
+        this.lastIndex = 0;
         this.dataSource.refresh();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTable2Component, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXDataTable2Component, selector: "ax-data-table2", inputs: { rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", loadingTemplate: "loadingTemplate", showHeader: "showHeader", pageSize: "pageSize", fetchDataMode: "fetchDataMode", dataSource: "dataSource", itemHeight: "itemHeight" }, outputs: { onPageChanged: "onPageChanged", onScrolledIndexChanged: "onScrolledIndexChanged" }, providers: [{ provide: AXPagedComponent, useExisting: AXDataTable2Component }], queries: [{ propertyName: "columns", predicate: AXDataColumnComponent }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true }, { propertyName: "footerContainer", first: true, predicate: ["footerContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\">\n</ng-content>\n<div class=\"ax-table-header\" #headerContainer>\n  <table tabindex=\"0\" *ngIf=\"showHeader\" [style.width]=\"width\">\n    <thead>\n      <tr>\n        <th *ngFor=\"let c of columns\" [style.width]=\"c.width\">\n          <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n            <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n          </ng-template>\n          <ng-template #captionTpl>\n            {{c.caption}}\n          </ng-template>\n        </th>\n        <th>&nbsp;</th>\n      </tr>\n    </thead>\n  </table>\n</div>\n<div cdkVirtualScrollingElement [style.height]=\"height\">\n  <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight+'px'\"\n    (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\n    <table tabindex=\"0\" class=\"ax-table-body\" [style.width]=\"width\">\n      <tbody>\n        <!-- <ng-container *ngIf=\"hasItems;else emptyTpl\"> -->\n        <ng-container *cdkVirtualFor=\"let item of listDataSource;let i = index; trackBy: trackByIdx;let rIndex=index;\">\n          <ng-template [ngIf]=\"rowTemplate\" [ngIfElse]=\"rowTpl\">\n            <ng-container *ngTemplateOutlet=\"rowTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n            </ng-container>\n          </ng-template>\n          <ng-template #rowTpl>\n            <tr>\n              <ng-container *ngFor=\"let c of columns\">\n                <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n                  <ng-container *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                  </ng-container>\n                </ng-template>\n                <ng-template #cellTpl>\n                  <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [style.width]=\"c.width\">\n                    <ng-container *ngIf=\"item;else loadingTpl\">\n                      {{item[c.valueField]}}\n                    </ng-container>\n                  </td>\n                </ng-template>\n              </ng-container>\n              <td>&nbsp;</td>\n            </tr>\n          </ng-template>\n        </ng-container>\n        <!-- </ng-container> -->\n      </tbody>\n    </table>\n  </cdk-virtual-scroll-viewport>\n</div>\n<div class=\"ax-table-footer\" #footerContainer>\n  <div class=\"ax-table-info\">\n    <div>\n      Showing <span style=\"font-weight: 600;\">{{startRowIndex}}</span> of <span\n        style=\"font-weight: 600;\">{{totalRows}}</span>\n    </div>\n    <ax-button look=\"blank\">\n      <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n    </ax-button>\n  </div>\n  <ng-content select=\"ax-footer\">\n  </ng-content>\n</div>\n\n<!--  Loading Template  -->\n<ng-template #loadingTpl>\n  <!--  Custom Loading Template  -->\n  <ng-container *ngIf=\"loadingTemplate;else defaultLoadingTpl\">\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\">\n    </ng-container>\n  </ng-container>\n  <!--  Default Loading Template  -->\n  <ng-template #defaultLoadingTpl>\n    <ax-skeleton [animated]=\"true\" class=\"ax-w-1/2 ax-h-4 ax-rounded\"></ax-skeleton>\n  </ng-template>\n</ng-template>\n<!--  Empty Template  -->\n<ng-template #emptyTpl>\n  <tr>\n    <td [attr.colspan]=\"columns.length\">\n      <ng-template [ngIf]=\"emptyTemplate\" [ngIfElse]=\"defaultEmptyTemplate\">\n        <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n      </ng-template>\n      <ng-template #defaultEmptyTemplate>\n        <ax-result type=\"empty\" caption=\" {{'common.no-result-found' | trans }}\"></ax-result>\n      </ng-template>\n    </td>\n  </tr>\n</ng-template>", styles: ["ax-data-table{display:flex;flex-direction:column;border-radius:var(--ax-rounded-border-default);border:1px solid;border-color:rgba(var(--ax-color-border-default));outline-color:transparent}ax-data-table .ax-wrapper{display:flex;flex:1 1 0%;overflow:auto}ax-data-table>ax-header{border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table>ax-footer{border-top:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table table{position:relative;border:0}ax-data-table table thead{position:sticky;top:0}ax-data-table table tbody{height:100%}ax-data-table table td,ax-data-table table th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-data-table2{border-radius:var(--ax-rounded-border-default);border:1px solid;border-color:rgba(var(--ax-color-border-default));height:100%;font-size:.875rem;overflow-y:hidden;overflow-x:hidden}ax-data-table2 table{table-layout:fixed}ax-data-table2 .ax-table-header{border-start-start-radius:var(--ax-rounded-border-default);border-start-end-radius:var(--ax-rounded-border-default);background-color:rgba(var(--ax-color-on-surface));border-collapse:collapse;overflow:hidden}ax-data-table2 .ax-table-header th{text-transform:uppercase;font-weight:500;text-align:start;padding:.875rem 1rem;border-block-end:1px solid;border-inline-end:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table2 .ax-table-header th:last-child{border-inline-end:0px solid}ax-data-table2 .ax-table-footer{border-top:1px solid;border-color:rgba(var(--ax-color-border-default));border-collapse:collapse;overflow:hidden;padding:.875rem}ax-data-table2 .ax-table-footer .ax-table-info{display:flex;flex:1;flex-direction:row;justify-content:space-between;align-items:center}ax-data-table2 .ax-table-body{border-collapse:collapse}ax-data-table2 .ax-table-body tr:nth-child(odd){background-color:rgba(var(--ax-color-on-surface),.7)}ax-data-table2 .ax-table-body tr:last-child td{border-block-end:none}ax-data-table2 .ax-table-body td{text-align:start;padding:.875rem 1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-block-end:1px solid;border-inline-end:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table2 .ax-table-body td:last-child{border-inline-end:0px solid}\n"], 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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i2$1.CdkVirtualScrollableElement, selector: "[cdkVirtualScrollingElement]" }, { kind: "component", type: i2.AXResultComponent, selector: "ax-result", inputs: ["type", "caption", "description"] }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: i6.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    handleRowClick(e, item) {
+        if (this.focusedRow == item) {
+            this.focusedRow = null;
+        }
+        else {
+            this.focusedRow = item;
+        }
+    }
+    handleColumnClick(e, column) {
+        if (column instanceof AXDataTableTextColumnComponent) {
+            const sort = this.dataSource.query.sort.find(c => c.field == column.dataField);
+            if (!sort) {
+                this.dataSource.query.sort.push({ field: column.dataField, dir: 'asc' });
+            }
+            else {
+                if (sort.dir == 'asc') {
+                    sort.dir = 'desc';
+                }
+                else {
+                    this.dataSource.query.sort = this.dataSource.query.sort.filter(c => c != sort);
+                }
+            }
+            this.refresh();
+        }
+    }
+    getSort(column) {
+        if (column instanceof AXDataTableTextColumnComponent) {
+            const sort = this.dataSource.query.sort.find(c => c.field == column.dataField);
+            return sort ? (sort.dir == 'asc' ? 'ax-icon-arrow-long-down' : 'ax-icon-arrow-long-up') : undefined;
+        }
+        return undefined;
+    }
+    onViewChange(e) {
+        console.log(e);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXDataTableComponent, selector: "ax-data-table", inputs: { rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", loadingTemplate: "loadingTemplate", showHeader: "showHeader", fetchDataMode: "fetchDataMode", dataSource: "dataSource", focusedRow: "focusedRow", selectedRows: "selectedRows", itemHeight: "itemHeight" }, outputs: { onPageChanged: "onPageChanged", 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 }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\">\n</ng-content>\n<!------------------- Header contents ------------------->\n<div class=\"ax-header-content\" *ngIf=\"showHeader\">\n  <div class=\"ax-header-columns ax-header-fixed-columns\" *ngIf=\"false\">\n    <table tabindex=\"0\" [style.width]=\"width\">\n      <colgroup>\n        <!------------------- start fixed column ------------------->\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n        <!------------------- not fixed column ------------------->\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n        <col style=\"width: 10px;\">\n      </colgroup>\n      <thead>\n        <tr>\n          <!------------------- start fixed column ------------------->\n          <th *ngFor=\"let c of startFixedColumn()\" [class.ax-interactive]=\"c.allowSorting\"\n            (click)=\"c.allowSorting ? handleColumnClick($event,c) : null\" class=\"ax-column-fixed\">\n            <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n              <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            </ng-template>\n            <ng-template #captionTpl>\n              <div class=\"ax-caption\">\n                {{c.caption }}\n                <ax-icon *ngIf=\"getSort(c)\" icon=\"ax-icon {{getSort(c)}}\"></ax-icon>\n              </div>\n            </ng-template>\n          </th>\n          <!------------------- not fixed column ------------------->\n          <th [attr.colspan]=\"notFixedColumnCount()\">\n\n          </th>\n        </tr>\n      </thead>\n    </table>\n  </div>\n  <div class=\"ax-header-columns\">\n    <table tabindex=\"0\" [style.width]=\"width\" #headerContainer>\n      <colgroup>\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n        <col style=\"width: auto;\">\n      </colgroup>\n      <thead>\n        <tr>\n          <th *ngFor=\"let c of startFixedColumn()\">\n          </th>\n          <th *ngFor=\"let c of notFixedColumn()\" [class.ax-interactive]=\"c.allowSorting\"\n            (click)=\"c.allowSorting ? handleColumnClick($event,c) : null\">\n            <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n              <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            </ng-template>\n            <ng-template #captionTpl>\n              <div class=\"ax-caption\">\n                {{c.caption}}\n                <ax-icon *ngIf=\"getSort(c)\" icon=\"ax-icon {{getSort(c)}}\"></ax-icon>\n              </div>\n            </ng-template>\n          </th>\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 ax-body-fixed-columns\" *ngIf=\"false\">\n    <table tabindex=\"0\" class=\"ax-table-body\" [style.width]=\"width\">\n      <colgroup>\n        <!------------------- start fixed column ------------------->\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n        <!------------------- not fixed column ------------------->\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n        <col>\n      </colgroup>\n      <tbody>\n      </tbody>\n    </table>\n  </div>\n  <div class=\"ax-body-columns\">\n    <div cdkVirtualScrollingElement [style.height]=\"'100%'\">\n      <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight+'px'\"\n        (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\n        <table tabindex=\"0\" class=\"ax-table-body\" [style.width]=\"width\">\n          <colgroup>\n            <!------------------- start fixed column ------------------->\n            <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n            <!------------------- not fixed column ------------------->\n            <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n            <col>\n          </colgroup>\n          <tbody>\n            <ng-container\n              *cdkVirtualFor=\"let item of listDataSource;  let i = index; trackBy: trackByIdx;let rIndex=index;\"\n              (viewChange)=\"onViewChange($event)\">\n              <ng-template [ngIf]=\"rowTemplate\" [ngIfElse]=\"rowTpl\">\n                <ng-container *ngTemplateOutlet=\"rowTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                </ng-container>\n              </ng-template>\n              <ng-template #rowTpl>\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                  <ng-container *ngFor=\"let c of startFixedColumn()\">\n                    <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n                      <div class=\"ax-content\">\n                        <ng-container\n                          *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                    <ng-template #cellTpl>\n                      <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\" [attr.data-fixed]=\"c.fixed\"\n                        class=\"ax-column-fixed\">\n                        <div class=\"ax-content\">\n                          <ng-container *ngIf=\"item || !c.skeleton;else loadingTpl\">\n                            <ng-container\n                              *ngTemplateOutlet=\"c.template; context: { $implicit: {data:item,rowIndex:rIndex} }\"></ng-container>\n                          </ng-container>\n                        </div>\n                      </td>\n                    </ng-template>\n                  </ng-container>\n                  <!------------------- Not fixed column ------------------->\n                  <ng-container *ngFor=\"let c of notFixedColumn()\">\n                    <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n                      <div class=\"ax-content\">\n                        <ng-container\n                          *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                    <ng-template #cellTpl>\n                      <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n                        <div class=\"ax-content\">\n                          <ng-container *ngIf=\"item || !c.skeleton;else loadingTpl\">\n                            <ng-container\n                              *ngTemplateOutlet=\"c.template; context: { $implicit: {data:item,rowIndex:rIndex} }\"></ng-container>\n                          </ng-container>\n                        </div>\n                      </td>\n                    </ng-template>\n                  </ng-container>\n                  <td></td>\n                </tr>\n              </ng-template>\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>\n      Showing {{startRowIndex}} of {{totalRows}} items\n    </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\">\n  </ng-content>\n</div>\n\n<!--  Loading Template  -->\n<ng-template #loadingTpl>\n  <!--  Custom Loading Template  -->\n  <ng-container *ngIf=\"loadingTemplate;else defaultLoadingTpl\">\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\">\n    </ng-container>\n  </ng-container>\n  <!--  Default Loading Template  -->\n  <ng-template #defaultLoadingTpl>\n    <ax-skeleton [animated]=\"true\"></ax-skeleton>\n  </ng-template>\n</ng-template>\n<!--  Empty Template  -->\n<ng-template #emptyTpl>\n  <tr>\n    <td [attr.colspan]=\"columns.length\">\n      <ng-template [ngIf]=\"emptyTemplate\" [ngIfElse]=\"defaultEmptyTemplate\">\n        <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n      </ng-template>\n      <ng-template #defaultEmptyTemplate>\n        <ax-result type=\"empty\" caption=\" {{'common.no-result-found' | trans }}\"></ax-result>\n      </ng-template>\n    </td>\n  </tr>\n</ng-template>", 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-950))!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{border-radius:var(--ax-rounded-border-default);border:1px solid;border-color:rgba(var(--ax-color-border-default));height:100%;font-size:.875rem;overflow-y:hidden;overflow-x:hidden}ax-data-table table{table-layout:fixed}ax-data-table .ax-header-content{height:50px;overflow:hidden;position:relative}ax-data-table .ax-header-content .ax-header-fixed-columns{position:absolute;z-index:1;pointer-events:none}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%;border-start-start-radius:var(--ax-rounded-border-default);border-start-end-radius:var(--ax-rounded-border-default);border-collapse:collapse;overflow:hidden}ax-data-table .ax-header-content .ax-header-columns>table th{text-transform:uppercase;background-color:rgba(var(--ax-color-on-surface));font-weight:500;text-align:start;padding:.875rem 1rem;border-block-end:1px solid;border-inline-end:1px solid;border-color:rgba(var(--ax-color-border-default))}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-caption{display:flex;gap:.5rem;align-items:center}ax-data-table .ax-header-content .ax-header-columns>table th:last-child{border-inline-end:0px solid}ax-data-table .ax-body-content{position:relative}ax-data-table .ax-body-content .ax-body-fixed-columns{position:absolute;z-index:1;pointer-events:none}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(odd) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(odd) ax-skeleton{width:25%}ax-data-table .ax-body-content .ax-body-columns table tr{height:40px}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-lighten))}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-lighten))}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{min-width:2rem;padding:.5rem 1rem;border-block-end:1px solid;border-inline-end:1px solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));position:relative}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column{background-color:rgba(var(--ax-color-on-surface))!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column>.ax-content{justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column>.ax-content span{text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content{position:relative}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content>div{position:absolute;top:50%;transform:translateY(-50%);inset-inline-start:0;display:flex;flex-direction:row;align-items:center;width:100%;justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button{background-color:transparent;border:none;color:rgba(var(--ax-color-ghost-fore));position:relative;padding:.25rem;line-height:1;border-radius:var(--ax-rounded-border-default);font-size:1rem;cursor:pointer;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover:not(ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover.ax-state-selected,ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:active{opacity:1}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.5)!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button .ax-icon{font-size:1.25rem}ax-data-table .ax-body-content .ax-body-columns table td>.ax-content{display:flex;justify-content:flex-start;width:100%}ax-data-table .ax-body-content .ax-body-columns table td:last-child{border-inline-end:0px solid}ax-data-table .ax-body-content .ax-body-columns table td ax-skeleton{height:.875rem;border-radius:calc(var(--ax-rounded-border-default) / 1.5);width:35%}ax-data-table .ax-table-footer{border-top:1px solid;border-color:rgba(var(--ax-color-border-default));border-collapse:collapse;overflow:hidden;padding:.5rem .875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1;flex-direction:row;justify-content:space-between;align-items:center}\n"], 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: "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.AXResultComponent, selector: "ax-result", inputs: ["type", "caption", "description"] }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: i6.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "pipe", type: i7.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTable2Component, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-data-table2', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXPagedComponent, useExisting: AXDataTable2Component }], template: "<ng-content select=\"ax-header\">\n</ng-content>\n<div class=\"ax-table-header\" #headerContainer>\n  <table tabindex=\"0\" *ngIf=\"showHeader\" [style.width]=\"width\">\n    <thead>\n      <tr>\n        <th *ngFor=\"let c of columns\" [style.width]=\"c.width\">\n          <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n            <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n          </ng-template>\n          <ng-template #captionTpl>\n            {{c.caption}}\n          </ng-template>\n        </th>\n        <th>&nbsp;</th>\n      </tr>\n    </thead>\n  </table>\n</div>\n<div cdkVirtualScrollingElement [style.height]=\"height\">\n  <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight+'px'\"\n    (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\n    <table tabindex=\"0\" class=\"ax-table-body\" [style.width]=\"width\">\n      <tbody>\n        <!-- <ng-container *ngIf=\"hasItems;else emptyTpl\"> -->\n        <ng-container *cdkVirtualFor=\"let item of listDataSource;let i = index; trackBy: trackByIdx;let rIndex=index;\">\n          <ng-template [ngIf]=\"rowTemplate\" [ngIfElse]=\"rowTpl\">\n            <ng-container *ngTemplateOutlet=\"rowTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n            </ng-container>\n          </ng-template>\n          <ng-template #rowTpl>\n            <tr>\n              <ng-container *ngFor=\"let c of columns\">\n                <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n                  <ng-container *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                  </ng-container>\n                </ng-template>\n                <ng-template #cellTpl>\n                  <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [style.width]=\"c.width\">\n                    <ng-container *ngIf=\"item;else loadingTpl\">\n                      {{item[c.valueField]}}\n                    </ng-container>\n                  </td>\n                </ng-template>\n              </ng-container>\n              <td>&nbsp;</td>\n            </tr>\n          </ng-template>\n        </ng-container>\n        <!-- </ng-container> -->\n      </tbody>\n    </table>\n  </cdk-virtual-scroll-viewport>\n</div>\n<div class=\"ax-table-footer\" #footerContainer>\n  <div class=\"ax-table-info\">\n    <div>\n      Showing <span style=\"font-weight: 600;\">{{startRowIndex}}</span> of <span\n        style=\"font-weight: 600;\">{{totalRows}}</span>\n    </div>\n    <ax-button look=\"blank\">\n      <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n    </ax-button>\n  </div>\n  <ng-content select=\"ax-footer\">\n  </ng-content>\n</div>\n\n<!--  Loading Template  -->\n<ng-template #loadingTpl>\n  <!--  Custom Loading Template  -->\n  <ng-container *ngIf=\"loadingTemplate;else defaultLoadingTpl\">\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\">\n    </ng-container>\n  </ng-container>\n  <!--  Default Loading Template  -->\n  <ng-template #defaultLoadingTpl>\n    <ax-skeleton [animated]=\"true\" class=\"ax-w-1/2 ax-h-4 ax-rounded\"></ax-skeleton>\n  </ng-template>\n</ng-template>\n<!--  Empty Template  -->\n<ng-template #emptyTpl>\n  <tr>\n    <td [attr.colspan]=\"columns.length\">\n      <ng-template [ngIf]=\"emptyTemplate\" [ngIfElse]=\"defaultEmptyTemplate\">\n        <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n      </ng-template>\n      <ng-template #defaultEmptyTemplate>\n        <ax-result type=\"empty\" caption=\" {{'common.no-result-found' | trans }}\"></ax-result>\n      </ng-template>\n    </td>\n  </tr>\n</ng-template>", styles: ["ax-data-table{display:flex;flex-direction:column;border-radius:var(--ax-rounded-border-default);border:1px solid;border-color:rgba(var(--ax-color-border-default));outline-color:transparent}ax-data-table .ax-wrapper{display:flex;flex:1 1 0%;overflow:auto}ax-data-table>ax-header{border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table>ax-footer{border-top:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table table{position:relative;border:0}ax-data-table table thead{position:sticky;top:0}ax-data-table table tbody{height:100%}ax-data-table table td,ax-data-table table th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-data-table2{border-radius:var(--ax-rounded-border-default);border:1px solid;border-color:rgba(var(--ax-color-border-default));height:100%;font-size:.875rem;overflow-y:hidden;overflow-x:hidden}ax-data-table2 table{table-layout:fixed}ax-data-table2 .ax-table-header{border-start-start-radius:var(--ax-rounded-border-default);border-start-end-radius:var(--ax-rounded-border-default);background-color:rgba(var(--ax-color-on-surface));border-collapse:collapse;overflow:hidden}ax-data-table2 .ax-table-header th{text-transform:uppercase;font-weight:500;text-align:start;padding:.875rem 1rem;border-block-end:1px solid;border-inline-end:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table2 .ax-table-header th:last-child{border-inline-end:0px solid}ax-data-table2 .ax-table-footer{border-top:1px solid;border-color:rgba(var(--ax-color-border-default));border-collapse:collapse;overflow:hidden;padding:.875rem}ax-data-table2 .ax-table-footer .ax-table-info{display:flex;flex:1;flex-direction:row;justify-content:space-between;align-items:center}ax-data-table2 .ax-table-body{border-collapse:collapse}ax-data-table2 .ax-table-body tr:nth-child(odd){background-color:rgba(var(--ax-color-on-surface),.7)}ax-data-table2 .ax-table-body tr:last-child td{border-block-end:none}ax-data-table2 .ax-table-body td{text-align:start;padding:.875rem 1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-block-end:1px solid;border-inline-end:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table2 .ax-table-body td:last-child{border-inline-end:0px solid}\n"] }]
+            args: [{ selector: 'ax-data-table', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], template: "<ng-content select=\"ax-header\">\n</ng-content>\n<!------------------- Header contents ------------------->\n<div class=\"ax-header-content\" *ngIf=\"showHeader\">\n  <div class=\"ax-header-columns ax-header-fixed-columns\" *ngIf=\"false\">\n    <table tabindex=\"0\" [style.width]=\"width\">\n      <colgroup>\n        <!------------------- start fixed column ------------------->\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n        <!------------------- not fixed column ------------------->\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n        <col style=\"width: 10px;\">\n      </colgroup>\n      <thead>\n        <tr>\n          <!------------------- start fixed column ------------------->\n          <th *ngFor=\"let c of startFixedColumn()\" [class.ax-interactive]=\"c.allowSorting\"\n            (click)=\"c.allowSorting ? handleColumnClick($event,c) : null\" class=\"ax-column-fixed\">\n            <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n              <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            </ng-template>\n            <ng-template #captionTpl>\n              <div class=\"ax-caption\">\n                {{c.caption }}\n                <ax-icon *ngIf=\"getSort(c)\" icon=\"ax-icon {{getSort(c)}}\"></ax-icon>\n              </div>\n            </ng-template>\n          </th>\n          <!------------------- not fixed column ------------------->\n          <th [attr.colspan]=\"notFixedColumnCount()\">\n\n          </th>\n        </tr>\n      </thead>\n    </table>\n  </div>\n  <div class=\"ax-header-columns\">\n    <table tabindex=\"0\" [style.width]=\"width\" #headerContainer>\n      <colgroup>\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n        <col style=\"width: auto;\">\n      </colgroup>\n      <thead>\n        <tr>\n          <th *ngFor=\"let c of startFixedColumn()\">\n          </th>\n          <th *ngFor=\"let c of notFixedColumn()\" [class.ax-interactive]=\"c.allowSorting\"\n            (click)=\"c.allowSorting ? handleColumnClick($event,c) : null\">\n            <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n              <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            </ng-template>\n            <ng-template #captionTpl>\n              <div class=\"ax-caption\">\n                {{c.caption}}\n                <ax-icon *ngIf=\"getSort(c)\" icon=\"ax-icon {{getSort(c)}}\"></ax-icon>\n              </div>\n            </ng-template>\n          </th>\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 ax-body-fixed-columns\" *ngIf=\"false\">\n    <table tabindex=\"0\" class=\"ax-table-body\" [style.width]=\"width\">\n      <colgroup>\n        <!------------------- start fixed column ------------------->\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n        <!------------------- not fixed column ------------------->\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n        <col>\n      </colgroup>\n      <tbody>\n      </tbody>\n    </table>\n  </div>\n  <div class=\"ax-body-columns\">\n    <div cdkVirtualScrollingElement [style.height]=\"'100%'\">\n      <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight+'px'\"\n        (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\n        <table tabindex=\"0\" class=\"ax-table-body\" [style.width]=\"width\">\n          <colgroup>\n            <!------------------- start fixed column ------------------->\n            <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n            <!------------------- not fixed column ------------------->\n            <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n            <col>\n          </colgroup>\n          <tbody>\n            <ng-container\n              *cdkVirtualFor=\"let item of listDataSource;  let i = index; trackBy: trackByIdx;let rIndex=index;\"\n              (viewChange)=\"onViewChange($event)\">\n              <ng-template [ngIf]=\"rowTemplate\" [ngIfElse]=\"rowTpl\">\n                <ng-container *ngTemplateOutlet=\"rowTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                </ng-container>\n              </ng-template>\n              <ng-template #rowTpl>\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                  <ng-container *ngFor=\"let c of startFixedColumn()\">\n                    <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n                      <div class=\"ax-content\">\n                        <ng-container\n                          *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                    <ng-template #cellTpl>\n                      <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\" [attr.data-fixed]=\"c.fixed\"\n                        class=\"ax-column-fixed\">\n                        <div class=\"ax-content\">\n                          <ng-container *ngIf=\"item || !c.skeleton;else loadingTpl\">\n                            <ng-container\n                              *ngTemplateOutlet=\"c.template; context: { $implicit: {data:item,rowIndex:rIndex} }\"></ng-container>\n                          </ng-container>\n                        </div>\n                      </td>\n                    </ng-template>\n                  </ng-container>\n                  <!------------------- Not fixed column ------------------->\n                  <ng-container *ngFor=\"let c of notFixedColumn()\">\n                    <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n                      <div class=\"ax-content\">\n                        <ng-container\n                          *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                    <ng-template #cellTpl>\n                      <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n                        <div class=\"ax-content\">\n                          <ng-container *ngIf=\"item || !c.skeleton;else loadingTpl\">\n                            <ng-container\n                              *ngTemplateOutlet=\"c.template; context: { $implicit: {data:item,rowIndex:rIndex} }\"></ng-container>\n                          </ng-container>\n                        </div>\n                      </td>\n                    </ng-template>\n                  </ng-container>\n                  <td></td>\n                </tr>\n              </ng-template>\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>\n      Showing {{startRowIndex}} of {{totalRows}} items\n    </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\">\n  </ng-content>\n</div>\n\n<!--  Loading Template  -->\n<ng-template #loadingTpl>\n  <!--  Custom Loading Template  -->\n  <ng-container *ngIf=\"loadingTemplate;else defaultLoadingTpl\">\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\">\n    </ng-container>\n  </ng-container>\n  <!--  Default Loading Template  -->\n  <ng-template #defaultLoadingTpl>\n    <ax-skeleton [animated]=\"true\"></ax-skeleton>\n  </ng-template>\n</ng-template>\n<!--  Empty Template  -->\n<ng-template #emptyTpl>\n  <tr>\n    <td [attr.colspan]=\"columns.length\">\n      <ng-template [ngIf]=\"emptyTemplate\" [ngIfElse]=\"defaultEmptyTemplate\">\n        <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n      </ng-template>\n      <ng-template #defaultEmptyTemplate>\n        <ax-result type=\"empty\" caption=\" {{'common.no-result-found' | trans }}\"></ax-result>\n      </ng-template>\n    </td>\n  </tr>\n</ng-template>", 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-950))!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{border-radius:var(--ax-rounded-border-default);border:1px solid;border-color:rgba(var(--ax-color-border-default));height:100%;font-size:.875rem;overflow-y:hidden;overflow-x:hidden}ax-data-table table{table-layout:fixed}ax-data-table .ax-header-content{height:50px;overflow:hidden;position:relative}ax-data-table .ax-header-content .ax-header-fixed-columns{position:absolute;z-index:1;pointer-events:none}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%;border-start-start-radius:var(--ax-rounded-border-default);border-start-end-radius:var(--ax-rounded-border-default);border-collapse:collapse;overflow:hidden}ax-data-table .ax-header-content .ax-header-columns>table th{text-transform:uppercase;background-color:rgba(var(--ax-color-on-surface));font-weight:500;text-align:start;padding:.875rem 1rem;border-block-end:1px solid;border-inline-end:1px solid;border-color:rgba(var(--ax-color-border-default))}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-caption{display:flex;gap:.5rem;align-items:center}ax-data-table .ax-header-content .ax-header-columns>table th:last-child{border-inline-end:0px solid}ax-data-table .ax-body-content{position:relative}ax-data-table .ax-body-content .ax-body-fixed-columns{position:absolute;z-index:1;pointer-events:none}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(odd) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(odd) ax-skeleton{width:25%}ax-data-table .ax-body-content .ax-body-columns table tr{height:40px}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-lighten))}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-lighten))}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{min-width:2rem;padding:.5rem 1rem;border-block-end:1px solid;border-inline-end:1px solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));position:relative}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column{background-color:rgba(var(--ax-color-on-surface))!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column>.ax-content{justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column>.ax-content span{text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content{position:relative}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content>div{position:absolute;top:50%;transform:translateY(-50%);inset-inline-start:0;display:flex;flex-direction:row;align-items:center;width:100%;justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button{background-color:transparent;border:none;color:rgba(var(--ax-color-ghost-fore));position:relative;padding:.25rem;line-height:1;border-radius:var(--ax-rounded-border-default);font-size:1rem;cursor:pointer;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover:not(ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover.ax-state-selected,ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:active{opacity:1}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.5)!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button .ax-icon{font-size:1.25rem}ax-data-table .ax-body-content .ax-body-columns table td>.ax-content{display:flex;justify-content:flex-start;width:100%}ax-data-table .ax-body-content .ax-body-columns table td:last-child{border-inline-end:0px solid}ax-data-table .ax-body-content .ax-body-columns table td ax-skeleton{height:.875rem;border-radius:calc(var(--ax-rounded-border-default) / 1.5);width:35%}ax-data-table .ax-table-footer{border-top:1px solid;border-color:rgba(var(--ax-color-border-default));border-collapse:collapse;overflow:hidden;padding:.5rem .875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1;flex-direction:row;justify-content:space-between;align-items:center}\n"] }]
         }], propDecorators: { columns: [{
                 type: ContentChildren,
-                args: [AXDataColumnComponent]
+                args: [AXDataTableColumnComponent]
             }], onPageChanged: [{
                 type: Output
             }], rowTemplate: [{
@@ -267,17 +298,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                 type: Input
             }], showHeader: [{
                 type: Input
-            }], pageSize: [{
-                type: Input
             }], fetchDataMode: [{
                 type: Input
             }], dataSource: [{
                 type: Input
+            }], focusedRowChange: [{
+                type: Output
+            }], focusedRow: [{
+                type: Input
+            }], selectedRowsChange: [{
+                type: Output
+            }], selectedRows: [{
+                type: Input
             }], itemHeight: [{
                 type: Input
             }], viewport: [{
                 type: ViewChild,
-                args: [CdkVirtualScrollViewport]
+                args: [CdkVirtualScrollViewport, { static: true }]
             }], onScrolledIndexChanged: [{
                 type: Output
             }], headerContainer: [{
@@ -288,11 +325,355 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                 args: ['footerContainer']
             }] } });
 
-const COMPONENT = [AXDataTableComponent, AXDataTable2Component, AXDataColumnComponent];
-const MODULES = [CommonModule, ScrollingModule, AXTranslationModule, AXResultModule, AXLoadingModule, AXDecoratorModule, AXSkeletonModule, AXButtonModule];
+class AXRowIndexColumnComponent extends AXDataTableColumnComponent {
+    constructor() {
+        super(...arguments);
+        this.grid = inject(AXDataTableComponent);
+        this.unsubscriber = inject(AXUnsubscriber);
+        this.padZero = false;
+        this.formatCount = 1;
+        this.allowSorting = false;
+    }
+    get template() {
+        return this._template;
+    }
+    get cssClass() {
+        return 'ax-index-column';
+    }
+    ngOnInit() {
+        if (this.padZero) {
+            this.grid.dataSource.onChanged
+                .pipe(this.unsubscriber.takeUntilDestroy)
+                .subscribe(c => {
+                this.formatCount = c.totalCount.toString().length;
+            });
+        }
+    }
+    get skeleton() {
+        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXRowIndexColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", 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>
+       <span> {{(row.rowIndex + 1) | format:"number":"D"+formatCount}}</span>
+    </ng-template>`, isInline: true, dependencies: [{ kind: "pipe", type: i1$1.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXRowIndexColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-index-column',
+                    template: `
+    <ng-template let-row>
+       <span> {{(row.rowIndex + 1) | format:"number":"D"+formatCount}}</span>
+    </ng-template>`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        AXUnsubscriber,
+                        { provide: AXDataTableColumnComponent, useExisting: AXRowIndexColumnComponent }
+                    ],
+                    inputs: ['width', 'caption', 'fixed'],
+                }]
+        }], propDecorators: { _template: [{
+                type: ViewChild,
+                args: [TemplateRef]
+            }], padZero: [{
+                type: Input
+            }] } });
+
+class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
+    constructor() {
+        super(...arguments);
+        this.grid = inject(AXDataTableComponent);
+    }
+    get template() {
+        return this._template;
+    }
+    isSelected(item) {
+        return item != null && this.grid.selectedRows.includes(item);
+    }
+    handleChange(item) {
+        if (this.isSelected(item)) {
+            this.grid.unSelectRows(item);
+        }
+        else {
+            this.grid.selectRows(item);
+        }
+    }
+    get skeleton() {
+        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXRowSelectColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", 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"
+            [disabled]="!row.data"
+            (change)="handleChange(row.data)"
+            [checked]="isSelected(row.data)"
+          />
+    </ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXRowSelectColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-select-column',
+                    template: `
+    <ng-template let-row>
+        <input
+            class="ax-checkbox"
+            type="checkbox"
+            [disabled]="!row.data"
+            (change)="handleChange(row.data)"
+            [checked]="isSelected(row.data)"
+          />
+    </ng-template>`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: AXDataTableColumnComponent, useExisting: AXRowSelectColumnComponent }],
+                    inputs: ['width', 'caption', 'fixed']
+                }]
+        }], propDecorators: { _template: [{
+                type: ViewChild,
+                args: [TemplateRef]
+            }] } });
+
+class AXBaseRowCommandColumnComponent extends AXDataTableColumnComponent {
+    constructor() {
+        super(...arguments);
+        this.grid = inject(AXDataTableComponent);
+        this.cdr = inject(ChangeDetectorRef);
+        this.allowSorting = false;
+        this.onItemClick = new EventEmitter();
+    }
+    get skeleton() {
+        return false;
+    }
+    get cssClass() {
+        return 'ax-command-column';
+    }
+}
+class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnComponent {
+    constructor() {
+        super(...arguments);
+        this._items = [];
+        this.items = [];
+    }
+    get template() {
+        return this._template;
+    }
+    async handleOnOpened(rowData) {
+        if (Array.isArray(this.items)) {
+            this._items = this.items;
+        }
+        else
+            (typeof this.items == 'function');
+        {
+            const result = this['items'](rowData);
+            if (Array.isArray(result)) {
+                this._items = result;
+            }
+            else if (result instanceof Promise) {
+                this._items = await result;
+            }
+        }
+        this.cdr.detectChanges();
+    }
+    handleOnClosed() {
+        this._items = [];
+    }
+    handleOnItemClick(e, data) {
+        const args = {
+            component: this.grid,
+            isUserInteraction: true,
+            nativeEvent: e,
+            data,
+            name: e.name
+        };
+        this.onItemClick.emit(args);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXRowDropdownCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", 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-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>
+        <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: "directive", type: i2$1.AXRippleDirective, selector: "[axRipple]", inputs: ["axRippleColor"] }, { kind: "component", type: i3$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i6.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i6$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", 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-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>
+        <ng-template #loading>
+            <div panel style="padding: 0.875rem;">
+                <ax-loading></ax-loading>
+            </div>
+        </ng-template>
+    </ng-template>`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: AXDataTableColumnComponent, useExisting: AXRowDropdownCommandColumnComponent }],
+                    inputs: ['width', 'caption', 'fixed'],
+                    outputs: ['onItemClick']
+                }]
+        }], propDecorators: { _template: [{
+                type: ViewChild,
+                args: [TemplateRef]
+            }], items: [{
+                type: Input
+            }] } });
+class AXRowCommandColumnComponent extends AXBaseRowCommandColumnComponent {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+    }
+    get template() {
+        return this._template;
+    }
+    getItems(rowData) {
+        if (Array.isArray(this.items)) {
+            return this.items;
+        }
+        else
+            (typeof this.items == 'function');
+        {
+            return this.items(rowData);
+        }
+        return [];
+    }
+    handleOnItemClick(e, item, data) {
+        const args = {
+            component: this.grid,
+            isUserInteraction: true,
+            nativeEvent: e,
+            data,
+            name: item.name,
+        };
+        this.onItemClick.emit(args);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXRowCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", 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')+'-500))'" axRipple *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: "directive", type: i2$1.AXRippleDirective, selector: "[axRipple]", inputs: ["axRippleColor"] }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", 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')+'-500))'" axRipple *ngFor="let item of getItems(row.data)"
+                    (click)="handleOnItemClick($event,item,row.data)">
+                <ax-icon [icon]="item.icon" ></ax-icon>
+            </button>
+        </div>
+    </ng-template>`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: AXDataTableColumnComponent, useExisting: AXRowCommandColumnComponent }],
+                    inputs: ['width', 'caption', 'fixed'],
+                    outputs: ['onItemClick']
+                }]
+        }], propDecorators: { _template: [{
+                type: ViewChild,
+                args: [TemplateRef]
+            }], items: [{
+                type: Input
+            }] } });
+
+const COMPONENT = [
+    AXDataTableComponent,
+    AXDataTableTextColumnComponent,
+    AXRowIndexColumnComponent,
+    AXRowSelectColumnComponent,
+    AXRowCommandColumnComponent,
+    AXRowDropdownCommandColumnComponent
+];
+const MODULES = [
+    CommonModule,
+    AXCommonModule,
+    ScrollingModule,
+    AXTranslationModule,
+    AXResultModule,
+    AXLoadingModule,
+    AXDecoratorModule,
+    AXSkeletonModule,
+    AXButtonModule,
+    AXDropdownModule,
+    AXFormatModule
+];
 class AXDataTableModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableModule, declarations: [AXDataTableComponent, AXDataTable2Component, AXDataColumnComponent], imports: [CommonModule, ScrollingModule, AXTranslationModule, AXResultModule, AXLoadingModule, AXDecoratorModule, AXSkeletonModule, AXButtonModule], exports: [AXDataTableComponent, AXDataTable2Component, AXDataColumnComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableModule, declarations: [AXDataTableComponent,
+            AXDataTableTextColumnComponent,
+            AXRowIndexColumnComponent,
+            AXRowSelectColumnComponent,
+            AXRowCommandColumnComponent,
+            AXRowDropdownCommandColumnComponent], imports: [CommonModule,
+            AXCommonModule,
+            ScrollingModule,
+            AXTranslationModule,
+            AXResultModule,
+            AXLoadingModule,
+            AXDecoratorModule,
+            AXSkeletonModule,
+            AXButtonModule,
+            AXDropdownModule,
+            AXFormatModule], exports: [AXDataTableComponent,
+            AXDataTableTextColumnComponent,
+            AXRowIndexColumnComponent,
+            AXRowSelectColumnComponent,
+            AXRowCommandColumnComponent,
+            AXRowDropdownCommandColumnComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableModule, imports: [MODULES] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableModule, decorators: [{
@@ -309,5 +690,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXDataColumnComponent, AXDataTable2Component, AXDataTableComponent, AXDataTableModule };
+export { AXBaseRowCommandColumnComponent, AXDataTableColumnComponent, AXDataTableComponent, AXDataTableModule, AXDataTableTextColumnComponent, AXRowCommandColumnComponent, AXRowDropdownCommandColumnComponent, AXRowIndexColumnComponent, AXRowSelectColumnComponent };
 //# sourceMappingURL=acorex-components-data-table.mjs.map