@sd-angular/core 1.3.217 → 1.3.218

package/bundles/sd-angular-core-table.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@sd-angular/core/common'), require('@angular/core'), require('@angular/common'), require('@angular/material/icon'), require('@angular/material/paginator'), require('@angular/material/sort'), require('@angular/animations'), require('uuid'), require('rxjs'), require('@sd-angular/core/notify'), require('rxjs/operators'), require('@sd-angular/core/modal'), require('ngx-device-detector'), require('@sd-angular/core/export'), require('@sd-angular/core/setting'), require('@sd-angular/core/quick-action'), require('object-hash'), require('@angular/cdk/drag-drop'), require('@sd-angular/core/loading'), require('@angular/material/table'), require('@angular/material/progress-spinner'), require('@angular/cdk/table'), require('@angular/material/menu'), require('@angular/material/button'), require('@sd-angular/core/service'), require('@angular/material/tooltip'), require('@angular/material/slide-toggle'), require('@sd-angular/core/form'), require('@angular/material/checkbox'), require('@angular/material/list'), require('@sd-angular/core/group')) :
-    typeof define === 'function' && define.amd ? define('@sd-angular/core/table', ['exports', '@sd-angular/core/common', '@angular/core', '@angular/common', '@angular/material/icon', '@angular/material/paginator', '@angular/material/sort', '@angular/animations', 'uuid', 'rxjs', '@sd-angular/core/notify', 'rxjs/operators', '@sd-angular/core/modal', 'ngx-device-detector', '@sd-angular/core/export', '@sd-angular/core/setting', '@sd-angular/core/quick-action', 'object-hash', '@angular/cdk/drag-drop', '@sd-angular/core/loading', '@angular/material/table', '@angular/material/progress-spinner', '@angular/cdk/table', '@angular/material/menu', '@angular/material/button', '@sd-angular/core/service', '@angular/material/tooltip', '@angular/material/slide-toggle', '@sd-angular/core/form', '@angular/material/checkbox', '@angular/material/list', '@sd-angular/core/group'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sd-angular'] = global['sd-angular'] || {}, global['sd-angular'].core = global['sd-angular'].core || {}, global['sd-angular'].core.table = {}), global['sd-angular'].core.common, global.ng.core, global.ng.common, global.ng.material.icon, global.ng.material.paginator, global.ng.material.sort, global.ng.animations, global.uuid, global.rxjs, global['sd-angular'].core.notify, global.rxjs.operators, global['sd-angular'].core.modal, global['ngx-device-detector'], global['sd-angular'].core.export, global['sd-angular'].core.setting, global['sd-angular'].core['quick-action'], global['object-hash'], global.ng.cdk.dragDrop, global['sd-angular'].core.loading, global.ng.material.table, global.ng.material.progressSpinner, global.ng.cdk.table, global.ng.material.menu, global.ng.material.button, global['sd-angular'].core.service, global.ng.material.tooltip, global.ng.material.slideToggle, global['sd-angular'].core.form, global.ng.material.checkbox, global.ng.material.list, global['sd-angular'].core.group));
-}(this, (function (exports, common, core, common$1, icon, paginator, sort, animations, uuid, rxjs, notify, operators, modal, ngxDeviceDetector, _export, setting, quickAction, hash, dragDrop, loading, table, progressSpinner, table$1, menu, button, service, tooltip, slideToggle, form, checkbox, list, group) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@sd-angular/core/common'), require('@angular/core'), require('@angular/common'), require('@angular/material/icon'), require('@angular/material/paginator'), require('@angular/material/sort'), require('@angular/material/table'), require('@angular/animations'), require('uuid'), require('rxjs'), require('@sd-angular/core/notify'), require('rxjs/operators'), require('@sd-angular/core/modal'), require('ngx-device-detector'), require('@sd-angular/core/export'), require('@sd-angular/core/setting'), require('@sd-angular/core/quick-action'), require('object-hash'), require('@angular/cdk/drag-drop'), require('@sd-angular/core/loading'), require('@angular/material/progress-spinner'), require('@angular/cdk/table'), require('@angular/material/menu'), require('@angular/material/button'), require('@sd-angular/core/service'), require('@angular/material/tooltip'), require('@angular/material/slide-toggle'), require('@sd-angular/core/form'), require('@angular/material/checkbox'), require('@angular/material/list'), require('@sd-angular/core/group')) :
+    typeof define === 'function' && define.amd ? define('@sd-angular/core/table', ['exports', '@sd-angular/core/common', '@angular/core', '@angular/common', '@angular/material/icon', '@angular/material/paginator', '@angular/material/sort', '@angular/material/table', '@angular/animations', 'uuid', 'rxjs', '@sd-angular/core/notify', 'rxjs/operators', '@sd-angular/core/modal', 'ngx-device-detector', '@sd-angular/core/export', '@sd-angular/core/setting', '@sd-angular/core/quick-action', 'object-hash', '@angular/cdk/drag-drop', '@sd-angular/core/loading', '@angular/material/progress-spinner', '@angular/cdk/table', '@angular/material/menu', '@angular/material/button', '@sd-angular/core/service', '@angular/material/tooltip', '@angular/material/slide-toggle', '@sd-angular/core/form', '@angular/material/checkbox', '@angular/material/list', '@sd-angular/core/group'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sd-angular'] = global['sd-angular'] || {}, global['sd-angular'].core = global['sd-angular'].core || {}, global['sd-angular'].core.table = {}), global['sd-angular'].core.common, global.ng.core, global.ng.common, global.ng.material.icon, global.ng.material.paginator, global.ng.material.sort, global.ng.material.table, global.ng.animations, global.uuid, global.rxjs, global['sd-angular'].core.notify, global.rxjs.operators, global['sd-angular'].core.modal, global['ngx-device-detector'], global['sd-angular'].core.export, global['sd-angular'].core.setting, global['sd-angular'].core['quick-action'], global['object-hash'], global.ng.cdk.dragDrop, global['sd-angular'].core.loading, global.ng.material.progressSpinner, global.ng.cdk.table, global.ng.material.menu, global.ng.material.button, global['sd-angular'].core.service, global.ng.material.tooltip, global.ng.material.slideToggle, global['sd-angular'].core.form, global.ng.material.checkbox, global.ng.material.list, global['sd-angular'].core.group));
+}(this, (function (exports, common, core, common$1, icon, paginator, sort, table, animations, uuid, rxjs, notify, operators, modal, ngxDeviceDetector, _export, setting, quickAction, hash, dragDrop, loading, progressSpinner, table$1, menu, button, service, tooltip, slideToggle, form, checkbox, list, group) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -2564,6 +2564,10 @@
         SdTable.prototype.ngOnInit = function () {
             __classPrivateFieldGet(this, _initCellDef).call(this);
         };
+        SdTable.prototype.ngAfterViewChecked = function () {
+            if (this.table)
+                this.table.updateStickyColumnStyles();
+        };
         SdTable.prototype.ngAfterViewInit = function () {
             var _this = this;
             __classPrivateFieldGet(this, _subscription$1).add(__classPrivateFieldGet(this, _reload).pipe(operators.debounceTime(200), operators.switchMap(function (data) { return __awaiter(_this, void 0, void 0, function () {
@@ -2622,7 +2626,7 @@
     SdTable.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-table',
-                    template: "<ng-container *ngIf=\"configuration\">\r\n  <sd-table-filter\r\n    *ngIf=\"!tableOption.filter?.disabled && filterRegister\"\r\n    [filterRegister]=\"filterRegister\"\r\n    [filter]=\"tableOption?.filter\"\r\n    [columns]=\"configuration.firstColumns\"\r\n    [externalFilters]=\"tableOption?.filter?.externalFilters\"\r\n    [filterDefs]=\"filterDefs\">\r\n  </sd-table-filter>\r\n  <ng-container *ngIf=\"items | sdGroup : tableOption; $implicit as groupedItems\">\r\n    <div class=\"c-container\">\r\n      <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n        <mat-spinner></mat-spinner>\r\n      </div>\r\n      <ng-container>\r\n        <div\r\n          class=\"c-table\"\r\n          sdScroll\r\n          [ngStyle]=\"{\r\n            'max-height': tableOption?.style?.maxHeight,\r\n            'min-height': tableOption?.style?.minHeight\r\n          }\">\r\n          <table mat-table [dataSource]=\"groupedItems\" [trackBy]=\"trackBy\" matSort [matSortDisabled]=\"!tableOption.sort?.enable\" multiTemplateDataRows>\r\n            <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n              <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n                  <ng-container *ngIf=\"tableOption?.expand?.always; else useExpandCollapse\">\r\n                    <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </ng-container>\r\n                  </ng-container>\r\n                  <ng-template #useExpandCollapse>\r\n                    <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n                      <ng-container *ngIf=\"item.isExpanded\">\r\n                        <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </ng-container>\r\n                      </ng-container>\r\n                    </div>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n              <th\r\n                class=\"p-0\"\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                style=\"width: 1px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              <td mat-cell *matCellDef=\"let element\">\r\n                <button\r\n                  *ngIf=\"!element.isExpanding && !tableOption?.expand?.always\"\r\n                  mat-icon-button\r\n                  aria-label=\"Expand & Collapse\"\r\n                  (click)=\"onExpand(element)\">\r\n                  <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n                  <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n                </button>\r\n                <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n                  <div></div>\r\n                  <div></div>\r\n                  <div></div>\r\n                  <div></div>\r\n                </div>\r\n              </td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdSelection\" sticky>\r\n              <th\r\n                class=\"text-center px-15\"\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                style=\"min-width: 50px; max-width: 50px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                <ng-container *ngIf=\"items | selectionVisibleSelectAll : tableOption?.selector | async\">\r\n                  <mat-checkbox\r\n                    *ngIf=\"!tableOption.selector?.single\"\r\n                    class=\"c-selection\"\r\n                    color=\"primary\"\r\n                    [(ngModel)]=\"isSelectAll\"\r\n                    (change)=\"onSelectAll()\">\r\n                  </mat-checkbox>\r\n                </ng-container>\r\n              </th>\r\n              <td class=\"text-center px-15\" mat-cell *matCellDef=\"let item\" style=\"min-width: 50px; max-width: 50px\">\r\n                <ng-container *ngIf=\"item | selectionVisible : tableOption?.selector\">\r\n                  <mat-checkbox\r\n                    class=\"c-selection\"\r\n                    color=\"primary\"\r\n                    [(ngModel)]=\"item.meta.selector.isSelected\"\r\n                    (change)=\"onSelect(item)\"\r\n                    [disabled]=\"selectedTableItems | selectionDisable : item : tableOption?.selector\">\r\n                  </mat-checkbox>\r\n                </ng-container>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdCommand\" sticky>\r\n              <th\r\n                class=\"px-8 py-8\"\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                style=\"width: 50px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-command [commands]=\"tableOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdGroup\">\r\n              <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\" [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n                <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\"></div>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container\r\n              *ngFor=\"let column of configuration.firstColumns;\"\r\n              [matColumnDef]=\"column.field\"\r\n              [sticky]=\"configuration.fixedColumn[column.field]\">\r\n              <th\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                class=\"px-8 py-8 c-th\"\r\n                [ngStyle]=\"{ 'min-width': column.width }\"\r\n                [attr.rowspan]=\"configuration.multipleHeader && column.type !== 'children-col' ? 2 : 1\"\r\n                [attr.colspan]=\"column.type === 'children-col' ? column.children?.length : 1\">\r\n                <div>\r\n                  <div\r\n                    aria-hidden=\"true\"\r\n                    mat-sort-header\r\n                    [disabled]=\"!column.sortable || column.type === 'children-col'\"\r\n                    [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                    [class.text-center]=\"column.align === 'center'\"\r\n                    [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                  <sd-column-inline-filter\r\n                    *ngIf=\"!tableOption.filter?.disabled && !tableOption.filter?.hideInlineFilter && columnOperator\"\r\n                    [value]=\"columnFilter[column.field]\"\r\n                    [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                    (operatorChange)=\"onOperatorChange(column, $event)\"\r\n                    [columnFilter]=\"columnFilter\"\r\n                    [cacheValues]=\"cacheValues\"\r\n                    [column]=\"column\"\r\n                    (filterChange)=\"onFilterChange()\">\r\n                  </sd-column-inline-filter>\r\n                </div>\r\n              </th>\r\n              <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-cell\r\n                  class=\"d-block px-8\"\r\n                  *ngIf=\"!item?.sdGroup\"\r\n                  [value]=\"item[column.field]\"\r\n                  [column]=\"column\"\r\n                  [item]=\"item\"\r\n                  [cellDef]=\"cellDef\">\r\n                </sd-desktop-cell>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                <ng-container *ngIf=\"footerDef[column.field]\">\r\n                  <ng-container *ngTemplateOutlet=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\r\n                  </ng-container>\r\n                </ng-container>\r\n              </td>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n              <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                <div>\r\n                  <div\r\n                    [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                    [class.text-center]=\"column.align === 'center'\"\r\n                    [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                  <sd-column-inline-filter\r\n                    *ngIf=\"!tableOption.filter?.disabled && !tableOption.filter?.hideInlineFilter  && columnOperator\"\r\n                    [value]=\"columnFilter[column.field]\"\r\n                    [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                    (operatorChange)=\"onOperatorChange(column, $event)\"\r\n                    [columnFilter]=\"columnFilter\"\r\n                    [cacheValues]=\"cacheValues\"\r\n                    [column]=\"column\"\r\n                    (filterChange)=\"onFilterChange()\">\r\n                  </sd-column-inline-filter>\r\n                </div>\r\n              </th>\r\n              <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-cell\r\n                  class=\"d-block px-8\"\r\n                  [value]=\"item[column.field]\"\r\n                  [column]=\"column\"\r\n                  [item]=\"item\"\r\n                  [cellDef]=\"cellDef\">\r\n                </sd-desktop-cell>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                <ng-container *ngIf=\"footerDef[column.field]\">\r\n                  <ng-container *ngTemplateOutlet=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\r\n                  </ng-container>\r\n                </ng-container>\r\n              </td>\r\n            </ng-container>\r\n            <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"></tr>\r\n            <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n              <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"></tr>\r\n            </ng-container>\r\n            <tr\r\n              mat-row\r\n              *matRowDef=\"let row; columns: configuration.displayedColumns\"\r\n              matRipple\r\n              class=\"c-row\"\r\n              [class.selected]=\"row.meta.selector.isSelected\"></tr>\r\n\r\n            <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n            <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n              <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n            </ng-container>\r\n          </table>\r\n        </div>\r\n      </ng-container>\r\n      <div class=\"c-paginator\">\r\n        <div class=\"c-action\">\r\n          <sd-button\r\n            *ngIf=\"tableOption.reload?.visible\"\r\n            class=\"mr-8\"\r\n            title=\"T\u1EA3i l\u1EA1i\"\r\n            icon=\"refresh\"\r\n            size=\"sm\"\r\n            (action)=\"reload()\"\r\n            [disabled]=\"!items?.length\"\r\n            type=\"link\">\r\n          </sd-button>\r\n          <ng-container *ngIf=\"tableOption.export?.visible && items?.length\">\r\n            <ng-container *ngIf=\"isExporting; else unExporting\">\r\n              <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\" type=\"link\">\r\n              </sd-button>\r\n            </ng-container>\r\n            <ng-template #unExporting>\r\n              <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\" [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n              </sd-button>\r\n            </ng-template>\r\n            <mat-menu #menu=\"matMenu\">\r\n              <button mat-menu-item (click)=\"exportExcel()\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                <span> Xu\u1EA5t excel</span>\r\n              </button>\r\n              <button mat-menu-item (click)=\"exportCSV()\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                <span> Xu\u1EA5t CSV</span>\r\n              </button>\r\n            </mat-menu>\r\n          </ng-container>\r\n          <sd-button\r\n            *ngIf=\"popupConfiguration\"\r\n            class=\"mr-8\"\r\n            [title]=\"'Configure' | sdTranslate\"\r\n            icon=\"settings\"\r\n            size=\"sm\"\r\n            (action)=\"popupConfiguration.open()\"\r\n            type=\"link\">\r\n          </sd-button>\r\n        </div>\r\n        <mat-paginator\r\n          [class.d-none]=\"tableOption.paginate?.hidden\"\r\n          [length]=\"total\"\r\n          [pageSize]=\"tableOption.paginate?.pageSize\"\r\n          [pageSizeOptions]=\"tableOption.paginate?.pages\"\r\n          [showFirstLastButtons]=\"tableOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n      </div>\r\n    </div>\r\n    <sd-table-quick-action [tableOption]=\"tableOption\" [selectedTableItems]=\"selectedTableItems\" (clear)=\"onClearSelection(groupedItems)\">\r\n    </sd-table-quick-action>\r\n    <sd-popup-configuration *ngIf=\"tableOption?.key && tableOption.config?.visible\" [tableOption]=\"tableOption\"> </sd-popup-configuration>\r\n  </ng-container>\r\n</ng-container>\r\n",
+                    template: "<ng-container *ngIf=\"configuration\">\r\n  <sd-table-filter\r\n    *ngIf=\"!tableOption.filter?.disabled && filterRegister\"\r\n    [filterRegister]=\"filterRegister\"\r\n    [filter]=\"tableOption?.filter\"\r\n    [columns]=\"configuration.firstColumns\"\r\n    [externalFilters]=\"tableOption?.filter?.externalFilters\"\r\n    [filterDefs]=\"filterDefs\">\r\n  </sd-table-filter>\r\n  <ng-container *ngIf=\"items | sdGroup : tableOption; $implicit as groupedItems\">\r\n    <div class=\"c-container\">\r\n      <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n        <mat-spinner></mat-spinner>\r\n      </div>\r\n      <ng-container>\r\n        <div\r\n          class=\"c-table\"\r\n          sdScroll\r\n          [ngStyle]=\"{\r\n            'max-height': tableOption?.style?.maxHeight,\r\n            'min-height': tableOption?.style?.minHeight\r\n          }\">\r\n          <table mat-table [dataSource]=\"groupedItems\" [trackBy]=\"trackBy\" matSort [matSortDisabled]=\"!tableOption.sort?.enable\" multiTemplateDataRows>\r\n            <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n              <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n                  <ng-container *ngIf=\"tableOption?.expand?.always; else useExpandCollapse\">\r\n                    <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </ng-container>\r\n                  </ng-container>\r\n                  <ng-template #useExpandCollapse>\r\n                    <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n                      <ng-container *ngIf=\"item.isExpanded\">\r\n                        <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </ng-container>\r\n                      </ng-container>\r\n                    </div>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n              <th\r\n                class=\"p-0\"\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                style=\"width: 1px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              <td mat-cell *matCellDef=\"let element\">\r\n                <button\r\n                  *ngIf=\"!element.isExpanding && !tableOption?.expand?.always\"\r\n                  mat-icon-button\r\n                  aria-label=\"Expand & Collapse\"\r\n                  (click)=\"onExpand(element)\">\r\n                  <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n                  <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n                </button>\r\n                <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n                  <div></div>\r\n                  <div></div>\r\n                  <div></div>\r\n                  <div></div>\r\n                </div>\r\n              </td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdSelection\" sticky>\r\n              <th\r\n                class=\"text-center p-0\"\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                <ng-container *ngIf=\"items | selectionVisibleSelectAll : tableOption?.selector | async\">\r\n                  <mat-checkbox\r\n                    *ngIf=\"!tableOption.selector?.single\"\r\n                    class=\"c-selection px-15\"\r\n                    style=\"min-width: 50px; max-width: 50px\"\r\n                    color=\"primary\"\r\n                    [(ngModel)]=\"isSelectAll\"\r\n                    (change)=\"onSelectAll()\">\r\n                  </mat-checkbox>\r\n                </ng-container>\r\n              </th>\r\n              <td class=\"text-center p-0\" mat-cell *matCellDef=\"let item\">\r\n                <ng-container *ngIf=\"item | selectionVisible : tableOption?.selector\">\r\n                  <mat-checkbox\r\n                    class=\"c-selection px-15\"\r\n                    style=\"min-width: 50px; max-width: 50px\"\r\n                    color=\"primary\"\r\n                    [(ngModel)]=\"item.meta.selector.isSelected\"\r\n                    (change)=\"onSelect(item)\"\r\n                    [disabled]=\"selectedTableItems | selectionDisable : item : tableOption?.selector\">\r\n                  </mat-checkbox>\r\n                </ng-container>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdCommand\" sticky>\r\n              <th\r\n                class=\"p-0\"\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                style=\"width: 50px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-command [commands]=\"tableOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdGroup\">\r\n              <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\" [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n                <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\"></div>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container\r\n              *ngFor=\"let column of configuration.firstColumns;\"\r\n              [matColumnDef]=\"column.field\"\r\n              [sticky]=\"configuration.fixedColumn[column.field]\">\r\n              <th\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                class=\"px-8 py-8 c-th\"\r\n                [ngStyle]=\"{ 'min-width': column.width }\"\r\n                [attr.rowspan]=\"configuration.multipleHeader && column.type !== 'children-col' ? 2 : 1\"\r\n                [attr.colspan]=\"column.type === 'children-col' ? column.children?.length : 1\">\r\n                <div>\r\n                  <div\r\n                    aria-hidden=\"true\"\r\n                    mat-sort-header\r\n                    [disabled]=\"!column.sortable || column.type === 'children-col'\"\r\n                    [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                    [class.text-center]=\"column.align === 'center'\"\r\n                    [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                  <sd-column-inline-filter\r\n                    *ngIf=\"!tableOption.filter?.disabled && !tableOption.filter?.hideInlineFilter && columnOperator\"\r\n                    [value]=\"columnFilter[column.field]\"\r\n                    [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                    (operatorChange)=\"onOperatorChange(column, $event)\"\r\n                    [columnFilter]=\"columnFilter\"\r\n                    [cacheValues]=\"cacheValues\"\r\n                    [column]=\"column\"\r\n                    (filterChange)=\"onFilterChange()\">\r\n                  </sd-column-inline-filter>\r\n                </div>\r\n              </th>\r\n              <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-cell\r\n                  class=\"d-block px-8\"\r\n                  *ngIf=\"!item?.sdGroup\"\r\n                  [value]=\"item[column.field]\"\r\n                  [column]=\"column\"\r\n                  [item]=\"item\"\r\n                  [cellDef]=\"cellDef\">\r\n                </sd-desktop-cell>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                <ng-container *ngIf=\"footerDef[column.field]\">\r\n                  <ng-container *ngTemplateOutlet=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\r\n                  </ng-container>\r\n                </ng-container>\r\n              </td>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n              <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                <div>\r\n                  <div\r\n                    [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                    [class.text-center]=\"column.align === 'center'\"\r\n                    [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                  <sd-column-inline-filter\r\n                    *ngIf=\"!tableOption.filter?.disabled && !tableOption.filter?.hideInlineFilter  && columnOperator\"\r\n                    [value]=\"columnFilter[column.field]\"\r\n                    [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                    (operatorChange)=\"onOperatorChange(column, $event)\"\r\n                    [columnFilter]=\"columnFilter\"\r\n                    [cacheValues]=\"cacheValues\"\r\n                    [column]=\"column\"\r\n                    (filterChange)=\"onFilterChange()\">\r\n                  </sd-column-inline-filter>\r\n                </div>\r\n              </th>\r\n              <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-cell\r\n                  class=\"d-block px-8\"\r\n                  [value]=\"item[column.field]\"\r\n                  [column]=\"column\"\r\n                  [item]=\"item\"\r\n                  [cellDef]=\"cellDef\">\r\n                </sd-desktop-cell>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                <ng-container *ngIf=\"footerDef[column.field]\">\r\n                  <ng-container *ngTemplateOutlet=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\r\n                  </ng-container>\r\n                </ng-container>\r\n              </td>\r\n            </ng-container>\r\n            <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"></tr>\r\n            <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n              <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"></tr>\r\n            </ng-container>\r\n            <tr\r\n              mat-row\r\n              *matRowDef=\"let row; columns: configuration.displayedColumns\"\r\n              matRipple\r\n              class=\"c-row\"\r\n              [class.selected]=\"row.meta.selector.isSelected\"></tr>\r\n\r\n            <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n            <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n              <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n            </ng-container>\r\n          </table>\r\n        </div>\r\n      </ng-container>\r\n      <div class=\"c-paginator\">\r\n        <div class=\"c-action\">\r\n          <sd-button\r\n            *ngIf=\"tableOption.reload?.visible\"\r\n            class=\"mr-8\"\r\n            title=\"T\u1EA3i l\u1EA1i\"\r\n            icon=\"refresh\"\r\n            size=\"sm\"\r\n            (action)=\"reload()\"\r\n            [disabled]=\"!items?.length\"\r\n            type=\"link\">\r\n          </sd-button>\r\n          <ng-container *ngIf=\"tableOption.export?.visible && items?.length\">\r\n            <ng-container *ngIf=\"isExporting; else unExporting\">\r\n              <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\" type=\"link\">\r\n              </sd-button>\r\n            </ng-container>\r\n            <ng-template #unExporting>\r\n              <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\" [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n              </sd-button>\r\n            </ng-template>\r\n            <mat-menu #menu=\"matMenu\">\r\n              <button mat-menu-item (click)=\"exportExcel()\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                <span> Xu\u1EA5t excel</span>\r\n              </button>\r\n              <button mat-menu-item (click)=\"exportCSV()\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                <span> Xu\u1EA5t CSV</span>\r\n              </button>\r\n            </mat-menu>\r\n          </ng-container>\r\n          <sd-button\r\n            *ngIf=\"popupConfiguration\"\r\n            class=\"mr-8\"\r\n            [title]=\"'Configure' | sdTranslate\"\r\n            icon=\"settings\"\r\n            size=\"sm\"\r\n            (action)=\"popupConfiguration.open()\"\r\n            type=\"link\">\r\n          </sd-button>\r\n        </div>\r\n        <mat-paginator\r\n          [class.d-none]=\"tableOption.paginate?.hidden\"\r\n          [length]=\"total\"\r\n          [pageSize]=\"tableOption.paginate?.pageSize\"\r\n          [pageSizeOptions]=\"tableOption.paginate?.pages\"\r\n          [showFirstLastButtons]=\"tableOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n      </div>\r\n    </div>\r\n    <sd-table-quick-action [tableOption]=\"tableOption\" [selectedTableItems]=\"selectedTableItems\" (clear)=\"onClearSelection(groupedItems)\">\r\n    </sd-table-quick-action>\r\n    <sd-popup-configuration *ngIf=\"tableOption?.key && tableOption.config?.visible\" [tableOption]=\"tableOption\"> </sd-popup-configuration>\r\n  </ng-container>\r\n</ng-container>\r\n",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     animations: [
                         animations.trigger('detailExpand', [
@@ -2644,6 +2648,7 @@
         { type: SdTableFilterService }
     ]; };
     SdTable.propDecorators = {
+        table: [{ type: core.ViewChild, args: [table.MatTable,] }],
         popupConfiguration: [{ type: core.ViewChild, args: [SdPopupConfiguration,] }],
         sdScroll: [{ type: core.ViewChild, args: [common.SdScrollDirective,] }],
         quickAction: [{ type: core.ViewChild, args: [quickAction.SdQuickAction,] }],