@sd-angular/core 1.3.213 → 1.3.214

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

@@ -876,7 +876,7 @@
                 return __classPrivateFieldGet(_this, _cache)[key];
             };
             _defaultConfiguration.set(this, function (args) {
-                var e_1, _r, e_2, _s, e_3, _t;
+                var e_1, _v, e_2, _w, e_3, _x;
                 var _a;
                 var columns = args.columns, externalFilters = args.externalFilters, filterDefs = args.filterDefs;
                 var inlineColumn = {};
@@ -884,43 +884,43 @@
                 var inlineFilterDef = {};
                 try {
                     // Filter column
-                    for (var _u = __values(columns || []), _v = _u.next(); !_v.done; _v = _u.next()) {
-                        var item = _v.value;
+                    for (var _y = __values(columns || []), _z = _y.next(); !_z.done; _z = _y.next()) {
+                        var item = _z.value;
                         inlineColumn[item.field] = (_a = item === null || item === void 0 ? void 0 : item.filter) === null || _a === void 0 ? void 0 : _a.defaultShowing;
                     }
                 }
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
                 finally {
                     try {
-                        if (_v && !_v.done && (_r = _u.return)) _r.call(_u);
+                        if (_z && !_z.done && (_v = _y.return)) _v.call(_y);
                     }
                     finally { if (e_1) throw e_1.error; }
                 }
                 try {
                     // Filter external
-                    for (var _w = __values(externalFilters || []), _x = _w.next(); !_x.done; _x = _w.next()) {
-                        var item = _x.value;
+                    for (var _0 = __values(externalFilters || []), _1 = _0.next(); !_1.done; _1 = _0.next()) {
+                        var item = _1.value;
                         inlineExternal[item.field] = item === null || item === void 0 ? void 0 : item.defaultShowing;
                     }
                 }
                 catch (e_2_1) { e_2 = { error: e_2_1 }; }
                 finally {
                     try {
-                        if (_x && !_x.done && (_s = _w.return)) _s.call(_w);
+                        if (_1 && !_1.done && (_w = _0.return)) _w.call(_0);
                     }
                     finally { if (e_2) throw e_2.error; }
                 }
                 try {
                     // Filter def
-                    for (var _y = __values(filterDefs || []), _z = _y.next(); !_z.done; _z = _y.next()) {
-                        var item = _z.value;
+                    for (var _2 = __values(filterDefs || []), _3 = _2.next(); !_3.done; _3 = _2.next()) {
+                        var item = _3.value;
                         inlineFilterDef[item.sdTableFilterDef] = item === null || item === void 0 ? void 0 : item.defaultShowing;
                     }
                 }
                 catch (e_3_1) { e_3 = { error: e_3_1 }; }
                 finally {
                     try {
-                        if (_z && !_z.done && (_t = _y.return)) _t.call(_y);
+                        if (_3 && !_3.done && (_x = _2.return)) _x.call(_2);
                     }
                     finally { if (e_3) throw e_3.error; }
                 }
@@ -934,51 +934,55 @@
                 };
             });
             _defaultValue.set(this, function (args) {
-                var e_4, _r, e_5, _s, e_6, _t;
-                var _a;
+                var e_4, _v, e_5, _w, e_6, _x;
+                var _a, _b, _c, _d, _e;
                 var columnFilter = {};
                 var externalFilter = {};
                 var filterDef = {};
+                var columnOperator = {};
                 var columns = args.columns, externalFilters = args.externalFilters, filterDefs = args.filterDefs;
                 try {
                     // Filter column
-                    for (var _u = __values(columns || []), _v = _u.next(); !_v.done; _v = _u.next()) {
-                        var item = _v.value;
+                    for (var _y = __values(columns || []), _z = _y.next(); !_z.done; _z = _y.next()) {
+                        var item = _z.value;
                         columnFilter[item.field] = (_a = item === null || item === void 0 ? void 0 : item.filter) === null || _a === void 0 ? void 0 : _a.default;
+                        if (((_c = (_b = item === null || item === void 0 ? void 0 : item.filter) === null || _b === void 0 ? void 0 : _b.operator) === null || _c === void 0 ? void 0 : _c.enable) && ((_e = (_d = item === null || item === void 0 ? void 0 : item.filter) === null || _d === void 0 ? void 0 : _d.operator) === null || _e === void 0 ? void 0 : _e.default)) {
+                            columnOperator[item.field] = item.filter.operator.default;
+                        }
                     }
                 }
                 catch (e_4_1) { e_4 = { error: e_4_1 }; }
                 finally {
                     try {
-                        if (_v && !_v.done && (_r = _u.return)) _r.call(_u);
+                        if (_z && !_z.done && (_v = _y.return)) _v.call(_y);
                     }
                     finally { if (e_4) throw e_4.error; }
                 }
                 try {
                     // Filter external
-                    for (var _w = __values(externalFilters || []), _x = _w.next(); !_x.done; _x = _w.next()) {
-                        var item = _x.value;
+                    for (var _0 = __values(externalFilters || []), _1 = _0.next(); !_1.done; _1 = _0.next()) {
+                        var item = _1.value;
                         externalFilter[item.field] = item === null || item === void 0 ? void 0 : item.default;
                     }
                 }
                 catch (e_5_1) { e_5 = { error: e_5_1 }; }
                 finally {
                     try {
-                        if (_x && !_x.done && (_s = _w.return)) _s.call(_w);
+                        if (_1 && !_1.done && (_w = _0.return)) _w.call(_0);
                     }
                     finally { if (e_5) throw e_5.error; }
                 }
                 try {
                     // Filter def
-                    for (var _y = __values(filterDefs || []), _z = _y.next(); !_z.done; _z = _y.next()) {
-                        var item = _z.value;
+                    for (var _2 = __values(filterDefs || []), _3 = _2.next(); !_3.done; _3 = _2.next()) {
+                        var item = _3.value;
                         filterDef[item.sdTableFilterDef] = undefined;
                     }
                 }
                 catch (e_6_1) { e_6 = { error: e_6_1 }; }
                 finally {
                     try {
-                        if (_z && !_z.done && (_t = _y.return)) _t.call(_y);
+                        if (_3 && !_3.done && (_x = _2.return)) _x.call(_2);
                     }
                     finally { if (e_6) throw e_6.error; }
                 }
@@ -989,10 +993,12 @@
                     externalFilter: externalFilter,
                     // Filter def
                     filterDef: filterDef,
+                    // columnOperator
+                    columnOperator: columnOperator,
                 };
             });
             _initConfiguration.set(this, function (args, configuration) {
-                var e_7, _r, e_8, _s, e_9, _t;
+                var e_7, _v, e_8, _w, e_9, _x;
                 var _a, _b, _c, _d, _e, _f, _g;
                 var columns = args.columns, externalFilters = args.externalFilters, filterDefs = args.filterDefs;
                 var inlineColumn = {};
@@ -1000,43 +1006,43 @@
                 var inlineFilterDef = {};
                 try {
                     // Filter column
-                    for (var _u = __values(columns || []), _v = _u.next(); !_v.done; _v = _u.next()) {
-                        var item = _v.value;
+                    for (var _y = __values(columns || []), _z = _y.next(); !_z.done; _z = _y.next()) {
+                        var item = _z.value;
                         inlineColumn[item.field] = (_b = (_a = configuration === null || configuration === void 0 ? void 0 : configuration.inlineColumn) === null || _a === void 0 ? void 0 : _a[item.field]) !== null && _b !== void 0 ? _b : (_c = item === null || item === void 0 ? void 0 : item.filter) === null || _c === void 0 ? void 0 : _c.defaultShowing;
                     }
                 }
                 catch (e_7_1) { e_7 = { error: e_7_1 }; }
                 finally {
                     try {
-                        if (_v && !_v.done && (_r = _u.return)) _r.call(_u);
+                        if (_z && !_z.done && (_v = _y.return)) _v.call(_y);
                     }
                     finally { if (e_7) throw e_7.error; }
                 }
                 try {
                     // Filter external
-                    for (var _w = __values(externalFilters || []), _x = _w.next(); !_x.done; _x = _w.next()) {
-                        var item = _x.value;
+                    for (var _0 = __values(externalFilters || []), _1 = _0.next(); !_1.done; _1 = _0.next()) {
+                        var item = _1.value;
                         inlineExternal[item.field] = (_e = (_d = configuration === null || configuration === void 0 ? void 0 : configuration.inlineExternal) === null || _d === void 0 ? void 0 : _d[item.field]) !== null && _e !== void 0 ? _e : item === null || item === void 0 ? void 0 : item.defaultShowing;
                     }
                 }
                 catch (e_8_1) { e_8 = { error: e_8_1 }; }
                 finally {
                     try {
-                        if (_x && !_x.done && (_s = _w.return)) _s.call(_w);
+                        if (_1 && !_1.done && (_w = _0.return)) _w.call(_0);
                     }
                     finally { if (e_8) throw e_8.error; }
                 }
                 try {
                     // Filter def
-                    for (var _y = __values(filterDefs || []), _z = _y.next(); !_z.done; _z = _y.next()) {
-                        var item = _z.value;
+                    for (var _2 = __values(filterDefs || []), _3 = _2.next(); !_3.done; _3 = _2.next()) {
+                        var item = _3.value;
                         inlineFilterDef[item.sdTableFilterDef] = (_g = (_f = configuration === null || configuration === void 0 ? void 0 : configuration.inlineFilterDef) === null || _f === void 0 ? void 0 : _f[item.sdTableFilterDef]) !== null && _g !== void 0 ? _g : item === null || item === void 0 ? void 0 : item.defaultShowing;
                     }
                 }
                 catch (e_9_1) { e_9 = { error: e_9_1 }; }
                 finally {
                     try {
-                        if (_z && !_z.done && (_t = _y.return)) _t.call(_y);
+                        if (_3 && !_3.done && (_x = _2.return)) _x.call(_2);
                     }
                     finally { if (e_9) throw e_9.error; }
                 }
@@ -1050,59 +1056,63 @@
                 };
             });
             _initValue.set(this, function (args, value) {
-                var e_10, _r, e_11, _s, e_12, _t;
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+                var e_10, _v, e_11, _w, e_12, _x;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
                 var columnFilter = {};
                 var externalFilter = {};
                 var filterDef = {};
+                var columnOperator = {};
                 var columns = args.columns, externalFilters = args.externalFilters, filterDefs = args.filterDefs;
                 try {
                     // Filter column
-                    for (var _u = __values(columns || []), _v = _u.next(); !_v.done; _v = _u.next()) {
-                        var item = _v.value;
+                    for (var _y = __values(columns || []), _z = _y.next(); !_z.done; _z = _y.next()) {
+                        var item = _z.value;
                         columnFilter[item.field] = (_b = (_a = value === null || value === void 0 ? void 0 : value.columnFilter) === null || _a === void 0 ? void 0 : _a[item.field]) !== null && _b !== void 0 ? _b : (_c = item === null || item === void 0 ? void 0 : item.filter) === null || _c === void 0 ? void 0 : _c.default;
+                        if (((_e = (_d = item === null || item === void 0 ? void 0 : item.filter) === null || _d === void 0 ? void 0 : _d.operator) === null || _e === void 0 ? void 0 : _e.enable) && ((_g = (_f = item === null || item === void 0 ? void 0 : item.filter) === null || _f === void 0 ? void 0 : _f.operator) === null || _g === void 0 ? void 0 : _g.default)) {
+                            columnOperator[item.field] = item.filter.operator.default;
+                        }
                     }
                 }
                 catch (e_10_1) { e_10 = { error: e_10_1 }; }
                 finally {
                     try {
-                        if (_v && !_v.done && (_r = _u.return)) _r.call(_u);
+                        if (_z && !_z.done && (_v = _y.return)) _v.call(_y);
                     }
                     finally { if (e_10) throw e_10.error; }
                 }
                 try {
                     // Filter external
-                    for (var _w = __values(externalFilters || []), _x = _w.next(); !_x.done; _x = _w.next()) {
-                        var item = _x.value;
+                    for (var _0 = __values(externalFilters || []), _1 = _0.next(); !_1.done; _1 = _0.next()) {
+                        var item = _1.value;
                         if (item.type === 'daterange') {
                             externalFilter[item.field] = {
-                                from: (_f = (_e = (_d = value === null || value === void 0 ? void 0 : value.externalFilter) === null || _d === void 0 ? void 0 : _d[item.field]) === null || _e === void 0 ? void 0 : _e.from) !== null && _f !== void 0 ? _f : (_g = item.default) === null || _g === void 0 ? void 0 : _g.from,
-                                to: (_k = (_j = (_h = value === null || value === void 0 ? void 0 : value.externalFilter) === null || _h === void 0 ? void 0 : _h[item.field]) === null || _j === void 0 ? void 0 : _j.to) !== null && _k !== void 0 ? _k : (_l = item.default) === null || _l === void 0 ? void 0 : _l.to,
+                                from: (_k = (_j = (_h = value === null || value === void 0 ? void 0 : value.externalFilter) === null || _h === void 0 ? void 0 : _h[item.field]) === null || _j === void 0 ? void 0 : _j.from) !== null && _k !== void 0 ? _k : (_l = item.default) === null || _l === void 0 ? void 0 : _l.from,
+                                to: (_p = (_o = (_m = value === null || value === void 0 ? void 0 : value.externalFilter) === null || _m === void 0 ? void 0 : _m[item.field]) === null || _o === void 0 ? void 0 : _o.to) !== null && _p !== void 0 ? _p : (_q = item.default) === null || _q === void 0 ? void 0 : _q.to,
                             };
                         }
                         else {
-                            externalFilter[item.field] = (_o = (_m = value === null || value === void 0 ? void 0 : value.externalFilter) === null || _m === void 0 ? void 0 : _m[item.field]) !== null && _o !== void 0 ? _o : item === null || item === void 0 ? void 0 : item.default;
+                            externalFilter[item.field] = (_s = (_r = value === null || value === void 0 ? void 0 : value.externalFilter) === null || _r === void 0 ? void 0 : _r[item.field]) !== null && _s !== void 0 ? _s : item === null || item === void 0 ? void 0 : item.default;
                         }
                     }
                 }
                 catch (e_11_1) { e_11 = { error: e_11_1 }; }
                 finally {
                     try {
-                        if (_x && !_x.done && (_s = _w.return)) _s.call(_w);
+                        if (_1 && !_1.done && (_w = _0.return)) _w.call(_0);
                     }
                     finally { if (e_11) throw e_11.error; }
                 }
                 try {
                     // Filter def
-                    for (var _y = __values(filterDefs || []), _z = _y.next(); !_z.done; _z = _y.next()) {
-                        var item = _z.value;
-                        filterDef[item.sdTableFilterDef] = (_q = (_p = value === null || value === void 0 ? void 0 : value.filterDef) === null || _p === void 0 ? void 0 : _p[item.sdTableFilterDef]) !== null && _q !== void 0 ? _q : undefined;
+                    for (var _2 = __values(filterDefs || []), _3 = _2.next(); !_3.done; _3 = _2.next()) {
+                        var item = _3.value;
+                        filterDef[item.sdTableFilterDef] = (_u = (_t = value === null || value === void 0 ? void 0 : value.filterDef) === null || _t === void 0 ? void 0 : _t[item.sdTableFilterDef]) !== null && _u !== void 0 ? _u : undefined;
                     }
                 }
                 catch (e_12_1) { e_12 = { error: e_12_1 }; }
                 finally {
                     try {
-                        if (_z && !_z.done && (_t = _y.return)) _t.call(_y);
+                        if (_3 && !_3.done && (_x = _2.return)) _x.call(_2);
                     }
                     finally { if (e_12) throw e_12.error; }
                 }
@@ -1113,6 +1123,8 @@
                     externalFilter: externalFilter,
                     // Filter def
                     filterDef: filterDef,
+                    //column Operator
+                    columnOperator: columnOperator
                 };
             });
         }
@@ -1327,23 +1339,29 @@
                     pages: (_m = (_j = (_h = option === null || option === void 0 ? void 0 : option.paginate) === null || _h === void 0 ? void 0 : _h.pages) !== null && _j !== void 0 ? _j : (_l = (_k = _this.tableConfiguration) === null || _k === void 0 ? void 0 : _k.paginate) === null || _l === void 0 ? void 0 : _l.pages) !== null && _m !== void 0 ? _m : (_o = DEFAULT_TABLE_CONFIG.paginate) === null || _o === void 0 ? void 0 : _o.pages,
                     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,
                 };
+                var _loop_1 = function (column) {
+                    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) || [];
+                        }
+                        if (column.type === 'number') {
+                            column.filter.operator.list = ((_1 = (_0 = (_z = _this.tableConfiguration) === null || _z === void 0 ? void 0 : _z.filter) === null || _0 === void 0 ? void 0 : _0.operator) === null || _1 === void 0 ? void 0 : _1.defaultListNumber) || [];
+                        }
+                        if (column.type === 'values' || column.type === 'lazy-values') {
+                            column.filter.operator.list = ((_4 = (_3 = (_2 = _this.tableConfiguration) === null || _2 === void 0 ? void 0 : _2.filter) === null || _3 === void 0 ? void 0 : _3.operator) === null || _4 === void 0 ? void 0 : _4.defaultListValues) || [];
+                        }
+                        if (column.type === 'date' || column.type === 'datetime') {
+                            column.filter.operator.list = ((_7 = (_6 = (_5 = _this.tableConfiguration) === null || _5 === void 0 ? void 0 : _5.filter) === null || _6 === void 0 ? void 0 : _6.operator) === null || _7 === void 0 ? void 0 : _7.defaultListDate) || [];
+                        }
+                        if (column.filter.operator.default && column.filter.operator.list.some(function (el) { return el === column.filter.operator.default; })) {
+                            _this.columnOperator[column.field] = column.filter.operator.default;
+                        }
+                    }
+                };
                 try {
                     for (var _9 = __values(option.columns || []), _10 = _9.next(); !_10.done; _10 = _9.next()) {
                         var column = _10.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) || [];
-                            }
-                            if (column.type === 'number') {
-                                column.filter.operator.list = ((_1 = (_0 = (_z = _this.tableConfiguration) === null || _z === void 0 ? void 0 : _z.filter) === null || _0 === void 0 ? void 0 : _0.operator) === null || _1 === void 0 ? void 0 : _1.defaultListNumber) || [];
-                            }
-                            if (column.type === 'values' || column.type === 'lazy-values') {
-                                column.filter.operator.list = ((_4 = (_3 = (_2 = _this.tableConfiguration) === null || _2 === void 0 ? void 0 : _2.filter) === null || _3 === void 0 ? void 0 : _3.operator) === null || _4 === void 0 ? void 0 : _4.defaultListValues) || [];
-                            }
-                            if (column.type === 'date' || column.type === 'datetime') {
-                                column.filter.operator.list = ((_7 = (_6 = (_5 = _this.tableConfiguration) === null || _5 === void 0 ? void 0 : _5.filter) === null || _6 === void 0 ? void 0 : _6.operator) === null || _7 === void 0 ? void 0 : _7.defaultListDate) || [];
-                            }
-                        }
+                        _loop_1(column);
                     }
                 }
                 catch (e_4_1) { e_4 = { error: e_4_1 }; }
@@ -1391,7 +1409,7 @@
                     var e_5, _8;
                     var _a, _b, _c, _d, _e, _f;
                     var item = tableItem.data;
-                    var _loop_1 = function (column) {
+                    var _loop_2 = function (column) {
                         var field = column.field, type = column.type;
                         var filterValue = (rawColumnFilter[field] || '').toString().trim().toLowerCase();
                         var columnValue = (item[field] || '').toString().trim().toLowerCase();
@@ -1477,7 +1495,7 @@
                     try {
                         for (var columns_1 = __values(columns), columns_1_1 = columns_1.next(); !columns_1_1.done; columns_1_1 = columns_1.next()) {
                             var column = columns_1_1.value;
-                            var state_1 = _loop_1(column);
+                            var state_1 = _loop_2(column);
                             if (typeof state_1 === "object")
                                 return state_1.value;
                         }
@@ -1729,7 +1747,7 @@
                             items_1 = [];
                             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_2, exportItems_2, exportItems_2_1, item, e_7_1;
+                                var _u, results, results_1, results_1_1, result, results_2, totalPage, percent, allColumns, allExportedColumns, _loop_3, exportItems_2, exportItems_2_1, item, e_7_1;
                                 var e_8, _8, e_7, _9;
                                 var _this = this;
                                 return __generator(this, function (_10) {
@@ -1774,7 +1792,7 @@
                                             this.exportTitle = "Exporting..." + percent + "%";
                                             allColumns = __classPrivateFieldGet(this, _allColumns).call(this);
                                             allExportedColumns = __classPrivateFieldGet(this, _allExportedColumns).call(this);
-                                            _loop_2 = function (item) {
+                                            _loop_3 = function (item) {
                                                 var obj, handle, columns_3, columns_3_1, exportColumn, e_9_1;
                                                 var e_9, _8;
                                                 return __generator(this, function (_9) {
@@ -1913,7 +1931,7 @@
                                         case 6:
                                             if (!!exportItems_2_1.done) return [3 /*break*/, 9];
                                             item = exportItems_2_1.value;
-                                            return [5 /*yield**/, _loop_2(item)];
+                                            return [5 /*yield**/, _loop_3(item)];
                                         case 7:
                                             _10.sent();
                                             _10.label = 8;
@@ -2164,13 +2182,13 @@
             };
             this.detectChanges = function () { return _this.ref.detectChanges(); };
             _loadValues.set(this, function (columns) { return __awaiter(_this, void 0, void 0, function () {
-                var promises, _loop_3, this_1, columns_5, columns_5_1, column, results, _loop_4, this_2, results_3, results_3_1, result;
+                var promises, _loop_4, this_1, columns_5, columns_5_1, column, results, _loop_5, this_2, results_3, results_3_1, result;
                 var e_10, _8, e_11, _9;
                 return __generator(this, function (_10) {
                     switch (_10.label) {
                         case 0:
                             promises = [];
-                            _loop_3 = function (column) {
+                            _loop_4 = function (column) {
                                 if (column.type === 'values' && !this_1.cacheValues[column.field]) {
                                     if (typeof column.option.items === 'function') {
                                         promises.push(column.option
@@ -2207,7 +2225,7 @@
                             try {
                                 for (columns_5 = __values(columns), columns_5_1 = columns_5.next(); !columns_5_1.done; columns_5_1 = columns_5.next()) {
                                     column = columns_5_1.value;
-                                    _loop_3(column);
+                                    _loop_4(column);
                                 }
                             }
                             catch (e_10_1) { e_10 = { error: e_10_1 }; }
@@ -2221,7 +2239,7 @@
                             return [4 /*yield*/, Promise.all(promises)];
                         case 1:
                             results = _10.sent();
-                            _loop_4 = function (result) {
+                            _loop_5 = function (result) {
                                 this_2.cacheValues[result.key] = result.data.map(function (e) {
                                     var _8;
                                     return (_8 = {},
@@ -2235,7 +2253,7 @@
                             try {
                                 for (results_3 = __values(results), results_3_1 = results_3.next(); !results_3_1.done; results_3_1 = results_3.next()) {
                                     result = results_3_1.value;
-                                    _loop_4(result);
+                                    _loop_5(result);
                                 }
                             }
                             catch (e_11_1) { e_11 = { error: e_11_1 }; }
@@ -2251,15 +2269,15 @@
                 });
             }); });
             _format.set(this, function (rawItems, columns) { return __awaiter(_this, void 0, void 0, function () {
-                var _5, _6, _7, items, _loop_5, this_3, columns_6, columns_6_1, column, e_12_1;
+                var _5, _6, _7, items, _loop_6, this_3, columns_6, columns_6_1, column, e_12_1;
                 var e_12, _8;
                 var _this = this;
                 return __generator(this, function (_9) {
                     switch (_9.label) {
                         case 0:
                             items = rawItems.map(MapToSdTableItem);
-                            _loop_5 = function (column) {
-                                var field, cellStyle, click, tooltip, htmlTemplate, transform, _8, views, mapValue_1, values_1, lazyItems, _loop_6, items_2, items_2_1, item, e_13_1;
+                            _loop_6 = function (column) {
+                                var field, cellStyle, click, tooltip, htmlTemplate, transform, _8, views, mapValue_1, values_1, lazyItems, _loop_7, items_2, items_2_1, item, e_13_1;
                                 var e_13, _9;
                                 return __generator(this, function (_10) {
                                     switch (_10.label) {
@@ -2298,7 +2316,7 @@
                                             Object.assign(__classPrivateFieldGet(this_3, _cacheObjValues)[field], Array.toObject(lazyItems, column.option.valueField) || {});
                                             _10.label = 2;
                                         case 2:
-                                            _loop_6 = function (item) {
+                                            _loop_7 = function (item) {
                                                 var rowData, value, display, newValue, _8, date, time, val, vals, vals, option;
                                                 return __generator(this, function (_9) {
                                                     switch (_9.label) {
@@ -2402,7 +2420,7 @@
                                         case 4:
                                             if (!!items_2_1.done) return [3 /*break*/, 7];
                                             item = items_2_1.value;
-                                            return [5 /*yield**/, _loop_6(item)];
+                                            return [5 /*yield**/, _loop_7(item)];
                                         case 5:
                                             _10.sent();
                                             _10.label = 6;
@@ -2433,7 +2451,7 @@
                         case 2:
                             if (!!columns_6_1.done) return [3 /*break*/, 5];
                             column = columns_6_1.value;
-                            return [5 /*yield**/, _loop_5(column)];
+                            return [5 /*yield**/, _loop_6(column)];
                         case 3:
                             _9.sent();
                             _9.label = 4;
@@ -2604,7 +2622,7 @@
     SdTable.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-table',
-                    template: "<ng-container *ngIf=\"configuration\">\r\n  <sd-table-filter\r\n    *ngIf=\"!tableOption.filter?.disabled && filterRegister\"\r\n    [filterRegister]=\"filterRegister\"\r\n    [filter]=\"tableOption?.filter\"\r\n    [columns]=\"configuration.firstColumns\"\r\n    [externalFilters]=\"tableOption?.filter?.externalFilters\"\r\n    [filterDefs]=\"filterDefs\">\r\n  </sd-table-filter>\r\n  <ng-container *ngIf=\"items | sdGroup : tableOption; $implicit as groupedItems\">\r\n    <div class=\"c-container\">\r\n      <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n        <mat-spinner></mat-spinner>\r\n      </div>\r\n      <ng-container>\r\n        <div\r\n          class=\"c-table\"\r\n          sdScroll\r\n          [ngStyle]=\"{\r\n            'max-height': tableOption?.style?.maxHeight,\r\n            'min-height': tableOption?.style?.minHeight\r\n          }\">\r\n          <table mat-table [dataSource]=\"groupedItems\" [trackBy]=\"trackBy\" matSort [matSortDisabled]=\"!tableOption.sort?.enable\" multiTemplateDataRows>\r\n            <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n              <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n                  <ng-container *ngIf=\"tableOption?.expand?.always; else useExpandCollapse\">\r\n                    <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </ng-container>\r\n                  </ng-container>\r\n                  <ng-template #useExpandCollapse>\r\n                    <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n                      <ng-container *ngIf=\"item.isExpanded\">\r\n                        <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </ng-container>\r\n                      </ng-container>\r\n                    </div>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n              <th\r\n                class=\"p-0\"\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                style=\"width: 1px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              <td mat-cell *matCellDef=\"let element\">\r\n                <button\r\n                  *ngIf=\"!element.isExpanding && !tableOption?.expand?.always\"\r\n                  mat-icon-button\r\n                  aria-label=\"Expand & Collapse\"\r\n                  (click)=\"onExpand(element)\">\r\n                  <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n                  <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n                </button>\r\n                <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n                  <div></div>\r\n                  <div></div>\r\n                  <div></div>\r\n                  <div></div>\r\n                </div>\r\n              </td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdSelection\" sticky>\r\n              <th\r\n                class=\"text-center px-15\"\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                style=\"min-width: 50px; max-width: 50px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                <ng-container *ngIf=\"items | selectionVisibleSelectAll : tableOption?.selector | async\">\r\n                  <mat-checkbox\r\n                    *ngIf=\"!tableOption.selector?.single\"\r\n                    class=\"c-selection\"\r\n                    color=\"primary\"\r\n                    [(ngModel)]=\"isSelectAll\"\r\n                    (change)=\"onSelectAll()\">\r\n                  </mat-checkbox>\r\n                </ng-container>\r\n              </th>\r\n              <td class=\"text-center px-15\" mat-cell *matCellDef=\"let item\" style=\"min-width: 50px; max-width: 50px\">\r\n                <ng-container *ngIf=\"item | selectionVisible : tableOption?.selector\">\r\n                  <mat-checkbox\r\n                    class=\"c-selection\"\r\n                    color=\"primary\"\r\n                    [(ngModel)]=\"item.meta.selector.isSelected\"\r\n                    (change)=\"onSelect(item)\"\r\n                    [disabled]=\"selectedTableItems | selectionDisable : item : tableOption?.selector\">\r\n                  </mat-checkbox>\r\n                </ng-container>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdCommand\">\r\n              <th\r\n                class=\"px-8 py-8\"\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                style=\"width: 50px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-command [commands]=\"tableOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdGroup\">\r\n              <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\" [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n                <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\"></div>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container\r\n              *ngFor=\"let column of configuration.firstColumns;\"\r\n              [matColumnDef]=\"column.field\"\r\n              [sticky]=\"configuration.fixedColumn[column.field]\">\r\n              <th\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                class=\"px-8 py-8 c-th\"\r\n                [ngStyle]=\"{ 'min-width': column.width }\"\r\n                [attr.rowspan]=\"configuration.multipleHeader && column.type !== 'children-col' ? 2 : 1\"\r\n                [attr.colspan]=\"column.type === 'children-col' ? column.children?.length : 1\">\r\n                <div>\r\n                  <div\r\n                    aria-hidden=\"true\"\r\n                    mat-sort-header\r\n                    [disabled]=\"!column.sortable || column.type === 'children-col'\"\r\n                    [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                    [class.text-center]=\"column.align === 'center'\"\r\n                    [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                  <sd-column-inline-filter\r\n                    *ngIf=\"!tableOption.filter?.disabled && !tableOption.filter?.hideInlineFilter && columnOperator\"\r\n                    [value]=\"columnFilter[column.field]\"\r\n                    [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                    (operatorChange)=\"onOperatorChange(column, $event)\"\r\n                    [columnFilter]=\"columnFilter\"\r\n                    [cacheValues]=\"cacheValues\"\r\n                    [column]=\"column\"\r\n                    (filterChange)=\"onFilterChange()\">\r\n                  </sd-column-inline-filter>\r\n                </div>\r\n              </th>\r\n              <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-cell\r\n                  class=\"d-block px-8\"\r\n                  *ngIf=\"!item?.sdGroup\"\r\n                  [value]=\"item[column.field]\"\r\n                  [column]=\"column\"\r\n                  [item]=\"item\"\r\n                  [cellDef]=\"cellDef\">\r\n                </sd-desktop-cell>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                <ng-container *ngIf=\"footerDef[column.field]\">\r\n                  <ng-container *ngTemplateOutlet=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\r\n                  </ng-container>\r\n                </ng-container>\r\n              </td>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n              <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                <div>\r\n                  <div\r\n                    [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                    [class.text-center]=\"column.align === 'center'\"\r\n                    [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                  <sd-column-inline-filter\r\n                    *ngIf=\"!tableOption.filter?.disabled && !tableOption.filter?.hideInlineFilter  && columnOperator\"\r\n                    [value]=\"columnFilter[column.field]\"\r\n                    [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                    (operatorChange)=\"onOperatorChange(column, $event)\"\r\n                    [columnFilter]=\"columnFilter\"\r\n                    [cacheValues]=\"cacheValues\"\r\n                    [column]=\"column\"\r\n                    (filterChange)=\"onFilterChange()\">\r\n                  </sd-column-inline-filter>\r\n                </div>\r\n              </th>\r\n              <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-cell\r\n                  class=\"d-block px-8\"\r\n                  [value]=\"item[column.field]\"\r\n                  [column]=\"column\"\r\n                  [item]=\"item\"\r\n                  [cellDef]=\"cellDef\">\r\n                </sd-desktop-cell>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                <ng-container *ngIf=\"footerDef[column.field]\">\r\n                  <ng-container *ngTemplateOutlet=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\r\n                  </ng-container>\r\n                </ng-container>\r\n              </td>\r\n            </ng-container>\r\n            <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"></tr>\r\n            <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n              <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"></tr>\r\n            </ng-container>\r\n            <tr\r\n              mat-row\r\n              *matRowDef=\"let row; columns: configuration.displayedColumns\"\r\n              matRipple\r\n              class=\"c-row\"\r\n              [class.selected]=\"row.meta.selector.isSelected\"></tr>\r\n\r\n            <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n            <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n              <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n            </ng-container>\r\n          </table>\r\n        </div>\r\n      </ng-container>\r\n      <div class=\"c-paginator\">\r\n        <div class=\"c-action\">\r\n          <sd-button\r\n            *ngIf=\"tableOption.reload?.visible\"\r\n            class=\"mr-8\"\r\n            title=\"T\u1EA3i l\u1EA1i\"\r\n            icon=\"refresh\"\r\n            size=\"sm\"\r\n            (action)=\"reload()\"\r\n            [disabled]=\"!items?.length\"\r\n            type=\"link\">\r\n          </sd-button>\r\n          <ng-container *ngIf=\"tableOption.export?.visible && items?.length\">\r\n            <ng-container *ngIf=\"isExporting; else unExporting\">\r\n              <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\" type=\"link\">\r\n              </sd-button>\r\n            </ng-container>\r\n            <ng-template #unExporting>\r\n              <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\" [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n              </sd-button>\r\n            </ng-template>\r\n            <mat-menu #menu=\"matMenu\">\r\n              <button mat-menu-item (click)=\"exportExcel()\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                <span> Xu\u1EA5t excel</span>\r\n              </button>\r\n              <button mat-menu-item (click)=\"exportCSV()\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                <span> Xu\u1EA5t CSV</span>\r\n              </button>\r\n            </mat-menu>\r\n          </ng-container>\r\n          <sd-button\r\n            *ngIf=\"popupConfiguration\"\r\n            class=\"mr-8\"\r\n            [title]=\"'Configure' | sdTranslate\"\r\n            icon=\"settings\"\r\n            size=\"sm\"\r\n            (action)=\"popupConfiguration.open()\"\r\n            type=\"link\">\r\n          </sd-button>\r\n        </div>\r\n        <mat-paginator\r\n          [class.d-none]=\"tableOption.paginate?.hidden\"\r\n          [length]=\"total\"\r\n          [pageSize]=\"tableOption.paginate?.pageSize\"\r\n          [pageSizeOptions]=\"tableOption.paginate?.pages\"\r\n          [showFirstLastButtons]=\"tableOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n      </div>\r\n    </div>\r\n    <sd-table-quick-action [tableOption]=\"tableOption\" [selectedTableItems]=\"selectedTableItems\" (clear)=\"onClearSelection(groupedItems)\">\r\n    </sd-table-quick-action>\r\n    <sd-popup-configuration *ngIf=\"tableOption?.key && tableOption.config?.visible\" [tableOption]=\"tableOption\"> </sd-popup-configuration>\r\n  </ng-container>\r\n</ng-container>\r\n",
+                    template: "<ng-container *ngIf=\"configuration\">\r\n  <sd-table-filter\r\n    *ngIf=\"!tableOption.filter?.disabled && filterRegister\"\r\n    [filterRegister]=\"filterRegister\"\r\n    [filter]=\"tableOption?.filter\"\r\n    [columns]=\"configuration.firstColumns\"\r\n    [externalFilters]=\"tableOption?.filter?.externalFilters\"\r\n    [filterDefs]=\"filterDefs\">\r\n  </sd-table-filter>\r\n  <ng-container *ngIf=\"items | sdGroup : tableOption; $implicit as groupedItems\">\r\n    <div class=\"c-container\">\r\n      <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n        <mat-spinner></mat-spinner>\r\n      </div>\r\n      <ng-container>\r\n        <div\r\n          class=\"c-table\"\r\n          sdScroll\r\n          [ngStyle]=\"{\r\n            'max-height': tableOption?.style?.maxHeight,\r\n            'min-height': tableOption?.style?.minHeight\r\n          }\">\r\n          <table mat-table [dataSource]=\"groupedItems\" [trackBy]=\"trackBy\" matSort [matSortDisabled]=\"!tableOption.sort?.enable\" multiTemplateDataRows>\r\n            <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n              <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n                  <ng-container *ngIf=\"tableOption?.expand?.always; else useExpandCollapse\">\r\n                    <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </ng-container>\r\n                  </ng-container>\r\n                  <ng-template #useExpandCollapse>\r\n                    <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n                      <ng-container *ngIf=\"item.isExpanded\">\r\n                        <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </ng-container>\r\n                      </ng-container>\r\n                    </div>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n              <th\r\n                class=\"p-0\"\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                style=\"width: 1px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              <td mat-cell *matCellDef=\"let element\">\r\n                <button\r\n                  *ngIf=\"!element.isExpanding && !tableOption?.expand?.always\"\r\n                  mat-icon-button\r\n                  aria-label=\"Expand & Collapse\"\r\n                  (click)=\"onExpand(element)\">\r\n                  <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n                  <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n                </button>\r\n                <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n                  <div></div>\r\n                  <div></div>\r\n                  <div></div>\r\n                  <div></div>\r\n                </div>\r\n              </td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdSelection\" sticky>\r\n              <th\r\n                class=\"text-center px-15\"\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                style=\"min-width: 50px; max-width: 50px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                <ng-container *ngIf=\"items | selectionVisibleSelectAll : tableOption?.selector | async\">\r\n                  <mat-checkbox\r\n                    *ngIf=\"!tableOption.selector?.single\"\r\n                    class=\"c-selection\"\r\n                    color=\"primary\"\r\n                    [(ngModel)]=\"isSelectAll\"\r\n                    (change)=\"onSelectAll()\">\r\n                  </mat-checkbox>\r\n                </ng-container>\r\n              </th>\r\n              <td class=\"text-center px-15\" mat-cell *matCellDef=\"let item\" style=\"min-width: 50px; max-width: 50px\">\r\n                <ng-container *ngIf=\"item | selectionVisible : tableOption?.selector\">\r\n                  <mat-checkbox\r\n                    class=\"c-selection\"\r\n                    color=\"primary\"\r\n                    [(ngModel)]=\"item.meta.selector.isSelected\"\r\n                    (change)=\"onSelect(item)\"\r\n                    [disabled]=\"selectedTableItems | selectionDisable : item : tableOption?.selector\">\r\n                  </mat-checkbox>\r\n                </ng-container>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdCommand\" sticky>\r\n              <th\r\n                class=\"px-8 py-8\"\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                style=\"width: 50px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-command [commands]=\"tableOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdGroup\">\r\n              <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\" [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n                <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\"></div>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container\r\n              *ngFor=\"let column of configuration.firstColumns;\"\r\n              [matColumnDef]=\"column.field\"\r\n              [sticky]=\"configuration.fixedColumn[column.field]\">\r\n              <th\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                class=\"px-8 py-8 c-th\"\r\n                [ngStyle]=\"{ 'min-width': column.width }\"\r\n                [attr.rowspan]=\"configuration.multipleHeader && column.type !== 'children-col' ? 2 : 1\"\r\n                [attr.colspan]=\"column.type === 'children-col' ? column.children?.length : 1\">\r\n                <div>\r\n                  <div\r\n                    aria-hidden=\"true\"\r\n                    mat-sort-header\r\n                    [disabled]=\"!column.sortable || column.type === 'children-col'\"\r\n                    [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                    [class.text-center]=\"column.align === 'center'\"\r\n                    [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                  <sd-column-inline-filter\r\n                    *ngIf=\"!tableOption.filter?.disabled && !tableOption.filter?.hideInlineFilter && columnOperator\"\r\n                    [value]=\"columnFilter[column.field]\"\r\n                    [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                    (operatorChange)=\"onOperatorChange(column, $event)\"\r\n                    [columnFilter]=\"columnFilter\"\r\n                    [cacheValues]=\"cacheValues\"\r\n                    [column]=\"column\"\r\n                    (filterChange)=\"onFilterChange()\">\r\n                  </sd-column-inline-filter>\r\n                </div>\r\n              </th>\r\n              <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-cell\r\n                  class=\"d-block px-8\"\r\n                  *ngIf=\"!item?.sdGroup\"\r\n                  [value]=\"item[column.field]\"\r\n                  [column]=\"column\"\r\n                  [item]=\"item\"\r\n                  [cellDef]=\"cellDef\">\r\n                </sd-desktop-cell>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                <ng-container *ngIf=\"footerDef[column.field]\">\r\n                  <ng-container *ngTemplateOutlet=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\r\n                  </ng-container>\r\n                </ng-container>\r\n              </td>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n              <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                <div>\r\n                  <div\r\n                    [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                    [class.text-center]=\"column.align === 'center'\"\r\n                    [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                  <sd-column-inline-filter\r\n                    *ngIf=\"!tableOption.filter?.disabled && !tableOption.filter?.hideInlineFilter  && columnOperator\"\r\n                    [value]=\"columnFilter[column.field]\"\r\n                    [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                    (operatorChange)=\"onOperatorChange(column, $event)\"\r\n                    [columnFilter]=\"columnFilter\"\r\n                    [cacheValues]=\"cacheValues\"\r\n                    [column]=\"column\"\r\n                    (filterChange)=\"onFilterChange()\">\r\n                  </sd-column-inline-filter>\r\n                </div>\r\n              </th>\r\n              <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-cell\r\n                  class=\"d-block px-8\"\r\n                  [value]=\"item[column.field]\"\r\n                  [column]=\"column\"\r\n                  [item]=\"item\"\r\n                  [cellDef]=\"cellDef\">\r\n                </sd-desktop-cell>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                <ng-container *ngIf=\"footerDef[column.field]\">\r\n                  <ng-container *ngTemplateOutlet=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\r\n                  </ng-container>\r\n                </ng-container>\r\n              </td>\r\n            </ng-container>\r\n            <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"></tr>\r\n            <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n              <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"></tr>\r\n            </ng-container>\r\n            <tr\r\n              mat-row\r\n              *matRowDef=\"let row; columns: configuration.displayedColumns\"\r\n              matRipple\r\n              class=\"c-row\"\r\n              [class.selected]=\"row.meta.selector.isSelected\"></tr>\r\n\r\n            <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n            <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n              <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n            </ng-container>\r\n          </table>\r\n        </div>\r\n      </ng-container>\r\n      <div class=\"c-paginator\">\r\n        <div class=\"c-action\">\r\n          <sd-button\r\n            *ngIf=\"tableOption.reload?.visible\"\r\n            class=\"mr-8\"\r\n            title=\"T\u1EA3i l\u1EA1i\"\r\n            icon=\"refresh\"\r\n            size=\"sm\"\r\n            (action)=\"reload()\"\r\n            [disabled]=\"!items?.length\"\r\n            type=\"link\">\r\n          </sd-button>\r\n          <ng-container *ngIf=\"tableOption.export?.visible && items?.length\">\r\n            <ng-container *ngIf=\"isExporting; else unExporting\">\r\n              <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\" type=\"link\">\r\n              </sd-button>\r\n            </ng-container>\r\n            <ng-template #unExporting>\r\n              <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\" [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n              </sd-button>\r\n            </ng-template>\r\n            <mat-menu #menu=\"matMenu\">\r\n              <button mat-menu-item (click)=\"exportExcel()\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                <span> Xu\u1EA5t excel</span>\r\n              </button>\r\n              <button mat-menu-item (click)=\"exportCSV()\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                <span> Xu\u1EA5t CSV</span>\r\n              </button>\r\n            </mat-menu>\r\n          </ng-container>\r\n          <sd-button\r\n            *ngIf=\"popupConfiguration\"\r\n            class=\"mr-8\"\r\n            [title]=\"'Configure' | sdTranslate\"\r\n            icon=\"settings\"\r\n            size=\"sm\"\r\n            (action)=\"popupConfiguration.open()\"\r\n            type=\"link\">\r\n          </sd-button>\r\n        </div>\r\n        <mat-paginator\r\n          [class.d-none]=\"tableOption.paginate?.hidden\"\r\n          [length]=\"total\"\r\n          [pageSize]=\"tableOption.paginate?.pageSize\"\r\n          [pageSizeOptions]=\"tableOption.paginate?.pages\"\r\n          [showFirstLastButtons]=\"tableOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n      </div>\r\n    </div>\r\n    <sd-table-quick-action [tableOption]=\"tableOption\" [selectedTableItems]=\"selectedTableItems\" (clear)=\"onClearSelection(groupedItems)\">\r\n    </sd-table-quick-action>\r\n    <sd-popup-configuration *ngIf=\"tableOption?.key && tableOption.config?.visible\" [tableOption]=\"tableOption\"> </sd-popup-configuration>\r\n  </ng-container>\r\n</ng-container>\r\n",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     animations: [
                         animations.trigger('detailExpand', [