@sd-angular/core 1.3.182 → 1.3.184

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('@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', '@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.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, 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/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';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -564,28 +564,28 @@
         _filterRegister: [{ type: core.Input, args: ['filterRegister',] }]
     };
 
-    var SdMaterialFilterDefDirective = /** @class */ (function () {
-        function SdMaterialFilterDefDirective(templateRef) {
+    var SdTableFilterDefDirective = /** @class */ (function () {
+        function SdTableFilterDefDirective(templateRef) {
             this.templateRef = templateRef;
         }
-        Object.defineProperty(SdMaterialFilterDefDirective.prototype, "showing", {
+        Object.defineProperty(SdTableFilterDefDirective.prototype, "showing", {
             set: function (val) {
                 this.defaultShowing = (val === '') || val;
             },
             enumerable: false,
             configurable: true
         });
-        return SdMaterialFilterDefDirective;
+        return SdTableFilterDefDirective;
     }());
-    SdMaterialFilterDefDirective.decorators = [
+    SdTableFilterDefDirective.decorators = [
         { type: core.Directive, args: [{
                     selector: '[sdTableFilterDef]'
                 },] }
     ];
-    SdMaterialFilterDefDirective.ctorParameters = function () { return [
+    SdTableFilterDefDirective.ctorParameters = function () { return [
         { type: core.TemplateRef }
     ]; };
-    SdMaterialFilterDefDirective.propDecorators = {
+    SdTableFilterDefDirective.propDecorators = {
         sdTableFilterDef: [{ type: core.Input }],
         showing: [{ type: core.Input, args: ['defaultShowing',] }]
     };
@@ -1109,11 +1109,11 @@
 
     var _setting;
     var SdPopupConfiguration = /** @class */ (function () {
-        function SdPopupConfiguration(ref, notifyService, gridConfigurationService) {
+        function SdPopupConfiguration(ref, notifyService, tableConfigurationService) {
             var _this = this;
             this.ref = ref;
             this.notifyService = notifyService;
-            this.gridConfigurationService = gridConfigurationService;
+            this.tableConfigurationService = tableConfigurationService;
             this.changes = new core.EventEmitter();
             _setting.set(this, void 0);
             this.isCreatingColumn = false;
@@ -1121,7 +1121,7 @@
             this.disabledDrag = true;
             this.open = function () { return __awaiter(_this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
-                    __classPrivateFieldSet(this, _setting, this.gridConfigurationService.init(this.tableOption));
+                    __classPrivateFieldSet(this, _setting, this.tableConfigurationService.init(this.tableOption));
                     this.configuration = __classPrivateFieldGet(this, _setting).get();
                     this.modal.open();
                     return [2 /*return*/];
@@ -1164,7 +1164,7 @@
     SdPopupConfiguration.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-popup-configuration',
-                    template: "<sd-modal width=\"sm\" [title]=\"'Configuration' | sdTranslate\" #modal>\r\n  <sd-modal-body *ngIf=\"configuration\">\r\n    <div class=\"c-container\">\r\n      <div class=\"c-table\" style=\"max-height: 70vh\">\r\n        <table\r\n          #table\r\n          mat-table\r\n          [dataSource]=\"configuration.columns\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"configuration.columns\"\r\n          (cdkDropListDropped)=\"dropTable($event)\">\r\n          >\r\n          <ng-container matColumnDef=\"stt\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 50px\">#</th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n              <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\r\n                <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                  <path\r\n                    d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"></path>\r\n                  <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n                </svg>\r\n              </div>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"title\">\r\n            <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>{{ 'Title' | sdTranslate }}</th>\r\n            <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" disableErrorMessage></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"width\">\r\n            <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Width' | sdTranslate }}</th>\r\n            <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" disableErrorMessage></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"invisible\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Hidden' | sdTranslate }}</th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item\">\r\n              <mat-slide-toggle [(ngModel)]=\"item.invisible\" color=\"primary\"> </mat-slide-toggle>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"fixed\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Freeze' | sdTranslate }}</th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item\">\r\n              <mat-slide-toggle [(ngModel)]=\"item.fixed\" color=\"primary\"></mat-slide-toggle>\r\n            </td>\r\n          </ng-container>\r\n          <tr mat-header-row *matHeaderRowDef=\"['stt', 'title', 'width', 'invisible', 'fixed']; sticky: true\"></tr>\r\n          <tr\r\n            mat-row\r\n            *matRowDef=\"let row; columns: ['stt', 'title', 'width', 'invisible', 'fixed']\"\r\n            cdkDrag\r\n            [cdkDragData]=\"row\"\r\n            cdkDragLockAxis=\"y\"\r\n            [cdkDragDisabled]=\"disabledDrag\"></tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </sd-modal-body>\r\n  <sd-modal-footer>\r\n    <sd-button class=\"mr-8s\" (action)=\"onReset()\" title=\"M\u1EB7c \u0111\u1ECBnh\" color=\"info\" size=\"sm\"> </sd-button>\r\n    <sd-button (action)=\"onSave()\" title=\"L\u01B0u\" type=\"fill\" color=\"info\" size=\"sm\"> </sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n",
+                    template: "<sd-modal width=\"sm\" [title]=\"'Configuration' | sdTranslate\" #modal>\r\n  <sd-modal-body *ngIf=\"configuration\">\r\n    <div class=\"c-container\">\r\n      <div class=\"c-table\" style=\"max-height: 70vh\">\r\n        <table\r\n          #table\r\n          mat-table\r\n          [dataSource]=\"configuration.columns\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"configuration.columns\"\r\n          (cdkDropListDropped)=\"dropTable($event)\">\r\n          >\r\n          <ng-container matColumnDef=\"stt\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 50px\">#</th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n              <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\r\n                <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                  <path\r\n                    d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"></path>\r\n                  <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n                </svg>\r\n              </div>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"title\">\r\n            <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>{{ 'Title' | sdTranslate }}</th>\r\n            <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" disableErrorMessage></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"width\">\r\n            <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Width' | sdTranslate }}</th>\r\n            <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" disableErrorMessage></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"invisible\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Hidden' | sdTranslate }}</th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item\">\r\n              <mat-slide-toggle [(ngModel)]=\"item.invisible\" color=\"primary\"> </mat-slide-toggle>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"fixed\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Freeze' | sdTranslate }}</th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item\">\r\n              <mat-slide-toggle [(ngModel)]=\"item.fixed\" color=\"primary\"></mat-slide-toggle>\r\n            </td>\r\n          </ng-container>\r\n          <tr mat-header-row *matHeaderRowDef=\"['stt', 'title', 'width', 'invisible', 'fixed']; sticky: true\"></tr>\r\n          <tr\r\n            mat-row\r\n            *matRowDef=\"let row; columns: ['stt', 'title', 'width', 'invisible', 'fixed']\"\r\n            cdkDrag\r\n            [cdkDragData]=\"row\"\r\n            cdkDragLockAxis=\"y\"\r\n            [cdkDragDisabled]=\"disabledDrag\"></tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </sd-modal-body>\r\n  <sd-modal-footer>\r\n    <sd-button class=\"mr-8\" (action)=\"onReset()\" title=\"M\u1EB7c \u0111\u1ECBnh\" color=\"info\" size=\"sm\"> </sd-button>\r\n    <sd-button (action)=\"onSave()\" title=\"L\u01B0u\" type=\"fill\" color=\"info\" size=\"sm\"> </sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n",
                     styles: [".c-table{overflow:auto;position:relative}.c-table table{width:100%}.c-table .c-th{color:#000;font-size:14px;font-weight:500;line-height:20px}.c-container{min-height:200px;position:relative}.c-handle{color:#ccc;cursor:move}"]
                 },] }
     ];
@@ -1182,9 +1182,10 @@
 
     var _gridId, _optionChanges, _localItems, _paginator, _sort, _subscription$1, _reload, _loadCompleted, _cacheObjValues, _initCellDef, _initFilterDef, _initFooterDef, _filterExportInfo, _initConfiguration$1, _loadFilterRegister, _filterLocal, _getFilter, _load, _render, _exportedItems, _allColumns, _allExportedColumns, _onExport, _getExportColumns, _updateSelectedItems, _loadValues, _format;
     var SdTable = /** @class */ (function () {
-        function SdTable(ref, tableConfiguration, tableConfigurationService, exportService, notifyService, gridFilterService) {
+        function SdTable(ref, loadingService, tableConfiguration, tableConfigurationService, exportService, notifyService, gridFilterService) {
             var _this = this;
             this.ref = ref;
+            this.loadingService = loadingService;
             this.tableConfiguration = tableConfiguration;
             this.tableConfigurationService = tableConfigurationService;
             this.exportService = exportService;
@@ -1516,6 +1517,7 @@
                         switch (_13.label) {
                             case 0:
                                 this.isLoading = true;
+                                this.ref.detectChanges();
                                 if (!(this.tableOption.type === 'server')) return [3 /*break*/, 3];
                                 items = this.tableOption.items;
                                 return [4 /*yield*/, items(filterReq).catch(function (err) {
@@ -1528,9 +1530,11 @@
                                     })];
                             case 1:
                                 data = _13.sent();
-                                this.isLoading = false;
                                 _10 = {};
-                                return [4 /*yield*/, __classPrivateFieldGet(this, _format).call(this, data === null || data === void 0 ? void 0 : data.items, this.tableOption.columns)];
+                                return [4 /*yield*/, __classPrivateFieldGet(this, _format).call(this, data === null || data === void 0 ? void 0 : data.items, this.tableOption.columns).finally(function () {
+                                        _this.isLoading = false;
+                                        _this.ref.detectChanges();
+                                    })];
                             case 2: return [2 /*return*/, (_10.items = _13.sent(),
                                     _10.total = (data === null || data === void 0 ? void 0 : data.total) || 0,
                                     _10)];
@@ -1564,6 +1568,7 @@
                                 _13.label = 8;
                             case 8:
                                 this.isLoading = false;
+                                this.ref.detectChanges();
                                 return [2 /*return*/, __classPrivateFieldGet(this, _filterLocal).call(this, __classPrivateFieldGet(this, _localItems), filterReq)];
                         }
                     });
@@ -1979,8 +1984,39 @@
             }); });
             _getExportColumns.set(this, function () {
                 var _a, _b;
-                var columns = __spread(_this.tableOption.columns.filter(function (e) { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); }), (((_b = (_a = _this.tableOption.export) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.filter(function (e) { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); })) || []));
-                return columns;
+                var gridColumns = [];
+                _this.tableOption.columns
+                    .filter(function (e) { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); })
+                    .forEach(function (column) {
+                    var _a;
+                    if (column.type === 'children') {
+                        (_a = column.children) === null || _a === void 0 ? void 0 : _a.filter(function (e) { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); }).forEach(function (childColumn) {
+                            gridColumns.push(childColumn);
+                        });
+                        return;
+                    }
+                    gridColumns.push(column);
+                });
+                if (_this.configuration) {
+                    var columns_4 = __spread(gridColumns);
+                    var _10 = _this.configuration, firstColumns = _10.firstColumns, secondColumns = _10.secondColumns;
+                    var displayColumns = __spread(firstColumns, secondColumns).reduce(function (first, next) {
+                        var column = _this.tableOption.columns.find(function (e) { return e.field === next.field; });
+                        if (!column) {
+                            return first;
+                        }
+                        if (column.type !== 'children') {
+                            return __spread(first, [column]);
+                        }
+                        var children = column.children;
+                        return __spread(first, children);
+                    }, []);
+                    gridColumns = displayColumns
+                        .map(function (e) { return (Object.assign(Object.assign({}, e), { data: columns_4.find(function (e1) { return e1.field === e.field; }) })); })
+                        .filter(function (e) { return !!e.data; })
+                        .map(function (e) { return e.data; });
+                }
+                return __spread(gridColumns, (((_b = (_a = _this.tableOption.export) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.filter(function (e) { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); })) || []));
             });
             this.exportExcel = function () {
                 __classPrivateFieldGet(_this, _onExport).call(_this);
@@ -2085,7 +2121,7 @@
             };
             this.detectChanges = function () { return _this.ref.detectChanges(); };
             _loadValues.set(this, function (columns) { return __awaiter(_this, void 0, void 0, function () {
-                var promises, _loop_2, this_1, columns_4, columns_4_1, column, results, _loop_3, this_2, results_3, results_3_1, result;
+                var promises, _loop_2, this_1, columns_5, columns_5_1, column, results, _loop_3, this_2, results_3, results_3_1, result;
                 var e_10, _10, e_11, _11;
                 return __generator(this, function (_12) {
                     switch (_12.label) {
@@ -2126,15 +2162,15 @@
                             };
                             this_1 = this;
                             try {
-                                for (columns_4 = __values(columns), columns_4_1 = columns_4.next(); !columns_4_1.done; columns_4_1 = columns_4.next()) {
-                                    column = columns_4_1.value;
+                                for (columns_5 = __values(columns), columns_5_1 = columns_5.next(); !columns_5_1.done; columns_5_1 = columns_5.next()) {
+                                    column = columns_5_1.value;
                                     _loop_2(column);
                                 }
                             }
                             catch (e_10_1) { e_10 = { error: e_10_1 }; }
                             finally {
                                 try {
-                                    if (columns_4_1 && !columns_4_1.done && (_10 = columns_4.return)) _10.call(columns_4);
+                                    if (columns_5_1 && !columns_5_1.done && (_10 = columns_5.return)) _10.call(columns_5);
                                 }
                                 finally { if (e_10) throw e_10.error; }
                             }
@@ -2172,7 +2208,7 @@
                 });
             }); });
             _format.set(this, function (rawItems, columns) { return __awaiter(_this, void 0, void 0, function () {
-                var _5, _6, _7, _8, _9, items, _loop_4, this_3, columns_5, columns_5_1, column, e_12_1;
+                var _5, _6, _7, _8, _9, items, _loop_4, this_3, columns_6, columns_6_1, column, e_12_1;
                 var e_12, _10;
                 var _this = this;
                 return __generator(this, function (_11) {
@@ -2344,17 +2380,17 @@
                             _11.label = 1;
                         case 1:
                             _11.trys.push([1, 6, 7, 8]);
-                            columns_5 = __values(columns), columns_5_1 = columns_5.next();
+                            columns_6 = __values(columns), columns_6_1 = columns_6.next();
                             _11.label = 2;
                         case 2:
-                            if (!!columns_5_1.done) return [3 /*break*/, 5];
-                            column = columns_5_1.value;
+                            if (!!columns_6_1.done) return [3 /*break*/, 5];
+                            column = columns_6_1.value;
                             return [5 /*yield**/, _loop_4(column)];
                         case 3:
                             _11.sent();
                             _11.label = 4;
                         case 4:
-                            columns_5_1 = columns_5.next();
+                            columns_6_1 = columns_6.next();
                             return [3 /*break*/, 2];
                         case 5: return [3 /*break*/, 8];
                         case 6:
@@ -2363,7 +2399,7 @@
                             return [3 /*break*/, 8];
                         case 7:
                             try {
-                                if (columns_5_1 && !columns_5_1.done && (_10 = columns_5.return)) _10.call(columns_5);
+                                if (columns_6_1 && !columns_6_1.done && (_10 = columns_6.return)) _10.call(columns_6);
                             }
                             finally { if (e_12) throw e_12.error; }
                             return [7 /*endfinally*/];
@@ -2382,14 +2418,21 @@
                     option = __classPrivateFieldGet(this, _initConfiguration$1).call(this, option);
                     this.tableOption = option;
                     __classPrivateFieldSet(this, _loadCompleted, false);
-                    var setting = this.tableConfigurationService.init(this.tableOption);
-                    if (setting) {
-                        __classPrivateFieldGet(this, _subscription$1).add(setting.observer.pipe(operators.startWith(setting.subject.getValue())).subscribe(function (configuration) {
-                            var configurationResult = _this.tableConfigurationService.loadConfigurationResult(_this.tableOption, configuration);
+                    var setting_1 = this.tableConfigurationService.init(this.tableOption);
+                    if (setting_1) {
+                        __classPrivateFieldGet(this, _subscription$1).add(setting_1.observer.pipe(operators.startWith(setting_1.subject.getValue())).subscribe(function () {
+                            var configurationResult = _this.tableConfigurationService.loadConfigurationResult(_this.tableOption, setting_1.get());
                             var displayColumns = configurationResult.displayedColumns || [];
-                            __classPrivateFieldGet(_this, _loadValues).call(_this, _this.tableOption.columns.filter(function (column) { return displayColumns.includes(column.field); })).then(function () {
+                            _this.loadingService.start();
+                            _this.ref.detectChanges();
+                            __classPrivateFieldGet(_this, _loadValues).call(_this, _this.tableOption.columns.filter(function (column) { return displayColumns.includes(column.field); }))
+                                .then(function () {
                                 _this.configuration = configurationResult;
                                 __classPrivateFieldGet(_this, _optionChanges).next(_this.tableOption);
+                            })
+                                .finally(function () {
+                                _this.loadingService.stop();
+                                _this.ref.detectChanges();
                             });
                         }));
                     }
@@ -2397,9 +2440,16 @@
                         var configuration = this.tableConfigurationService.loadConfiguration(this.tableOption);
                         var configurationResult_1 = this.tableConfigurationService.loadConfigurationResult(this.tableOption, configuration);
                         var displayColumns_1 = configurationResult_1.displayedColumns || [];
-                        __classPrivateFieldGet(this, _loadValues).call(this, this.tableOption.columns.filter(function (column) { return displayColumns_1.includes(column.field); })).then(function () {
+                        this.loadingService.start();
+                        this.ref.detectChanges();
+                        __classPrivateFieldGet(this, _loadValues).call(this, this.tableOption.columns.filter(function (column) { return displayColumns_1.includes(column.field); }))
+                            .then(function () {
                             _this.configuration = configurationResult_1;
                             __classPrivateFieldGet(_this, _optionChanges).next(_this.tableOption);
+                        })
+                            .finally(function () {
+                            _this.loadingService.stop();
+                            _this.ref.detectChanges();
                         });
                     }
                 }
@@ -2516,6 +2566,7 @@
     ];
     SdTable.ctorParameters = function () { return [
         { type: core.ChangeDetectorRef },
+        { type: loading.SdLoadingService },
         { type: undefined, decorators: [{ type: core.Inject, args: [TABLE_CONFIG,] }, { type: core.Optional }] },
         { type: SdTableConfigurationService },
         { type: _export.SdExportService },
@@ -2533,7 +2584,7 @@
         sdSubInformation: [{ type: core.ContentChild, args: [SdMaterialSubInformationDefDirective,] }],
         sdCellDefs: [{ type: core.ContentChildren, args: [SdTabelCellDefDirective,] }],
         sdFooterDefs: [{ type: core.ContentChildren, args: [SdMaterialFooterDefDirective,] }],
-        sdFilterDefs: [{ type: core.ContentChildren, args: [SdMaterialFilterDefDirective,] }]
+        sdFilterDefs: [{ type: core.ContentChildren, args: [SdTableFilterDefDirective,] }]
     };
 
     var SdCommandFilterPipe = /** @class */ (function () {
@@ -3600,7 +3651,7 @@
                         SdTable,
                         SdMaterialFooterDefDirective,
                         SdTabelCellDefDirective,
-                        SdMaterialFilterDefDirective,
+                        SdTableFilterDefDirective,
                         SdMaterialSubInformationDefDirective,
                         SdPopupConfiguration,
                         SdTableFilter,
@@ -3623,7 +3674,7 @@
                         SdTable,
                         SdMaterialFooterDefDirective,
                         SdTabelCellDefDirective,
-                        SdMaterialFilterDefDirective,
+                        SdTableFilterDefDirective,
                         SdMaterialSubInformationDefDirective,
                     ],
                     providers: [
@@ -3665,7 +3716,7 @@
     exports.ɵl = SdMaterialSubInformationDefDirective;
     exports.ɵm = SdTabelCellDefDirective;
     exports.ɵn = SdMaterialFooterDefDirective;
-    exports.ɵo = SdMaterialFilterDefDirective;
+    exports.ɵo = SdTableFilterDefDirective;
     exports.ɵp = SdTableFilterService;
     exports.ɵq = SdCommandFilterPipe;
     exports.ɵr = SdCommandDisablePipe;