@ng-nest/ui 13.0.7 → 13.1.0

package/fesm2015/ng-nest-ui-table.mjs

@@ -97,10 +97,15 @@ class XTableProperty extends XPaginationProperty {
          * @en_US Parameter control request change event
          */
         this.manualChange = new EventEmitter();
+        /**
+         * @zh_CN 分页器位置
+         * @en_US Pagination position
+         */
+        this.paginationPosition = 'bottom-left';
     }
 }
-/** @nocollapse */ /** @nocollapse */ XTableProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XTableProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ XTableProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: XTableProperty, selector: "ng-component", inputs: { data: "data", columns: "columns", rowHeight: "rowHeight", loading: "loading", bordered: "bordered", showHeader: "showHeader", activatedRow: "activatedRow", headColumnTpl: "headColumnTpl", bodyColumnTpl: "bodyColumnTpl", allowSelectRow: "allowSelectRow", virtualScroll: "virtualScroll", bodyHeight: "bodyHeight", itemSize: "itemSize", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", adaptionHeight: "adaptionHeight", docPercent: "docPercent", checkedRow: "checkedRow", manual: "manual", scroll: "scroll", cellConfig: "cellConfig", rowSize: "rowSize" }, outputs: { activatedRowChange: "activatedRowChange", sortChange: "sortChange", manualChange: "manualChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+/** @nocollapse */ /** @nocollapse */ XTableProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XTableProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XTableProperty, selector: "ng-component", inputs: { data: "data", columns: "columns", rowHeight: "rowHeight", loading: "loading", bordered: "bordered", showHeader: "showHeader", activatedRow: "activatedRow", headColumnTpl: "headColumnTpl", bodyColumnTpl: "bodyColumnTpl", rowClass: "rowClass", allowSelectRow: "allowSelectRow", virtualScroll: "virtualScroll", bodyHeight: "bodyHeight", itemSize: "itemSize", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", adaptionHeight: "adaptionHeight", docPercent: "docPercent", checkedRow: "checkedRow", manual: "manual", scroll: "scroll", cellConfig: "cellConfig", rowSize: "rowSize", paginationPosition: "paginationPosition", showPagination: "showPagination" }, outputs: { activatedRowChange: "activatedRowChange", sortChange: "sortChange", manualChange: "manualChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 __decorate([
     XWithConfig(X_CONFIG_NAME, 42),
     XInputNumber()
@@ -144,7 +149,11 @@ __decorate([
 __decorate([
     XWithConfig(X_CONFIG_NAME, 'medium')
 ], XTableProperty.prototype, "rowSize", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XTableProperty, decorators: [{
+__decorate([
+    XWithConfig(X_CONFIG_NAME, true),
+    XInputBoolean()
+], XTableProperty.prototype, "showPagination", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableProperty, decorators: [{
             type: Component,
             args: [{ template: '' }]
         }], propDecorators: { data: [{
@@ -167,6 +176,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 type: Input
             }], bodyColumnTpl: [{
                 type: Input
+            }], rowClass: [{
+                type: Input
             }], sortChange: [{
                 type: Output
             }], allowSelectRow: [{
@@ -197,6 +208,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 type: Input
             }], rowSize: [{
                 type: Input
+            }], paginationPosition: [{
+                type: Input
+            }], showPagination: [{
+                type: Input
             }] } });
 /**
  * Table Head
@@ -227,12 +242,12 @@ class XTableHeadProperty extends XProperty {
         this.columnTpl = {};
     }
 }
-/** @nocollapse */ /** @nocollapse */ XTableHeadProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XTableHeadProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ XTableHeadProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: XTableHeadProperty, selector: "ng-component", inputs: { columns: "columns", rowHeight: "rowHeight", columnTpl: "columnTpl", scrollYWidth: "scrollYWidth", scrollXWidth: "scrollXWidth", cellConfig: "cellConfig" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+/** @nocollapse */ /** @nocollapse */ XTableHeadProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableHeadProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XTableHeadProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XTableHeadProperty, selector: "ng-component", inputs: { columns: "columns", rowHeight: "rowHeight", columnTpl: "columnTpl", scrollYWidth: "scrollYWidth", scrollXWidth: "scrollXWidth", cellConfig: "cellConfig" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 __decorate([
     XInputNumber()
 ], XTableHeadProperty.prototype, "rowHeight", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XTableHeadProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableHeadProperty, decorators: [{
             type: Component,
             args: [{ template: '' }]
         }], propDecorators: { columns: [{
@@ -317,8 +332,8 @@ class XTableBodyProperty extends XProperty {
         this.docPercent = 1;
     }
 }
-/** @nocollapse */ /** @nocollapse */ XTableBodyProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XTableBodyProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ XTableBodyProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: XTableBodyProperty, selector: "ng-component", inputs: { data: "data", columns: "columns", columnTpl: "columnTpl", activatedRow: "activatedRow", rowHeight: "rowHeight", bodyHeight: "bodyHeight", allowSelectRow: "allowSelectRow", virtualScroll: "virtualScroll", itemSize: "itemSize", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", adaptionHeight: "adaptionHeight", docPercent: "docPercent", scroll: "scroll", cellConfig: "cellConfig" }, outputs: { activatedRowChange: "activatedRowChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+/** @nocollapse */ /** @nocollapse */ XTableBodyProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableBodyProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XTableBodyProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XTableBodyProperty, selector: "ng-component", inputs: { data: "data", columns: "columns", columnTpl: "columnTpl", activatedRow: "activatedRow", rowHeight: "rowHeight", bodyHeight: "bodyHeight", allowSelectRow: "allowSelectRow", virtualScroll: "virtualScroll", itemSize: "itemSize", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", adaptionHeight: "adaptionHeight", docPercent: "docPercent", scroll: "scroll", cellConfig: "cellConfig", rowClass: "rowClass" }, outputs: { activatedRowChange: "activatedRowChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 __decorate([
     XInputNumber()
 ], XTableBodyProperty.prototype, "rowHeight", void 0);
@@ -340,7 +355,7 @@ __decorate([
 __decorate([
     XInputNumber()
 ], XTableBodyProperty.prototype, "docPercent", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XTableBodyProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableBodyProperty, decorators: [{
             type: Component,
             args: [{ template: '' }]
         }], propDecorators: { data: [{
@@ -375,6 +390,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 type: Input
             }], cellConfig: [{
                 type: Input
+            }], rowClass: [{
+                type: Input
             }] } });
 /**
  * Table Foot
@@ -387,9 +404,9 @@ const XTableFootPrefix = 'x-table-foot';
  */
 class XTableFootProperty extends XProperty {
 }
-/** @nocollapse */ /** @nocollapse */ XTableFootProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XTableFootProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ XTableFootProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: XTableFootProperty, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XTableFootProperty, decorators: [{
+/** @nocollapse */ /** @nocollapse */ XTableFootProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableFootProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XTableFootProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XTableFootProperty, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableFootProperty, decorators: [{
             type: Component,
             args: [{ template: '' }]
         }] });
@@ -449,9 +466,9 @@ class XDragDirective {
         this._unSubject.complete();
     }
 }
-/** @nocollapse */ /** @nocollapse */ XDragDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDragDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ XDragDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: XDragDirective, selector: "[xDrag]", outputs: { draging: "draging" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDragDirective, decorators: [{
+/** @nocollapse */ /** @nocollapse */ XDragDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDragDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ XDragDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: XDragDirective, selector: "[xDrag]", outputs: { draging: "draging" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDragDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[xDrag]' }]
         }], ctorParameters: function () {
@@ -556,9 +573,9 @@ class XTableHeadComponent extends XTableHeadProperty {
         return item.id;
     }
 }
-/** @nocollapse */ /** @nocollapse */ XTableHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XTableHeadComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ XTableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: XTableHeadComponent, selector: "x-table-head", inputs: { table: "table" }, viewQueries: [{ propertyName: "thead", first: true, predicate: ["thead"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<thead #thead [ngStyle]=\"theadStyle\">\r\n  <ng-container *ngIf=\"cellConfig; else columnsTpl\">\r\n    <tr [style.gridTemplateColumns]=\"cellConfig.gridTemplateColumns\" [style.min-height.px]=\"getRowHeight\">\r\n      <th\r\n        *ngFor=\"let column of cellConfig.cells\"\r\n        [class.x-table-sticky]=\"getSticky(column)\"\r\n        [class.x-table-width-drag]=\"column.dragWidth\"\r\n        [style.grid-area]=\"column.gridArea\"\r\n        [style.left.px]=\"column.left\"\r\n        [style.min-height.px]=\"getRowHeight\"\r\n        [title]=\"column?.label\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n        <div *ngIf=\"column.dragWidth\" class=\"x-table-drag-width\" xDrag (draging)=\"dragWidth($event, column)\"></div>\r\n      </th>\r\n    </tr>\r\n  </ng-container>\r\n</thead>\r\n\r\n<ng-template #columnsTpl>\r\n  <tr\r\n    [style.height.px]=\"getRowHeight\"\r\n    [style.min-height.px]=\"getRowHeight\"\r\n    [style.padding-right.px]=\"scrollYWidth\"\r\n    [style.width.px]=\"scrollXWidth\"\r\n  >\r\n    <th\r\n      *ngFor=\"let column of columns; trackBy: trackByItem\"\r\n      [class.x-table-sticky]=\"getSticky(column)\"\r\n      [style.min-height.px]=\"getRowHeight\"\r\n      [style.width.px]=\"column.width\"\r\n      [style.left.px]=\"column.left\"\r\n      [style.flex]=\"getFlex(column)\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n      <div *ngIf=\"column.dragWidth\" class=\"x-table-drag-width\" xDrag (draging)=\"dragWidth($event, column)\"></div>\r\n    </th>\r\n  </tr>\r\n</ng-template>\r\n\r\n<ng-template #columnBaseTpl let-column=\"column\">\r\n  <ng-container [ngSwitch]=\"column.type\">\r\n    <ng-container *ngSwitchCase=\"'checkbox'\">\r\n      <x-checkbox\r\n        *ngIf=\"column.headChecked\"\r\n        [data]=\"[{ id: true, label: column.label }]\"\r\n        [(ngModel)]=\"table.checkedValues[column.id]\"\r\n        (ngModelChange)=\"table.headChecked($event, column)\"\r\n        [indeterminate]=\"table.checkedValues[column.id + table.indeterminate]\"\r\n      ></x-checkbox>\r\n      <ng-container *ngIf=\"!column.headChecked\">\r\n        <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'index'\">\r\n      <a>{{ column.label }}</a>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n      <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #cloumnDefaultTpl let-column=\"column\">\r\n  <a [class.x-table-sort]=\"column.sort\" (click)=\"onSort(column)\" [style.text-align]=\"column.textAlign\">\r\n    <ng-container *xOutlet=\"columnTpl[column.id]; context: { $column: column }\">\r\n      {{ column.label }}\r\n    </ng-container>\r\n    <x-icon\r\n      *ngIf=\"column.sort\"\r\n      type=\"fto-bar-chart\"\r\n      class=\"x-table-sort-icon\"\r\n      [class.x-table-icon-up]=\"sortStr === column.id + ' desc'\"\r\n      [class.x-table-icon-down]=\"sortStr === column.id + ' asc'\"\r\n    ></x-icon>\r\n  </a>\r\n</ng-template>\r\n", components: [{ type: i2.XCheckboxComponent, selector: "x-checkbox" }, { type: i3.XIconComponent, selector: "x-icon" }], directives: [{ type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: XDragDirective, selector: "[xDrag]", outputs: ["draging"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i7.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XTableHeadComponent, decorators: [{
+/** @nocollapse */ /** @nocollapse */ XTableHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableHeadComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XTableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XTableHeadComponent, selector: "x-table-head", inputs: { table: "table" }, viewQueries: [{ propertyName: "thead", first: true, predicate: ["thead"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<thead #thead [ngStyle]=\"theadStyle\">\r\n  <ng-container *ngIf=\"cellConfig; else columnsTpl\">\r\n    <tr [style.gridTemplateColumns]=\"cellConfig.gridTemplateColumns\" [style.min-height.px]=\"getRowHeight\">\r\n      <th\r\n        *ngFor=\"let column of cellConfig.cells\"\r\n        [class.x-table-sticky]=\"getSticky(column)\"\r\n        [class.x-table-width-drag]=\"column.dragWidth\"\r\n        [style.grid-area]=\"column.gridArea\"\r\n        [style.left.px]=\"column.left\"\r\n        [style.min-height.px]=\"getRowHeight\"\r\n        [title]=\"column?.label\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n        <div *ngIf=\"column.dragWidth\" class=\"x-table-drag-width\" xDrag (draging)=\"dragWidth($event, column)\"></div>\r\n      </th>\r\n    </tr>\r\n  </ng-container>\r\n</thead>\r\n\r\n<ng-template #columnsTpl>\r\n  <tr\r\n    [style.height.px]=\"getRowHeight\"\r\n    [style.min-height.px]=\"getRowHeight\"\r\n    [style.padding-right.px]=\"scrollYWidth\"\r\n    [style.width.px]=\"scrollXWidth\"\r\n  >\r\n    <th\r\n      *ngFor=\"let column of columns; trackBy: trackByItem\"\r\n      [class.x-table-sticky]=\"getSticky(column)\"\r\n      [style.min-height.px]=\"getRowHeight\"\r\n      [style.width.px]=\"column.width\"\r\n      [style.left.px]=\"column.left\"\r\n      [style.flex]=\"getFlex(column)\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n      <div *ngIf=\"column.dragWidth\" class=\"x-table-drag-width\" xDrag (draging)=\"dragWidth($event, column)\"></div>\r\n    </th>\r\n  </tr>\r\n</ng-template>\r\n\r\n<ng-template #columnBaseTpl let-column=\"column\">\r\n  <ng-container [ngSwitch]=\"column.type\">\r\n    <ng-container *ngSwitchCase=\"'checkbox'\">\r\n      <x-checkbox\r\n        *ngIf=\"column.headChecked\"\r\n        [data]=\"[{ id: true, label: column.label }]\"\r\n        [(ngModel)]=\"table.checkedValues[column.id]\"\r\n        (ngModelChange)=\"table.headChecked($event, column)\"\r\n        [indeterminate]=\"table.checkedValues[column.id + table.indeterminate]\"\r\n      ></x-checkbox>\r\n      <ng-container *ngIf=\"!column.headChecked\">\r\n        <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'index'\">\r\n      <a>{{ column.label }}</a>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n      <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #cloumnDefaultTpl let-column=\"column\">\r\n  <a [class.x-table-sort]=\"column.sort\" (click)=\"onSort(column)\" [style.text-align]=\"column.textAlign\">\r\n    <ng-container *xOutlet=\"columnTpl[column.id]; context: { $column: column }\">\r\n      {{ column.label }}\r\n    </ng-container>\r\n    <x-icon\r\n      *ngIf=\"column.sort\"\r\n      type=\"fto-bar-chart\"\r\n      class=\"x-table-sort-icon\"\r\n      [class.x-table-icon-up]=\"sortStr === column.id + ' desc'\"\r\n      [class.x-table-icon-down]=\"sortStr === column.id + ' asc'\"\r\n    ></x-icon>\r\n  </a>\r\n</ng-template>\r\n", components: [{ type: i2.XCheckboxComponent, selector: "x-checkbox" }, { type: i3.XIconComponent, selector: "x-icon" }], directives: [{ type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: XDragDirective, selector: "[xDrag]", outputs: ["draging"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i7.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableHeadComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XTableHeadPrefix}`, encapsulation: ViewEncapsulation.None, template: "<thead #thead [ngStyle]=\"theadStyle\">\r\n  <ng-container *ngIf=\"cellConfig; else columnsTpl\">\r\n    <tr [style.gridTemplateColumns]=\"cellConfig.gridTemplateColumns\" [style.min-height.px]=\"getRowHeight\">\r\n      <th\r\n        *ngFor=\"let column of cellConfig.cells\"\r\n        [class.x-table-sticky]=\"getSticky(column)\"\r\n        [class.x-table-width-drag]=\"column.dragWidth\"\r\n        [style.grid-area]=\"column.gridArea\"\r\n        [style.left.px]=\"column.left\"\r\n        [style.min-height.px]=\"getRowHeight\"\r\n        [title]=\"column?.label\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n        <div *ngIf=\"column.dragWidth\" class=\"x-table-drag-width\" xDrag (draging)=\"dragWidth($event, column)\"></div>\r\n      </th>\r\n    </tr>\r\n  </ng-container>\r\n</thead>\r\n\r\n<ng-template #columnsTpl>\r\n  <tr\r\n    [style.height.px]=\"getRowHeight\"\r\n    [style.min-height.px]=\"getRowHeight\"\r\n    [style.padding-right.px]=\"scrollYWidth\"\r\n    [style.width.px]=\"scrollXWidth\"\r\n  >\r\n    <th\r\n      *ngFor=\"let column of columns; trackBy: trackByItem\"\r\n      [class.x-table-sticky]=\"getSticky(column)\"\r\n      [style.min-height.px]=\"getRowHeight\"\r\n      [style.width.px]=\"column.width\"\r\n      [style.left.px]=\"column.left\"\r\n      [style.flex]=\"getFlex(column)\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n      <div *ngIf=\"column.dragWidth\" class=\"x-table-drag-width\" xDrag (draging)=\"dragWidth($event, column)\"></div>\r\n    </th>\r\n  </tr>\r\n</ng-template>\r\n\r\n<ng-template #columnBaseTpl let-column=\"column\">\r\n  <ng-container [ngSwitch]=\"column.type\">\r\n    <ng-container *ngSwitchCase=\"'checkbox'\">\r\n      <x-checkbox\r\n        *ngIf=\"column.headChecked\"\r\n        [data]=\"[{ id: true, label: column.label }]\"\r\n        [(ngModel)]=\"table.checkedValues[column.id]\"\r\n        (ngModelChange)=\"table.headChecked($event, column)\"\r\n        [indeterminate]=\"table.checkedValues[column.id + table.indeterminate]\"\r\n      ></x-checkbox>\r\n      <ng-container *ngIf=\"!column.headChecked\">\r\n        <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'index'\">\r\n      <a>{{ column.label }}</a>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n      <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #cloumnDefaultTpl let-column=\"column\">\r\n  <a [class.x-table-sort]=\"column.sort\" (click)=\"onSort(column)\" [style.text-align]=\"column.textAlign\">\r\n    <ng-container *xOutlet=\"columnTpl[column.id]; context: { $column: column }\">\r\n      {{ column.label }}\r\n    </ng-container>\r\n    <x-icon\r\n      *ngIf=\"column.sort\"\r\n      type=\"fto-bar-chart\"\r\n      class=\"x-table-sort-icon\"\r\n      [class.x-table-icon-up]=\"sortStr === column.id + ' desc'\"\r\n      [class.x-table-icon-down]=\"sortStr === column.id + ' asc'\"\r\n    ></x-icon>\r\n  </a>\r\n</ng-template>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }]; }, propDecorators: { thead: [{
@@ -729,7 +746,7 @@ class XTableBodyComponent extends XTableBodyProperty {
     }
     rowClick(row) {
         this.activatedRow = row;
-        if (this.table.rowChecked) {
+        if (this.allowSelectRow && this.table.rowChecked) {
             if (!Array.from(event.path).find((x) => x.localName == 'x-checkbox')) {
                 row[this.table.rowChecked.id] = !row[this.table.rowChecked.id];
                 this.table.bodyChecked(row[this.table.rowChecked.id], this.table.rowChecked);
@@ -742,11 +759,11 @@ class XTableBodyComponent extends XTableBodyProperty {
         return item.id;
     }
 }
-/** @nocollapse */ /** @nocollapse */ XTableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XTableBodyComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ XTableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: XTableBodyComponent, selector: "x-table-body", inputs: { table: "table" }, viewQueries: [{ propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<tbody #tbody>\r\n  <ng-container *ngIf=\"cellConfig; else virtualScrollTpl\">\r\n    <tr *ngFor=\"let row of data; index as i; trackBy: trackByItem\" [style.gridTemplateColumns]=\"cellConfig.gridTemplateColumns\">\r\n      <td\r\n        *ngFor=\"let column of cellConfig.cells; index as j\"\r\n        [title]=\"getTitle(row, column)\"\r\n        [class.x-table-sticky]=\"table.getSticky(column)\"\r\n        [style.left.px]=\"column.left\"\r\n        [style.grid-area]=\"column.gridArea\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-container>\r\n      </td>\r\n    </tr>\r\n  </ng-container>\r\n  <x-empty *ngIf=\"isEmpty\"></x-empty>\r\n</tbody>\r\n\r\n<ng-template #virtualScrollTpl>\r\n  <cdk-virtual-scroll-viewport\r\n    #virtualBody\r\n    *ngIf=\"virtualScroll; else bodyTpl\"\r\n    [itemSize]=\"getItemSize\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    [style.height.px]=\"bodyHeight\"\r\n  >\r\n    <tr\r\n      *cdkVirtualFor=\"let row of data; let index = index; trackBy: trackByItem\"\r\n      [class.x-table-activated]=\"allowSelectRow && activatedRow?.id === row.id\"\r\n      [style.height.px]=\"getRowHeight\"\r\n      [style.min-height.px]=\"getRowHeight\"\r\n      (click)=\"rowClick(row)\"\r\n    >\r\n      <!-- rowHeight \u4E3A 0 \u7684\u65F6\u5019\uFF0Cindex \u4E0B\u6807\u83B7\u53D6\u4E0D\u5230 -->\r\n      <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: getIndex(index, row) }\"></ng-container>\r\n    </tr>\r\n  </cdk-virtual-scroll-viewport>\r\n</ng-template>\r\n\r\n<ng-template #bodyTpl>\r\n  <tr\r\n    *ngFor=\"let row of data; index as i; trackBy: trackByItem\"\r\n    [class.x-table-activated]=\"allowSelectRow && activatedRow?.id === row.id\"\r\n    [style.height.px]=\"getRowHeight\"\r\n    [style.min-height.px]=\"getRowHeight\"\r\n    (click)=\"rowClick(row)\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: i }\"></ng-container>\r\n  </tr>\r\n</ng-template>\r\n\r\n<ng-template #rowTpl let-row=\"row\" let-i=\"i\">\r\n  <ng-container *ngFor=\"let column of columns; index as j; trackBy: trackByItem\">\r\n    <td\r\n      [style.width.px]=\"column.width\"\r\n      [style.flex]=\"getFlex(column)\"\r\n      [title]=\"getTitle(row, column)\"\r\n      [class.x-table-sticky]=\"table.getSticky(column)\"\r\n      [style.left.px]=\"column.left\"\r\n    >\r\n      <ng-template *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-template>\r\n    </td>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #cellTpl let-column=\"column\" let-row=\"row\" let-i=\"i\">\r\n  <ng-container [ngSwitch]=\"column.type\">\r\n    <ng-container *ngSwitchCase=\"'checkbox'\">\r\n      <x-checkbox\r\n        [data]=\"[{ id: true, label: '' }]\"\r\n        [(ngModel)]=\"row[column.id]\"\r\n        (ngModelChange)=\"table.bodyChecked($event, column)\"\r\n      ></x-checkbox>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'index'\">\r\n      <div>{{ table.getIndex(i) }}</div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n      <ng-container *xOutlet=\"columnTpl[column.id]; context: { $column: column, $row: row, $index: table.getIndex(i) }\">\r\n        <div [innerHTML]=\"row[column.id]\" [style.text-align]=\"column.textAlign\"></div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n", components: [{ type: i2$1.XEmptyComponent, selector: "x-empty" }, { type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: i2.XCheckboxComponent, selector: "x-checkbox" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i7.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XTableBodyComponent, decorators: [{
+/** @nocollapse */ /** @nocollapse */ XTableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableBodyComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XTableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XTableBodyComponent, selector: "x-table-body", inputs: { table: "table" }, viewQueries: [{ propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<tbody #tbody>\r\n  <ng-container *ngIf=\"cellConfig; else virtualScrollTpl\">\r\n    <tr *ngFor=\"let row of data; index as i; trackBy: trackByItem\" [style.gridTemplateColumns]=\"cellConfig.gridTemplateColumns\">\r\n      <td\r\n        *ngFor=\"let column of cellConfig.cells; index as j\"\r\n        [title]=\"getTitle(row, column)\"\r\n        [class.x-table-sticky]=\"table.getSticky(column)\"\r\n        [style.left.px]=\"column.left\"\r\n        [style.grid-area]=\"column.gridArea\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-container>\r\n      </td>\r\n    </tr>\r\n  </ng-container>\r\n  <x-empty *ngIf=\"isEmpty\"></x-empty>\r\n</tbody>\r\n\r\n<ng-template #virtualScrollTpl>\r\n  <cdk-virtual-scroll-viewport\r\n    #virtualBody\r\n    *ngIf=\"virtualScroll; else bodyTpl\"\r\n    [itemSize]=\"getItemSize\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    [style.height.px]=\"bodyHeight\"\r\n  >\r\n    <tr\r\n      *cdkVirtualFor=\"let row of data; let index = index; trackBy: trackByItem\"\r\n      [class.x-table-activated]=\"allowSelectRow && activatedRow?.id === row.id\"\r\n      [ngClass]=\"!rowClass ? {} : rowClass(row, index)\"\r\n      [style.height.px]=\"getRowHeight\"\r\n      [style.min-height.px]=\"getRowHeight\"\r\n      (click)=\"rowClick(row)\"\r\n    >\r\n      <!-- rowHeight \u4E3A 0 \u7684\u65F6\u5019\uFF0Cindex \u4E0B\u6807\u83B7\u53D6\u4E0D\u5230 -->\r\n      <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: getIndex(index, row) }\"></ng-container>\r\n    </tr>\r\n  </cdk-virtual-scroll-viewport>\r\n</ng-template>\r\n\r\n<ng-template #bodyTpl>\r\n  <tr\r\n    *ngFor=\"let row of data; index as i; trackBy: trackByItem\"\r\n    [class.x-table-activated]=\"allowSelectRow && activatedRow?.id === row.id\"\r\n    [ngClass]=\"!rowClass ? {} : rowClass(row, i)\"\r\n    [style.height.px]=\"getRowHeight\"\r\n    [style.min-height.px]=\"getRowHeight\"\r\n    (click)=\"rowClick(row)\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: i }\"></ng-container>\r\n  </tr>\r\n</ng-template>\r\n\r\n<ng-template #rowTpl let-row=\"row\" let-i=\"i\">\r\n  <ng-container *ngFor=\"let column of columns; index as j; trackBy: trackByItem\">\r\n    <td\r\n      [style.width.px]=\"column.width\"\r\n      [style.flex]=\"getFlex(column)\"\r\n      [title]=\"getTitle(row, column)\"\r\n      [class.x-table-sticky]=\"table.getSticky(column)\"\r\n      [style.left.px]=\"column.left\"\r\n    >\r\n      <ng-template *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-template>\r\n    </td>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #cellTpl let-column=\"column\" let-row=\"row\" let-i=\"i\">\r\n  <ng-container [ngSwitch]=\"column.type\">\r\n    <ng-container *ngSwitchCase=\"'checkbox'\">\r\n      <x-checkbox\r\n        [data]=\"[{ id: true, label: '' }]\"\r\n        [(ngModel)]=\"row[column.id]\"\r\n        (ngModelChange)=\"table.bodyChecked($event, column)\"\r\n      ></x-checkbox>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'index'\">\r\n      <div>{{ table.getIndex(i) }}</div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n      <ng-container *xOutlet=\"columnTpl[column.id]; context: { $column: column, $row: row, $index: table.getIndex(i) }\">\r\n        <div [innerHTML]=\"row[column.id]\" [style.text-align]=\"column.textAlign\"></div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n", components: [{ type: i2$1.XEmptyComponent, selector: "x-empty" }, { type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: i2.XCheckboxComponent, selector: "x-checkbox" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i7.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XTableBodyPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<tbody #tbody>\r\n  <ng-container *ngIf=\"cellConfig; else virtualScrollTpl\">\r\n    <tr *ngFor=\"let row of data; index as i; trackBy: trackByItem\" [style.gridTemplateColumns]=\"cellConfig.gridTemplateColumns\">\r\n      <td\r\n        *ngFor=\"let column of cellConfig.cells; index as j\"\r\n        [title]=\"getTitle(row, column)\"\r\n        [class.x-table-sticky]=\"table.getSticky(column)\"\r\n        [style.left.px]=\"column.left\"\r\n        [style.grid-area]=\"column.gridArea\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-container>\r\n      </td>\r\n    </tr>\r\n  </ng-container>\r\n  <x-empty *ngIf=\"isEmpty\"></x-empty>\r\n</tbody>\r\n\r\n<ng-template #virtualScrollTpl>\r\n  <cdk-virtual-scroll-viewport\r\n    #virtualBody\r\n    *ngIf=\"virtualScroll; else bodyTpl\"\r\n    [itemSize]=\"getItemSize\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    [style.height.px]=\"bodyHeight\"\r\n  >\r\n    <tr\r\n      *cdkVirtualFor=\"let row of data; let index = index; trackBy: trackByItem\"\r\n      [class.x-table-activated]=\"allowSelectRow && activatedRow?.id === row.id\"\r\n      [style.height.px]=\"getRowHeight\"\r\n      [style.min-height.px]=\"getRowHeight\"\r\n      (click)=\"rowClick(row)\"\r\n    >\r\n      <!-- rowHeight \u4E3A 0 \u7684\u65F6\u5019\uFF0Cindex \u4E0B\u6807\u83B7\u53D6\u4E0D\u5230 -->\r\n      <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: getIndex(index, row) }\"></ng-container>\r\n    </tr>\r\n  </cdk-virtual-scroll-viewport>\r\n</ng-template>\r\n\r\n<ng-template #bodyTpl>\r\n  <tr\r\n    *ngFor=\"let row of data; index as i; trackBy: trackByItem\"\r\n    [class.x-table-activated]=\"allowSelectRow && activatedRow?.id === row.id\"\r\n    [style.height.px]=\"getRowHeight\"\r\n    [style.min-height.px]=\"getRowHeight\"\r\n    (click)=\"rowClick(row)\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: i }\"></ng-container>\r\n  </tr>\r\n</ng-template>\r\n\r\n<ng-template #rowTpl let-row=\"row\" let-i=\"i\">\r\n  <ng-container *ngFor=\"let column of columns; index as j; trackBy: trackByItem\">\r\n    <td\r\n      [style.width.px]=\"column.width\"\r\n      [style.flex]=\"getFlex(column)\"\r\n      [title]=\"getTitle(row, column)\"\r\n      [class.x-table-sticky]=\"table.getSticky(column)\"\r\n      [style.left.px]=\"column.left\"\r\n    >\r\n      <ng-template *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-template>\r\n    </td>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #cellTpl let-column=\"column\" let-row=\"row\" let-i=\"i\">\r\n  <ng-container [ngSwitch]=\"column.type\">\r\n    <ng-container *ngSwitchCase=\"'checkbox'\">\r\n      <x-checkbox\r\n        [data]=\"[{ id: true, label: '' }]\"\r\n        [(ngModel)]=\"row[column.id]\"\r\n        (ngModelChange)=\"table.bodyChecked($event, column)\"\r\n      ></x-checkbox>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'index'\">\r\n      <div>{{ table.getIndex(i) }}</div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n      <ng-container *xOutlet=\"columnTpl[column.id]; context: { $column: column, $row: row, $index: table.getIndex(i) }\">\r\n        <div [innerHTML]=\"row[column.id]\" [style.text-align]=\"column.textAlign\"></div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n" }]
+            args: [{ selector: `${XTableBodyPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<tbody #tbody>\r\n  <ng-container *ngIf=\"cellConfig; else virtualScrollTpl\">\r\n    <tr *ngFor=\"let row of data; index as i; trackBy: trackByItem\" [style.gridTemplateColumns]=\"cellConfig.gridTemplateColumns\">\r\n      <td\r\n        *ngFor=\"let column of cellConfig.cells; index as j\"\r\n        [title]=\"getTitle(row, column)\"\r\n        [class.x-table-sticky]=\"table.getSticky(column)\"\r\n        [style.left.px]=\"column.left\"\r\n        [style.grid-area]=\"column.gridArea\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-container>\r\n      </td>\r\n    </tr>\r\n  </ng-container>\r\n  <x-empty *ngIf=\"isEmpty\"></x-empty>\r\n</tbody>\r\n\r\n<ng-template #virtualScrollTpl>\r\n  <cdk-virtual-scroll-viewport\r\n    #virtualBody\r\n    *ngIf=\"virtualScroll; else bodyTpl\"\r\n    [itemSize]=\"getItemSize\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    [style.height.px]=\"bodyHeight\"\r\n  >\r\n    <tr\r\n      *cdkVirtualFor=\"let row of data; let index = index; trackBy: trackByItem\"\r\n      [class.x-table-activated]=\"allowSelectRow && activatedRow?.id === row.id\"\r\n      [ngClass]=\"!rowClass ? {} : rowClass(row, index)\"\r\n      [style.height.px]=\"getRowHeight\"\r\n      [style.min-height.px]=\"getRowHeight\"\r\n      (click)=\"rowClick(row)\"\r\n    >\r\n      <!-- rowHeight \u4E3A 0 \u7684\u65F6\u5019\uFF0Cindex \u4E0B\u6807\u83B7\u53D6\u4E0D\u5230 -->\r\n      <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: getIndex(index, row) }\"></ng-container>\r\n    </tr>\r\n  </cdk-virtual-scroll-viewport>\r\n</ng-template>\r\n\r\n<ng-template #bodyTpl>\r\n  <tr\r\n    *ngFor=\"let row of data; index as i; trackBy: trackByItem\"\r\n    [class.x-table-activated]=\"allowSelectRow && activatedRow?.id === row.id\"\r\n    [ngClass]=\"!rowClass ? {} : rowClass(row, i)\"\r\n    [style.height.px]=\"getRowHeight\"\r\n    [style.min-height.px]=\"getRowHeight\"\r\n    (click)=\"rowClick(row)\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: i }\"></ng-container>\r\n  </tr>\r\n</ng-template>\r\n\r\n<ng-template #rowTpl let-row=\"row\" let-i=\"i\">\r\n  <ng-container *ngFor=\"let column of columns; index as j; trackBy: trackByItem\">\r\n    <td\r\n      [style.width.px]=\"column.width\"\r\n      [style.flex]=\"getFlex(column)\"\r\n      [title]=\"getTitle(row, column)\"\r\n      [class.x-table-sticky]=\"table.getSticky(column)\"\r\n      [style.left.px]=\"column.left\"\r\n    >\r\n      <ng-template *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-template>\r\n    </td>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #cellTpl let-column=\"column\" let-row=\"row\" let-i=\"i\">\r\n  <ng-container [ngSwitch]=\"column.type\">\r\n    <ng-container *ngSwitchCase=\"'checkbox'\">\r\n      <x-checkbox\r\n        [data]=\"[{ id: true, label: '' }]\"\r\n        [(ngModel)]=\"row[column.id]\"\r\n        (ngModelChange)=\"table.bodyChecked($event, column)\"\r\n      ></x-checkbox>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'index'\">\r\n      <div>{{ table.getIndex(i) }}</div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n      <ng-container *xOutlet=\"columnTpl[column.id]; context: { $column: column, $row: row, $index: table.getIndex(i) }\">\r\n        <div [innerHTML]=\"row[column.id]\" [style.text-align]=\"column.textAlign\"></div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n" }]
         }], ctorParameters: function () {
         return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                         type: Inject,
@@ -778,9 +795,9 @@ class XTableFootComponent extends XTableFootProperty {
         this.table.tfoot = this.tfoot;
     }
 }
-/** @nocollapse */ /** @nocollapse */ XTableFootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XTableFootComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ XTableFootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: XTableFootComponent, selector: "x-table-foot", inputs: { table: "table" }, viewQueries: [{ propertyName: "tfoot", first: true, predicate: ["tfoot"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<tfoot></tfoot>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XTableFootComponent, decorators: [{
+/** @nocollapse */ /** @nocollapse */ XTableFootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableFootComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XTableFootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XTableFootComponent, selector: "x-table-foot", inputs: { table: "table" }, viewQueries: [{ propertyName: "tfoot", first: true, predicate: ["tfoot"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<tfoot></tfoot>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableFootComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XTableFootPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<tfoot></tfoot>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { tfoot: [{
@@ -820,11 +837,12 @@ class XTableComponent extends XTableProperty {
         this.setClassMap();
         this.setRowChecked();
         this.setMerge();
+        this.setPaginationPosition();
     }
     ngOnChanges(simples) {
-        const { data, checkedRow, columns, activatedRow, manual } = simples;
+        const { data, checkedRow, columns, activatedRow, manual, showPagination } = simples;
         XIsChange(data, checkedRow) && this.setData();
-        XIsChange(columns, activatedRow) && this.cdr.detectChanges();
+        XIsChange(columns, activatedRow, showPagination) && this.cdr.detectChanges();
         XIsChange(manual) && this.setManual();
     }
     ngOnDestroy() {
@@ -837,6 +855,9 @@ class XTableComponent extends XTableProperty {
         };
         this.cdr.detectChanges();
     }
+    setPaginationPosition() {
+        this.renderer.addClass(this.elementRef.nativeElement, `x-table-${this.paginationPosition}`);
+    }
     getSticky(column) {
         return Number(column.left) >= 0;
     }
@@ -982,11 +1003,11 @@ class XTableComponent extends XTableProperty {
         this.cdr.detectChanges();
     }
 }
-/** @nocollapse */ /** @nocollapse */ XTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XTableComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ XTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: XTableComponent, selector: "x-table", viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table\r\n  #table\r\n  class=\"x-table\"\r\n  [ngClass]=\"classMap\"\r\n  [x-loading]=\"loading && getting\"\r\n  [class.x-table-scroll-left]=\"getScrollLeft\"\r\n  [class.x-table-scroll-top]=\"getScrollTop\"\r\n  [class.x-table-bordered]=\"bordered\"\r\n  [class.x-table-td-adaption-height]=\"rowHeight == 0\"\r\n  [class.x-table-cell-config]=\"cellConfig\"\r\n>\r\n  <x-table-head\r\n    *ngIf=\"showHeader\"\r\n    [columns]=\"columns\"\r\n    [rowHeight]=\"rowHeight\"\r\n    [columnTpl]=\"headColumnTpl\"\r\n    [scrollYWidth]=\"scrollYWidth\"\r\n    [scrollXWidth]=\"scrollXWidth\"\r\n    [cellConfig]=\"cellConfig?.thead\"\r\n    [table]=\"this\"\r\n  ></x-table-head>\r\n  <x-table-body\r\n    [data]=\"tableData\"\r\n    [columns]=\"columns\"\r\n    [itemSize]=\"itemSize\"\r\n    [rowHeight]=\"rowHeight\"\r\n    [bodyHeight]=\"bodyHeight\"\r\n    [columnTpl]=\"bodyColumnTpl\"\r\n    [allowSelectRow]=\"allowSelectRow\"\r\n    [virtualScroll]=\"virtualScroll\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    [adaptionHeight]=\"adaptionHeight\"\r\n    [docPercent]=\"docPercent\"\r\n    [scroll]=\"scroll\"\r\n    [cellConfig]=\"cellConfig?.tbody\"\r\n    [(activatedRow)]=\"activatedRow\"\r\n    (activatedRowChange)=\"activatedRowChange.emit($event)\"\r\n    [table]=\"this\"\r\n  ></x-table-body>\r\n  <x-table-foot [table]=\"this\"></x-table-foot>\r\n</table>\r\n<x-pagination\r\n  #pagination\r\n  *ngIf=\"size\"\r\n  [(index)]=\"index\"\r\n  [(size)]=\"size\"\r\n  [(query)]=\"query\"\r\n  [total]=\"total\"\r\n  (indexChange)=\"change($event)\"\r\n  [showEllipsis]=\"showEllipsis\"\r\n  [showTotal]=\"showTotal\"\r\n  [space]=\"space\"\r\n  [hiddenBorder]=\"hiddenBorder\"\r\n>\r\n</x-pagination>\r\n", styles: [".x-table{margin:0;padding:0;display:flex;flex-direction:column;border-collapse:collapse;width:100%;border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead{position:relative;overflow:hidden;display:block;background-color:var(--x-background);min-height:42px}.x-table>thead>tr{position:absolute;width:100%;display:flex;min-height:42px}.x-table>thead>tr>th{display:flex;align-items:center;flex:1;position:relative;font-weight:600;background-color:var(--x-background);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead>tr>th>a{display:inline-flex;align-items:center;color:var(--x-text-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-table>thead>tr>th.x-table-sticky{position:sticky;z-index:1}.x-table>thead>tr>th .x-table-drag-width{position:absolute;height:100%;width:.1875rem;right:-.125rem;cursor:ew-resize;transition:background-color var(--x-animation-duration-fast);z-index:1}.x-table>thead>tr>th .x-table-drag-width:hover{background-color:var(--x-primary)}.x-table>tbody{display:block;border-top:none;position:relative;min-height:7rem}.x-table>tbody tr{display:flex}.x-table>tbody tr>td{display:flex;align-items:center;position:relative;justify-content:space-between;overflow:hidden;background-color:var(--x-background);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>tbody tr>td>div{flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x-table>tbody tr>td.x-table-sticky{position:sticky;z-index:1}.x-table>tbody tr.x-table-activated>td{background-color:var(--x-background-a200);color:var(--x-primary)}.x-table>tbody tr:hover>td{background-color:var(--x-background-a200)}.x-table>tbody tr:last-child{border-bottom:none}.x-table>tbody x-empty{position:absolute;top:0;width:100%;padding:calc(var(--x-font-size) * 2)}.x-table>tfoot{display:flex;flex-direction:column;justify-content:center}.x-table-sort{cursor:pointer;transition:transform .2s}.x-table-sort:hover{color:var(--x-text-300)}.x-table-sort:active{transform:translate(1px,1px)}.x-table-sort-icon.x-icon{margin-left:.25rem;display:none;font-size:1rem;transform:rotate(90deg) rotateY(180deg);transition:.3s}.x-table-sort-icon.x-icon.x-table-icon-up,.x-table-sort-icon.x-icon.x-table-icon-down{display:inherit}.x-table-sort-icon.x-icon.x-table-icon-down{transform:rotate(90deg)}.x-table-scroll-top>thead{box-shadow:0 var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);z-index:1}.x-table-scroll-left>thead .x-table-sticky{box-shadow:var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-scroll-left>tbody .x-table-sticky{box-shadow:var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-td-adaption-height>tbody tr>td{overflow:inherit}.x-table-td-adaption-height>tbody tr>td>div{white-space:inherit;text-overflow:inherit;overflow:inherit}.x-table-bordered>thead>tr>th,.x-table-bordered>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border);padding-left:calc(var(--x-font-size) / 2)}.x-table-bordered>thead>tr>th:last-child,.x-table-bordered>tbody tr>td:last-child{border-right:none}.x-table-cell-config>thead tr,.x-table-cell-config>tbody tr{display:grid;grid-auto-flow:row;height:100%}.x-table-cell-config>thead>tr>th,.x-table-cell-config>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-cell-config>thead>tr>th:last-child,.x-table-cell-config>tbody tr>td:last-child{border-right:none}.x-table-row-size-big>thead>tr>th,.x-table-row-size-big>tbody tr>td{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) 0}.x-table-row-size-big>thead>tr>th:first-child,.x-table-row-size-big>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big.x-table-bordered>thead>tr>th,.x-table-row-size-big.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big.x-table-cell-config>thead>tr>th,.x-table-row-size-big.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-large>thead>tr>th,.x-table-row-size-large>tbody tr>td{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) 0}.x-table-row-size-large>thead>tr>th:first-child,.x-table-row-size-large>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large.x-table-bordered>thead>tr>th,.x-table-row-size-large.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large.x-table-cell-config>thead>tr>th,.x-table-row-size-large.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-medium>thead>tr>th,.x-table-row-size-medium>tbody tr>td{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) 0}.x-table-row-size-medium>thead>tr>th:first-child,.x-table-row-size-medium>tbody tr>td:first-child{padding-left:var(--x-font-size)}.x-table-row-size-medium.x-table-bordered>thead>tr>th,.x-table-row-size-medium.x-table-bordered>tbody tr>td{padding-left:var(--x-font-size)}.x-table-row-size-medium.x-table-cell-config>thead>tr>th,.x-table-row-size-medium.x-table-cell-config>tbody tr>td{padding-left:var(--x-font-size)}.x-table-row-size-small>thead>tr>th,.x-table-row-size-small>tbody tr>td{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) 0}.x-table-row-size-small>thead>tr>th:first-child,.x-table-row-size-small>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small.x-table-bordered>thead>tr>th,.x-table-row-size-small.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small.x-table-cell-config>thead>tr>th,.x-table-row-size-small.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-mini>thead>tr>th,.x-table-row-size-mini>tbody tr>td{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) 0}.x-table-row-size-mini>thead>tr>th:first-child,.x-table-row-size-mini>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) / 2)}.x-table-row-size-mini.x-table-bordered>thead>tr>th,.x-table-row-size-mini.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) / 2)}.x-table-row-size-mini.x-table-cell-config>thead>tr>th,.x-table-row-size-mini.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) / 2)}x-table{width:100%}x-table .x-pagination{padding-top:calc(var(--x-font-size) / 2)}\n"], components: [{ type: i2$2.XLoadingComponent, selector: "x-loading, [x-loading]" }, { type: XTableHeadComponent, selector: "x-table-head", inputs: ["table"] }, { type: XTableBodyComponent, selector: "x-table-body", inputs: ["table"] }, { type: XTableFootComponent, selector: "x-table-foot", inputs: ["table"] }, { type: i6$1.XPaginationComponent, selector: "x-pagination" }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XTableComponent, decorators: [{
+/** @nocollapse */ /** @nocollapse */ XTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XTableComponent, selector: "x-table", viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table\r\n  #table\r\n  class=\"x-table\"\r\n  [ngClass]=\"classMap\"\r\n  [x-loading]=\"loading && getting\"\r\n  [class.x-table-scroll-left]=\"getScrollLeft\"\r\n  [class.x-table-scroll-top]=\"getScrollTop\"\r\n  [class.x-table-bordered]=\"bordered\"\r\n  [class.x-table-td-adaption-height]=\"rowHeight == 0\"\r\n  [class.x-table-cell-config]=\"cellConfig\"\r\n>\r\n  <x-table-head\r\n    *ngIf=\"showHeader\"\r\n    [columns]=\"columns\"\r\n    [rowHeight]=\"rowHeight\"\r\n    [columnTpl]=\"headColumnTpl\"\r\n    [scrollYWidth]=\"scrollYWidth\"\r\n    [scrollXWidth]=\"scrollXWidth\"\r\n    [cellConfig]=\"cellConfig?.thead\"\r\n    [table]=\"this\"\r\n  ></x-table-head>\r\n  <x-table-body\r\n    [data]=\"tableData\"\r\n    [columns]=\"columns\"\r\n    [itemSize]=\"itemSize\"\r\n    [rowHeight]=\"rowHeight\"\r\n    [bodyHeight]=\"bodyHeight\"\r\n    [columnTpl]=\"bodyColumnTpl\"\r\n    [allowSelectRow]=\"allowSelectRow\"\r\n    [virtualScroll]=\"virtualScroll\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    [adaptionHeight]=\"adaptionHeight\"\r\n    [docPercent]=\"docPercent\"\r\n    [scroll]=\"scroll\"\r\n    [rowClass]=\"rowClass\"\r\n    [cellConfig]=\"cellConfig?.tbody\"\r\n    [(activatedRow)]=\"activatedRow\"\r\n    (activatedRowChange)=\"activatedRowChange.emit($event)\"\r\n    [table]=\"this\"\r\n  ></x-table-body>\r\n  <x-table-foot [table]=\"this\"></x-table-foot>\r\n</table>\r\n<x-pagination\r\n  #pagination\r\n  *ngIf=\"showPagination && size\"\r\n  [(index)]=\"index\"\r\n  [(size)]=\"size\"\r\n  [(query)]=\"query\"\r\n  [total]=\"total\"\r\n  (indexChange)=\"change($event)\"\r\n  [showEllipsis]=\"showEllipsis\"\r\n  [showTotal]=\"showTotal\"\r\n  [space]=\"space\"\r\n  [hiddenBorder]=\"hiddenBorder\"\r\n>\r\n</x-pagination>\r\n", styles: [".x-table{margin:0;padding:0;display:flex;flex-direction:column;border-collapse:collapse;width:100%;border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead{position:relative;overflow:hidden;display:block;background-color:var(--x-background);min-height:42px}.x-table>thead>tr{position:absolute;width:100%;display:flex;min-height:42px}.x-table>thead>tr>th{display:flex;align-items:center;flex:1;position:relative;font-weight:600;background-color:var(--x-background);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead>tr>th>a{display:inline-flex;align-items:center;color:var(--x-text-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-table>thead>tr>th.x-table-sticky{position:sticky;z-index:1}.x-table>thead>tr>th .x-table-drag-width{position:absolute;height:100%;width:.1875rem;right:-.125rem;cursor:ew-resize;transition:background-color var(--x-animation-duration-fast);z-index:1}.x-table>thead>tr>th .x-table-drag-width:hover{background-color:var(--x-primary)}.x-table>tbody{display:block;border-top:none;position:relative;min-height:7rem}.x-table>tbody tr{display:flex}.x-table>tbody tr>td{display:flex;align-items:center;position:relative;justify-content:space-between;overflow:hidden;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>tbody tr>td>div{flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x-table>tbody tr>td.x-table-sticky{position:sticky;z-index:1}.x-table>tbody tr.x-table-activated>td{background-color:#0000000d;color:var(--x-primary)}.x-table>tbody tr:hover>td{background-color:#0000000d}.x-table>tbody tr:last-child{border-bottom:none}.x-table>tbody x-empty{position:absolute;top:0;width:100%;padding:calc(var(--x-font-size) * 2)}.x-table>tfoot{display:flex;flex-direction:column;justify-content:center}.x-table-sort{cursor:pointer;transition:transform .2s}.x-table-sort:hover{color:var(--x-text-300)}.x-table-sort:active{transform:translate(1px,1px)}.x-table-sort-icon.x-icon{margin-left:.25rem;display:none;font-size:1rem;transform:rotate(90deg) rotateY(180deg);transition:.3s}.x-table-sort-icon.x-icon.x-table-icon-up,.x-table-sort-icon.x-icon.x-table-icon-down{display:inherit}.x-table-sort-icon.x-icon.x-table-icon-down{transform:rotate(90deg)}.x-table-scroll-top>thead{box-shadow:0 var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);z-index:1}.x-table-scroll-left>thead .x-table-sticky{box-shadow:var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-scroll-left>tbody .x-table-sticky{box-shadow:var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-td-adaption-height>tbody tr>td{overflow:inherit}.x-table-td-adaption-height>tbody tr>td>div{white-space:inherit;text-overflow:inherit;overflow:inherit}.x-table-bordered>thead>tr>th,.x-table-bordered>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border);padding-left:calc(var(--x-font-size) / 2)}.x-table-bordered>thead>tr>th:last-child,.x-table-bordered>tbody tr>td:last-child{border-right:none}.x-table-cell-config>thead tr,.x-table-cell-config>tbody tr{display:grid;grid-auto-flow:row;height:100%}.x-table-cell-config>thead>tr>th,.x-table-cell-config>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-cell-config>thead>tr>th:last-child,.x-table-cell-config>tbody tr>td:last-child{border-right:none}.x-table-row-size-big>thead>tr>th,.x-table-row-size-big>tbody tr>td{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) 0}.x-table-row-size-big>thead>tr>th:first-child,.x-table-row-size-big>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big.x-table-bordered>thead>tr>th,.x-table-row-size-big.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big.x-table-cell-config>thead>tr>th,.x-table-row-size-big.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-large>thead>tr>th,.x-table-row-size-large>tbody tr>td{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) 0}.x-table-row-size-large>thead>tr>th:first-child,.x-table-row-size-large>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large.x-table-bordered>thead>tr>th,.x-table-row-size-large.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large.x-table-cell-config>thead>tr>th,.x-table-row-size-large.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-medium>thead>tr>th,.x-table-row-size-medium>tbody tr>td{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) 0}.x-table-row-size-medium>thead>tr>th:first-child,.x-table-row-size-medium>tbody tr>td:first-child{padding-left:var(--x-font-size)}.x-table-row-size-medium.x-table-bordered>thead>tr>th,.x-table-row-size-medium.x-table-bordered>tbody tr>td{padding-left:var(--x-font-size)}.x-table-row-size-medium.x-table-cell-config>thead>tr>th,.x-table-row-size-medium.x-table-cell-config>tbody tr>td{padding-left:var(--x-font-size)}.x-table-row-size-small>thead>tr>th,.x-table-row-size-small>tbody tr>td{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) 0}.x-table-row-size-small>thead>tr>th:first-child,.x-table-row-size-small>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small.x-table-bordered>thead>tr>th,.x-table-row-size-small.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small.x-table-cell-config>thead>tr>th,.x-table-row-size-small.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-mini>thead>tr>th,.x-table-row-size-mini>tbody tr>td{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) 0}.x-table-row-size-mini>thead>tr>th:first-child,.x-table-row-size-mini>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) / 2)}.x-table-row-size-mini.x-table-bordered>thead>tr>th,.x-table-row-size-mini.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) / 2)}.x-table-row-size-mini.x-table-cell-config>thead>tr>th,.x-table-row-size-mini.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) / 2)}x-table{width:100%;display:flex;flex-direction:column}x-table .x-pagination{padding-top:calc(var(--x-font-size) / 2)}x-table.x-table-top-left{flex-direction:column-reverse}x-table.x-table-top-left .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-top-center{flex-direction:column-reverse;align-items:center}x-table.x-table-top-center .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-top-right{flex-direction:column-reverse;align-items:flex-end}x-table.x-table-top-right .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-bottom-center{align-items:center}x-table.x-table-bottom-right{align-items:flex-end}\n"], components: [{ type: i2$2.XLoadingComponent, selector: "x-loading, [x-loading]" }, { type: XTableHeadComponent, selector: "x-table-head", inputs: ["table"] }, { type: XTableBodyComponent, selector: "x-table-body", inputs: ["table"] }, { type: XTableFootComponent, selector: "x-table-foot", inputs: ["table"] }, { type: i6$1.XPaginationComponent, selector: "x-pagination" }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XTablePrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table\r\n  #table\r\n  class=\"x-table\"\r\n  [ngClass]=\"classMap\"\r\n  [x-loading]=\"loading && getting\"\r\n  [class.x-table-scroll-left]=\"getScrollLeft\"\r\n  [class.x-table-scroll-top]=\"getScrollTop\"\r\n  [class.x-table-bordered]=\"bordered\"\r\n  [class.x-table-td-adaption-height]=\"rowHeight == 0\"\r\n  [class.x-table-cell-config]=\"cellConfig\"\r\n>\r\n  <x-table-head\r\n    *ngIf=\"showHeader\"\r\n    [columns]=\"columns\"\r\n    [rowHeight]=\"rowHeight\"\r\n    [columnTpl]=\"headColumnTpl\"\r\n    [scrollYWidth]=\"scrollYWidth\"\r\n    [scrollXWidth]=\"scrollXWidth\"\r\n    [cellConfig]=\"cellConfig?.thead\"\r\n    [table]=\"this\"\r\n  ></x-table-head>\r\n  <x-table-body\r\n    [data]=\"tableData\"\r\n    [columns]=\"columns\"\r\n    [itemSize]=\"itemSize\"\r\n    [rowHeight]=\"rowHeight\"\r\n    [bodyHeight]=\"bodyHeight\"\r\n    [columnTpl]=\"bodyColumnTpl\"\r\n    [allowSelectRow]=\"allowSelectRow\"\r\n    [virtualScroll]=\"virtualScroll\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    [adaptionHeight]=\"adaptionHeight\"\r\n    [docPercent]=\"docPercent\"\r\n    [scroll]=\"scroll\"\r\n    [cellConfig]=\"cellConfig?.tbody\"\r\n    [(activatedRow)]=\"activatedRow\"\r\n    (activatedRowChange)=\"activatedRowChange.emit($event)\"\r\n    [table]=\"this\"\r\n  ></x-table-body>\r\n  <x-table-foot [table]=\"this\"></x-table-foot>\r\n</table>\r\n<x-pagination\r\n  #pagination\r\n  *ngIf=\"size\"\r\n  [(index)]=\"index\"\r\n  [(size)]=\"size\"\r\n  [(query)]=\"query\"\r\n  [total]=\"total\"\r\n  (indexChange)=\"change($event)\"\r\n  [showEllipsis]=\"showEllipsis\"\r\n  [showTotal]=\"showTotal\"\r\n  [space]=\"space\"\r\n  [hiddenBorder]=\"hiddenBorder\"\r\n>\r\n</x-pagination>\r\n", styles: [".x-table{margin:0;padding:0;display:flex;flex-direction:column;border-collapse:collapse;width:100%;border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead{position:relative;overflow:hidden;display:block;background-color:var(--x-background);min-height:42px}.x-table>thead>tr{position:absolute;width:100%;display:flex;min-height:42px}.x-table>thead>tr>th{display:flex;align-items:center;flex:1;position:relative;font-weight:600;background-color:var(--x-background);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead>tr>th>a{display:inline-flex;align-items:center;color:var(--x-text-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-table>thead>tr>th.x-table-sticky{position:sticky;z-index:1}.x-table>thead>tr>th .x-table-drag-width{position:absolute;height:100%;width:.1875rem;right:-.125rem;cursor:ew-resize;transition:background-color var(--x-animation-duration-fast);z-index:1}.x-table>thead>tr>th .x-table-drag-width:hover{background-color:var(--x-primary)}.x-table>tbody{display:block;border-top:none;position:relative;min-height:7rem}.x-table>tbody tr{display:flex}.x-table>tbody tr>td{display:flex;align-items:center;position:relative;justify-content:space-between;overflow:hidden;background-color:var(--x-background);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>tbody tr>td>div{flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x-table>tbody tr>td.x-table-sticky{position:sticky;z-index:1}.x-table>tbody tr.x-table-activated>td{background-color:var(--x-background-a200);color:var(--x-primary)}.x-table>tbody tr:hover>td{background-color:var(--x-background-a200)}.x-table>tbody tr:last-child{border-bottom:none}.x-table>tbody x-empty{position:absolute;top:0;width:100%;padding:calc(var(--x-font-size) * 2)}.x-table>tfoot{display:flex;flex-direction:column;justify-content:center}.x-table-sort{cursor:pointer;transition:transform .2s}.x-table-sort:hover{color:var(--x-text-300)}.x-table-sort:active{transform:translate(1px,1px)}.x-table-sort-icon.x-icon{margin-left:.25rem;display:none;font-size:1rem;transform:rotate(90deg) rotateY(180deg);transition:.3s}.x-table-sort-icon.x-icon.x-table-icon-up,.x-table-sort-icon.x-icon.x-table-icon-down{display:inherit}.x-table-sort-icon.x-icon.x-table-icon-down{transform:rotate(90deg)}.x-table-scroll-top>thead{box-shadow:0 var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);z-index:1}.x-table-scroll-left>thead .x-table-sticky{box-shadow:var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-scroll-left>tbody .x-table-sticky{box-shadow:var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-td-adaption-height>tbody tr>td{overflow:inherit}.x-table-td-adaption-height>tbody tr>td>div{white-space:inherit;text-overflow:inherit;overflow:inherit}.x-table-bordered>thead>tr>th,.x-table-bordered>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border);padding-left:calc(var(--x-font-size) / 2)}.x-table-bordered>thead>tr>th:last-child,.x-table-bordered>tbody tr>td:last-child{border-right:none}.x-table-cell-config>thead tr,.x-table-cell-config>tbody tr{display:grid;grid-auto-flow:row;height:100%}.x-table-cell-config>thead>tr>th,.x-table-cell-config>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-cell-config>thead>tr>th:last-child,.x-table-cell-config>tbody tr>td:last-child{border-right:none}.x-table-row-size-big>thead>tr>th,.x-table-row-size-big>tbody tr>td{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) 0}.x-table-row-size-big>thead>tr>th:first-child,.x-table-row-size-big>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big.x-table-bordered>thead>tr>th,.x-table-row-size-big.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big.x-table-cell-config>thead>tr>th,.x-table-row-size-big.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-large>thead>tr>th,.x-table-row-size-large>tbody tr>td{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) 0}.x-table-row-size-large>thead>tr>th:first-child,.x-table-row-size-large>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large.x-table-bordered>thead>tr>th,.x-table-row-size-large.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large.x-table-cell-config>thead>tr>th,.x-table-row-size-large.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-medium>thead>tr>th,.x-table-row-size-medium>tbody tr>td{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) 0}.x-table-row-size-medium>thead>tr>th:first-child,.x-table-row-size-medium>tbody tr>td:first-child{padding-left:var(--x-font-size)}.x-table-row-size-medium.x-table-bordered>thead>tr>th,.x-table-row-size-medium.x-table-bordered>tbody tr>td{padding-left:var(--x-font-size)}.x-table-row-size-medium.x-table-cell-config>thead>tr>th,.x-table-row-size-medium.x-table-cell-config>tbody tr>td{padding-left:var(--x-font-size)}.x-table-row-size-small>thead>tr>th,.x-table-row-size-small>tbody tr>td{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) 0}.x-table-row-size-small>thead>tr>th:first-child,.x-table-row-size-small>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small.x-table-bordered>thead>tr>th,.x-table-row-size-small.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small.x-table-cell-config>thead>tr>th,.x-table-row-size-small.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-mini>thead>tr>th,.x-table-row-size-mini>tbody tr>td{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) 0}.x-table-row-size-mini>thead>tr>th:first-child,.x-table-row-size-mini>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) / 2)}.x-table-row-size-mini.x-table-bordered>thead>tr>th,.x-table-row-size-mini.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) / 2)}.x-table-row-size-mini.x-table-cell-config>thead>tr>th,.x-table-row-size-mini.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) / 2)}x-table{width:100%}x-table .x-pagination{padding-top:calc(var(--x-font-size) / 2)}\n"] }]
+            args: [{ selector: `${XTablePrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table\r\n  #table\r\n  class=\"x-table\"\r\n  [ngClass]=\"classMap\"\r\n  [x-loading]=\"loading && getting\"\r\n  [class.x-table-scroll-left]=\"getScrollLeft\"\r\n  [class.x-table-scroll-top]=\"getScrollTop\"\r\n  [class.x-table-bordered]=\"bordered\"\r\n  [class.x-table-td-adaption-height]=\"rowHeight == 0\"\r\n  [class.x-table-cell-config]=\"cellConfig\"\r\n>\r\n  <x-table-head\r\n    *ngIf=\"showHeader\"\r\n    [columns]=\"columns\"\r\n    [rowHeight]=\"rowHeight\"\r\n    [columnTpl]=\"headColumnTpl\"\r\n    [scrollYWidth]=\"scrollYWidth\"\r\n    [scrollXWidth]=\"scrollXWidth\"\r\n    [cellConfig]=\"cellConfig?.thead\"\r\n    [table]=\"this\"\r\n  ></x-table-head>\r\n  <x-table-body\r\n    [data]=\"tableData\"\r\n    [columns]=\"columns\"\r\n    [itemSize]=\"itemSize\"\r\n    [rowHeight]=\"rowHeight\"\r\n    [bodyHeight]=\"bodyHeight\"\r\n    [columnTpl]=\"bodyColumnTpl\"\r\n    [allowSelectRow]=\"allowSelectRow\"\r\n    [virtualScroll]=\"virtualScroll\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    [adaptionHeight]=\"adaptionHeight\"\r\n    [docPercent]=\"docPercent\"\r\n    [scroll]=\"scroll\"\r\n    [rowClass]=\"rowClass\"\r\n    [cellConfig]=\"cellConfig?.tbody\"\r\n    [(activatedRow)]=\"activatedRow\"\r\n    (activatedRowChange)=\"activatedRowChange.emit($event)\"\r\n    [table]=\"this\"\r\n  ></x-table-body>\r\n  <x-table-foot [table]=\"this\"></x-table-foot>\r\n</table>\r\n<x-pagination\r\n  #pagination\r\n  *ngIf=\"showPagination && size\"\r\n  [(index)]=\"index\"\r\n  [(size)]=\"size\"\r\n  [(query)]=\"query\"\r\n  [total]=\"total\"\r\n  (indexChange)=\"change($event)\"\r\n  [showEllipsis]=\"showEllipsis\"\r\n  [showTotal]=\"showTotal\"\r\n  [space]=\"space\"\r\n  [hiddenBorder]=\"hiddenBorder\"\r\n>\r\n</x-pagination>\r\n", styles: [".x-table{margin:0;padding:0;display:flex;flex-direction:column;border-collapse:collapse;width:100%;border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead{position:relative;overflow:hidden;display:block;background-color:var(--x-background);min-height:42px}.x-table>thead>tr{position:absolute;width:100%;display:flex;min-height:42px}.x-table>thead>tr>th{display:flex;align-items:center;flex:1;position:relative;font-weight:600;background-color:var(--x-background);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead>tr>th>a{display:inline-flex;align-items:center;color:var(--x-text-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-table>thead>tr>th.x-table-sticky{position:sticky;z-index:1}.x-table>thead>tr>th .x-table-drag-width{position:absolute;height:100%;width:.1875rem;right:-.125rem;cursor:ew-resize;transition:background-color var(--x-animation-duration-fast);z-index:1}.x-table>thead>tr>th .x-table-drag-width:hover{background-color:var(--x-primary)}.x-table>tbody{display:block;border-top:none;position:relative;min-height:7rem}.x-table>tbody tr{display:flex}.x-table>tbody tr>td{display:flex;align-items:center;position:relative;justify-content:space-between;overflow:hidden;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>tbody tr>td>div{flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x-table>tbody tr>td.x-table-sticky{position:sticky;z-index:1}.x-table>tbody tr.x-table-activated>td{background-color:#0000000d;color:var(--x-primary)}.x-table>tbody tr:hover>td{background-color:#0000000d}.x-table>tbody tr:last-child{border-bottom:none}.x-table>tbody x-empty{position:absolute;top:0;width:100%;padding:calc(var(--x-font-size) * 2)}.x-table>tfoot{display:flex;flex-direction:column;justify-content:center}.x-table-sort{cursor:pointer;transition:transform .2s}.x-table-sort:hover{color:var(--x-text-300)}.x-table-sort:active{transform:translate(1px,1px)}.x-table-sort-icon.x-icon{margin-left:.25rem;display:none;font-size:1rem;transform:rotate(90deg) rotateY(180deg);transition:.3s}.x-table-sort-icon.x-icon.x-table-icon-up,.x-table-sort-icon.x-icon.x-table-icon-down{display:inherit}.x-table-sort-icon.x-icon.x-table-icon-down{transform:rotate(90deg)}.x-table-scroll-top>thead{box-shadow:0 var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);z-index:1}.x-table-scroll-left>thead .x-table-sticky{box-shadow:var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-scroll-left>tbody .x-table-sticky{box-shadow:var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-td-adaption-height>tbody tr>td{overflow:inherit}.x-table-td-adaption-height>tbody tr>td>div{white-space:inherit;text-overflow:inherit;overflow:inherit}.x-table-bordered>thead>tr>th,.x-table-bordered>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border);padding-left:calc(var(--x-font-size) / 2)}.x-table-bordered>thead>tr>th:last-child,.x-table-bordered>tbody tr>td:last-child{border-right:none}.x-table-cell-config>thead tr,.x-table-cell-config>tbody tr{display:grid;grid-auto-flow:row;height:100%}.x-table-cell-config>thead>tr>th,.x-table-cell-config>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-cell-config>thead>tr>th:last-child,.x-table-cell-config>tbody tr>td:last-child{border-right:none}.x-table-row-size-big>thead>tr>th,.x-table-row-size-big>tbody tr>td{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) 0}.x-table-row-size-big>thead>tr>th:first-child,.x-table-row-size-big>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big.x-table-bordered>thead>tr>th,.x-table-row-size-big.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big.x-table-cell-config>thead>tr>th,.x-table-row-size-big.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-large>thead>tr>th,.x-table-row-size-large>tbody tr>td{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) 0}.x-table-row-size-large>thead>tr>th:first-child,.x-table-row-size-large>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large.x-table-bordered>thead>tr>th,.x-table-row-size-large.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large.x-table-cell-config>thead>tr>th,.x-table-row-size-large.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-medium>thead>tr>th,.x-table-row-size-medium>tbody tr>td{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) 0}.x-table-row-size-medium>thead>tr>th:first-child,.x-table-row-size-medium>tbody tr>td:first-child{padding-left:var(--x-font-size)}.x-table-row-size-medium.x-table-bordered>thead>tr>th,.x-table-row-size-medium.x-table-bordered>tbody tr>td{padding-left:var(--x-font-size)}.x-table-row-size-medium.x-table-cell-config>thead>tr>th,.x-table-row-size-medium.x-table-cell-config>tbody tr>td{padding-left:var(--x-font-size)}.x-table-row-size-small>thead>tr>th,.x-table-row-size-small>tbody tr>td{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) 0}.x-table-row-size-small>thead>tr>th:first-child,.x-table-row-size-small>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small.x-table-bordered>thead>tr>th,.x-table-row-size-small.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small.x-table-cell-config>thead>tr>th,.x-table-row-size-small.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-mini>thead>tr>th,.x-table-row-size-mini>tbody tr>td{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) 0}.x-table-row-size-mini>thead>tr>th:first-child,.x-table-row-size-mini>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) / 2)}.x-table-row-size-mini.x-table-bordered>thead>tr>th,.x-table-row-size-mini.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) / 2)}.x-table-row-size-mini.x-table-cell-config>thead>tr>th,.x-table-row-size-mini.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) / 2)}x-table{width:100%;display:flex;flex-direction:column}x-table .x-pagination{padding-top:calc(var(--x-font-size) / 2)}x-table.x-table-top-left{flex-direction:column-reverse}x-table.x-table-top-left .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-top-center{flex-direction:column-reverse;align-items:center}x-table.x-table-top-center .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-top-right{flex-direction:column-reverse;align-items:flex-end}x-table.x-table-top-right .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-bottom-center{align-items:center}x-table.x-table-bottom-right{align-items:flex-end}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }]; }, propDecorators: { table: [{
                 type: ViewChild,
                 args: ['table']
@@ -997,8 +1018,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
 
 class XTableModule {
 }
-/** @nocollapse */ /** @nocollapse */ XTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ /** @nocollapse */ XTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XTableModule, declarations: [XDragDirective,
+/** @nocollapse */ /** @nocollapse */ XTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ XTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableModule, declarations: [XDragDirective,
         XTableComponent,
         XTableProperty,
         XTableHeadComponent,
@@ -1015,7 +1036,7 @@ class XTableModule {
         ScrollingModule,
         XEmptyModule,
         XLoadingModule], exports: [XTableComponent] });
-/** @nocollapse */ /** @nocollapse */ XTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XTableModule, imports: [[
+/** @nocollapse */ /** @nocollapse */ XTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableModule, imports: [[
             CommonModule,
             FormsModule,
             XPaginationModule,
@@ -1026,7 +1047,7 @@ class XTableModule {
             XEmptyModule,
             XLoadingModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [