@sd-angular/core 1.3.168 → 1.3.170

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

@@ -638,7 +638,7 @@
             _prefix.set(this, 'bd364e28-fe67-48b9-a537-1a306f7d195c');
             _getSetting.set(this, function (gridOption) {
                 if (!(gridOption === null || gridOption === void 0 ? void 0 : gridOption.key)) {
-                    throw new Error('Invalid key');
+                    return null;
                 }
                 return _this.settingService.create({ prefix: __classPrivateFieldGet(_this, _prefix), key: gridOption.key }, {
                     default: __classPrivateFieldGet(_this, _default).call(_this, gridOption),
@@ -1226,11 +1226,11 @@
             this.cacheValues = {};
             _cacheObjValues.set(this, {});
             _initCellDef.set(this, function () {
-                var e_1, _8;
+                var e_1, _9;
                 _this.cellDef = {};
                 try {
-                    for (var _9 = __values(_this.sdCellDefs), _10 = _9.next(); !_10.done; _10 = _9.next()) {
-                        var cellDef = _10.value;
+                    for (var _10 = __values(_this.sdCellDefs), _11 = _10.next(); !_11.done; _11 = _10.next()) {
+                        var cellDef = _11.value;
                         if (cellDef.sdTableCellDef) {
                             _this.cellDef[cellDef.sdTableCellDef] = cellDef;
                         }
@@ -1239,35 +1239,35 @@
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
                 finally {
                     try {
-                        if (_10 && !_10.done && (_8 = _9.return)) _8.call(_9);
+                        if (_11 && !_11.done && (_9 = _10.return)) _9.call(_10);
                     }
                     finally { if (e_1) throw e_1.error; }
                 }
             });
             _initFilterDef.set(this, function () {
-                var e_2, _8;
+                var e_2, _9;
                 _this.filterDefs = [];
                 try {
-                    for (var _9 = __values(_this.sdFilterDefs), _10 = _9.next(); !_10.done; _10 = _9.next()) {
-                        var filterDef = _10.value;
+                    for (var _10 = __values(_this.sdFilterDefs), _11 = _10.next(); !_11.done; _11 = _10.next()) {
+                        var filterDef = _11.value;
                         _this.filterDefs.push(filterDef);
                     }
                 }
                 catch (e_2_1) { e_2 = { error: e_2_1 }; }
                 finally {
                     try {
-                        if (_10 && !_10.done && (_8 = _9.return)) _8.call(_9);
+                        if (_11 && !_11.done && (_9 = _10.return)) _9.call(_10);
                     }
                     finally { if (e_2) throw e_2.error; }
                 }
             });
             _initFooterDef.set(this, function () {
-                var e_3, _8;
+                var e_3, _9;
                 _this.footerDef = {};
                 _this.hasFooter = false;
                 try {
-                    for (var _9 = __values(_this.sdFooterDefs), _10 = _9.next(); !_10.done; _10 = _9.next()) {
-                        var footerDef = _10.value;
+                    for (var _10 = __values(_this.sdFooterDefs), _11 = _10.next(); !_11.done; _11 = _10.next()) {
+                        var footerDef = _11.value;
                         if (footerDef.sdTableFooterDef) {
                             _this.hasFooter = true;
                             _this.footerDef[footerDef.sdTableFooterDef] = footerDef;
@@ -1277,14 +1277,14 @@
                 catch (e_3_1) { e_3 = { error: e_3_1 }; }
                 finally {
                     try {
-                        if (_10 && !_10.done && (_8 = _9.return)) _8.call(_9);
+                        if (_11 && !_11.done && (_9 = _10.return)) _9.call(_10);
                     }
                     finally { if (e_3) throw e_3.error; }
                 }
             });
             _filterExportInfo.set(this, function (pageNumber, pageSize) {
                 var _a, _b;
-                var _8 = _this.filterRegister.value.get(), columnOperator = _8.columnOperator, columnFilter = _8.columnFilter, externalFilter = _8.externalFilter, filterDef = _8.filterDef;
+                var _9 = _this.filterRegister.value.get(), columnOperator = _9.columnOperator, columnFilter = _9.columnFilter, externalFilter = _9.externalFilter, filterDef = _9.filterDef;
                 return {
                     columnOperator: columnOperator || {},
                     rawColumnFilter: columnFilter || {},
@@ -1298,7 +1298,7 @@
                 };
             });
             _initConfiguration$1.set(this, function (option) {
-                var e_4, _8;
+                var e_4, _9;
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
                 // Init pagination
                 option.paginate = {
@@ -1308,8 +1308,8 @@
                     showFirstLastButtons: (_q = (_p = option === null || option === void 0 ? void 0 : option.paginate) === null || _p === void 0 ? void 0 : _p.showFirstLastButtons) !== null && _q !== void 0 ? _q : false,
                 };
                 try {
-                    for (var _9 = __values(option.columns || []), _10 = _9.next(); !_10.done; _10 = _9.next()) {
-                        var column = _10.value;
+                    for (var _10 = __values(option.columns || []), _11 = _10.next(); !_11.done; _11 = _10.next()) {
+                        var column = _11.value;
                         if (((_s = (_r = column.filter) === null || _r === void 0 ? void 0 : _r.operator) === null || _s === void 0 ? void 0 : _s.enable) && !((_v = (_u = (_t = column.filter) === null || _t === void 0 ? void 0 : _t.operator) === null || _u === void 0 ? void 0 : _u.list) === null || _v === void 0 ? void 0 : _v.length)) {
                             if (column.type === 'string') {
                                 column.filter.operator.list = ((_y = (_x = (_w = _this.tableConfiguration) === null || _w === void 0 ? void 0 : _w.filter) === null || _x === void 0 ? void 0 : _x.operator) === null || _y === void 0 ? void 0 : _y.defaultListString) || [];
@@ -1329,7 +1329,7 @@
                 catch (e_4_1) { e_4 = { error: e_4_1 }; }
                 finally {
                     try {
-                        if (_10 && !_10.done && (_8 = _9.return)) _8.call(_9);
+                        if (_11 && !_11.done && (_9 = _10.return)) _9.call(_10);
                     }
                     finally { if (e_4) throw e_4.error; }
                 }
@@ -1368,7 +1368,7 @@
                 var columns = _this.gridOption.columns;
                 var rawColumnFilter = filterInfo.rawColumnFilter, orderBy = filterInfo.orderBy, orderDirection = filterInfo.orderDirection, pageSize = filterInfo.pageSize, pageNumber = filterInfo.pageNumber;
                 var items = localItems.filter(function (tableItem) {
-                    var e_5, _8;
+                    var e_5, _9;
                     var _a, _b, _c, _d;
                     var item = tableItem.data;
                     try {
@@ -1449,7 +1449,7 @@
                     catch (e_5_1) { e_5 = { error: e_5_1 }; }
                     finally {
                         try {
-                            if (columns_1_1 && !columns_1_1.done && (_8 = columns_1.return)) _8.call(columns_1);
+                            if (columns_1_1 && !columns_1_1.done && (_9 = columns_1.return)) _9.call(columns_1);
                         }
                         finally { if (e_5) throw e_5.error; }
                     }
@@ -1495,7 +1495,7 @@
             });
             _getFilter.set(this, function () {
                 var _a, _b, _c, _d, _e, _f;
-                var _8 = _this.filterRegister.value.get(), columnOperator = _8.columnOperator, columnFilter = _8.columnFilter, externalFilter = _8.externalFilter, filterDef = _8.filterDef;
+                var _9 = _this.filterRegister.value.get(), columnOperator = _9.columnOperator, columnFilter = _9.columnFilter, externalFilter = _9.externalFilter, filterDef = _9.filterDef;
                 return {
                     columnOperator: columnOperator || {},
                     rawColumnFilter: columnFilter || {},
@@ -1510,10 +1510,10 @@
             _load.set(this, function (filterReq, force) {
                 if (force === void 0) { force = true; }
                 return __awaiter(_this, void 0, void 0, function () {
-                    var items, data, _8, items, results, data, _9, _10;
+                    var items, data, _9, items, results, data, _10, _11;
                     var _this = this;
-                    return __generator(this, function (_11) {
-                        switch (_11.label) {
+                    return __generator(this, function (_12) {
+                        switch (_12.label) {
                             case 0:
                                 this.isLoading = true;
                                 if (!(this.gridOption.type === 'server')) return [3 /*break*/, 3];
@@ -1527,13 +1527,13 @@
                                         };
                                     })];
                             case 1:
-                                data = _11.sent();
+                                data = _12.sent();
                                 this.isLoading = false;
-                                _8 = {};
+                                _9 = {};
                                 return [4 /*yield*/, __classPrivateFieldGet(this, _format).call(this, data === null || data === void 0 ? void 0 : data.items, this.gridOption.columns)];
-                            case 2: return [2 /*return*/, (_8.items = _11.sent(),
-                                    _8.total = (data === null || data === void 0 ? void 0 : data.total) || 0,
-                                    _8)];
+                            case 2: return [2 /*return*/, (_9.items = _12.sent(),
+                                    _9.total = (data === null || data === void 0 ? void 0 : data.total) || 0,
+                                    _9)];
                             case 3:
                                 if (!force) return [3 /*break*/, 8];
                                 items = this.gridOption.items;
@@ -1546,22 +1546,22 @@
                                         return [];
                                     })];
                             case 4:
-                                data = _11.sent();
+                                data = _12.sent();
                                 return [3 /*break*/, 6];
                             case 5:
                                 data = results;
-                                _11.label = 6;
+                                _12.label = 6;
                             case 6:
                                 if (!Array.isArray(data)) {
                                     this.notifyService.notify.warning('Dữ liệu không phải là một mảng');
                                     data = [];
                                 }
-                                _9 = __classPrivateFieldSet;
-                                _10 = [this, _localItems];
+                                _10 = __classPrivateFieldSet;
+                                _11 = [this, _localItems];
                                 return [4 /*yield*/, __classPrivateFieldGet(this, _format).call(this, data, this.gridOption.columns)];
                             case 7:
-                                _9.apply(void 0, _10.concat([_11.sent()]));
-                                _11.label = 8;
+                                _10.apply(void 0, _11.concat([_12.sent()]));
+                                _12.label = 8;
                             case 8:
                                 this.isLoading = false;
                                 return [2 /*return*/, __classPrivateFieldGet(this, _filterLocal).call(this, __classPrivateFieldGet(this, _localItems), filterReq)];
@@ -1571,15 +1571,15 @@
             });
             _render.set(this, function (args) { return __awaiter(_this, void 0, void 0, function () {
                 var _a, _b, _c, _d;
-                return __generator(this, function (_8) {
-                    switch (_8.label) {
+                return __generator(this, function (_9) {
+                    switch (_9.label) {
                         case 0:
                             (_a = this.sdScroll) === null || _a === void 0 ? void 0 : _a.scrollTop();
                             this.items = (args === null || args === void 0 ? void 0 : args.items) || [];
                             this.total = (args === null || args === void 0 ? void 0 : args.total) || 0;
                             return [4 /*yield*/, ((_d = (_c = (_b = this.gridOption) === null || _b === void 0 ? void 0 : _b.reload) === null || _c === void 0 ? void 0 : _c.onReload) === null || _d === void 0 ? void 0 : _d.call(_c, this.items))];
                         case 1:
-                            _8.sent();
+                            _9.sent();
                             this.isSelectAll = this.items.every(function (e) { return e.meta.selector.isSelected; });
                             __classPrivateFieldGet(this, _updateSelectedItems).call(this);
                             return [2 /*return*/];
@@ -1590,13 +1590,13 @@
                 if (force === void 0) { force = true; }
                 return __awaiter(_this, void 0, void 0, function () {
                     var _e, _f, data;
-                    return __generator(this, function (_8) {
-                        switch (_8.label) {
+                    return __generator(this, function (_9) {
+                        switch (_9.label) {
                             case 0:
                                 (_f = (_e = this.tableFilter) === null || _e === void 0 ? void 0 : _e.updateFilter) === null || _f === void 0 ? void 0 : _f.call(_e);
                                 return [4 /*yield*/, __classPrivateFieldGet(this, _load).call(this, __classPrivateFieldGet(this, _getFilter).call(this), force)];
                             case 1:
-                                data = _8.sent();
+                                data = _9.sent();
                                 __classPrivateFieldGet(this, _render).call(this, data);
                                 return [2 /*return*/];
                         }
@@ -1608,8 +1608,8 @@
                 if (pageSize === void 0) { pageSize = 10000; }
                 return __awaiter(_this, void 0, void 0, function () {
                     var _g, _h, result, filterInfo, result, exportedItems, results;
-                    return __generator(this, function (_8) {
-                        switch (_8.label) {
+                    return __generator(this, function (_9) {
+                        switch (_9.label) {
                             case 0:
                                 if (!((_g = this.gridOption.export) === null || _g === void 0 ? void 0 : _g.items)) return [3 /*break*/, 2];
                                 result = (_h = this.gridOption.export) === null || _h === void 0 ? void 0 : _h.items(__classPrivateFieldGet(this, _filterExportInfo).call(this, pageNumber, pageSize));
@@ -1623,13 +1623,13 @@
                                     result = result.toPromise();
                                 }
                                 return [4 /*yield*/, result];
-                            case 1: return [2 /*return*/, _8.sent()];
+                            case 1: return [2 /*return*/, _9.sent()];
                             case 2:
                                 filterInfo = __classPrivateFieldGet(this, _filterExportInfo).call(this, pageNumber, pageSize);
                                 if (!(this.gridOption.type === 'server')) return [3 /*break*/, 4];
                                 result = this.gridOption.items(filterInfo);
                                 return [4 /*yield*/, result];
-                            case 3: return [2 /*return*/, _8.sent()];
+                            case 3: return [2 /*return*/, _9.sent()];
                             case 4:
                                 exportedItems = [];
                                 if (!(typeof this.gridOption.items === 'function')) return [3 /*break*/, 8];
@@ -1637,15 +1637,15 @@
                                 if (!(results instanceof Promise)) return [3 /*break*/, 6];
                                 return [4 /*yield*/, results];
                             case 5:
-                                exportedItems = _8.sent();
+                                exportedItems = _9.sent();
                                 return [3 /*break*/, 7];
                             case 6:
                                 exportedItems = results;
-                                _8.label = 7;
+                                _9.label = 7;
                             case 7: return [3 /*break*/, 9];
                             case 8:
                                 exportedItems = this.gridOption.items;
-                                _8.label = 9;
+                                _9.label = 9;
                             case 9: return [2 /*return*/, __classPrivateFieldGet(this, _filterLocal).call(this, exportedItems, filterInfo)];
                         }
                     });
@@ -1672,13 +1672,13 @@
                 return ((_b = (_a = _this.gridOption.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); })) || [];
             });
             _onExport.set(this, function (isCSV) { return __awaiter(_this, void 0, void 0, function () {
-                var _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, columns_2, pageSize_1, batch, total_1, pageNumber_1, exportItems_1, items_1, promises_1, handleData, sheets, _8, _9, sheet, _10, _11, _12, e_6_1;
-                var e_6, _13;
+                var _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, columns_2, pageSize_1, batch, total_1, pageNumber_1, exportItems_1, items_1, promises_1, handleData, sheets, _9, _10, sheet, _11, _12, _13, e_6_1;
+                var e_6, _14;
                 var _this = this;
-                return __generator(this, function (_14) {
-                    switch (_14.label) {
+                return __generator(this, function (_15) {
+                    switch (_15.label) {
                         case 0:
-                            _14.trys.push([0, , 18, 19]);
+                            _15.trys.push([0, , 18, 19]);
                             columns_2 = __classPrivateFieldGet(this, _getExportColumns).call(this);
                             pageSize_1 = ((_k = (_j = this.gridOption) === null || _j === void 0 ? void 0 : _j.export) === null || _k === void 0 ? void 0 : _k.maxItemsPerRequest) || 1000;
                             batch = ((_m = (_l = this.gridOption) === null || _l === void 0 ? void 0 : _l.export) === null || _m === void 0 ? void 0 : _m.batch) || 1;
@@ -1690,13 +1690,13 @@
                             promises_1 = [];
                             handleData = function () { return __awaiter(_this, void 0, void 0, function () {
                                 var _u, results, results_1, results_1_1, result, results_2, totalPage, percent, allColumns, allExportedColumns, _loop_1, exportItems_2, exportItems_2_1, item, e_7_1;
-                                var e_8, _8, e_7, _9;
+                                var e_8, _9, e_7, _10;
                                 var _this = this;
-                                return __generator(this, function (_10) {
-                                    switch (_10.label) {
+                                return __generator(this, function (_11) {
+                                    switch (_11.label) {
                                         case 0: return [4 /*yield*/, Promise.all(promises_1)];
                                         case 1:
-                                            results = _10.sent();
+                                            results = _11.sent();
                                             promises_1 = [];
                                             exportItems_1 = [];
                                             try {
@@ -1714,7 +1714,7 @@
                                             catch (e_8_1) { e_8 = { error: e_8_1 }; }
                                             finally {
                                                 try {
-                                                    if (results_1_1 && !results_1_1.done && (_8 = results_1.return)) _8.call(results_1);
+                                                    if (results_1_1 && !results_1_1.done && (_9 = results_1.return)) _9.call(results_1);
                                                 }
                                                 finally { if (e_8) throw e_8.error; }
                                             }
@@ -1723,11 +1723,11 @@
                                             if (!(results_2 instanceof Promise)) return [3 /*break*/, 3];
                                             return [4 /*yield*/, results_2];
                                         case 2:
-                                            exportItems_1 = _10.sent();
+                                            exportItems_1 = _11.sent();
                                             return [3 /*break*/, 4];
                                         case 3:
                                             exportItems_1 = results_2;
-                                            _10.label = 4;
+                                            _11.label = 4;
                                         case 4:
                                             totalPage = total_1 / pageSize_1;
                                             percent = Math.round(((pageNumber_1 - 1) * 100.0) / totalPage);
@@ -1736,15 +1736,15 @@
                                             allExportedColumns = __classPrivateFieldGet(this, _allExportedColumns).call(this);
                                             _loop_1 = function (item) {
                                                 var obj, handle, columns_3, columns_3_1, exportColumn, e_9_1;
-                                                var e_9, _8;
-                                                return __generator(this, function (_9) {
-                                                    switch (_9.label) {
+                                                var e_9, _9;
+                                                return __generator(this, function (_10) {
+                                                    switch (_10.label) {
                                                         case 0:
                                                             obj = {};
                                                             handle = function (exportColumn) { return __awaiter(_this, void 0, void 0, function () {
-                                                                var _v, _w, _x, _y, column, exportedColumn, transform, _8, _9, date, date, date;
-                                                                return __generator(this, function (_10) {
-                                                                    switch (_10.label) {
+                                                                var _v, _w, _x, _y, column, exportedColumn, transform, _9, _10, date, date, date;
+                                                                return __generator(this, function (_11) {
+                                                                    switch (_11.label) {
                                                                         case 0:
                                                                             obj[exportColumn.field] = item[exportColumn.field];
                                                                             column = allColumns.find(function (e) { return e.field === exportColumn.field; });
@@ -1768,15 +1768,15 @@
                                                                                 isExport: true,
                                                                             });
                                                                             if (!(transform instanceof Promise)) return [3 /*break*/, 2];
-                                                                            _8 = obj;
-                                                                            _9 = column.field;
+                                                                            _9 = obj;
+                                                                            _10 = column.field;
                                                                             return [4 /*yield*/, transform];
                                                                         case 1:
-                                                                            _8[_9] = _10.sent();
+                                                                            _9[_10] = _11.sent();
                                                                             return [3 /*break*/, 3];
                                                                         case 2:
                                                                             obj[column.field] = transform;
-                                                                            _10.label = 3;
+                                                                            _11.label = 3;
                                                                         case 3:
                                                                             obj[column.field] = (_v = obj[column.field]) !== null && _v !== void 0 ? _v : '';
                                                                             return [3 /*break*/, 5];
@@ -1819,34 +1819,34 @@
                                                                             else {
                                                                                 obj[column.field] = item[column.field];
                                                                             }
-                                                                            _10.label = 5;
+                                                                            _11.label = 5;
                                                                         case 5: return [2 /*return*/];
                                                                     }
                                                                 });
                                                             }); };
-                                                            _9.label = 1;
+                                                            _10.label = 1;
                                                         case 1:
-                                                            _9.trys.push([1, 6, 7, 8]);
+                                                            _10.trys.push([1, 6, 7, 8]);
                                                             columns_3 = (e_9 = void 0, __values(columns_2)), columns_3_1 = columns_3.next();
-                                                            _9.label = 2;
+                                                            _10.label = 2;
                                                         case 2:
                                                             if (!!columns_3_1.done) return [3 /*break*/, 5];
                                                             exportColumn = columns_3_1.value;
                                                             return [4 /*yield*/, handle(exportColumn)];
                                                         case 3:
-                                                            _9.sent();
-                                                            _9.label = 4;
+                                                            _10.sent();
+                                                            _10.label = 4;
                                                         case 4:
                                                             columns_3_1 = columns_3.next();
                                                             return [3 /*break*/, 2];
                                                         case 5: return [3 /*break*/, 8];
                                                         case 6:
-                                                            e_9_1 = _9.sent();
+                                                            e_9_1 = _10.sent();
                                                             e_9 = { error: e_9_1 };
                                                             return [3 /*break*/, 8];
                                                         case 7:
                                                             try {
-                                                                if (columns_3_1 && !columns_3_1.done && (_8 = columns_3.return)) _8.call(columns_3);
+                                                                if (columns_3_1 && !columns_3_1.done && (_9 = columns_3.return)) _9.call(columns_3);
                                                             }
                                                             finally { if (e_9) throw e_9.error; }
                                                             return [7 /*endfinally*/];
@@ -1856,29 +1856,29 @@
                                                     }
                                                 });
                                             };
-                                            _10.label = 5;
+                                            _11.label = 5;
                                         case 5:
-                                            _10.trys.push([5, 10, 11, 12]);
+                                            _11.trys.push([5, 10, 11, 12]);
                                             exportItems_2 = __values(exportItems_1), exportItems_2_1 = exportItems_2.next();
-                                            _10.label = 6;
+                                            _11.label = 6;
                                         case 6:
                                             if (!!exportItems_2_1.done) return [3 /*break*/, 9];
                                             item = exportItems_2_1.value;
                                             return [5 /*yield**/, _loop_1(item)];
                                         case 7:
-                                            _10.sent();
-                                            _10.label = 8;
+                                            _11.sent();
+                                            _11.label = 8;
                                         case 8:
                                             exportItems_2_1 = exportItems_2.next();
                                             return [3 /*break*/, 6];
                                         case 9: return [3 /*break*/, 12];
                                         case 10:
-                                            e_7_1 = _10.sent();
+                                            e_7_1 = _11.sent();
                                             e_7 = { error: e_7_1 };
                                             return [3 /*break*/, 12];
                                         case 11:
                                             try {
-                                                if (exportItems_2_1 && !exportItems_2_1.done && (_9 = exportItems_2.return)) _9.call(exportItems_2);
+                                                if (exportItems_2_1 && !exportItems_2_1.done && (_10 = exportItems_2.return)) _10.call(exportItems_2);
                                             }
                                             finally { if (e_7) throw e_7.error; }
                                             return [7 /*endfinally*/];
@@ -1886,7 +1886,7 @@
                                     }
                                 });
                             }); };
-                            _14.label = 1;
+                            _15.label = 1;
                         case 1:
                             if (!(pageNumber_1 * pageSize_1 < total_1)) return [3 /*break*/, 3];
                             promises_1.push(__classPrivateFieldGet(this, _exportedItems).call(this, pageNumber_1, pageSize_1));
@@ -1896,14 +1896,14 @@
                             }
                             return [4 /*yield*/, handleData()];
                         case 2:
-                            _14.sent();
+                            _15.sent();
                             return [3 /*break*/, 1];
                         case 3:
                             if (!(promises_1.length > 0)) return [3 /*break*/, 5];
                             return [4 /*yield*/, handleData()];
                         case 4:
-                            _14.sent();
-                            _14.label = 5;
+                            _15.sent();
+                            _15.label = 5;
                         case 5:
                             if (!isCSV) return [3 /*break*/, 7];
                             return [4 /*yield*/, this.exportService.exportCSV({
@@ -1912,19 +1912,19 @@
                                     fileName: (_p = (_o = this.gridOption) === null || _o === void 0 ? void 0 : _o.export) === null || _p === void 0 ? void 0 : _p.fileName,
                                 })];
                         case 6:
-                            _14.sent();
+                            _15.sent();
                             return [2 /*return*/];
                         case 7:
                             sheets = [];
                             if (!Array.isArray((_r = (_q = this.gridOption) === null || _q === void 0 ? void 0 : _q.export) === null || _r === void 0 ? void 0 : _r.sheets)) return [3 /*break*/, 16];
-                            _14.label = 8;
+                            _15.label = 8;
                         case 8:
-                            _14.trys.push([8, 14, 15, 16]);
-                            _8 = __values(this.gridOption.export.sheets), _9 = _8.next();
-                            _14.label = 9;
+                            _15.trys.push([8, 14, 15, 16]);
+                            _9 = __values(this.gridOption.export.sheets), _10 = _9.next();
+                            _15.label = 9;
                         case 9:
-                            if (!!_9.done) return [3 /*break*/, 13];
-                            sheet = _9.value;
+                            if (!!_10.done) return [3 /*break*/, 13];
+                            sheet = _10.value;
                             if (!(sheet.name && sheet.items && sheet.fields)) return [3 /*break*/, 12];
                             if (!Array.isArray(sheet.items)) return [3 /*break*/, 10];
                             sheets.push({
@@ -1934,27 +1934,27 @@
                             });
                             return [3 /*break*/, 12];
                         case 10:
-                            _11 = (_10 = sheets).push;
-                            _12 = {
+                            _12 = (_11 = sheets).push;
+                            _13 = {
                                 name: sheet.name
                             };
                             return [4 /*yield*/, sheet.items()];
                         case 11:
-                            _11.apply(_10, [(_12.items = _14.sent(),
-                                    _12.fields = sheet.fields,
-                                    _12)]);
-                            _14.label = 12;
+                            _12.apply(_11, [(_13.items = _15.sent(),
+                                    _13.fields = sheet.fields,
+                                    _13)]);
+                            _15.label = 12;
                         case 12:
-                            _9 = _8.next();
+                            _10 = _9.next();
                             return [3 /*break*/, 9];
                         case 13: return [3 /*break*/, 16];
                         case 14:
-                            e_6_1 = _14.sent();
+                            e_6_1 = _15.sent();
                             e_6 = { error: e_6_1 };
                             return [3 /*break*/, 16];
                         case 15:
                             try {
-                                if (_9 && !_9.done && (_13 = _8.return)) _13.call(_8);
+                                if (_10 && !_10.done && (_14 = _9.return)) _14.call(_9);
                             }
                             finally { if (e_6) throw e_6.error; }
                             return [7 /*endfinally*/];
@@ -1965,7 +1965,7 @@
                                 sheets: sheets,
                             })];
                         case 17:
-                            _14.sent();
+                            _15.sent();
                             return [2 /*return*/];
                         case 18:
                             this.isExporting = false;
@@ -1997,7 +1997,7 @@
             };
             this.onExpand = function (rowData) { return __awaiter(_this, void 0, void 0, function () {
                 var _z, _0, _1, _2, _3, data;
-                return __generator(this, function (_8) {
+                return __generator(this, function (_9) {
                     if ((_z = this.gridOption.expand) === null || _z === void 0 ? void 0 : _z.always) {
                         return [2 /*return*/];
                     }
@@ -2072,7 +2072,7 @@
                 _this.filterRegister.value.remove();
             };
             this.setFilter = function (args) {
-                var _8 = args || {}, columnFilter = _8.columnFilter, externalFilter = _8.externalFilter, filterDef = _8.filterDef;
+                var _9 = args || {}, columnFilter = _9.columnFilter, externalFilter = _9.externalFilter, filterDef = _9.filterDef;
                 if (columnFilter) {
                     _this.columnFilter = columnFilter;
                 }
@@ -2085,9 +2085,9 @@
             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 e_10, _8, e_11, _9;
-                return __generator(this, function (_10) {
-                    switch (_10.label) {
+                var e_10, _9, e_11, _10;
+                return __generator(this, function (_11) {
+                    switch (_11.label) {
                         case 0:
                             promises = [];
                             _loop_2 = function (column) {
@@ -2113,11 +2113,11 @@
                                     }
                                     else {
                                         this_1.cacheValues[column.field] = column.option.items.map(function (e) {
-                                            var _8;
-                                            return (_8 = {},
-                                                _8[column.option.valueField] = e === null || e === void 0 ? void 0 : e[column.option.valueField],
-                                                _8[column.option.displayField] = e === null || e === void 0 ? void 0 : e[column.option.displayField],
-                                                _8);
+                                            var _9;
+                                            return (_9 = {},
+                                                _9[column.option.valueField] = e === null || e === void 0 ? void 0 : e[column.option.valueField],
+                                                _9[column.option.displayField] = e === null || e === void 0 ? void 0 : e[column.option.displayField],
+                                                _9);
                                         });
                                         __classPrivateFieldGet(this_1, _cacheObjValues)[column.field] = Array.toObject(this_1.cacheValues[column.field], column.option.valueField);
                                     }
@@ -2133,21 +2133,21 @@
                             catch (e_10_1) { e_10 = { error: e_10_1 }; }
                             finally {
                                 try {
-                                    if (columns_4_1 && !columns_4_1.done && (_8 = columns_4.return)) _8.call(columns_4);
+                                    if (columns_4_1 && !columns_4_1.done && (_9 = columns_4.return)) _9.call(columns_4);
                                 }
                                 finally { if (e_10) throw e_10.error; }
                             }
                             if (!promises.length) return [3 /*break*/, 2];
                             return [4 /*yield*/, Promise.all(promises)];
                         case 1:
-                            results = _10.sent();
+                            results = _11.sent();
                             _loop_3 = function (result) {
                                 this_2.cacheValues[result.key] = result.data.map(function (e) {
-                                    var _8;
-                                    return (_8 = {},
-                                        _8[result.valueField] = e === null || e === void 0 ? void 0 : e[result.valueField],
-                                        _8[result.displayField] = e === null || e === void 0 ? void 0 : e[result.displayField],
-                                        _8);
+                                    var _9;
+                                    return (_9 = {},
+                                        _9[result.valueField] = e === null || e === void 0 ? void 0 : e[result.valueField],
+                                        _9[result.displayField] = e === null || e === void 0 ? void 0 : e[result.displayField],
+                                        _9);
                                 });
                                 __classPrivateFieldGet(this_2, _cacheObjValues)[result.key] = Array.toObject(this_2.cacheValues[result.key], result.valueField);
                             };
@@ -2161,59 +2161,65 @@
                             catch (e_11_1) { e_11 = { error: e_11_1 }; }
                             finally {
                                 try {
-                                    if (results_3_1 && !results_3_1.done && (_9 = results_3.return)) _9.call(results_3);
+                                    if (results_3_1 && !results_3_1.done && (_10 = results_3.return)) _10.call(results_3);
                                 }
                                 finally { if (e_11) throw e_11.error; }
                             }
-                            _10.label = 2;
+                            _11.label = 2;
                         case 2: return [2 /*return*/];
                     }
                 });
             }); });
             _format.set(this, function (rawItems, columns) { return __awaiter(_this, void 0, void 0, function () {
-                var _4, _5, _6, items, _loop_4, this_3, columns_5, columns_5_1, column, e_12_1;
-                var e_12, _8;
+                var _4, _5, _6, _7, _8, items, _loop_4, this_3, columns_5, columns_5_1, column, e_12_1;
+                var e_12, _9;
                 var _this = this;
-                return __generator(this, function (_9) {
-                    switch (_9.label) {
+                return __generator(this, function (_10) {
+                    switch (_10.label) {
                         case 0:
                             items = rawItems.map(MapToSdTableItem);
                             _loop_4 = function (column) {
-                                var field, cellStyle, click, tooltip, htmlTemplate, transform, values_1, views, lazyItems, _loop_5, items_2, items_2_1, item, e_13_1;
-                                var e_13, _8;
-                                return __generator(this, function (_9) {
-                                    switch (_9.label) {
+                                var field, cellStyle, click, tooltip, htmlTemplate, transform, _9, views, mapValue_1, values_1, lazyItems, _loop_5, items_2, items_2_1, item, e_13_1;
+                                var e_13, _10;
+                                return __generator(this, function (_11) {
+                                    switch (_11.label) {
                                         case 0:
                                             field = column.field, cellStyle = column.cellStyle, click = column.click, tooltip = column.tooltip, htmlTemplate = column.htmlTemplate, transform = column.transform;
-                                            if (!(column.type === 'lazy-values')) return [3 /*break*/, 2];
+                                            if (!(!transform && !htmlTemplate && column.type === 'lazy-values' && typeof column.option.views === 'function')) return [3 /*break*/, 2];
+                                            _9 = column.option, views = _9.views, mapValue_1 = _9.mapValue;
                                             __classPrivateFieldGet(this_3, _cacheObjValues)[field] = __classPrivateFieldGet(this_3, _cacheObjValues)[field] || {};
                                             values_1 = items
-                                                .map(function (item) { var _a; return (_a = item.data) === null || _a === void 0 ? void 0 : _a[field]; })
+                                                .map(function (item) {
+                                                var _a, _b;
+                                                if (typeof mapValue_1 === 'function') {
+                                                    return mapValue_1((_a = item.data) === null || _a === void 0 ? void 0 : _a[field], item.data);
+                                                }
+                                                return (_b = item.data) === null || _b === void 0 ? void 0 : _b[field];
+                                            })
                                                 .filter(function (val) { return (!!val || val === 0) && !Object.keys(__classPrivateFieldGet(_this, _cacheObjValues)[field]).includes(val); })
                                                 .union();
-                                            views = column.option.views;
-                                            if (!(views && values_1.length)) return [3 /*break*/, 2];
+                                            if (!values_1.length) return [3 /*break*/, 2];
                                             return [4 /*yield*/, views(values_1).catch(function (err) {
                                                     console.error(err);
                                                     return [];
                                                 })];
                                         case 1:
-                                            lazyItems = (_9.sent())
+                                            lazyItems = (_11.sent())
                                                 .filter(function (item) { return values_1.includes(item === null || item === void 0 ? void 0 : item[column.option.valueField]); })
                                                 .map(function (e) {
-                                                var _8;
-                                                return (_8 = {},
-                                                    _8[column.option.valueField] = e === null || e === void 0 ? void 0 : e[column.option.valueField],
-                                                    _8[column.option.displayField] = e === null || e === void 0 ? void 0 : e[column.option.displayField],
-                                                    _8);
+                                                var _9;
+                                                return (_9 = {},
+                                                    _9[column.option.valueField] = e === null || e === void 0 ? void 0 : e[column.option.valueField],
+                                                    _9[column.option.displayField] = e === null || e === void 0 ? void 0 : e[column.option.displayField],
+                                                    _9);
                                             });
                                             Object.assign(__classPrivateFieldGet(this_3, _cacheObjValues)[field], Array.toObject(lazyItems, column.option.valueField) || {});
-                                            _9.label = 2;
+                                            _11.label = 2;
                                         case 2:
                                             _loop_5 = function (item) {
-                                                var rowData, value, display, newValue, _8, date, time, option;
-                                                return __generator(this, function (_9) {
-                                                    switch (_9.label) {
+                                                var rowData, value, display, newValue, _9, date, time, option;
+                                                return __generator(this, function (_10) {
+                                                    switch (_10.label) {
                                                         case 0:
                                                             rowData = item.data;
                                                             value = rowData === null || rowData === void 0 ? void 0 : rowData[field];
@@ -2234,14 +2240,14 @@
                                                             if (!(typeof transform === 'function')) return [3 /*break*/, 5];
                                                             newValue = transform(value, rowData);
                                                             if (!(newValue instanceof Promise)) return [3 /*break*/, 3];
-                                                            _8 = display;
+                                                            _9 = display;
                                                             return [4 /*yield*/, newValue];
                                                         case 2:
-                                                            _8.data = _9.sent();
+                                                            _9.data = _10.sent();
                                                             return [3 /*break*/, 4];
                                                         case 3:
                                                             display.data = newValue;
-                                                            _9.label = 4;
+                                                            _10.label = 4;
                                                         case 4: return [3 /*break*/, 6];
                                                         case 5:
                                                             if (column.type === 'date' || column.type === 'datetime' || column.type === 'time') {
@@ -2264,7 +2270,12 @@
                                                                 }
                                                             }
                                                             if (column.type === 'values' || column.type === 'lazy-values') {
-                                                                display.data = ((_5 = (_4 = __classPrivateFieldGet(this_3, _cacheObjValues)[field]) === null || _4 === void 0 ? void 0 : _4[value]) === null || _5 === void 0 ? void 0 : _5[column.option.displayField]) || value;
+                                                                if (column.type === 'lazy-values' && typeof column.option.mapValue === 'function') {
+                                                                    display.data = ((_5 = (_4 = __classPrivateFieldGet(this_3, _cacheObjValues)[field]) === null || _4 === void 0 ? void 0 : _4[column.option.mapValue(value, rowData)]) === null || _5 === void 0 ? void 0 : _5[column.option.displayField]) || value;
+                                                                }
+                                                                else {
+                                                                    display.data = ((_7 = (_6 = __classPrivateFieldGet(this_3, _cacheObjValues)[field]) === null || _6 === void 0 ? void 0 : _6[value]) === null || _7 === void 0 ? void 0 : _7[column.option.displayField]) || value;
+                                                                }
                                                             }
                                                             if (column.type === 'number' && Number.isNumber(value)) {
                                                                 display.data = Number.toVNCurrency(value);
@@ -2283,7 +2294,7 @@
                                                                 display.badge = {
                                                                     type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'icon' : column.badgeType,
                                                                     color: column.badge(value, rowData),
-                                                                    icon: (_6 = column.badgeIcon) === null || _6 === void 0 ? void 0 : _6.call(column, value, rowData),
+                                                                    icon: (_8 = column.badgeIcon) === null || _8 === void 0 ? void 0 : _8.call(column, value, rowData),
                                                                 };
                                                             }
                                                             else if (column.type === 'bool') {
@@ -2293,34 +2304,34 @@
                                                                     icon: null,
                                                                 };
                                                             }
-                                                            _9.label = 6;
+                                                            _10.label = 6;
                                                         case 6: return [2 /*return*/];
                                                     }
                                                 });
                                             };
-                                            _9.label = 3;
+                                            _11.label = 3;
                                         case 3:
-                                            _9.trys.push([3, 8, 9, 10]);
+                                            _11.trys.push([3, 8, 9, 10]);
                                             items_2 = (e_13 = void 0, __values(items)), items_2_1 = items_2.next();
-                                            _9.label = 4;
+                                            _11.label = 4;
                                         case 4:
                                             if (!!items_2_1.done) return [3 /*break*/, 7];
                                             item = items_2_1.value;
                                             return [5 /*yield**/, _loop_5(item)];
                                         case 5:
-                                            _9.sent();
-                                            _9.label = 6;
+                                            _11.sent();
+                                            _11.label = 6;
                                         case 6:
                                             items_2_1 = items_2.next();
                                             return [3 /*break*/, 4];
                                         case 7: return [3 /*break*/, 10];
                                         case 8:
-                                            e_13_1 = _9.sent();
+                                            e_13_1 = _11.sent();
                                             e_13 = { error: e_13_1 };
                                             return [3 /*break*/, 10];
                                         case 9:
                                             try {
-                                                if (items_2_1 && !items_2_1.done && (_8 = items_2.return)) _8.call(items_2);
+                                                if (items_2_1 && !items_2_1.done && (_10 = items_2.return)) _10.call(items_2);
                                             }
                                             finally { if (e_13) throw e_13.error; }
                                             return [7 /*endfinally*/];
@@ -2329,29 +2340,29 @@
                                 });
                             };
                             this_3 = this;
-                            _9.label = 1;
+                            _10.label = 1;
                         case 1:
-                            _9.trys.push([1, 6, 7, 8]);
+                            _10.trys.push([1, 6, 7, 8]);
                             columns_5 = __values(columns), columns_5_1 = columns_5.next();
-                            _9.label = 2;
+                            _10.label = 2;
                         case 2:
                             if (!!columns_5_1.done) return [3 /*break*/, 5];
                             column = columns_5_1.value;
                             return [5 /*yield**/, _loop_4(column)];
                         case 3:
-                            _9.sent();
-                            _9.label = 4;
+                            _10.sent();
+                            _10.label = 4;
                         case 4:
                             columns_5_1 = columns_5.next();
                             return [3 /*break*/, 2];
                         case 5: return [3 /*break*/, 8];
                         case 6:
-                            e_12_1 = _9.sent();
+                            e_12_1 = _10.sent();
                             e_12 = { error: e_12_1 };
                             return [3 /*break*/, 8];
                         case 7:
                             try {
-                                if (columns_5_1 && !columns_5_1.done && (_8 = columns_5.return)) _8.call(columns_5);
+                                if (columns_5_1 && !columns_5_1.done && (_9 = columns_5.return)) _9.call(columns_5);
                             }
                             finally { if (e_12) throw e_12.error; }
                             return [7 /*endfinally*/];
@@ -2371,22 +2382,26 @@
                     this.gridOption = option;
                     __classPrivateFieldSet(this, _loadCompleted, false);
                     var setting = this.gridConfigurationService.init(this.gridOption);
-                    __classPrivateFieldGet(this, _subscription$1).add(setting.observer.pipe(operators.startWith(setting.subject.getValue())).subscribe(function (configuration) { return __awaiter(_this, void 0, void 0, function () {
-                        var configurationResult, displayColumns;
-                        return __generator(this, function (_8) {
-                            switch (_8.label) {
-                                case 0:
-                                    configurationResult = this.gridConfigurationService.loadConfigurationResult(this.gridOption, configuration);
-                                    displayColumns = configurationResult.displayedColumns || [];
-                                    return [4 /*yield*/, __classPrivateFieldGet(this, _loadValues).call(this, this.gridOption.columns.filter(function (column) { return displayColumns.includes(column.field); }))];
-                                case 1:
-                                    _8.sent();
-                                    this.configuration = configurationResult;
-                                    __classPrivateFieldGet(this, _optionChanges).next(this.gridOption);
-                                    return [2 /*return*/];
-                            }
+                    console.log(setting);
+                    if (setting) {
+                        __classPrivateFieldGet(this, _subscription$1).add(setting.observer.pipe(operators.startWith(setting.subject.getValue())).subscribe(function (configuration) {
+                            var configurationResult = _this.gridConfigurationService.loadConfigurationResult(_this.gridOption, configuration);
+                            var displayColumns = configurationResult.displayedColumns || [];
+                            __classPrivateFieldGet(_this, _loadValues).call(_this, _this.gridOption.columns.filter(function (column) { return displayColumns.includes(column.field); })).then(function () {
+                                _this.configuration = configurationResult;
+                                __classPrivateFieldGet(_this, _optionChanges).next(_this.gridOption);
+                            });
+                        }));
+                    }
+                    else {
+                        var configuration = this.gridConfigurationService.loadConfiguration(this.gridOption);
+                        var configurationResult_1 = this.gridConfigurationService.loadConfigurationResult(this.gridOption, configuration);
+                        var displayColumns_1 = configurationResult_1.displayedColumns || [];
+                        __classPrivateFieldGet(this, _loadValues).call(this, this.gridOption.columns.filter(function (column) { return displayColumns_1.includes(column.field); })).then(function () {
+                            _this.configuration = configurationResult_1;
+                            __classPrivateFieldGet(_this, _optionChanges).next(_this.gridOption);
                         });
-                    }); }));
+                    }
                 }
             },
             enumerable: false,
@@ -2433,13 +2448,13 @@
             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 () {
                 var filterInfo, result;
-                return __generator(this, function (_8) {
-                    switch (_8.label) {
+                return __generator(this, function (_9) {
+                    switch (_9.label) {
                         case 0:
                             filterInfo = __classPrivateFieldGet(this, _getFilter).call(this);
                             return [4 /*yield*/, __classPrivateFieldGet(this, _load).call(this, filterInfo, !__classPrivateFieldGet(this, _loadCompleted) || data.force)];
                         case 1:
-                            result = _8.sent();
+                            result = _9.sent();
                             __classPrivateFieldSet(this, _loadCompleted, true);
                             return [2 /*return*/, result];
                     }
@@ -2480,7 +2495,7 @@
     SdTable.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-table',
-                    template: "<ng-container *ngIf=\"configuration\">\r\n  <sd-table-filter\r\n    *ngIf=\"!gridOption.filter?.disabled && filterRegister\"\r\n    [filterRegister]=\"filterRegister\"\r\n    [filter]=\"gridOption?.filter\"\r\n    [columns]=\"configuration.firstColumns\"\r\n    [externalFilters]=\"gridOption?.filter?.externalFilters\"\r\n    [filterDefs]=\"filterDefs\">\r\n  </sd-table-filter>\r\n  <ng-container *ngIf=\"items | sdGroup : gridOption; $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': gridOption?.style?.maxHeight,\r\n            'min-height': gridOption?.style?.minHeight\r\n          }\">\r\n          <table mat-table [dataSource]=\"groupedItems\" [trackBy]=\"trackBy\" matSort [matSortDisabled]=\"!gridOption.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=\"gridOption?.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 && !gridOption?.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 : gridOption?.selector | async\">\r\n                  <mat-checkbox\r\n                    *ngIf=\"!gridOption.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 : gridOption?.selector\">\r\n                  <mat-checkbox\r\n                    class=\"c-selection\"\r\n                    color=\"primary\"\r\n                    [(ngModel)]=\"item.isSelected\"\r\n                    (change)=\"onSelect(item)\"\r\n                    [disabled]=\"selectedItems | selectionDisable : item : gridOption?.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\">\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]=\"gridOption.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=\"!gridOption.filter?.disabled && columnOperator\"\r\n                    [value]=\"columnFilter[column.field]\"\r\n                    [(inlineOperator)]=\"columnOperator[column.field]\"\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                  [sdId]=\"item.meta.id\"\r\n                  [key]=\"key\"\r\n                  [value]=\"item[column.field]\"\r\n                  [column]=\"column\"\r\n                  [item]=\"item\"\r\n                  [cellDef]=\"cellDef\"\r\n                  [gridOption]=\"gridOption\">\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=\"!gridOption.filter?.disabled && columnOperator\"\r\n                    [value]=\"columnFilter[column.field]\"\r\n                    [(inlineOperator)]=\"columnOperator[column.field]\"\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                  [sdId]=\"item.meta.id\"\r\n                  [key]=\"key\"\r\n                  [value]=\"item[column.field]\"\r\n                  [column]=\"column\"\r\n                  [item]=\"item\"\r\n                  [cellDef]=\"cellDef\"\r\n                  [gridOption]=\"gridOption\">\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.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=\"tableFilter\"\r\n            class=\"mr-8\"\r\n            [title]=\"'Filter' | sdTranslate\"\r\n            icon=\"filter_alt\"\r\n            size=\"sm\"\r\n            (action)=\"tableFilter.open()\"\r\n            type=\"link\">\r\n          </sd-button>\r\n          <sd-button\r\n            *ngIf=\"gridOption.reload?.visible\"\r\n            class=\"mr-8\"\r\n            [title]=\"'Reload' | sdTranslate\"\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=\"gridOption.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\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]=\"gridOption.paginate?.hidden\"\r\n          [length]=\"total\"\r\n          [pageSize]=\"gridOption.paginate?.pageSize\"\r\n          [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n          [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n      </div>\r\n    </div>\r\n    <sd-table-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\" (clear)=\"onClearSelection(groupedItems)\">\r\n    </sd-table-quick-action>\r\n    <sd-popup-configuration *ngIf=\"gridOption?.key && gridOption.config?.visible\" [gridOption]=\"gridOption\"> </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=\"!gridOption.filter?.disabled && filterRegister\"\r\n    [filterRegister]=\"filterRegister\"\r\n    [filter]=\"gridOption?.filter\"\r\n    [columns]=\"configuration.firstColumns\"\r\n    [externalFilters]=\"gridOption?.filter?.externalFilters\"\r\n    [filterDefs]=\"filterDefs\">\r\n  </sd-table-filter>\r\n  <ng-container *ngIf=\"items | sdGroup : gridOption; $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': gridOption?.style?.maxHeight,\r\n            'min-height': gridOption?.style?.minHeight\r\n          }\">\r\n          <table mat-table [dataSource]=\"groupedItems\" [trackBy]=\"trackBy\" matSort [matSortDisabled]=\"!gridOption.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=\"gridOption?.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 && !gridOption?.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 : gridOption?.selector | async\">\r\n                  <mat-checkbox\r\n                    *ngIf=\"!gridOption.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 : gridOption?.selector\">\r\n                  <mat-checkbox\r\n                    class=\"c-selection\"\r\n                    color=\"primary\"\r\n                    [(ngModel)]=\"item.isSelected\"\r\n                    (change)=\"onSelect(item)\"\r\n                    [disabled]=\"selectedItems | selectionDisable : item : gridOption?.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\">\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]=\"gridOption.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=\"!gridOption.filter?.disabled && columnOperator\"\r\n                    [value]=\"columnFilter[column.field]\"\r\n                    [(inlineOperator)]=\"columnOperator[column.field]\"\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                  [gridOption]=\"gridOption\">\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=\"!gridOption.filter?.disabled && columnOperator\"\r\n                    [value]=\"columnFilter[column.field]\"\r\n                    [(inlineOperator)]=\"columnOperator[column.field]\"\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                  [gridOption]=\"gridOption\">\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.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=\"tableFilter\"\r\n            class=\"mr-8\"\r\n            [title]=\"'Filter' | sdTranslate\"\r\n            icon=\"filter_alt\"\r\n            size=\"sm\"\r\n            (action)=\"tableFilter.open()\"\r\n            type=\"link\">\r\n          </sd-button>\r\n          <sd-button\r\n            *ngIf=\"gridOption.reload?.visible\"\r\n            class=\"mr-8\"\r\n            [title]=\"'Reload' | sdTranslate\"\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=\"gridOption.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\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]=\"gridOption.paginate?.hidden\"\r\n          [length]=\"total\"\r\n          [pageSize]=\"gridOption.paginate?.pageSize\"\r\n          [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n          [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n      </div>\r\n    </div>\r\n    <sd-table-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\" (clear)=\"onClearSelection(groupedItems)\">\r\n    </sd-table-quick-action>\r\n    <sd-popup-configuration *ngIf=\"gridOption?.key && gridOption.config?.visible\" [gridOption]=\"gridOption\"> </sd-popup-configuration>\r\n  </ng-container>\r\n</ng-container>\r\n",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     animations: [
                         animations.trigger('detailExpand', [
@@ -2721,8 +2736,6 @@
     ];
     SdDesktopCellView.ctorParameters = function () { return []; };
     SdDesktopCellView.propDecorators = {
-        sdId: [{ type: core.Input }],
-        key: [{ type: core.Input }],
         column: [{ type: core.Input }],
         item: [{ type: core.Input }],
         gridOption: [{ type: core.Input }]
@@ -3108,15 +3121,13 @@
     SdDesktopCell.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-desktop-cell',
-                    template: "<ng-container *ngIf=\"cellDef[column.field]\">\r\n  <ng-container *ngTemplateOutlet=\"cellDef[column.field].templateRef; context: { item: item.data, column: column }\"> </ng-container>\r\n</ng-container>\r\n<sd-desktop-cell-view\r\n  *ngIf=\"!cellDef[column.field]\"\r\n  [sdId]=\"item.meta.id\"\r\n  [key]=\"key\"\r\n  [column]=\"column\"\r\n  [gridOption]=\"gridOption\"\r\n  [item]=\"item\">\r\n</sd-desktop-cell-view>\r\n",
+                    template: "<ng-container *ngIf=\"cellDef[column.field]\">\r\n  <ng-container *ngTemplateOutlet=\"cellDef[column.field].templateRef; context: { item: item.data, column: column }\"> </ng-container>\r\n</ng-container>\r\n<sd-desktop-cell-view\r\n  *ngIf=\"!cellDef[column.field]\"\r\n  [column]=\"column\"\r\n  [gridOption]=\"gridOption\"\r\n  [item]=\"item\">\r\n</sd-desktop-cell-view>\r\n",
                     changeDetection: core.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     SdDesktopCell.ctorParameters = function () { return []; };
     SdDesktopCell.propDecorators = {
-        sdId: [{ type: core.Input }],
         value: [{ type: core.Input }],
-        key: [{ type: core.Input }],
         column: [{ type: core.Input }],
         item: [{ type: core.Input }],
         gridOption: [{ type: core.Input }],