@sd-angular/core 1.3.150 → 1.3.152

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@sd-angular/core/common'), require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/icon'), require('@angular/material/input'), require('@angular/material/paginator'), require('@angular/material/sort'), require('@angular/animations'), require('uuid'), require('rxjs'), require('@sd-angular/core/notify'), require('rxjs/operators'), require('@sd-angular/core/modal'), require('ngx-device-detector'), require('@sd-angular/core/export'), require('object-hash'), require('@sd-angular/core/setting'), require('@sd-angular/core/quick-action'), require('@angular/material/table'), require('@angular/material/progress-spinner'), require('@angular/cdk/table'), require('@angular/cdk/scrolling'), require('@angular/cdk/drag-drop'), require('@angular/material/menu'), require('@angular/material/slider'), require('@angular/material/button'), require('@sd-angular/core/service'), require('@angular/material/tooltip'), require('@angular/material/chips'), require('@angular/material/radio'), require('@angular/material/slide-toggle'), require('@sd-angular/core/form'), require('@angular/material/checkbox'), require('@sd-angular/core/translate'), require('@angular/material/list'), require('@angular/material/divider'), require('@sd-angular/core/utility'), require('@sd-angular/core/group')) :
-    typeof define === 'function' && define.amd ? define('@sd-angular/core/table', ['exports', '@sd-angular/core/common', '@angular/core', '@angular/common', '@angular/forms', '@angular/material/form-field', '@angular/material/icon', '@angular/material/input', '@angular/material/paginator', '@angular/material/sort', '@angular/animations', 'uuid', 'rxjs', '@sd-angular/core/notify', 'rxjs/operators', '@sd-angular/core/modal', 'ngx-device-detector', '@sd-angular/core/export', 'object-hash', '@sd-angular/core/setting', '@sd-angular/core/quick-action', '@angular/material/table', '@angular/material/progress-spinner', '@angular/cdk/table', '@angular/cdk/scrolling', '@angular/cdk/drag-drop', '@angular/material/menu', '@angular/material/slider', '@angular/material/button', '@sd-angular/core/service', '@angular/material/tooltip', '@angular/material/chips', '@angular/material/radio', '@angular/material/slide-toggle', '@sd-angular/core/form', '@angular/material/checkbox', '@sd-angular/core/translate', '@angular/material/list', '@angular/material/divider', '@sd-angular/core/utility', '@sd-angular/core/group'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sd-angular'] = global['sd-angular'] || {}, global['sd-angular'].core = global['sd-angular'].core || {}, global['sd-angular'].core.table = {}), global['sd-angular'].core.common, global.ng.core, global.ng.common, global.ng.forms, global.ng.material.formField, global.ng.material.icon, global.ng.material.input, global.ng.material.paginator, global.ng.material.sort, global.ng.animations, global.uuid, global.rxjs, global['sd-angular'].core.notify, global.rxjs.operators, global['sd-angular'].core.modal, global['ngx-device-detector'], global['sd-angular'].core.export, global['object-hash'], global['sd-angular'].core.setting, global['sd-angular'].core['quick-action'], global.ng.material.table, global.ng.material.progressSpinner, global.ng.cdk.table, global.ng.cdk.scrolling, global.ng.cdk.dragDrop, global.ng.material.menu, global.ng.material.slider, global.ng.material.button, global['sd-angular'].core.service, global.ng.material.tooltip, global.ng.material.chips, global.ng.material.radio, global.ng.material.slideToggle, global['sd-angular'].core.form, global.ng.material.checkbox, global['sd-angular'].core.translate, global.ng.material.list, global.ng.material.divider, global['sd-angular'].core.utility, global['sd-angular'].core.group));
-}(this, (function (exports, common, core, common$1, forms, formField, icon, input, paginator, sort, animations, uuid, rxjs, notify, operators, modal, ngxDeviceDetector, _export, hash, setting, quickAction, table, progressSpinner, table$1, scrolling, dragDrop, menu, slider, button, service, tooltip, chips, radio, slideToggle, form, checkbox, translate, list, divider, utility, group) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@sd-angular/core/common'), require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/icon'), require('@angular/material/input'), require('@angular/material/paginator'), require('@angular/material/sort'), require('@angular/animations'), require('uuid'), require('rxjs'), require('@sd-angular/core/notify'), require('rxjs/operators'), require('@sd-angular/core/modal'), require('ngx-device-detector'), require('@sd-angular/core/export'), require('@sd-angular/core/setting'), require('@sd-angular/core/quick-action'), require('object-hash'), require('@angular/cdk/drag-drop'), require('@angular/material/table'), require('@angular/material/progress-spinner'), require('@angular/cdk/table'), require('@angular/cdk/scrolling'), require('@angular/material/menu'), require('@angular/material/slider'), require('@angular/material/button'), require('@sd-angular/core/service'), require('@angular/material/tooltip'), require('@angular/material/chips'), require('@angular/material/radio'), require('@angular/material/slide-toggle'), require('@sd-angular/core/form'), require('@angular/material/checkbox'), require('@angular/material/list'), require('@angular/material/divider'), require('@sd-angular/core/group')) :
+    typeof define === 'function' && define.amd ? define('@sd-angular/core/table', ['exports', '@sd-angular/core/common', '@angular/core', '@angular/common', '@angular/forms', '@angular/material/form-field', '@angular/material/icon', '@angular/material/input', '@angular/material/paginator', '@angular/material/sort', '@angular/animations', 'uuid', 'rxjs', '@sd-angular/core/notify', 'rxjs/operators', '@sd-angular/core/modal', 'ngx-device-detector', '@sd-angular/core/export', '@sd-angular/core/setting', '@sd-angular/core/quick-action', 'object-hash', '@angular/cdk/drag-drop', '@angular/material/table', '@angular/material/progress-spinner', '@angular/cdk/table', '@angular/cdk/scrolling', '@angular/material/menu', '@angular/material/slider', '@angular/material/button', '@sd-angular/core/service', '@angular/material/tooltip', '@angular/material/chips', '@angular/material/radio', '@angular/material/slide-toggle', '@sd-angular/core/form', '@angular/material/checkbox', '@angular/material/list', '@angular/material/divider', '@sd-angular/core/group'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sd-angular'] = global['sd-angular'] || {}, global['sd-angular'].core = global['sd-angular'].core || {}, global['sd-angular'].core.table = {}), global['sd-angular'].core.common, global.ng.core, global.ng.common, global.ng.forms, global.ng.material.formField, global.ng.material.icon, global.ng.material.input, global.ng.material.paginator, global.ng.material.sort, global.ng.animations, global.uuid, global.rxjs, global['sd-angular'].core.notify, global.rxjs.operators, global['sd-angular'].core.modal, global['ngx-device-detector'], global['sd-angular'].core.export, global['sd-angular'].core.setting, global['sd-angular'].core['quick-action'], global['object-hash'], global.ng.cdk.dragDrop, global.ng.material.table, global.ng.material.progressSpinner, global.ng.cdk.table, global.ng.cdk.scrolling, global.ng.material.menu, global.ng.material.slider, global.ng.material.button, global['sd-angular'].core.service, global.ng.material.tooltip, global.ng.material.chips, global.ng.material.radio, global.ng.material.slideToggle, global['sd-angular'].core.form, global.ng.material.checkbox, global.ng.material.list, global.ng.material.divider, global['sd-angular'].core.group));
+}(this, (function (exports, common, core, common$1, forms, formField, icon, input, paginator, sort, animations, uuid, rxjs, notify, operators, modal, ngxDeviceDetector, _export, setting, quickAction, hash, dragDrop, table, progressSpinner, table$1, scrolling, menu, slider, button, service, tooltip, chips, radio, slideToggle, form, checkbox, list, divider, group) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,8 +27,8 @@
         }
     }
 
-    var hash__default = /*#__PURE__*/_interopDefaultLegacy(hash);
     var hash__namespace = /*#__PURE__*/_interopNamespace(hash);
+    var hash__default = /*#__PURE__*/_interopDefaultLegacy(hash);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -440,7 +440,7 @@
     SdPopupFilter.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-popup-filter',
-                    template: "<sd-modal width=\"500px\" [title]=\"'Filter' | sdTranslate\">\r\n  <sd-modal-body class=\"c-popup-filter\">\r\n    <ng-container *ngFor=\"let column of columns | sdFilterColumn\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <ng-container>\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <mat-slide-toggle [(ngModel)]=\"inlineColumn[column.field]\" color=\"primary\"></mat-slide-toggle>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input\r\n            *ngIf=\"column.type === 'string'\"\r\n            [label]=\"column.title\"\r\n            type=\"text\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            appearance=\"outline\">\r\n          </sd-input>\r\n          <sd-input\r\n            *ngIf=\"column.type === 'number'\"\r\n            [label]=\"column.title\"\r\n            type=\" number\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            appearance=\"outline\">\r\n          </sd-input>\r\n          <sd-select\r\n            *ngIf=\"column.type === 'bool'\"\r\n            [label]=\"column.title\"\r\n            [items]=\"[\r\n              { value: '1', display: column.trueValue || 'True' },\r\n              { value: '0', display: column.falseValue || 'False' }\r\n            ]\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            appearance=\"outline\">\r\n          </sd-select>\r\n          <sd-select\r\n            *ngIf=\"column.type === 'values' && !column?.editor?.autocomplete\"\r\n            [label]=\"column.title\"\r\n            [items]=\"column.option.items\"\r\n            [valueField]=\"column.option.valueField\"\r\n            [displayField]=\"column.option.displayField\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            appearance=\"outline\">\r\n          </sd-select>\r\n          <sd-autocomplete\r\n            *ngIf=\"column.type === 'values' && column?.editor?.autocomplete\"\r\n            [label]=\"column.title\"\r\n            [items]=\"column.option.items\"\r\n            [valueField]=\"column.option.valueField\"\r\n            [displayField]=\"column.option.displayField\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            appearance=\"outline\">\r\n          </sd-autocomplete>\r\n          <sd-date-time\r\n            *ngIf=\"column.type === 'date' || column.type === 'datetime' || column.type === 'time'\"\r\n            [label]=\"column.title\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            type=\"date\"\r\n            appearance=\"outline\">\r\n          </sd-date-time>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <ng-container>\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <mat-slide-toggle [(ngModel)]=\"inlineExternal[item.field]\" color=\"primary\"></mat-slide-toggle>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input\r\n            [label]=\"item.title\"\r\n            *ngIf=\"item.type === 'string'\"\r\n            type=\"text\"\r\n            [(model)]=\"externalFilter[item.field]\"\r\n            appearance=\"outline\">\r\n          </sd-input>\r\n          <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\" appearance=\"outline\">\r\n          </sd-input-number>\r\n          <sd-select\r\n            [label]=\"item.title\"\r\n            *ngIf=\"item.type === 'bool'\"\r\n            [items]=\"[\r\n              { value: '1', display: item.option?.displayOnTrue || 'True' },\r\n              { value: '0', display: item.option?.displayOnFalse || 'False' }\r\n            ]\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            [(model)]=\"externalFilter[item.field]\"\r\n            appearance=\"outline\">\r\n          </sd-select>\r\n          <ng-container *ngIf=\"item.type === 'values'\">\r\n            <sd-select\r\n              *ngIf=\"item.option?.selection === 'MULTIPLE'\"\r\n              [label]=\"item.title\"\r\n              [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\"\r\n              [(model)]=\"externalFilter[item.field]\"\r\n              appearance=\"outline\"\r\n              multiple>\r\n            </sd-select>\r\n            <sd-autocomplete\r\n              *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\"\r\n              [label]=\"item.title\"\r\n              [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\"\r\n              appearance=\"outline\"\r\n              [(model)]=\"externalFilter[item.field]\">\r\n            </sd-autocomplete>\r\n            <sd-select\r\n              *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n              [label]=\"item.title\"\r\n              [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\"\r\n              appearance=\"outline\"\r\n              [(model)]=\"externalFilter[item.field]\"\r\n              filtered=\"true\"\r\n              multiple>\r\n            </sd-select>\r\n            <sd-select\r\n              *ngIf=\"!item.option?.selection\"\r\n              [label]=\"item.title\"\r\n              [items]=\"item.values\"\r\n              [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\"\r\n              appearance=\"outline\"\r\n              [(model)]=\"externalFilter[item.field]\">\r\n            </sd-select>\r\n          </ng-container>\r\n          <sd-date-time\r\n            [label]=\"item.title\"\r\n            *ngIf=\"item.type === 'date' || item.type === 'datetime'\"\r\n            [(model)]=\"externalFilter[item.field]\"\r\n            [type]=\"item.type\"\r\n            appearance=\"outline\">\r\n          </sd-date-time>\r\n          <sd-date-range\r\n            [label]=\"item.title\"\r\n            *ngIf=\"item.type === 'daterange' && externalFilter[item.field]\"\r\n            [(from)]=\"externalFilter[item.field].from\"\r\n            [(to)]=\"externalFilter[item.field].to\"\r\n            [min]=\"item.minDate\"\r\n            [max]=\"item.maxDate\"\r\n            appearance=\"outline\">\r\n          </sd-date-range>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let filter of filterDefs\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <ng-container>\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <mat-slide-toggle [(ngModel)]=\"inlineFilterDef[filter.sdMaterialFilterDef]\" color=\"primary\"> </mat-slide-toggle>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <ng-container *ngTemplateOutlet=\"filter.templateRef; context: { filterDef: filterDef }\"> </ng-container>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <sd-button class=\"mr-auto\" (action)=\"onClear()\" title=\"M\u1EB7c \u0111\u1ECBnh\" size=\"sm\" type=\"link\"> </sd-button>\r\n    <sd-button (action)=\"onApply()\" title=\"\u0110\u1ED3ng \u00FD\" color=\"primary\" size=\"sm\" type=\"fill\"></sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px\" (action)=\"onClear()\" title=\"M\u1EB7c \u0111\u1ECBnh\" width=\"100%\" size=\"sm\" type=\"link\"></sd-button>\r\n    <sd-button\r\n      style=\"flex: 1; padding-left: 5px\"\r\n      (action)=\"onApply()\"\r\n      title=\"\u0110\u1ED3ng \u00FD\"\r\n      color=\"primary\"\r\n      width=\"100%\"\r\n      size=\"sm\"\r\n      type=\"fill\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n",
+                    template: "<sd-modal width=\"500px\" [title]=\"'Filter' | sdTranslate\">\r\n  <sd-modal-body class=\"c-popup-filter\">\r\n    <ng-container *ngFor=\"let column of columns | sdFilterColumn\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <ng-container>\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <mat-slide-toggle [(ngModel)]=\"inlineColumn[column.field]\" color=\"primary\"></mat-slide-toggle>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input\r\n            *ngIf=\"column.type === 'string'\"\r\n            [label]=\"column.title\"\r\n            type=\"text\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            appearance=\"outline\">\r\n          </sd-input>\r\n          <sd-input\r\n            *ngIf=\"column.type === 'number'\"\r\n            [label]=\"column.title\"\r\n            type=\" number\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            appearance=\"outline\">\r\n          </sd-input>\r\n          <sd-select\r\n            *ngIf=\"column.type === 'bool'\"\r\n            [label]=\"column.title\"\r\n            [items]=\"[\r\n              { value: '1', display: column.trueValue || 'True' },\r\n              { value: '0', display: column.falseValue || 'False' }\r\n            ]\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            appearance=\"outline\">\r\n          </sd-select>\r\n          <sd-autocomplete\r\n            *ngIf=\"column.type === 'values' || column.type === 'lazy-values'\"\r\n            [label]=\"column.title\"\r\n            [items]=\"column.option.items\"\r\n            [valueField]=\"column.option.valueField\"\r\n            [displayField]=\"column.option.displayField\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            appearance=\"outline\">\r\n          </sd-autocomplete>\r\n          <sd-date-time\r\n            *ngIf=\"column.type === 'date' || column.type === 'datetime' || column.type === 'time'\"\r\n            [label]=\"column.title\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            type=\"date\"\r\n            appearance=\"outline\">\r\n          </sd-date-time>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <ng-container>\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <mat-slide-toggle [(ngModel)]=\"inlineExternal[item.field]\" color=\"primary\"></mat-slide-toggle>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input\r\n            [label]=\"item.title\"\r\n            *ngIf=\"item.type === 'string'\"\r\n            type=\"text\"\r\n            [(model)]=\"externalFilter[item.field]\"\r\n            appearance=\"outline\">\r\n          </sd-input>\r\n          <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\" appearance=\"outline\">\r\n          </sd-input-number>\r\n          <sd-select\r\n            [label]=\"item.title\"\r\n            *ngIf=\"item.type === 'bool'\"\r\n            [items]=\"[\r\n              { value: '1', display: item.option?.displayOnTrue || 'True' },\r\n              { value: '0', display: item.option?.displayOnFalse || 'False' }\r\n            ]\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            [(model)]=\"externalFilter[item.field]\"\r\n            appearance=\"outline\">\r\n          </sd-select>\r\n          <ng-container *ngIf=\"item.type === 'values'\">\r\n            <sd-select\r\n              *ngIf=\"item.option?.selection === 'MULTIPLE'\"\r\n              [label]=\"item.title\"\r\n              [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\"\r\n              [(model)]=\"externalFilter[item.field]\"\r\n              appearance=\"outline\"\r\n              multiple>\r\n            </sd-select>\r\n            <sd-autocomplete\r\n              *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\"\r\n              [label]=\"item.title\"\r\n              [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\"\r\n              appearance=\"outline\"\r\n              [(model)]=\"externalFilter[item.field]\">\r\n            </sd-autocomplete>\r\n            <sd-select\r\n              *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n              [label]=\"item.title\"\r\n              [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\"\r\n              appearance=\"outline\"\r\n              [(model)]=\"externalFilter[item.field]\"\r\n              filtered=\"true\"\r\n              multiple>\r\n            </sd-select>\r\n            <sd-select\r\n              *ngIf=\"!item.option?.selection\"\r\n              [label]=\"item.title\"\r\n              [items]=\"item.values\"\r\n              [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\"\r\n              appearance=\"outline\"\r\n              [(model)]=\"externalFilter[item.field]\">\r\n            </sd-select>\r\n          </ng-container>\r\n          <sd-date-time\r\n            [label]=\"item.title\"\r\n            *ngIf=\"item.type === 'date' || item.type === 'datetime'\"\r\n            [(model)]=\"externalFilter[item.field]\"\r\n            [type]=\"item.type\"\r\n            appearance=\"outline\">\r\n          </sd-date-time>\r\n          <sd-date-range\r\n            [label]=\"item.title\"\r\n            *ngIf=\"item.type === 'daterange' && externalFilter[item.field]\"\r\n            [(from)]=\"externalFilter[item.field].from\"\r\n            [(to)]=\"externalFilter[item.field].to\"\r\n            [min]=\"item.minDate\"\r\n            [max]=\"item.maxDate\"\r\n            appearance=\"outline\">\r\n          </sd-date-range>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let filter of filterDefs\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <ng-container>\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <mat-slide-toggle [(ngModel)]=\"inlineFilterDef[filter.sdMaterialFilterDef]\" color=\"primary\"> </mat-slide-toggle>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <ng-container *ngTemplateOutlet=\"filter.templateRef; context: { filterDef: filterDef }\"> </ng-container>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <sd-button class=\"mr-auto\" (action)=\"onClear()\" title=\"M\u1EB7c \u0111\u1ECBnh\" size=\"sm\" type=\"link\"> </sd-button>\r\n    <sd-button (action)=\"onApply()\" title=\"\u0110\u1ED3ng \u00FD\" color=\"primary\" size=\"sm\" type=\"fill\"></sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px\" (action)=\"onClear()\" title=\"M\u1EB7c \u0111\u1ECBnh\" width=\"100%\" size=\"sm\" type=\"link\"></sd-button>\r\n    <sd-button\r\n      style=\"flex: 1; padding-left: 5px\"\r\n      (action)=\"onApply()\"\r\n      title=\"\u0110\u1ED3ng \u00FD\"\r\n      color=\"primary\"\r\n      width=\"100%\"\r\n      size=\"sm\"\r\n      type=\"fill\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [".c-checkable{width:50px}.c-filterable{flex:1}::ng-deep sd-modal-body.c-popup-filter .mat-form-field-wrapper{padding-bottom:0}"]
                 },] }
@@ -457,8 +457,8 @@
     };
 
     var _subscription;
-    var SdGridFilter = /** @class */ (function () {
-        function SdGridFilter(ref, deviceService) {
+    var SdTableFilter = /** @class */ (function () {
+        function SdTableFilter(ref, deviceService) {
             var _this = this;
             this.ref = ref;
             this.deviceService = deviceService;
@@ -494,21 +494,21 @@
             this.isMobileOrTablet = !this.deviceService.isDesktop();
             this.ref.markForCheck();
         }
-        Object.defineProperty(SdGridFilter.prototype, "_filter", {
+        Object.defineProperty(SdTableFilter.prototype, "_filter", {
             set: function (filter) {
                 this.filter = filter;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SdGridFilter.prototype, "_externalFilters", {
+        Object.defineProperty(SdTableFilter.prototype, "_externalFilters", {
             set: function (value) {
                 this.externalFilters = value || [];
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(SdGridFilter.prototype, "_filterRegister", {
+        Object.defineProperty(SdTableFilter.prototype, "_filterRegister", {
             set: function (value) {
                 this.filterRegister = value;
                 this.filterRegisterChange.next(this.filterRegister);
@@ -516,7 +516,7 @@
             enumerable: false,
             configurable: true
         });
-        SdGridFilter.prototype.ngAfterViewInit = function () {
+        SdTableFilter.prototype.ngAfterViewInit = function () {
             var _this = this;
             __classPrivateFieldGet(this, _subscription).add(this.filterRegisterChange.pipe(operators.startWith(this.filterRegister)).subscribe(function (filterRegister) {
                 if (_this.filterRegister) {
@@ -537,25 +537,25 @@
                 }
             }));
         };
-        SdGridFilter.prototype.ngOnDestroy = function () {
+        SdTableFilter.prototype.ngOnDestroy = function () {
             __classPrivateFieldGet(this, _subscription).unsubscribe();
         };
-        return SdGridFilter;
+        return SdTableFilter;
     }());
     _subscription = new WeakMap();
-    SdGridFilter.decorators = [
+    SdTableFilter.decorators = [
         { type: core.Component, args: [{
-                    selector: 'sd-grid-filter',
-                    template: "<ng-container *ngIf=\"!filter?.disabled\">\r\n  <ng-container *ngIf=\"filter?.enableCollapse;else noCollapse\">\r\n    <sd-group class=\"p-12\" [isExpanded]=\"false\" title=\"T\u00ECm ki\u1EBFm\" expandable>\r\n      <div sdGroupBody>\r\n        <ng-container *ngTemplateOutlet=\"noCollapse\"></ng-container>\r\n      </div>\r\n    </sd-group>\r\n  </ng-container>\r\n  <ng-template #noCollapse>\r\n    <div\r\n      *ngIf=\"!isMobileOrTablet && ((columns?.length && !filter?.inlineColumn) || externalFilters?.length || filterDefs?.length)\"\r\n      class=\"row mx-0\">\r\n      <ng-container *ngIf=\"filter?.sorts?.length\">\r\n        <ng-container *ngFor=\"let field of filter?.sorts\">\r\n          <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n            <ng-container *ngFor=\"let item of columns | sdFilterColumn:field\">\r\n              <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"externalFilters?.length\">\r\n            <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal:field\">\r\n              <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngFor=\"let item of filterDefs\">\r\n            <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef] && item.sdMaterialFilterDef === field\"\r\n              class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n              <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n              </ng-container>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!filter?.sorts?.length\">\r\n        <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n          <ng-container *ngFor=\"let item of columns | sdFilterColumn\">\r\n            <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"externalFilters?.length\">\r\n          <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n            <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let item of filterDefs\">\r\n          <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n            <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <ng-template #filterColumn let-item=\"item\">\r\n      <div *ngIf=\"inlineColumn[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n        <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"columnFilter[item.field]\"\r\n          (keyupEnter)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-input>\r\n        <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"columnFilter[item.field]\"\r\n          (keyupEnter)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-input-number>\r\n        <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n          [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-select>\r\n        <sd-select *ngIf=\"item.type === 'values' && item?.option?.selection !== 'AUTOCOMPLETE'\"\r\n          [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\" [disabled]=\"item.filter?.disabled\"\r\n          [multiple]=\"item?.option?.selection === 'MULTIPLE' || item?.item?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n          [filtered]=\"item?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" appearance=\"outline\">\r\n        </sd-select>\r\n        <sd-autocomplete *ngIf=\"item.type === 'values' && item?.option?.selection === 'AUTOCOMPLETE'\"\r\n          [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\" [displayField]=\"item.option?.displayField\"\r\n          [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\" [disabled]=\"item.filter?.disabled\"\r\n          appearance=\"outline\">\r\n        </sd-autocomplete>\r\n        <sd-date-time *ngIf=\"item.type === 'date' || item.type === 'datetime' || item.type === 'time'\"\r\n          [label]=\"item.title\" [(model)]=\"columnFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\"\r\n          appearance=\"outline\">\r\n        </sd-date-time>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template #filterExternal let-item=\"item\">\r\n      <div *ngIf=\"inlineExternal[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n        <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"externalFilter[item.field]\"\r\n          (keyupEnter)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-input>\r\n        <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\"\r\n          (keyupEnter)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-input-number>\r\n        <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-select>\r\n        <ng-container *ngIf=\"item.type === 'values' && item.option\">\r\n          <sd-select *ngIf=\"item.option?.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n            [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n            [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" [selectAll]=\"item.option.selectAll\"\r\n            appearance=\"outline\" multiple>\r\n          </sd-select>\r\n          <sd-autocomplete *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\"\r\n            [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n            [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n          </sd-autocomplete>\r\n          <sd-select *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\"\r\n            [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n            [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" filtered=\"true\" appearance=\"outline\"\r\n            multiple>\r\n          </sd-select>\r\n          <sd-select *ngIf=\"!item.option?.selection\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n            [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n            [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n          </sd-select>\r\n        </ng-container>\r\n        <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date' || item.type ==='datetime'\"\r\n          [(model)]=\"externalFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-date-time>\r\n        <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterange' && externalFilter[item.field]\"\r\n          [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n          [max]=\"item.maxDate\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-date-range>\r\n      </div>\r\n    </ng-template>\r\n    <sd-popup-filter [filterRegister]=\"filterRegister\" [columns]=\"columns\"\r\n      [externalFilters]=\"externalFilters\" [filterDefs]=\"filterDefs\">\r\n    </sd-popup-filter>\r\n  </ng-template>\r\n</ng-container>",
+                    selector: 'sd-table-filter',
+                    template: "<ng-container *ngIf=\"!filter?.disabled\">\r\n  <ng-container *ngIf=\"filter?.enableCollapse;else noCollapse\">\r\n    <sd-group class=\"p-12\" [isExpanded]=\"false\" title=\"T\u00ECm ki\u1EBFm\" expandable>\r\n      <div sdGroupBody>\r\n        <ng-container *ngTemplateOutlet=\"noCollapse\"></ng-container>\r\n      </div>\r\n    </sd-group>\r\n  </ng-container>\r\n  <ng-template #noCollapse>\r\n    <div\r\n      *ngIf=\"!isMobileOrTablet && (externalFilters?.length || filterDefs?.length)\"\r\n      class=\"row mx-0\">\r\n      <ng-container *ngIf=\"filter?.sorts?.length\">\r\n        <ng-container *ngFor=\"let field of filter?.sorts\">\r\n          <ng-container *ngIf=\"externalFilters?.length\">\r\n            <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal:field\">\r\n              <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngFor=\"let item of filterDefs\">\r\n            <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef] && item.sdMaterialFilterDef === field\"\r\n              class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n              <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n              </ng-container>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!filter?.sorts?.length\">\r\n        <ng-container *ngIf=\"externalFilters?.length\">\r\n          <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n            <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let item of filterDefs\">\r\n          <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n            <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <ng-template #filterExternal let-item=\"item\">\r\n      <div *ngIf=\"inlineExternal[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n        <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"externalFilter[item.field]\"\r\n          (keyupEnter)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-input>\r\n        <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\"\r\n          (keyupEnter)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-input-number>\r\n        <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-select>\r\n        <ng-container *ngIf=\"(item.type === 'values' || item.type === 'lazy-values') && item.option\">\r\n          <sd-select *ngIf=\"item.option?.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n            [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n            [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" [selectAll]=\"item.option.selectAll\"\r\n            appearance=\"outline\" multiple>\r\n          </sd-select>\r\n          <sd-autocomplete *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\"\r\n            [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n            [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n          </sd-autocomplete>\r\n          <sd-select *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\"\r\n            [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n            [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" filtered=\"true\" appearance=\"outline\"\r\n            multiple>\r\n          </sd-select>\r\n          <sd-select *ngIf=\"!item.option?.selection\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n            [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n            [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n          </sd-select>\r\n        </ng-container>\r\n        <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date' || item.type ==='datetime'\"\r\n          [(model)]=\"externalFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-date-time>\r\n        <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterange' && externalFilter[item.field]\"\r\n          [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n          [max]=\"item.maxDate\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-date-range>\r\n      </div>\r\n    </ng-template>\r\n    <sd-popup-filter [filterRegister]=\"filterRegister\" [columns]=\"columns\"\r\n      [externalFilters]=\"externalFilters\" [filterDefs]=\"filterDefs\">\r\n    </sd-popup-filter>\r\n  </ng-template>\r\n</ng-container>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [":host{display:block;padding-bottom:10px;padding-left:0;padding-right:0}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:0}"]
                 },] }
     ];
-    SdGridFilter.ctorParameters = function () { return [
+    SdTableFilter.ctorParameters = function () { return [
         { type: core.ChangeDetectorRef },
         { type: ngxDeviceDetector.DeviceDetectorService }
     ]; };
-    SdGridFilter.propDecorators = {
+    SdTableFilter.propDecorators = {
         popupFilter: [{ type: core.ViewChild, args: [SdPopupFilter,] }],
         _filter: [{ type: core.Input, args: ['filter',] }],
         columns: [{ type: core.Input }],
@@ -638,239 +638,35 @@
         { type: core.TemplateRef }
     ]; };
 
-    var _COLUMNS, _cache, _getKey, _default, _load, _get, _set, _remove;
+    var _COLUMNS, _prefix, _getSetting, _default;
     var SdTableConfigurationService = /** @class */ (function () {
         function SdTableConfigurationService(settingService, gridMaterialConfiguration) {
             var _this = this;
             this.settingService = settingService;
             this.gridMaterialConfiguration = gridMaterialConfiguration;
             _COLUMNS.set(this, {
-                EDITORVALIDATION: 'sdEditorValidation',
-                EDITOR: 'sdEditor',
                 SUBINFORMATION: 'sdSubInformationAction',
                 COMMAND: 'sdCommand',
                 SELECTION: 'sdSelection',
                 GROUP: 'sdGroup',
             });
-            _cache.set(this, {});
-            this.init = function (key, gridOption) {
-                if (!__classPrivateFieldGet(_this, _cache)[key]) {
-                    var subject_1 = new rxjs.Subject();
-                    __classPrivateFieldGet(_this, _cache)[key] = {
-                        load: __classPrivateFieldGet(_this, _load).call(_this, gridOption, subject_1),
-                        get: __classPrivateFieldGet(_this, _get).call(_this, gridOption),
-                        set: function (configuration) {
-                            configuration = __classPrivateFieldGet(_this, _set).call(_this, gridOption, configuration);
-                            subject_1.next(Object.assign({}, configuration));
-                            return configuration;
-                        },
-                        remove: function () {
-                            __classPrivateFieldGet(_this, _remove).call(_this, gridOption)();
-                            subject_1.next(__classPrivateFieldGet(_this, _default).call(_this, gridOption));
-                        },
-                        observer: subject_1,
-                    };
+            _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 __classPrivateFieldGet(_this, _cache)[key];
-            };
-            _getKey.set(this, function (gridOption) {
-                var _a, _b;
-                var prefix = 'c9e94836-6ace-4aeb-b148-4f0be63589ee';
-                if (!((_a = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _a === void 0 ? void 0 : _a.key) && !(gridOption === null || gridOption === void 0 ? void 0 : gridOption.key)) {
-                    return null;
-                }
-                return hash__default['default']({
-                    prefix: prefix,
-                    key: ((_b = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _b === void 0 ? void 0 : _b.key) || !(gridOption === null || gridOption === void 0 ? void 0 : gridOption.key),
+                return _this.settingService.create({ prefix: __classPrivateFieldGet(_this, _prefix), key: gridOption.key }, {
+                    default: __classPrivateFieldGet(_this, _default).call(_this, gridOption),
                 });
             });
-            _default.set(this, function (gridOption) {
-                var _a;
-                var columns = ((_a = gridOption === null || gridOption === void 0 ? void 0 : gridOption.columns) === null || _a === void 0 ? void 0 : _a.filter(function (e) { return !e.hidden; }).map(function (e) { return ({
-                    origin: {
-                        field: e.field,
-                        title: e.title,
-                        width: e.width,
-                        invisible: e.invisible,
-                    },
-                    invisible: e.invisible,
-                    fixed: false,
-                }); })) || [];
-                return {
-                    columns: columns,
-                };
-            });
-            _load.set(this, function (gridOption, subject) {
-                return function () { return __awaiter(_this, void 0, void 0, function () {
-                    var get, configuration;
-                    return __generator(this, function (_e) {
-                        switch (_e.label) {
-                            case 0:
-                                get = __classPrivateFieldGet(this, _get).call(this, gridOption);
-                                return [4 /*yield*/, get()];
-                            case 1:
-                                configuration = _e.sent();
-                                subject.next(Object.assign({}, configuration));
-                                return [2 /*return*/];
-                        }
-                    });
-                }); };
-            });
-            _get.set(this, function (gridOption) {
-                return function () { return __awaiter(_this, void 0, void 0, function () {
-                    var key, columns, config, configuration, _e, get, remove, _f, get, remove;
-                    return __generator(this, function (_g) {
-                        switch (_g.label) {
-                            case 0:
-                                key = __classPrivateFieldGet(this, _getKey).call(this, gridOption);
-                                if (!key) {
-                                    return [2 /*return*/, __classPrivateFieldGet(this, _default).call(this, gridOption)];
-                                }
-                                columns = gridOption.columns, config = gridOption.config;
-                                if (!((config === null || config === void 0 ? void 0 : config.storage) === 'server')) return [3 /*break*/, 2];
-                                _e = this.settingService.createServer(key, {
-                                    args: config === null || config === void 0 ? void 0 : config.args,
-                                }), get = _e.get, remove = _e.remove;
-                                return [4 /*yield*/, get().catch(function () { return undefined; })];
-                            case 1:
-                                configuration = _g.sent();
-                                if (!(configuration === null || configuration === void 0 ? void 0 : configuration.columns)) {
-                                    remove().catch(console.error);
-                                    return [2 /*return*/, __classPrivateFieldGet(this, _default).call(this, gridOption)];
-                                }
-                                return [3 /*break*/, 3];
-                            case 2:
-                                _f = this.settingService.create(key, {
-                                    type: config === null || config === void 0 ? void 0 : config.storage,
-                                    args: config === null || config === void 0 ? void 0 : config.args,
-                                }), get = _f.get, remove = _f.remove;
-                                configuration = get();
-                                if (!(configuration === null || configuration === void 0 ? void 0 : configuration.columns)) {
-                                    remove();
-                                    return [2 /*return*/, __classPrivateFieldGet(this, _default).call(this, gridOption)];
-                                }
-                                _g.label = 3;
-                            case 3:
-                                configuration.columns = configuration.columns.filter(function (column) { return columns.some(function (e) { return !e.hidden && e.field === column.origin.field; }); });
-                                // Thêm những column mới vào storage nếu có
-                                columns.forEach(function (column) {
-                                    var col = configuration.columns.find(function (e) { var _a; return ((_a = e.origin) === null || _a === void 0 ? void 0 : _a.field) === column.field; });
-                                    if (!col) {
-                                        configuration.columns.push({
-                                            origin: {
-                                                field: column.field,
-                                                title: column.title,
-                                                width: column.width,
-                                                invisible: column.invisible,
-                                            },
-                                            invisible: column.invisible,
-                                            fixed: false,
-                                        });
-                                    }
-                                    else {
-                                        col.origin = {
-                                            field: column.field,
-                                            title: column.title,
-                                            width: column.width,
-                                            invisible: column.invisible,
-                                        };
-                                    }
-                                });
-                                return [2 /*return*/, configuration];
-                        }
-                    });
-                }); };
-            });
-            _set.set(this, function (gridOption, configuration) {
-                var _a, _b, _c, _d;
-                var key = __classPrivateFieldGet(_this, _getKey).call(_this, gridOption);
-                if (key) {
-                    if (((_a = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _a === void 0 ? void 0 : _a.storage) === 'server') {
-                        var set = _this.settingService.createServer(key, {
-                            args: (_b = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _b === void 0 ? void 0 : _b.args,
-                        }).set;
-                        set(configuration);
-                    }
-                    else {
-                        var set = _this.settingService.create(key, {
-                            type: (_c = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _c === void 0 ? void 0 : _c.storage,
-                            args: (_d = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _d === void 0 ? void 0 : _d.args,
-                        }).set;
-                        set(configuration);
-                    }
+            this.loadConfiguration = function (gridOption) {
+                if (!(gridOption === null || gridOption === void 0 ? void 0 : gridOption.key)) {
+                    return __classPrivateFieldGet(_this, _default).call(_this, gridOption);
                 }
-                return JSON.parse(JSON.stringify(configuration));
-            });
-            _remove.set(this, function (gridOption) {
-                return function () {
-                    var _a, _b, _c, _d;
-                    var key = __classPrivateFieldGet(_this, _getKey).call(_this, gridOption);
-                    if (key) {
-                        if (((_a = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _a === void 0 ? void 0 : _a.storage) === 'server') {
-                            var remove = _this.settingService.createServer(key, {
-                                args: (_b = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _b === void 0 ? void 0 : _b.args,
-                            }).remove;
-                            remove();
-                        }
-                        else {
-                            var remove = _this.settingService.create(key, {
-                                type: (_c = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _c === void 0 ? void 0 : _c.storage,
-                                args: (_d = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _d === void 0 ? void 0 : _d.args,
-                            }).remove;
-                            remove();
-                        }
-                    }
-                };
-            });
-            // get = async (gridOption: SdGridMaterialOption): Promise<SdGridConfiguration> => {
-            //   if (!gridOption?.key) {
-            //     return this.#getDefaultConfiguration(gridOption);
-            //   }
-            //   const { key, columns } = gridOption;
-            //   const configuration: SdGridConfiguration = await this.settingService.get(this.#getKey(key)).catch(() => undefined);
-            //   if (!configuration?.columns) {
-            //     this.settingService.remove(this.#getKey(key)).catch(console.error);
-            //     return this.#getDefaultConfiguration(gridOption);
-            //   }
-            //   configuration.columns = configuration.columns
-            //     .filter(column => columns.some(e => !e.hidden && e.field === column.origin.field));
-            //   // Thêm những column mới vào storage nếu có
-            //   columns.forEach(column => {
-            //     const col = configuration.columns.find(e => e.origin?.field === column.field);
-            //     if (!col) {
-            //       configuration.columns.push({
-            //         origin: {
-            //           field: column.field,
-            //           title: column.title,
-            //           width: column.width,
-            //           invisible: column.invisible,
-            //         },
-            //         invisible: column.invisible,
-            //         fixed: false
-            //       });
-            //     } else {
-            //       col.origin = {
-            //         field: column.field,
-            //         title: column.title,
-            //         width: column.width,
-            //         invisible: column.invisible
-            //       };
-            //     }
-            //   });
-            //   return configuration;
-            // }
-            // set = async (key: string, configuration: SdGridConfiguration): Promise<SdGridConfiguration> => {
-            //   if (key) {
-            //     this.settingService.set(this.#getKey(key), configuration);
-            //   }
-            //   return configuration;
-            // }
-            // remove = (key: string) => {
-            //   if (key) {
-            //     this.settingService.remove(this.#getKey(key));
-            //   }
-            // }
-            this.generateConfigurationResult = function (configuration, gridOption, sdSubInformation) {
+                var setting = __classPrivateFieldGet(_this, _getSetting).call(_this, gridOption);
+                return setting.get();
+            };
+            this.loadConfigurationResult = function (gridOption, configuration) {
                 var _a, _b;
                 var result = {
                     column: {},
@@ -883,7 +679,7 @@
                     displayedFooters: [],
                     multipleHeader: false,
                 };
-                var _e = gridOption || {}, selector = _e.selector, commands = _e.commands, group = _e.group;
+                var _c = gridOption || {}, selector = _c.selector, commands = _c.commands, group = _c.group;
                 if (selector === null || selector === void 0 ? void 0 : selector.visible) {
                     result.firstHeaders.push(__classPrivateFieldGet(_this, _COLUMNS).SELECTION);
                     result.displayedColumns.push(__classPrivateFieldGet(_this, _COLUMNS).SELECTION);
@@ -922,7 +718,7 @@
                         }
                     }
                 });
-                if (sdSubInformation === null || sdSubInformation === void 0 ? void 0 : sdSubInformation.templateRef) {
+                if (gridOption.expand) {
                     result.firstHeaders.push(__classPrivateFieldGet(_this, _COLUMNS).SUBINFORMATION);
                     result.displayedColumns.push(__classPrivateFieldGet(_this, _COLUMNS).SUBINFORMATION);
                 }
@@ -931,10 +727,29 @@
                 result.displayedFooters = result.displayedColumns.filter(function (val) { return val !== __classPrivateFieldGet(_this, _COLUMNS).SUBINFORMATION; });
                 return result;
             };
+            this.init = function (gridOption) {
+                return __classPrivateFieldGet(_this, _getSetting).call(_this, gridOption);
+            };
+            _default.set(this, function (gridOption) {
+                var _a;
+                var columns = ((_a = gridOption === null || gridOption === void 0 ? void 0 : gridOption.columns) === null || _a === void 0 ? void 0 : _a.filter(function (e) { return !e.hidden; }).map(function (e) { return ({
+                    origin: {
+                        field: e.field,
+                        title: e.title,
+                        width: e.width,
+                        invisible: e.invisible,
+                    },
+                    invisible: e.invisible,
+                    fixed: false,
+                }); })) || [];
+                return {
+                    columns: columns,
+                };
+            });
         }
         return SdTableConfigurationService;
     }());
-    _COLUMNS = new WeakMap(), _cache = new WeakMap(), _getKey = new WeakMap(), _default = new WeakMap(), _load = new WeakMap(), _get = new WeakMap(), _set = new WeakMap(), _remove = new WeakMap();
+    _COLUMNS = new WeakMap(), _prefix = new WeakMap(), _getSetting = new WeakMap(), _default = new WeakMap();
     SdTableConfigurationService.decorators = [
         { type: core.Injectable }
     ];
@@ -944,10 +759,10 @@
     ]; };
 
     var MapToSdTableItem = function (item) { return ({
-        current: JSON.parse(JSON.stringify(item)),
-        origin: item,
+        data: item,
         meta: {
             id: hash__namespace(item),
+            display: {},
             expand: {
                 isExpanding: false,
                 isExpanded: false,
@@ -957,83 +772,14 @@
         },
     }); };
 
-    var _prefix, _cache$1;
-    var SdColumnValuesPipe = /** @class */ (function () {
-        function SdColumnValuesPipe() {
-            var _this = this;
-            _prefix.set(this, 'a1e67660-8aa2-4c11-b02d-71a32188719f');
-            _cache$1.set(this, {});
-            this.transform = function (value, column) { return __awaiter(_this, void 0, void 0, function () {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, items, valueField, displayField, selection, remain, key, isMultible, values, result, result;
-                return __generator(this, function (_m) {
-                    switch (_m.label) {
-                        case 0:
-                            if (column.type !== 'values' || !((_a = column.option) === null || _a === void 0 ? void 0 : _a.items) || !((_b = column.option) === null || _b === void 0 ? void 0 : _b.valueField) || !((_c = column.option) === null || _c === void 0 ? void 0 : _c.displayField)) {
-                                return [2 /*return*/, value];
-                            }
-                            _l = column.option, items = _l.items, valueField = _l.valueField, displayField = _l.displayField, selection = _l.selection, remain = __rest(_l, ["items", "valueField", "displayField", "selection"]);
-                            key = hash__default['default']({
-                                prefix: __classPrivateFieldGet(this, _prefix),
-                                valueField: valueField,
-                                displayField: displayField,
-                                selection: selection,
-                                remain: remain,
-                                value: value
-                            });
-                            isMultible = ['MULTIPLE', 'MULTIPLEAUTOCOMPLETE', 'MULTIPLE_EDITOR', 'MULTIPLEAUTOCOMPLETE_EDITOR'].includes(selection);
-                            if (!(typeof (items) === 'function')) return [3 /*break*/, 3];
-                            if (!!__classPrivateFieldGet(this, _cache$1)[key]) return [3 /*break*/, 2];
-                            return [4 /*yield*/, items(value, true)];
-                        case 1:
-                            values = _m.sent();
-                            result = '';
-                            if (isMultible && Array.isArray(value)) {
-                                result = ((_e = (_d = values === null || values === void 0 ? void 0 : values.filter(function (e) { return value === null || value === void 0 ? void 0 : value.includes(e === null || e === void 0 ? void 0 : e[valueField]); })) === null || _d === void 0 ? void 0 : _d.map(function (e) { return e === null || e === void 0 ? void 0 : e[displayField]; })) === null || _e === void 0 ? void 0 : _e.join(', ')) || (value === null || value === void 0 ? void 0 : value.join(', '));
-                            }
-                            else {
-                                result = ((_f = values === null || values === void 0 ? void 0 : values.find(function (e) { return (e === null || e === void 0 ? void 0 : e[valueField]) === value; })) === null || _f === void 0 ? void 0 : _f[displayField]) || value;
-                            }
-                            __classPrivateFieldGet(this, _cache$1)[key] = {
-                                result: result
-                            };
-                            _m.label = 2;
-                        case 2: return [3 /*break*/, 4];
-                        case 3:
-                            if (!__classPrivateFieldGet(this, _cache$1)[key]) {
-                                result = '';
-                                if (isMultible && Array.isArray(value)) {
-                                    result = (_j = (_h = (_g = items === null || items === void 0 ? void 0 : items.filter(function (e) { return value === null || value === void 0 ? void 0 : value.includes(e === null || e === void 0 ? void 0 : e[valueField]); })) === null || _g === void 0 ? void 0 : _g.map(function (e) { return e === null || e === void 0 ? void 0 : e[displayField]; })) === null || _h === void 0 ? void 0 : _h.join(', ')) !== null && _j !== void 0 ? _j : value === null || value === void 0 ? void 0 : value.join(', ');
-                                }
-                                else {
-                                    result = ((_k = items === null || items === void 0 ? void 0 : items.find(function (e) { return (e === null || e === void 0 ? void 0 : e[valueField]) === value; })) === null || _k === void 0 ? void 0 : _k[displayField]) || value;
-                                }
-                                __classPrivateFieldGet(this, _cache$1)[key] = {
-                                    result: result
-                                };
-                            }
-                            _m.label = 4;
-                        case 4: return [2 /*return*/, __classPrivateFieldGet(this, _cache$1)[key].result];
-                    }
-                });
-            }); };
-        }
-        return SdColumnValuesPipe;
-    }());
-    _prefix = new WeakMap(), _cache$1 = new WeakMap();
-    SdColumnValuesPipe.decorators = [
-        { type: core.Pipe, args: [{
-                    name: 'columnValues'
-                },] }
-    ];
-
-    var _filterConfiguration, _filterValue, _cache$2, _defaultConfiguration, _defaultValue, _initConfiguration, _initValue;
+    var _filterConfiguration, _filterValue, _cache, _defaultConfiguration, _defaultValue, _initConfiguration, _initValue;
     var SdTableFilterService = /** @class */ (function () {
         function SdTableFilterService(settingService) {
             var _this = this;
             this.settingService = settingService;
             _filterConfiguration.set(this, 'GRID-FILTER-CONFIGURATION');
             _filterValue.set(this, 'GRID-FILTER-VALUE');
-            _cache$2.set(this, {});
+            _cache.set(this, {});
             this.register = function (filter, args) {
                 var cacheSession = false;
                 var id = args.id, columns = args.columns, externalFilters = args.externalFilters;
@@ -1046,7 +792,7 @@
                 if (!(filter === null || filter === void 0 ? void 0 : filter.key)) {
                     cacheSession = true; // Nếu không có key thì chỉ lưu theo session
                 }
-                if (!__classPrivateFieldGet(_this, _cache$2)[key]) {
+                if (!__classPrivateFieldGet(_this, _cache)[key]) {
                     // Setting của filter configuration
                     var filterConfiguration_1 = _this.settingService.create({
                         prefix: __classPrivateFieldGet(_this, _filterConfiguration),
@@ -1067,7 +813,7 @@
                     });
                     // Lấy giá trị value merge với giá trị default của args nếu như args có thay đổi
                     filterValue_1.set(__classPrivateFieldGet(_this, _initValue).call(_this, args, filterValue_1.get()));
-                    __classPrivateFieldGet(_this, _cache$2)[key] = {
+                    __classPrivateFieldGet(_this, _cache)[key] = {
                         configuration: {
                             get: function () {
                                 return filterConfiguration_1.get();
@@ -1123,7 +869,7 @@
                         },
                     };
                 }
-                return __classPrivateFieldGet(_this, _cache$2)[key];
+                return __classPrivateFieldGet(_this, _cache)[key];
             };
             _defaultConfiguration.set(this, function (args) {
                 var e_1, _r, e_2, _s, e_3, _t;
@@ -1368,7 +1114,7 @@
         }
         return SdTableFilterService;
     }());
-    _filterConfiguration = new WeakMap(), _filterValue = new WeakMap(), _cache$2 = new WeakMap(), _defaultConfiguration = new WeakMap(), _defaultValue = new WeakMap(), _initConfiguration = new WeakMap(), _initValue = new WeakMap();
+    _filterConfiguration = new WeakMap(), _filterValue = new WeakMap(), _cache = new WeakMap(), _defaultConfiguration = new WeakMap(), _defaultValue = new WeakMap(), _initConfiguration = new WeakMap(), _initValue = new WeakMap();
     SdTableFilterService.decorators = [
         { type: core.Injectable }
     ];
@@ -1376,16 +1122,88 @@
         { type: setting.SdSettingService }
     ]; };
 
-    var _gridId, _optionChanges, _localItems, _paginator, _sort, _subscription$1, _reload, _loadCompleted, _initCellDef, _initFilterDef, _initFooterDef, _filterExportInfo, _initConfiguration$1, _loadFilterRegister, _filterLocal, _getFilter, _load$1, _render, _exportedItems, _allColumns, _allExportedColumns, _onExport, _getExportColumns, _updateSelectedItems;
+    var _setting;
+    var SdPopupConfiguration = /** @class */ (function () {
+        function SdPopupConfiguration(ref, notifyService, gridConfigurationService) {
+            var _this = this;
+            this.ref = ref;
+            this.notifyService = notifyService;
+            this.gridConfigurationService = gridConfigurationService;
+            this.changes = new core.EventEmitter();
+            _setting.set(this, void 0);
+            this.isCreatingColumn = false;
+            this.selected = {};
+            this.disabledDrag = true;
+            this.open = function () { return __awaiter(_this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    __classPrivateFieldSet(this, _setting, this.gridConfigurationService.init(this.gridOption));
+                    this.configuration = __classPrivateFieldGet(this, _setting).get();
+                    this.modal.open();
+                    return [2 /*return*/];
+                });
+            }); };
+            this.onSave = function () {
+                __classPrivateFieldGet(_this, _setting).set(_this.configuration);
+                _this.modal.close();
+                _this.ref.detectChanges();
+            };
+            this.onReset = function () { return __awaiter(_this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    this.notifyService.confirm('Xác nhận đưa tất cả thiết lập về mặc định').then(function () {
+                        __classPrivateFieldGet(_this, _setting).remove();
+                        _this.modal.close();
+                        _this.ref.detectChanges();
+                    });
+                    return [2 /*return*/];
+                });
+            }); };
+        }
+        SdPopupConfiguration.prototype.ngOnInit = function () { };
+        SdPopupConfiguration.prototype.mouseUp = function (event) {
+            this.disabledDrag = true;
+        };
+        SdPopupConfiguration.prototype.dropTable = function (event) {
+            dragDrop.moveItemInArray(this.configuration.columns, event.previousIndex, event.currentIndex);
+            this.table.renderRows();
+        };
+        SdPopupConfiguration.prototype.handleMouseDown = function () {
+            this.disabledDrag = false;
+        };
+        SdPopupConfiguration.prototype.handleMouseUp = function () {
+            this.disabledDrag = true;
+        };
+        return SdPopupConfiguration;
+    }());
+    _setting = new WeakMap();
+    SdPopupConfiguration.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'sd-popup-configuration',
+                    template: "<sd-modal width=\"sm\" [title]=\"'Configuration' | sdTranslate\" #modal>\r\n  <sd-modal-body *ngIf=\"configuration\">\r\n    <div class=\"c-container\">\r\n      <div class=\"c-table\" style=\"max-height: 70vh\">\r\n        <table\r\n          #table\r\n          mat-table\r\n          [dataSource]=\"configuration.columns\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"configuration.columns\"\r\n          (cdkDropListDropped)=\"dropTable($event)\">\r\n          >\r\n          <ng-container matColumnDef=\"stt\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 50px\">#</th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n              <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\r\n                <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                  <path\r\n                    d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"></path>\r\n                  <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n                </svg>\r\n              </div>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"title\">\r\n            <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>{{ 'Title' | sdTranslate }}</th>\r\n            <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" disableErrorMessage></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"width\">\r\n            <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Width' | sdTranslate }}</th>\r\n            <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n              <!-- <span>{{item.width}}</span>\r\n              <mat-slider\r\n                  step=\"1\"\r\n                  min=\"0\"\r\n                  [max]=\"+item?.origin?.width*3\"\r\n                  [(ngModel)]=\"+item.width\"\r\n                  aria-label=\"units\">\r\n                </mat-slider> -->\r\n              <sd-input [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" disableErrorMessage></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"invisible\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Hidden' | sdTranslate }}</th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item\">\r\n              <mat-slide-toggle [(ngModel)]=\"item.invisible\" color=\"primary\"> </mat-slide-toggle>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"fixed\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Freeze' | sdTranslate }}</th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item\">\r\n              <mat-slide-toggle [(ngModel)]=\"item.fixed\" color=\"primary\"></mat-slide-toggle>\r\n            </td>\r\n          </ng-container>\r\n          <tr mat-header-row *matHeaderRowDef=\"['stt', 'title', 'width', 'invisible', 'fixed']; sticky: true\"></tr>\r\n          <tr\r\n            mat-row\r\n            *matRowDef=\"let row; columns: ['stt', 'title', 'width', 'invisible', 'fixed']\"\r\n            cdkDrag\r\n            [cdkDragData]=\"row\"\r\n            cdkDragLockAxis=\"y\"\r\n            [cdkDragDisabled]=\"disabledDrag\"></tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </sd-modal-body>\r\n  <sd-modal-footer>\r\n    <sd-button class=\"mr-8s\" (action)=\"onReset()\" title=\"M\u1EB7c \u0111\u1ECBnh\" color=\"info\" size=\"sm\"> </sd-button>\r\n    <sd-button (action)=\"onSave()\" title=\"L\u01B0u\" type=\"fill\" color=\"info\" size=\"sm\"> </sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n",
+                    styles: [".c-table{overflow:auto;position:relative}.c-table table{width:100%}.c-table .c-th{color:#000;font-size:14px;font-weight:500;line-height:20px}.c-container{min-height:200px;position:relative}.c-handle{color:#ccc;cursor:move}"]
+                },] }
+    ];
+    SdPopupConfiguration.ctorParameters = function () { return [
+        { type: core.ChangeDetectorRef },
+        { type: notify.SdNotifyService },
+        { type: SdTableConfigurationService }
+    ]; };
+    SdPopupConfiguration.propDecorators = {
+        gridOption: [{ type: core.Input }],
+        modal: [{ type: core.ViewChild, args: ['modal',] }],
+        table: [{ type: core.ViewChild, args: ['table',] }],
+        mouseUp: [{ type: core.HostListener, args: ['window:mouseup', ['$event'],] }]
+    };
+
+    var _gridId, _optionChanges, _localItems, _paginator, _sort, _subscription$1, _reload, _loadCompleted, _cacheObjValues, _initCellDef, _initFilterDef, _initFooterDef, _filterExportInfo, _initConfiguration$1, _loadFilterRegister, _filterLocal, _getFilter, _load, _render, _exportedItems, _allColumns, _allExportedColumns, _onExport, _getExportColumns, _updateSelectedItems, _loadValues, _format;
     var SdTable = /** @class */ (function () {
-        function SdTable(ref, configuration, gridConfigurationService, exportService, notifyService, columnValuesPipe, gridFilterService) {
+        function SdTable(ref, tableConfiguration, gridConfigurationService, exportService, notifyService, gridFilterService) {
             var _this = this;
             this.ref = ref;
-            this.configuration = configuration;
+            this.tableConfiguration = tableConfiguration;
             this.gridConfigurationService = gridConfigurationService;
             this.exportService = exportService;
             this.notifyService = notifyService;
-            this.columnValuesPipe = columnValuesPipe;
             this.gridFilterService = gridFilterService;
             _gridId.set(this, uuid.v4());
             this.key = uuid.v4();
@@ -1420,6 +1238,8 @@
             this.isSelectAll = false;
             this.exportTitle = 'Export';
             _loadCompleted.set(this, false);
+            this.cacheValues = {};
+            _cacheObjValues.set(this, {});
             _initCellDef.set(this, function () {
                 var e_1, _8;
                 _this.cellDef = {};
@@ -1498,8 +1318,8 @@
                 // Init pagination
                 option.paginate = {
                     hidden: (_a = option === null || option === void 0 ? void 0 : option.paginate) === null || _a === void 0 ? void 0 : _a.hidden,
-                    pageSize: (_f = (_c = (_b = option === null || option === void 0 ? void 0 : option.paginate) === null || _b === void 0 ? void 0 : _b.pageSize) !== null && _c !== void 0 ? _c : (_e = (_d = _this.configuration) === null || _d === void 0 ? void 0 : _d.paginate) === null || _e === void 0 ? void 0 : _e.pageSize) !== null && _f !== void 0 ? _f : (_g = DEFAULT_TABLE_CONFIG.paginate) === null || _g === void 0 ? void 0 : _g.pageSize,
-                    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.configuration) === 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,
+                    pageSize: (_f = (_c = (_b = option === null || option === void 0 ? void 0 : option.paginate) === null || _b === void 0 ? void 0 : _b.pageSize) !== null && _c !== void 0 ? _c : (_e = (_d = _this.tableConfiguration) === null || _d === void 0 ? void 0 : _d.paginate) === null || _e === void 0 ? void 0 : _e.pageSize) !== null && _f !== void 0 ? _f : (_g = DEFAULT_TABLE_CONFIG.paginate) === null || _g === void 0 ? void 0 : _g.pageSize,
+                    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,
                 };
                 try {
@@ -1507,16 +1327,16 @@
                         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.configuration) === null || _w === void 0 ? void 0 : _w.filter) === null || _x === void 0 ? void 0 : _x.operator) === null || _y === void 0 ? void 0 : _y.defaultListString) || [];
+                                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.configuration) === null || _z === void 0 ? void 0 : _z.filter) === null || _0 === void 0 ? void 0 : _0.operator) === null || _1 === void 0 ? void 0 : _1.defaultListNumber) || [];
+                                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.filter.operator.list = ((_4 = (_3 = (_2 = _this.configuration) === 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 === '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.configuration) === null || _5 === void 0 ? void 0 : _5.filter) === null || _6 === void 0 ? void 0 : _6.operator) === null || _7 === void 0 ? void 0 : _7.defaultListDate) || [];
+                                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) || [];
                             }
                         }
                     }
@@ -1563,7 +1383,7 @@
                 var items = localItems.filter(function (tableItem) {
                     var e_5, _8;
                     var _a, _b, _c, _d;
-                    var item = tableItem.current;
+                    var item = tableItem.data;
                     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;
@@ -1579,7 +1399,7 @@
                                         return false;
                                     }
                                 }
-                                else if (type === 'values') {
+                                else if (type === 'values' || type === 'lazy-values') {
                                     if (columnValue !== filterValue) {
                                         return false;
                                     }
@@ -1654,17 +1474,17 @@
                     if (column) {
                         var type_1 = column.type, field_1 = column.field;
                         items.sort(function (tableItemCurrent, tableItemNext) {
-                            var current = tableItemCurrent.current;
-                            var next = tableItemNext.current;
+                            var data = tableItemCurrent.data;
+                            var next = tableItemNext.data;
                             if (type_1 === 'number') {
-                                return (current[field_1] || 0) - (next[field_1] || 0);
+                                return (data[field_1] || 0) - (next[field_1] || 0);
                             }
                             if (type_1 === 'date' || type_1 === 'datetime' || type_1 === 'time') {
-                                var d1 = new Date(current[field_1] || '').getTime();
-                                var d2 = new Date(current[field_1] || '').getTime();
+                                var d1 = new Date(data[field_1] || '').getTime();
+                                var d2 = new Date(data[field_1] || '').getTime();
                                 return d1 - d2;
                             }
-                            var s1 = (current[field_1] || '').toString();
+                            var s1 = (data[field_1] || '').toString();
                             var s2 = (next[field_1] || '').toString();
                             if (s1 > s2) {
                                 return 1;
@@ -1700,16 +1520,16 @@
                     pageSize: ((_d = __classPrivateFieldGet(_this, _paginator)) === null || _d === void 0 ? void 0 : _d.pageSize) || ((_f = (_e = _this.gridOption) === null || _e === void 0 ? void 0 : _e.paginate) === null || _f === void 0 ? void 0 : _f.pageSize) || 50,
                 };
             });
-            _load$1.set(this, function (filterReq, force) {
+            _load.set(this, function (filterReq, force) {
                 if (force === void 0) { force = true; }
                 return __awaiter(_this, void 0, void 0, function () {
-                    var items, data, items, results, data;
+                    var items, data, _8, items, results, data, _9, _10;
                     var _this = this;
-                    return __generator(this, function (_8) {
-                        switch (_8.label) {
+                    return __generator(this, function (_11) {
+                        switch (_11.label) {
                             case 0:
                                 this.isLoading = true;
-                                if (!(this.gridOption.type === 'server')) return [3 /*break*/, 2];
+                                if (!(this.gridOption.type === 'server')) return [3 /*break*/, 3];
                                 items = this.gridOption.items;
                                 return [4 /*yield*/, items(filterReq).catch(function (err) {
                                         _this.notifyService.notify.warning('Có lỗi xảy ra');
@@ -1720,38 +1540,44 @@
                                         };
                                     })];
                             case 1:
-                                data = _8.sent();
+                                data = _11.sent();
                                 this.isLoading = false;
-                                return [2 /*return*/, {
-                                        items: (data === null || data === void 0 ? void 0 : data.items.map(MapToSdTableItem)) || [],
-                                        total: (data === null || data === void 0 ? void 0 : data.total) || 0,
-                                    }];
-                            case 2:
-                                if (!force) return [3 /*break*/, 6];
+                                _8 = {};
+                                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 3:
+                                if (!force) return [3 /*break*/, 8];
                                 items = this.gridOption.items;
                                 results = items();
                                 data = [];
-                                if (!(results instanceof Promise)) return [3 /*break*/, 4];
+                                if (!(results instanceof Promise)) return [3 /*break*/, 5];
                                 return [4 /*yield*/, results.catch(function (err) {
                                         _this.notifyService.notify.warning('Có lỗi xảy ra');
                                         console.error(err);
                                         return [];
                                     })];
-                            case 3:
-                                data = _8.sent();
-                                return [3 /*break*/, 5];
                             case 4:
-                                data = results;
-                                _8.label = 5;
+                                data = _11.sent();
+                                return [3 /*break*/, 6];
                             case 5:
+                                data = results;
+                                _11.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 = [];
                                 }
-                                __classPrivateFieldSet(this, _localItems, data.map(MapToSdTableItem));
+                                _9 = __classPrivateFieldSet;
+                                _10 = [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;
+                            case 8:
                                 this.isLoading = false;
-                                _8.label = 6;
-                            case 6: return [2 /*return*/, __classPrivateFieldGet(this, _filterLocal).call(this, __classPrivateFieldGet(this, _localItems), filterReq)];
+                                return [2 /*return*/, __classPrivateFieldGet(this, _filterLocal).call(this, __classPrivateFieldGet(this, _localItems), filterReq)];
                         }
                     });
                 });
@@ -1780,8 +1606,8 @@
                     return __generator(this, function (_8) {
                         switch (_8.label) {
                             case 0:
-                                (_f = (_e = this.gridFilter) === null || _e === void 0 ? void 0 : _e.updateFilter) === null || _f === void 0 ? void 0 : _f.call(_e);
-                                return [4 /*yield*/, __classPrivateFieldGet(this, _load$1).call(this, __classPrivateFieldGet(this, _getFilter).call(this), force)];
+                                (_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();
                                 __classPrivateFieldGet(this, _render).call(this, data);
@@ -1929,9 +1755,9 @@
                                                         case 0:
                                                             obj = {};
                                                             handle = function (exportColumn) { return __awaiter(_this, void 0, void 0, function () {
-                                                                var _v, _w, _x, column, exportedColumn, transform, _8, _9, date, transformDate, date, transformDate, date, transformDate, _10, _11;
-                                                                return __generator(this, function (_12) {
-                                                                    switch (_12.label) {
+                                                                var _v, _w, _x, _y, column, exportedColumn, transform, _8, _9, date, date, date;
+                                                                return __generator(this, function (_10) {
+                                                                    switch (_10.label) {
                                                                         case 0:
                                                                             obj[exportColumn.field] = item[exportColumn.field];
                                                                             column = allColumns.find(function (e) { return e.field === exportColumn.field; });
@@ -1959,77 +1785,55 @@
                                                                             _9 = column.field;
                                                                             return [4 /*yield*/, transform];
                                                                         case 1:
-                                                                            _8[_9] = _12.sent();
+                                                                            _8[_9] = _10.sent();
                                                                             return [3 /*break*/, 3];
                                                                         case 2:
                                                                             obj[column.field] = transform;
-                                                                            _12.label = 3;
+                                                                            _10.label = 3;
                                                                         case 3:
                                                                             obj[column.field] = (_v = obj[column.field]) !== null && _v !== void 0 ? _v : '';
-                                                                            return [3 /*break*/, 13];
+                                                                            return [3 /*break*/, 5];
                                                                         case 4:
-                                                                            if (!(item[column.field] === undefined || item[column.field] === null || item[column.field] === '')) return [3 /*break*/, 5];
-                                                                            obj[column.field] = '';
-                                                                            return [3 /*break*/, 13];
-                                                                        case 5:
-                                                                            if (!(column.type === 'string' || column.type === 'number')) return [3 /*break*/, 6];
-                                                                            // Nếu cell là string hoặc number thì gán bằng chính nó
-                                                                            obj[column.field] = item[column.field];
-                                                                            return [3 /*break*/, 13];
-                                                                        case 6:
-                                                                            if (!(column.type === 'bool')) return [3 /*break*/, 7];
-                                                                            // Nếu là bool thì gán bằng giá trị trueValue và falseValue (nếu có), mặc định là TRUE/FALSE
-                                                                            if (item[column.field]) {
-                                                                                obj[column.field] = ((_w = column.option) === null || _w === void 0 ? void 0 : _w.displayOnTrue) || 'True';
+                                                                            if (item[column.field] === undefined || item[column.field] === null || item[column.field] === '') {
+                                                                                obj[column.field] = '';
+                                                                            }
+                                                                            else if (column.type === 'string' || column.type === 'number') {
+                                                                                // Nếu cell là string hoặc number thì gán bằng chính nó
+                                                                                obj[column.field] = item[column.field];
                                                                             }
-                                                                            else if (obj[column.field] !== undefined && obj[column.field] !== null) {
-                                                                                obj[column.field] = ((_x = column.option) === null || _x === void 0 ? void 0 : _x.displayOnFalse) || 'False';
+                                                                            else if (column.type === 'bool') {
+                                                                                // Nếu là bool thì gán bằng giá trị trueValue và falseValue (nếu có), mặc định là TRUE/FALSE
+                                                                                if (item[column.field]) {
+                                                                                    obj[column.field] = ((_w = column.option) === null || _w === void 0 ? void 0 : _w.displayOnTrue) || 'True';
+                                                                                }
+                                                                                else if (obj[column.field] !== undefined && obj[column.field] !== null) {
+                                                                                    obj[column.field] = ((_x = column.option) === null || _x === void 0 ? void 0 : _x.displayOnFalse) || 'False';
+                                                                                }
                                                                             }
-                                                                            return [3 /*break*/, 13];
-                                                                        case 7:
-                                                                            if (!(column.type === 'date')) return [3 /*break*/, 8];
-                                                                            date = item[column.field];
-                                                                            transformDate = column.transformDate;
-                                                                            if (transformDate) {
-                                                                                date = transformDate(date, item);
+                                                                            else if (column.type === 'date') {
+                                                                                date = item[column.field];
+                                                                                // Nếu là date thì convert theo đúng format
+                                                                                obj[column.field] = Date.toFormat(date, 'dd/MM/yyyy');
                                                                             }
-                                                                            // Nếu là date thì convert theo đúng format
-                                                                            obj[column.field] = Date.toFormat(date, 'dd/MM/yyyy');
-                                                                            return [3 /*break*/, 13];
-                                                                        case 8:
-                                                                            if (!(column.type === 'datetime')) return [3 /*break*/, 9];
-                                                                            date = item[column.field];
-                                                                            transformDate = column.transformDate;
-                                                                            if (transformDate) {
-                                                                                date = transformDate(date, item);
+                                                                            else if (column.type === 'datetime') {
+                                                                                date = item[column.field];
+                                                                                // Nếu là datetime thì convert theo đúng format
+                                                                                obj[column.field] = Date.toFormat(date, 'dd/MM/yyyy HH:mm');
                                                                             }
-                                                                            // Nếu là datetime thì convert theo đúng format
-                                                                            obj[column.field] = Date.toFormat(date, 'dd/MM/yyyy HH:mm');
-                                                                            return [3 /*break*/, 13];
-                                                                        case 9:
-                                                                            if (!(column.type === 'time')) return [3 /*break*/, 10];
-                                                                            date = item[column.field];
-                                                                            transformDate = column.transformDate;
-                                                                            if (transformDate) {
-                                                                                date = transformDate(date, item);
+                                                                            else if (column.type === 'time') {
+                                                                                date = item[column.field];
+                                                                                // Nếu là time thì convert theo đúng format
+                                                                                obj[column.field] = Date.toFormat(date, 'HH:mm');
                                                                             }
-                                                                            // Nếu là time thì convert theo đúng format
-                                                                            obj[column.field] = Date.toFormat(date, 'HH:mm');
-                                                                            return [3 /*break*/, 13];
-                                                                        case 10:
-                                                                            if (!(column.type === 'values')) return [3 /*break*/, 12];
-                                                                            // Nếu là values thì lấy giá trị của value được chọn
-                                                                            _10 = obj;
-                                                                            _11 = column.field;
-                                                                            return [4 /*yield*/, this.columnValuesPipe.transform(item[column.field], column)];
-                                                                        case 11:
-                                                                            // Nếu là values thì lấy giá trị của value được chọn
-                                                                            _10[_11] = _12.sent();
-                                                                            return [3 /*break*/, 13];
-                                                                        case 12:
-                                                                            obj[column.field] = item[column.field];
-                                                                            _12.label = 13;
-                                                                        case 13: return [2 /*return*/];
+                                                                            else if (column.type === 'values') {
+                                                                                // Nếu là values thì lấy giá trị của value được chọn
+                                                                                obj[column.field] = ((_y = __classPrivateFieldGet(this, _cacheObjValues)[column.field]) === null || _y === void 0 ? void 0 : _y[item[column.field]]) || item[column.field];
+                                                                            }
+                                                                            else {
+                                                                                obj[column.field] = item[column.field];
+                                                                            }
+                                                                            _10.label = 5;
+                                                                        case 5: return [2 /*return*/];
                                                                     }
                                                                 });
                                                             }); };
@@ -2197,22 +2001,17 @@
                 __classPrivateFieldGet(_this, _onExport).call(_this, true);
             };
             this.onFilterChange = function () {
-                var _a, _b, _c, _d;
-                (_b = (_a = _this.gridFilter) === null || _a === void 0 ? void 0 : _a.updateFilter) === null || _b === void 0 ? void 0 : _b.call(_a);
-                if ((_d = (_c = _this.gridOption) === null || _c === void 0 ? void 0 : _c.filter) === null || _d === void 0 ? void 0 : _d.inlineColumn) {
-                    _this.filterRegister.value.set({
-                        columnOperator: _this.columnOperator || {},
-                        columnFilter: _this.columnFilter,
-                    });
-                }
-                else {
-                    _this.filterRegister.value.set({});
-                }
+                var _a, _b;
+                (_b = (_a = _this.tableFilter) === null || _a === void 0 ? void 0 : _a.updateFilter) === null || _b === void 0 ? void 0 : _b.call(_a);
+                _this.filterRegister.value.set({
+                    columnOperator: _this.columnOperator || {},
+                    columnFilter: _this.columnFilter,
+                });
             };
             this.onExpand = function (rowData) { return __awaiter(_this, void 0, void 0, function () {
-                var _y, _z, _0, _1, _2, data;
+                var _z, _0, _1, _2, _3, data;
                 return __generator(this, function (_8) {
-                    if ((_y = this.gridOption.expand) === null || _y === void 0 ? void 0 : _y.always) {
+                    if ((_z = this.gridOption.expand) === null || _z === void 0 ? void 0 : _z.always) {
                         return [2 /*return*/];
                     }
                     if (rowData.meta.expand.isExpanding) {
@@ -2222,8 +2021,8 @@
                         rowData.meta.expand.isExpanded = false;
                         return [2 /*return*/];
                     }
-                    data = (_1 = (_0 = (_z = this.gridOption) === null || _z === void 0 ? void 0 : _z.expand) === null || _0 === void 0 ? void 0 : _0.onExpand) === null || _1 === void 0 ? void 0 : _1.call(_0, rowData.current);
-                    if (!((_2 = this.gridOption.expand) === null || _2 === void 0 ? void 0 : _2.multiple)) {
+                    data = (_2 = (_1 = (_0 = this.gridOption) === null || _0 === void 0 ? void 0 : _0.expand) === null || _1 === void 0 ? void 0 : _1.onExpand) === null || _2 === void 0 ? void 0 : _2.call(_1, rowData.data);
+                    if (!((_3 = this.gridOption.expand) === null || _3 === void 0 ? void 0 : _3.multiple)) {
                         this.items.forEach(function (item) { return (item.meta.expand.isExpanding = item.meta.expand.isExpanded = false); });
                     }
                     if (data instanceof Promise) {
@@ -2246,7 +2045,7 @@
                 var _a, _b, _c, _d, _e, _f, _g;
                 if ((_b = (_a = rowData.meta.group) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length) {
                     rowData.meta.group.items.forEach(function (e) { return (e.meta.selector.isSelected = rowData.meta.selector.isSelected); });
-                    (_d = (_c = _this.gridOption.selector) === null || _c === void 0 ? void 0 : _c.onSelect) === null || _d === void 0 ? void 0 : _d.call(_c, rowData.current, _this.items.filter(function (e) { return e.meta.selector.isSelected; }).map(function (e) { return e.current; }));
+                    (_d = (_c = _this.gridOption.selector) === null || _c === void 0 ? void 0 : _c.onSelect) === null || _d === void 0 ? void 0 : _d.call(_c, rowData.data, _this.items.filter(function (e) { return e.meta.selector.isSelected; }).map(function (e) { return e.data; }));
                     _this.isSelectAll = _this.items.every(function (e) { return e.meta.selector.isSelected; });
                     __classPrivateFieldGet(_this, _updateSelectedItems).call(_this);
                 }
@@ -2256,7 +2055,7 @@
                         __classPrivateFieldGet(_this, _updateSelectedItems).call(_this);
                         return;
                     }
-                    (_g = (_f = _this.gridOption.selector) === null || _f === void 0 ? void 0 : _f.onSelect) === null || _g === void 0 ? void 0 : _g.call(_f, rowData.current, _this.items.filter(function (e) { return e.meta.selector.isSelected; }).map(function (e) { return e.current; }));
+                    (_g = (_f = _this.gridOption.selector) === null || _f === void 0 ? void 0 : _f.onSelect) === null || _g === void 0 ? void 0 : _g.call(_f, rowData.data, _this.items.filter(function (e) { return e.meta.selector.isSelected; }).map(function (e) { return e.data; }));
                     _this.isSelectAll = _this.items.every(function (e) { return e.meta.selector.isSelected; });
                     __classPrivateFieldGet(_this, _updateSelectedItems).call(_this);
                 }
@@ -2269,7 +2068,7 @@
                         e.meta.selector.isSelected = _this.isSelectAll;
                     }
                 });
-                (_c = (_b = _this.gridOption.selector) === null || _b === void 0 ? void 0 : _b.onSelectAll) === null || _c === void 0 ? void 0 : _c.call(_b, _this.items.filter(function (e) { return e.meta.selector.isSelected; }).map(function (e) { return e.current; }));
+                (_c = (_b = _this.gridOption.selector) === null || _b === void 0 ? void 0 : _b.onSelectAll) === null || _c === void 0 ? void 0 : _c.call(_b, _this.items.filter(function (e) { return e.meta.selector.isSelected; }).map(function (e) { return e.data; }));
                 __classPrivateFieldGet(_this, _updateSelectedItems).call(_this);
             };
             this.onClearSelection = function (items) {
@@ -2279,16 +2078,15 @@
                 __classPrivateFieldGet(_this, _updateSelectedItems).call(_this);
             };
             _updateSelectedItems.set(this, function () {
-                _this.selectedItems = _this.items.filter(function (item) { return item.meta.selector.isSelected; }).map(function (item) { return item.current; });
+                _this.selectedItems = _this.items.filter(function (item) { return item.meta.selector.isSelected; }).map(function (item) { return item.data; });
                 _this.ref.detectChanges();
             });
             this.clearFilter = function () {
                 _this.filterRegister.value.remove();
             };
             this.setFilter = function (args) {
-                var _a, _b;
                 var _8 = args || {}, columnFilter = _8.columnFilter, externalFilter = _8.externalFilter, filterDef = _8.filterDef;
-                if (((_b = (_a = _this.gridOption) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.inlineColumn) && columnFilter) {
+                if (columnFilter) {
                     _this.columnFilter = columnFilter;
                 }
                 _this.filterRegister.value.set({
@@ -2298,37 +2096,298 @@
                 });
             };
             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) {
+                        case 0:
+                            promises = [];
+                            _loop_2 = function (column) {
+                                if (column.type === 'values' && !this_1.cacheValues[column.field]) {
+                                    if (typeof column.option.items === 'function') {
+                                        promises.push(column.option
+                                            .items()
+                                            .then(function (data) { return ({
+                                            key: column.field,
+                                            valueField: column.option.valueField,
+                                            displayField: column.option.displayField,
+                                            data: Array.isArray(data) ? data : [],
+                                        }); })
+                                            .catch(function (err) {
+                                            console.error(err);
+                                            return {
+                                                key: column.field,
+                                                valueField: column.option.valueField,
+                                                displayField: column.option.displayField,
+                                                data: [],
+                                            };
+                                        }));
+                                    }
+                                    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);
+                                        });
+                                        __classPrivateFieldGet(this_1, _cacheObjValues)[column.field] = Array.toObject(this_1.cacheValues[column.field], column.option.valueField);
+                                    }
+                                }
+                            };
+                            this_1 = this;
+                            try {
+                                for (columns_4 = __values(columns), columns_4_1 = columns_4.next(); !columns_4_1.done; columns_4_1 = columns_4.next()) {
+                                    column = columns_4_1.value;
+                                    _loop_2(column);
+                                }
+                            }
+                            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);
+                                }
+                                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();
+                            _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);
+                                });
+                                __classPrivateFieldGet(this_2, _cacheObjValues)[result.key] = Array.toObject(this_2.cacheValues[result.key], result.valueField);
+                            };
+                            this_2 = this;
+                            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_3(result);
+                                }
+                            }
+                            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);
+                                }
+                                finally { if (e_11) throw e_11.error; }
+                            }
+                            _10.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            }); });
+            _format.set(this, function (rawItems, columns) { return __awaiter(_this, void 0, void 0, function () {
+                var _4, _5, items, _loop_4, this_3, columns_5, columns_5_1, column, e_12_1;
+                var e_12, _8;
+                return __generator(this, function (_9) {
+                    switch (_9.label) {
+                        case 0:
+                            items = rawItems.map(MapToSdTableItem);
+                            _loop_4 = function (column) {
+                                var field, cellStyle, click, tooltip, htmlTemplate, transform, objValues, values, views, _8, _9, _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;
+                                            objValues = {};
+                                            if (column.type === 'values') {
+                                                objValues = __classPrivateFieldGet(this_3, _cacheObjValues)[field] || {};
+                                            }
+                                            if (!(column.type === 'lazy-values')) return [3 /*break*/, 2];
+                                            values = items.map(function (e) { var _a; return (_a = e.data) === null || _a === void 0 ? void 0 : _a[field]; }).filter(function (val) { return !!val || val === 0; }).union();
+                                            views = column.option.views;
+                                            if (!(views && values.length)) return [3 /*break*/, 2];
+                                            _9 = (_8 = Array).toObject;
+                                            return [4 /*yield*/, views(values).catch(function (err) {
+                                                    console.error(err);
+                                                    return [];
+                                                })];
+                                        case 1:
+                                            objValues = _9.apply(_8, [_11.sent(), column.option.valueField]) || {};
+                                            _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) {
+                                                        case 0:
+                                                            rowData = item.data;
+                                                            value = rowData === null || rowData === void 0 ? void 0 : rowData[field];
+                                                            item.meta.display[field] = {
+                                                                badge: undefined,
+                                                                cellStyle: column.type === 'number' && { 'text-align': 'right!important' },
+                                                                data: value,
+                                                                isHtml: false,
+                                                                tooltip: typeof tooltip === 'function' ? tooltip(value, rowData) : undefined,
+                                                                click: typeof click === 'function' ? function () { return click(value, rowData); } : undefined,
+                                                            };
+                                                            display = item.meta.display[field];
+                                                            if (!(typeof htmlTemplate === 'function')) return [3 /*break*/, 1];
+                                                            display.isHtml = true;
+                                                            display.data = htmlTemplate(value, rowData);
+                                                            return [3 /*break*/, 6];
+                                                        case 1:
+                                                            if (!(typeof transform === 'function')) return [3 /*break*/, 5];
+                                                            newValue = transform(value, rowData);
+                                                            if (!(newValue instanceof Promise)) return [3 /*break*/, 3];
+                                                            _8 = display;
+                                                            return [4 /*yield*/, newValue];
+                                                        case 2:
+                                                            _8.data = _9.sent();
+                                                            return [3 /*break*/, 4];
+                                                        case 3:
+                                                            display.data = newValue;
+                                                            _9.label = 4;
+                                                        case 4: return [3 /*break*/, 6];
+                                                        case 5:
+                                                            if (column.type === 'date' || column.type === 'datetime' || column.type === 'time') {
+                                                                date = Date.toFormat(value, 'dd/MM/yyyy');
+                                                                time = Date.toFormat(value, 'HH:mm:ss');
+                                                                if (time === null || time === void 0 ? void 0 : time.endsWith('00')) {
+                                                                    time = Date.toFormat(value, 'HH:mm');
+                                                                }
+                                                                if (column.type === 'date' || column.type === 'datetime') {
+                                                                    if (column.type === 'datetime') {
+                                                                        display.isHtml = true;
+                                                                        display.data = "<span class=\"d-block T14R text-black400\">" + time + "</span><span class=\"d-block T14R\">" + date + "</span>";
+                                                                    }
+                                                                    else {
+                                                                        display.data = date;
+                                                                    }
+                                                                }
+                                                                if (column.type === 'time') {
+                                                                    display.data = time;
+                                                                }
+                                                            }
+                                                            if (column.type === 'values' || column.type === 'lazy-values') {
+                                                                display.data = ((_4 = objValues[value]) === null || _4 === void 0 ? void 0 : _4[column.option.displayField]) || value;
+                                                            }
+                                                            if (column.type === 'number' && Number.isNumber(value)) {
+                                                                display.data = Number.toVNCurrency(value);
+                                                            }
+                                                            if (column.type === 'bool') {
+                                                                option = column.option;
+                                                                if (value !== undefined && value !== null && value !== '') {
+                                                                    display.data = value === true ? (option === null || option === void 0 ? void 0 : option.displayOnTrue) || 'True' : (option === null || option === void 0 ? void 0 : option.displayOnFalse) || 'False';
+                                                                }
+                                                                else {
+                                                                    display.data = null;
+                                                                }
+                                                            }
+                                                            // Badge
+                                                            if ((column.type === 'string' || column.type === 'number' || column.type === 'values') && column.badge) {
+                                                                display.badge = {
+                                                                    type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
+                                                                    color: column.badge(value, rowData),
+                                                                    icon: (_5 = column.badgeIcon) === null || _5 === void 0 ? void 0 : _5.call(column, value, rowData),
+                                                                };
+                                                            }
+                                                            else if (column.type === 'bool') {
+                                                                display.badge = {
+                                                                    type: 'circle',
+                                                                    color: !!value ? 'success' : 'danger',
+                                                                    icon: null,
+                                                                };
+                                                            }
+                                                            _9.label = 6;
+                                                        case 6: return [2 /*return*/];
+                                                    }
+                                                });
+                                            };
+                                            _11.label = 3;
+                                        case 3:
+                                            _11.trys.push([3, 8, 9, 10]);
+                                            items_2 = (e_13 = void 0, __values(items)), items_2_1 = items_2.next();
+                                            _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:
+                                            _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 = _11.sent();
+                                            e_13 = { error: e_13_1 };
+                                            return [3 /*break*/, 10];
+                                        case 9:
+                                            try {
+                                                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*/];
+                                        case 10: return [2 /*return*/];
+                                    }
+                                });
+                            };
+                            this_3 = this;
+                            _9.label = 1;
+                        case 1:
+                            _9.trys.push([1, 6, 7, 8]);
+                            columns_5 = __values(columns), columns_5_1 = columns_5.next();
+                            _9.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;
+                        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 = { 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);
+                            }
+                            finally { if (e_12) throw e_12.error; }
+                            return [7 /*endfinally*/];
+                        case 8: return [2 /*return*/, items];
+                    }
+                });
+            }); });
         }
-        Object.defineProperty(SdTable.prototype, "_gridFilter", {
-            set: function (gridFilter) {
-                if (gridFilter && this.gridFilter !== gridFilter) {
-                    this.gridFilter = gridFilter;
-                    // this.#subscription.add(gridFilter.filterChange.pipe(
-                    //   filter(reload => reload),
-                    //   debounceTime(500),
-                    //   map(() => {
-                    //     this.#paginator.pageIndex = 0;
-                    //     this.#reload.next({
-                    //       force: false,
-                    //       source: 'FILTER'
-                    //     });
-                    //   }),
-                    // ).subscribe());
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
         Object.defineProperty(SdTable.prototype, "option", {
             set: function (option) {
+                var _this = this;
                 if (option) {
                     option = __classPrivateFieldGet(this, _initConfiguration$1).call(this, option);
                     this.gridOption = option;
                     __classPrivateFieldSet(this, _loadCompleted, false);
-                    var configuration = this.gridConfigurationService.init(this.key, this.gridOption);
-                    this.gridConfigurationObserver = configuration.observer;
-                    configuration.load();
-                    __classPrivateFieldGet(this, _optionChanges).next(this.gridOption);
+                    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*/];
+                            }
+                        });
+                    }); }));
                 }
             },
             enumerable: false,
@@ -2379,7 +2438,7 @@
                     switch (_8.label) {
                         case 0:
                             filterInfo = __classPrivateFieldGet(this, _getFilter).call(this);
-                            return [4 /*yield*/, __classPrivateFieldGet(this, _load$1).call(this, filterInfo, !__classPrivateFieldGet(this, _loadCompleted) || data.force)];
+                            return [4 /*yield*/, __classPrivateFieldGet(this, _load).call(this, filterInfo, !__classPrivateFieldGet(this, _loadCompleted) || data.force)];
                         case 1:
                             result = _8.sent();
                             __classPrivateFieldSet(this, _loadCompleted, true);
@@ -2411,18 +2470,18 @@
         };
         Object.defineProperty(SdTable.prototype, "gridItems", {
             get: function () {
-                return this.items.map(function (item) { return item.current; });
+                return this.items.map(function (item) { return item.data; });
             },
             enumerable: false,
             configurable: true
         });
         return SdTable;
     }());
-    _gridId = new WeakMap(), _optionChanges = new WeakMap(), _localItems = new WeakMap(), _paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap(), _reload = new WeakMap(), _loadCompleted = new WeakMap(), _initCellDef = new WeakMap(), _initFilterDef = new WeakMap(), _initFooterDef = new WeakMap(), _filterExportInfo = new WeakMap(), _initConfiguration$1 = new WeakMap(), _loadFilterRegister = new WeakMap(), _filterLocal = new WeakMap(), _getFilter = new WeakMap(), _load$1 = new WeakMap(), _render = new WeakMap(), _exportedItems = new WeakMap(), _allColumns = new WeakMap(), _allExportedColumns = new WeakMap(), _onExport = new WeakMap(), _getExportColumns = new WeakMap(), _updateSelectedItems = new WeakMap();
+    _gridId = new WeakMap(), _optionChanges = new WeakMap(), _localItems = new WeakMap(), _paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap(), _reload = new WeakMap(), _loadCompleted = new WeakMap(), _cacheObjValues = new WeakMap(), _initCellDef = new WeakMap(), _initFilterDef = new WeakMap(), _initFooterDef = new WeakMap(), _filterExportInfo = new WeakMap(), _initConfiguration$1 = new WeakMap(), _loadFilterRegister = new WeakMap(), _filterLocal = new WeakMap(), _getFilter = new WeakMap(), _load = new WeakMap(), _render = new WeakMap(), _exportedItems = new WeakMap(), _allColumns = new WeakMap(), _allExportedColumns = new WeakMap(), _onExport = new WeakMap(), _getExportColumns = new WeakMap(), _updateSelectedItems = new WeakMap(), _loadValues = new WeakMap(), _format = new WeakMap();
     SdTable.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-table',
-                    template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n  <ng-container *ngIf=\"gridConfiguration | sdGridConfigurationResult : gridOption : sdSubInformation as configuration\">\r\n    <sd-grid-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      #gridFilter>\r\n    </sd-grid-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 *ngIf=\"isLoading\"></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\r\n              *ngIf=\"items?.length; else elseEmpty\"\r\n              mat-table\r\n              [dataSource]=\"groupedItems\"\r\n              matSort\r\n              [matSortDisabled]=\"!gridOption.sort?.enable\"\r\n              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; let i = index\"\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                  cdkDrag\r\n                  class=\"px-8 py-8 c-th\"\r\n                  [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].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=\"false\"\r\n                      role=\"presentation\"\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]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\"></div>\r\n                    <sd-column-inline-filter\r\n                      *ngIf=\"gridOption.filter?.inlineColumn && columnOperator\"\r\n                      [value]=\"columnFilter[column.field]\"\r\n                      [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                      [columnFilter]=\"columnFilter\"\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                    [idx]=\"i\"\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; let i = index\" [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?.inlineColumn && columnOperator\"\r\n                      [value]=\"columnFilter[column.field]\"\r\n                      [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                      [columnFilter]=\"columnFilter\"\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                    [idx]=\"i\"\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            <ng-template #elseEmpty>\r\n              <table mat-table [dataSource]=\"[{}]\">\r\n                <ng-container matColumnDef=\"sdSelection\" sticky>\r\n                  <th\r\n                    class=\"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\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdCommand\">\r\n                  <th\r\n                    class=\"px-8\"\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\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdSubInformationAction\">\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                </ng-container>\r\n                <ng-container matColumnDef=\"sdEmpty\">\r\n                  <td class=\"c-empty\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                    <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n                      <ng-container *ngTemplateOutlet=\"sdEmptyData.templateRef; context: { item: item }\"> </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #sdEmptyDataNoRef>\r\n                      <mat-icon fontSet=\"material-icons-outlined\">leaderboard</mat-icon>\r\n                    </ng-template>\r\n                  </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\"></td>\r\n                  <td mat-footer-cell *matFooterCellDef></td>\r\n                </ng-container>\r\n                <ng-container\r\n                  *ngFor=\"let column of configuration.columns\"\r\n                  [matColumnDef]=\"column.field\"\r\n                  [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\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                  </th>\r\n                </ng-container>\r\n                <ng-container\r\n                  *ngFor=\"let column of configuration.firstColumns; let i = index\"\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=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].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                        [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                        [class.text-center]=\"column.align === 'center'\"\r\n                        [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\"></div>\r\n                      <sd-column-inline-filter\r\n                        *ngIf=\"gridOption.filter?.inlineColumn && columnOperator\"\r\n                        [value]=\"columnFilter[column.field]\"\r\n                        [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                        [columnFilter]=\"columnFilter\"\r\n                        [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\">\r\n                      </sd-column-inline-filter>\r\n                    </div>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-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?.inlineColumn\"\r\n                        [value]=\"columnFilter[column.field]\"\r\n                        [columnFilter]=\"columnFilter\"\r\n                        [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n                    </div>\r\n                  </th>\r\n                </ng-container>\r\n                <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"></tr>\r\n                <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"></tr>\r\n                <tr mat-row *matRowDef=\"let row; columns: ['sdEmpty']\"></tr>\r\n              </table>\r\n            </ng-template>\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=\"gridFilter && !gridOption.filter?.inlineColumn\"\r\n              class=\"mr-10\"\r\n              [title]=\"'Filter' | sdTranslate\"\r\n              icon=\"filter_alt\"\r\n              size=\"sm\"\r\n              (action)=\"gridFilter.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n            <sd-button\r\n              *ngIf=\"gridOption.reload?.visible\"\r\n              class=\"mr-10\"\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\r\n                  class=\"mr-10\"\r\n                  [title]=\"exportTitle | sdTranslate\"\r\n                  icon=\"get_app\"\r\n                  size=\"sm\"\r\n                  [matMenuTriggerFor]=\"menu\"\r\n                  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=\"gridOption.config?.visible\"\r\n              class=\"mr-10\"\r\n              [title]=\"'Configure' | sdTranslate\"\r\n              icon=\"settings\"\r\n              size=\"sm\"\r\n              (action)=\"popupGridConfiguration.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-grid-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\" (clear)=\"onClearSelection(groupedItems)\">\r\n      </sd-grid-quick-action>\r\n      <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration> </sd-popup-grid-configuration>\r\n    </ng-container>\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\r\n            mat-table\r\n            [dataSource]=\"groupedItems\"\r\n            matSort\r\n            [matSortDisabled]=\"!gridOption.sort?.enable\"\r\n            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; let i = index\"\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': configuration.firstColumns[i].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=\"false\"\r\n                    role=\"presentation\"\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]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\"></div>\r\n                  <sd-column-inline-filter\r\n                    *ngIf=\"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                  [idx]=\"i\"\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; let i = index\" [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=\"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                  [idx]=\"i\"\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\">\r\n    </sd-popup-configuration>\r\n  </ng-container>\r\n</ng-container>\r\n",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     animations: [
                         animations.trigger('detailExpand', [
@@ -2440,13 +2499,13 @@
         { type: SdTableConfigurationService },
         { type: _export.SdExportService },
         { type: notify.SdNotifyService },
-        { type: SdColumnValuesPipe },
         { type: SdTableFilterService }
     ]; };
     SdTable.propDecorators = {
+        popupConfiguration: [{ type: core.ViewChild, args: [SdPopupConfiguration,] }],
         sdScroll: [{ type: core.ViewChild, args: [common.SdScrollDirective,] }],
         quickAction: [{ type: core.ViewChild, args: [quickAction.SdQuickAction,] }],
-        _gridFilter: [{ type: core.ViewChild, args: [SdGridFilter,] }],
+        tableFilter: [{ type: core.ViewChild, args: [SdTableFilter,] }],
         option: [{ type: core.Input }],
         paginator: [{ type: core.ViewChild, args: [paginator.MatPaginator,] }],
         sort: [{ type: core.ViewChild, args: [sort.MatSort,] }],
@@ -2649,28 +2708,6 @@
                 },] }
     ];
 
-    var SdColumnHtmlTemplatePipe = /** @class */ (function () {
-        function SdColumnHtmlTemplatePipe(deviceService) {
-            this.isMobileOrTablet = false;
-            this.isMobileOrTablet = !deviceService.isDesktop();
-        }
-        SdColumnHtmlTemplatePipe.prototype.transform = function (value, rowData, column) {
-            if (typeof (column === null || column === void 0 ? void 0 : column.htmlTemplate) !== 'function') {
-                return value;
-            }
-            return column === null || column === void 0 ? void 0 : column.htmlTemplate(value, rowData, this.isMobileOrTablet);
-        };
-        return SdColumnHtmlTemplatePipe;
-    }());
-    SdColumnHtmlTemplatePipe.decorators = [
-        { type: core.Pipe, args: [{
-                    name: 'columnHtmlTemplate'
-                },] }
-    ];
-    SdColumnHtmlTemplatePipe.ctorParameters = function () { return [
-        { type: ngxDeviceDetector.DeviceDetectorService }
-    ]; };
-
     var SdDesktopCellView = /** @class */ (function () {
         function SdDesktopCellView() {
         }
@@ -2679,7 +2716,7 @@
     SdDesktopCellView.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-desktop-cell-view',
-                    template: "<ng-container *ngIf=\"item.current[column.field] | cellView : item : column : gridOption | async as view\">\r\n  <ng-container *ngIf=\"view.display.hasHtml; else useValue\">\r\n    <div\r\n      *ngIf=\"view.click\"\r\n      (click)=\"view.click()\"\r\n      class=\"text-break cursor-pointer\"\r\n      [matTooltip]=\"view.tooltip\"\r\n      [class.text-center]=\"view.display.align === 'center'\"\r\n      [class.text-right]=\"view.display.align === 'right'\"\r\n      [innerHTML]=\"view.display.html | safeHtml\"></div>\r\n    <div\r\n      *ngIf=\"!view.click\"\r\n      class=\"text-break\"\r\n      [matTooltip]=\"view.tooltip\"\r\n      [class.text-center]=\"view.display.align === 'center'\"\r\n      [class.text-right]=\"view.display.align === 'right'\"\r\n      [innerHTML]=\"view.display.html | safeHtml\"></div>\r\n  </ng-container>\r\n  <ng-template #useValue>\r\n    <ng-container *ngIf=\"!!view.badge; else noBadge\">\r\n      <sd-badge\r\n        *ngIf=\"view.display.value\"\r\n        [type]=\"view.badge.type\"\r\n        [title]=\"view.display.value\"\r\n        [color]=\"view.badge.color\"\r\n        [icon]=\"view.badge.icon\"\r\n        [tooltip]=\"view.tooltip\"\r\n        (sdClick)=\"!!view.click && view.click()\"></sd-badge>\r\n    </ng-container>\r\n    <ng-template #noBadge>\r\n      <div\r\n        class=\"text-break\"\r\n        [class.text-center]=\"view.display.align === 'center'\"\r\n        [class.text-right]=\"view.display.align === 'right'\"\r\n        [matTooltip]=\"view.tooltip\">\r\n        <a *ngIf=\"!!view.click\" href=\"javascript:;\" (click)=\"view.click()\">{{ view.display.value }}</a>\r\n        <ng-container *ngIf=\"!view.click\">{{ view.display.value }} </ng-container>\r\n      </div>\r\n    </ng-template>\r\n  </ng-template>\r\n</ng-container>\r\n",
+                    template: "<ng-container *sdLet=\"item.meta.display[column.field] as view\">\r\n  <ng-container *ngIf=\"view.isHtml; else useValue\">\r\n    <div\r\n      *ngIf=\"view.click\"\r\n      (click)=\"view.click()\"\r\n      class=\"text-break cursor-pointer\"\r\n      [matTooltip]=\"view.tooltip\"\r\n      [style]=\"view.cellStyle\"\r\n      [innerHTML]=\"view.data | safeHtml\"></div>\r\n    <div\r\n      *ngIf=\"!view.click\"\r\n      class=\"text-break\"\r\n      [matTooltip]=\"view.tooltip\"\r\n      [style]=\"view.cellStyle\"\r\n      [innerHTML]=\"view.data | safeHtml\"></div>\r\n  </ng-container>\r\n  <ng-template #useValue>\r\n    <ng-container *ngIf=\"!!view.badge; else noBadge\">\r\n      <sd-badge\r\n        *ngIf=\"view.data\"\r\n        [type]=\"view.badge.type\"\r\n        [title]=\"view.data\"\r\n        [color]=\"view.badge.color\"\r\n        [icon]=\"view.badge.icon\"\r\n        [tooltip]=\"view.tooltip\"\r\n        (sdClick)=\"!!view.click && view.click()\"></sd-badge>\r\n    </ng-container>\r\n    <ng-template #noBadge>\r\n      <div\r\n        class=\"text-break\"\r\n        [style]=\"view.cellStyle\"\r\n        [matTooltip]=\"view.tooltip\">\r\n        <a *ngIf=\"!!view.click\" href=\"javascript:;\" (click)=\"view.click()\">{{ view.data }}</a>\r\n        <ng-container *ngIf=\"!view.click\">{{ view.data }} </ng-container>\r\n      </div>\r\n    </ng-template>\r\n  </ng-template>\r\n</ng-container>\r\n",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [".text-black400{color:#757575}.c-color-success{color:#4caf50}.c-color-danger{color:#f82c13}.c-image{-o-object-fit:contain;margin:5px 0;object-fit:contain}.c-img{font-size:30px;opacity:.5}.c-img.pointer:hover{opacity:.9}"]
                 },] }
@@ -2693,45 +2730,6 @@
         gridOption: [{ type: core.Input }]
     };
 
-    var SdColumnTransformPipe = /** @class */ (function () {
-        function SdColumnTransformPipe(columnValuesPipe) {
-            this.columnValuesPipe = columnValuesPipe;
-        }
-        SdColumnTransformPipe.prototype.transform = function (value, rowData, column, key) {
-            var _a, _b;
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
-                        case 0:
-                            if (column === null || column === void 0 ? void 0 : column.transform) {
-                                return [2 /*return*/, column.transform(value, rowData)];
-                            }
-                            if (!(column.type === 'values')) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this.columnValuesPipe.transform(value, column)];
-                        case 1: return [2 /*return*/, _c.sent()];
-                        case 2:
-                            if (column.type === 'number' && Number.isNumber(value)) {
-                                return [2 /*return*/, Number.toVNCurrency(value)]; // this.decimalPipe.transform(value, '1.0-2');
-                            }
-                            if (column.type === 'bool') {
-                                return [2 /*return*/, value === true ? (((_a = column.option) === null || _a === void 0 ? void 0 : _a.displayOnTrue) || 'True') : (((_b = column.option) === null || _b === void 0 ? void 0 : _b.displayOnFalse) || 'False')];
-                            }
-                            return [2 /*return*/, value];
-                    }
-                });
-            });
-        };
-        return SdColumnTransformPipe;
-    }());
-    SdColumnTransformPipe.decorators = [
-        { type: core.Pipe, args: [{
-                    name: 'columnTransform'
-                },] }
-    ];
-    SdColumnTransformPipe.ctorParameters = function () { return [
-        { type: SdColumnValuesPipe }
-    ]; };
-
     var SdFilterExternalPipe = /** @class */ (function () {
         function SdFilterExternalPipe() {
         }
@@ -2817,36 +2815,6 @@
                 },] }
     ];
 
-    var _isMobileOrTablet;
-    var SdColumnChildrenFilterPipe = /** @class */ (function () {
-        function SdColumnChildrenFilterPipe(deviceService) {
-            _isMobileOrTablet.set(this, false);
-            __classPrivateFieldSet(this, _isMobileOrTablet, !deviceService.isDesktop());
-        }
-        SdColumnChildrenFilterPipe.prototype.transform = function (columns, item) {
-            var _this = this;
-            return columns.filter(function (column) {
-                var _a, _b;
-                var value = item === null || item === void 0 ? void 0 : item[column.field];
-                var transformValue = (_a = column.transform) === null || _a === void 0 ? void 0 : _a.call(column, item[column.field], item);
-                var templateValue = (_b = column.htmlTemplate) === null || _b === void 0 ? void 0 : _b.call(column, item[column.field], item, __classPrivateFieldGet(_this, _isMobileOrTablet));
-                return (value !== undefined && value !== null && value !== '')
-                    || (transformValue !== undefined && transformValue !== null && transformValue !== '')
-                    || (templateValue !== undefined && templateValue !== null && templateValue !== '');
-            });
-        };
-        return SdColumnChildrenFilterPipe;
-    }());
-    _isMobileOrTablet = new WeakMap();
-    SdColumnChildrenFilterPipe.decorators = [
-        { type: core.Pipe, args: [{
-                    name: 'columnChildrenFilter'
-                },] }
-    ];
-    SdColumnChildrenFilterPipe.ctorParameters = function () { return [
-        { type: ngxDeviceDetector.DeviceDetectorService }
-    ]; };
-
     var SdDesktopCommand = /** @class */ (function () {
         function SdDesktopCommand() {
             this.commands = [];
@@ -2867,182 +2835,6 @@
         commands: [{ type: core.Input }]
     };
 
-    var SdColumnBadgePipe = /** @class */ (function () {
-        function SdColumnBadgePipe() {
-        }
-        SdColumnBadgePipe.prototype.transform = function (value, rowData, column) {
-            var _a, _b, _c;
-            if (column.type === 'string' && (column === null || column === void 0 ? void 0 : column.badge)) {
-                return {
-                    type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
-                    color: column.badge(value, rowData),
-                    icon: (_a = column === null || column === void 0 ? void 0 : column.badgeIcon) === null || _a === void 0 ? void 0 : _a.call(column, value, rowData)
-                };
-            }
-            if (column.type === 'number' && (column === null || column === void 0 ? void 0 : column.badge)) {
-                return {
-                    type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
-                    color: column.badge(value, rowData),
-                    icon: (_b = column === null || column === void 0 ? void 0 : column.badgeIcon) === null || _b === void 0 ? void 0 : _b.call(column, value, rowData)
-                };
-            }
-            if (column.type === 'bool') {
-                return {
-                    type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
-                    color: !!value ? 'success' : 'danger',
-                    icon: null
-                };
-            }
-            if (column.type === 'values' && (column === null || column === void 0 ? void 0 : column.badge)) {
-                return {
-                    type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
-                    color: column.badge(value, rowData),
-                    icon: (_c = column === null || column === void 0 ? void 0 : column.badgeIcon) === null || _c === void 0 ? void 0 : _c.call(column, value, rowData)
-                };
-            }
-            return null;
-        };
-        return SdColumnBadgePipe;
-    }());
-    SdColumnBadgePipe.decorators = [
-        { type: core.Pipe, args: [{
-                    name: 'columnBadge'
-                },] }
-    ];
-    SdColumnBadgePipe.ctorParameters = function () { return []; };
-
-    var SdGridConfigurationResultPipe = /** @class */ (function () {
-        function SdGridConfigurationResultPipe(gridConfigurationService) {
-            this.gridConfigurationService = gridConfigurationService;
-        }
-        SdGridConfigurationResultPipe.prototype.transform = function (configuration, gridOption, sdSubInformation) {
-            var a = this.gridConfigurationService.generateConfigurationResult(configuration, gridOption, sdSubInformation);
-            console.log(a);
-            return a;
-        };
-        return SdGridConfigurationResultPipe;
-    }());
-    SdGridConfigurationResultPipe.decorators = [
-        { type: core.Pipe, args: [{
-                    name: 'sdGridConfigurationResult'
-                },] }
-    ];
-    SdGridConfigurationResultPipe.ctorParameters = function () { return [
-        { type: SdTableConfigurationService }
-    ]; };
-
-    var _cache$3;
-    var SdPopupGridConfiguration = /** @class */ (function () {
-        function SdPopupGridConfiguration(ref, notifyService, translateService, gridConfigurationService) {
-            var _this = this;
-            this.ref = ref;
-            this.notifyService = notifyService;
-            this.translateService = translateService;
-            this.gridConfigurationService = gridConfigurationService;
-            this.changes = new core.EventEmitter();
-            _cache$3.set(this, void 0);
-            this.isCreatingColumn = false;
-            this.selected = {};
-            this.disabledDrag = true;
-            this.open = function () { return __awaiter(_this, void 0, void 0, function () {
-                var _a;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            __classPrivateFieldSet(this, _cache$3, this.gridConfigurationService.init(this.key, this.gridOption));
-                            _a = this;
-                            return [4 /*yield*/, __classPrivateFieldGet(this, _cache$3).get()];
-                        case 1:
-                            _a.configuration = _b.sent();
-                            this.modal.open();
-                            return [2 /*return*/];
-                    }
-                });
-            }); };
-            this.onSave = function () {
-                __classPrivateFieldGet(_this, _cache$3).set(_this.configuration);
-                _this.modal.close();
-                _this.ref.detectChanges();
-            };
-            this.onReset = function () { return __awaiter(_this, void 0, void 0, function () {
-                var translate;
-                var _this = this;
-                return __generator(this, function (_a) {
-                    translate = this.translateService.translate;
-                    this.notifyService.confirm(translate('Reset grid configuration to default')).then(function () {
-                        __classPrivateFieldGet(_this, _cache$3).remove();
-                        _this.modal.close();
-                        _this.ref.detectChanges();
-                    });
-                    return [2 /*return*/];
-                });
-            }); };
-            this.createColumn = function () { return __awaiter(_this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    this.selected = {};
-                    this.isCreatingColumn = true;
-                    return [2 /*return*/];
-                });
-            }); };
-            this.confirm = function () { return __awaiter(_this, void 0, void 0, function () {
-                var generatedColumn;
-                return __generator(this, function (_a) {
-                    generatedColumn = {
-                        origin: {
-                            field: uuid.v4(),
-                            title: 'Generated',
-                            width: '300px',
-                        },
-                        fixed: false,
-                        invisible: false,
-                        title: 'Generated',
-                        width: '300px',
-                    };
-                    this.configuration.columns.push(generatedColumn);
-                    this.configuration = __classPrivateFieldGet(this, _cache$3).set(this.configuration);
-                    this.isCreatingColumn = false;
-                    return [2 /*return*/];
-                });
-            }); };
-        }
-        SdPopupGridConfiguration.prototype.ngOnInit = function () { };
-        SdPopupGridConfiguration.prototype.mouseUp = function (event) {
-            this.disabledDrag = true;
-        };
-        SdPopupGridConfiguration.prototype.dropTable = function (event) {
-            dragDrop.moveItemInArray(this.configuration.columns, event.previousIndex, event.currentIndex);
-            this.table.renderRows();
-        };
-        SdPopupGridConfiguration.prototype.handleMouseDown = function () {
-            this.disabledDrag = false;
-        };
-        SdPopupGridConfiguration.prototype.handleMouseUp = function () {
-            this.disabledDrag = true;
-        };
-        return SdPopupGridConfiguration;
-    }());
-    _cache$3 = new WeakMap();
-    SdPopupGridConfiguration.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sd-popup-grid-configuration',
-                    template: "<sd-modal width=\"sm\" [title]=\"'Configuration' | sdTranslate\" #modal>\r\n  <sd-modal-body *ngIf=\"configuration\">\r\n    <div *ngIf=\"!isCreatingColumn\" class=\"c-container\">\r\n      <div class=\"c-table\" style=\"max-height:70vh\">\r\n        <table #table mat-table [dataSource]=\"configuration.columns\"\r\n        cdkDropList\r\n        [cdkDropListData]=\"configuration.columns\"\r\n        (cdkDropListDropped)=\"dropTable($event)\">\r\n        >\r\n          <ng-container matColumnDef=\"stt\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width:50px\">#\r\n            </th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n              <div class=\"c-handle\" (mousedown) = \"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\r\n                <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                  <path d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"></path>\r\n                  <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n                </svg>\r\n              </div>\r\n\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"title\">\r\n            <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>{{'Title' | sdTranslate}}\r\n            </th>\r\n            <td class=\"px-5\" mat-cell *matCellDef=\"let item;\">\r\n              <sd-input [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" disableErrorMessage></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"width\">\r\n            <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width:80px\">{{'Width' | sdTranslate}}\r\n            </th>\r\n            <td class=\"px-5\" mat-cell *matCellDef=\"let item;\">\r\n              <!-- <span>{{item.width}}</span>\r\n              <mat-slider\r\n                  step=\"1\"\r\n                  min=\"0\"\r\n                  [max]=\"+item?.origin?.width*3\"\r\n                  [(ngModel)]=\"+item.width\"\r\n                  aria-label=\"units\">\r\n                </mat-slider> -->\r\n              <sd-input [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" disableErrorMessage></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"invisible\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width:80px\">{{'Hidden' |\r\n              sdTranslate}}\r\n            </th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item;\">\r\n              <mat-slide-toggle [(ngModel)]=\"item.invisible\" color=\"primary\">\r\n              </mat-slide-toggle>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"fixed\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width:80px\">{{'Freeze' |\r\n              sdTranslate}}\r\n            </th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item;\">\r\n              <mat-slide-toggle [(ngModel)]=\"item.fixed\" color=\"primary\"></mat-slide-toggle>\r\n            </td>\r\n          </ng-container>\r\n          <tr mat-header-row *matHeaderRowDef=\"['stt', 'title', 'width', 'invisible', 'fixed']; sticky: true\"></tr>\r\n          <tr mat-row *matRowDef=\"let row; columns: ['stt', 'title', 'width', 'invisible', 'fixed'];\" cdkDrag [cdkDragData]=\"row\" cdkDragLockAxis=\"y\" [cdkDragDisabled] = \"disabledDrag\"></tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"isCreatingColumn\">\r\n      <div class=\"c-table\" style=\"max-height:50vh\">\r\n        <table mat-table [dataSource]=\"configuration.columns\">\r\n          <ng-container matColumnDef=\"stt\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width:50px\">#\r\n            </th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n              <sd-checkbox *ngIf=\"isCreatingColumn\" [(model)]=\"selected[item.origin?.field]\"></sd-checkbox>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"title\">\r\n            <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>{{'Title' | sdTranslate}}\r\n            </th>\r\n            <td class=\"px-5\" mat-cell *matCellDef=\"let item;\">\r\n              <span *ngIf=\"isCreatingColumn\">{{item.title || item?.origin?.title}}</span>\r\n            </td>\r\n          </ng-container>\r\n          <tr mat-header-row *matHeaderRowDef=\"['stt', 'title']; sticky: true\"></tr>\r\n          <tr mat-row *matRowDef=\"let row; columns: ['stt', 'title'];\"></tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </sd-modal-body>\r\n  <sd-modal-footer>\r\n    <ng-container *ngIf=\"!isCreatingColumn\">\r\n      <!-- <sd-button class=\"mr-auto\" (action)=\"createColumn()\" [title]=\"'Create column' | sdTranslate\" color=\"info\"\r\n        size=\"sm\">\r\n      </sd-button> -->\r\n      <sd-button class=\"mr-5\" (action)=\"onReset()\" [title]=\"'Default' | sdTranslate\" color=\"info\" size=\"sm\">\r\n      </sd-button>\r\n      <sd-button (action)=\"onSave()\" [title]=\"'Save' | sdTranslate\" type=\"fill\" color=\"info\" size=\"sm\">\r\n      </sd-button>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isCreatingColumn\">\r\n      <sd-button class=\"mr-auto\" (action)=\"isCreatingColumn = false\" [title]=\"'Cancel' | sdTranslate\" color=\"info\"\r\n        size=\"sm\">\r\n      </sd-button>\r\n      <sd-button (action)=\"confirm()\" [title]=\"'Confirm' | sdTranslate\" type=\"fill\" color=\"info\" size=\"sm\">\r\n      </sd-button>\r\n    </ng-container>\r\n  </sd-modal-footer>\r\n</sd-modal>",
-                    styles: [".c-table{overflow:auto;position:relative}.c-table table{width:100%}.c-table .c-th{color:#000;font-size:14px;font-weight:500;line-height:20px}.c-container{min-height:200px;position:relative}.c-handle{color:#ccc;cursor:move}"]
-                },] }
-    ];
-    SdPopupGridConfiguration.ctorParameters = function () { return [
-        { type: core.ChangeDetectorRef },
-        { type: notify.SdNotifyService },
-        { type: translate.SdTranslateService },
-        { type: SdTableConfigurationService }
-    ]; };
-    SdPopupGridConfiguration.propDecorators = {
-        gridOption: [{ type: core.Input }],
-        key: [{ type: core.Input }],
-        modal: [{ type: core.ViewChild, args: ['modal',] }],
-        table: [{ type: core.ViewChild, args: ['table',] }],
-        mouseUp: [{ type: core.HostListener, args: ['window:mouseup', ['$event'],] }]
-    };
-
     var SdColumnTooltipPipe = /** @class */ (function () {
         function SdColumnTooltipPipe() {
         }
@@ -3358,12 +3150,12 @@
         {
             value: 'GREATER_OR_EQUAL',
             symbol: '≥',
-            display: 'Lớn hơn, hoặc bằng'
+            display: 'Lớn hơn, hoặc bằng',
         },
         {
             value: 'LESS_OR_EQUAL',
             symbol: '≤',
-            display: 'Nhỏ hơn, hoặc bằng'
+            display: 'Nhỏ hơn, hoặc bằng',
         },
         {
             value: 'CONTAIN',
@@ -3378,22 +3170,22 @@
         {
             value: 'START_WITH',
             symbol: 'line_start_circle',
-            display: 'Bắt đầu bởi'
+            display: 'Bắt đầu bởi',
         },
         {
             value: 'END_WITH',
             symbol: 'line_end_circle',
-            display: 'Kết thúc bởi'
+            display: 'Kết thúc bởi',
         },
         {
             value: 'IN',
             symbol: 'checklist_rtl',
-            display: 'Nằm trong'
+            display: 'Nằm trong',
         },
         {
             value: 'NOT_IN',
             symbol: 'event_list',
-            display: 'Không nằm trong'
+            display: 'Không nằm trong',
         },
     ];
 
@@ -3407,6 +3199,7 @@
             this.inlineOperatorChange = new core.EventEmitter();
             this.columnFilter = {};
             this.operators = [];
+            this.items = [];
             this.filterChange = new core.EventEmitter();
             _valueChanges.set(this, new rxjs.Subject());
             _subcription.set(this, new rxjs.Subscription());
@@ -3451,7 +3244,7 @@
         });
         Object.defineProperty(SdColumnInlineFilter.prototype, "_column", {
             set: function (column) {
-                var _a, _b, _c;
+                var _a, _b, _c, _d;
                 this.column = column;
                 if (!((_a = column === null || column === void 0 ? void 0 : column.filter) === null || _a === void 0 ? void 0 : _a.disabled) && ((_c = (_b = column === null || column === void 0 ? void 0 : column.filter) === null || _b === void 0 ? void 0 : _b.operator) === null || _c === void 0 ? void 0 : _c.enable)) {
                     this.operators = SdFilterOperators.filter(function (e) { var _a, _b; return (_b = (_a = column.filter.operator.list) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, e.value); });
@@ -3459,6 +3252,17 @@
                 else {
                     this.operators = [];
                 }
+                if (this.column.type === 'values') {
+                    if (Array.isArray(this.column.option.items)) {
+                        this.items = this.column.option.items;
+                    }
+                    else {
+                        this.items = ((_d = this.cacheValues) === null || _d === void 0 ? void 0 : _d[column.field]) || [];
+                    }
+                }
+                else if (this.column.type === 'lazy-values') {
+                    this.items = this.column.option.items;
+                }
             },
             enumerable: false,
             configurable: true
@@ -3468,7 +3272,7 @@
             __classPrivateFieldGet(this, _subcription).add(__classPrivateFieldGet(this, _valueChanges).pipe(operators.startWith(this.columnFilter)).subscribe(function () {
                 var _a, _b;
                 if (_this.column.type === 'date' || _this.column.type === 'time' || _this.column.type === 'datetime') {
-                    if (!((_b = (_a = _this.column) === null || _a === void 0 ? void 0 : _a.option) === null || _b === void 0 ? void 0 : _b.useFilterDate)) {
+                    if (!((_b = (_a = _this.column) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.useFilterDate)) {
                         _this.columnFilter[_this.column.field] = _this.columnFilter[_this.column.field] || {
                             from: null,
                             to: null,
@@ -3486,7 +3290,7 @@
     SdColumnInlineFilter.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-column-inline-filter',
-                    template: "<div class=\"d-flex c-inline-column\">\r\n  <ng-container\r\n    *ngIf=\"\r\n      column.type === 'string' ||\r\n        column.type === 'number' ||\r\n        column.type === 'bool' ||\r\n        column.type === 'values' ||\r\n        column.type === 'date' ||\r\n        column.type === 'datetime' ||\r\n        column.type === 'time';\r\n      else noFilter\r\n    \">\r\n    <div class=\"d-flex align-items-center\" *ngIf=\"operators.length\">\r\n      <!-- Only number column icon broken. add mb when not default symbol -->\r\n      <sd-button class=\"{{ (column.type === 'number' && inlineSymbol !== 'filter_alt') ? 'mb-4 mr-2 ' :'mr-2 '}}\" fontSet=\"material-symbols-outlined\" [icon]=\"inlineSymbol\" size=\"sm\"\r\n      [matMenuTriggerFor]=\"menu\" type=\"link\"> </sd-button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        <button *ngFor=\"let operator of operators\" (click)=\"onChangeOperator(operator)\" mat-menu-item type=\"button\">\r\n          <mat-icon  fontSet=\"material-symbols-outlined\" class=\"{{column.type === 'number' ? 'mb-8 ':''}}\">{{ operator.symbol }}</mat-icon>\r\n          <span> {{ operator.display }}</span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n    <sd-input\r\n      *ngIf=\"column.type === 'string'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      type=\"text\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-input>\r\n    <sd-input-number\r\n      *ngIf=\"column.type === 'number'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-input-number>\r\n    <sd-select\r\n      *ngIf=\"column.type === 'bool'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [items]=\"[\r\n        { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n        { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n      ]\"\r\n      valueField=\"value\"\r\n      displayField=\"display\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n      <ng-template sdSelectDisplayDef let-item=\"item\">\r\n        <sd-badge *ngIf=\"item.value === '1'\" color=\"success\" [title]=\"column.option?.displayOnTrue || 'True'\"> </sd-badge>\r\n        <sd-badge *ngIf=\"item.value === '0'\" color=\"danger\" [title]=\"column.option?.displayOnFalse || 'False'\"> </sd-badge>\r\n      </ng-template>\r\n    </sd-select>\r\n    <sd-select\r\n      *ngIf=\"column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [items]=\"column.option.items\"\r\n      [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\"\r\n      [multiple]=\"column?.option?.selection === 'MULTIPLE' || column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n      [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n    </sd-select>\r\n    <sd-autocomplete\r\n      *ngIf=\"column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [items]=\"column.option.items\"\r\n      [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-autocomplete>\r\n    <ng-container *ngIf=\"column.type === 'date' || column.type === 'datetime' || column.type === 'time'\">\r\n      <sd-date-range\r\n        *ngIf=\"!column.option?.useFilterDate\"\r\n        style=\"flex: 1\"\r\n        size=\"sm\"\r\n        [(from)]=\"columnFilter[column.field].from\"\r\n        [(to)]=\"columnFilter[column.field].to\"\r\n        (sdChange)=\"onFilterChange()\"\r\n        [disabled]=\"column.filter?.disabled\">\r\n      </sd-date-range>\r\n      <sd-date-time\r\n        *ngIf=\"column.option?.useFilterDate\"\r\n        style=\"flex: 1\"\r\n        type=\"date\"\r\n        size=\"sm\"\r\n        [(model)]=\"columnFilter[column.field]\"\r\n        (sdChange)=\"onFilterChange()\"\r\n        [disabled]=\"column.filter?.disabled\">\r\n      </sd-date-time>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #noFilter>\r\n    <sd-input type=\"text\" size=\"sm\" disabled> </sd-input>\r\n  </ng-template>\r\n</div>\r\n",
+                    template: "<div class=\"d-flex c-inline-column align-items-end\">\r\n  <ng-container\r\n    *ngIf=\"\r\n      column.type === 'string' ||\r\n        column.type === 'number' ||\r\n        column.type === 'bool' ||\r\n        column.type === 'values' ||\r\n        column.type === 'lazy-values' ||\r\n        column.type === 'date' ||\r\n        column.type === 'datetime' ||\r\n        column.type === 'time';\r\n      else noFilter\r\n    \">\r\n    <div class=\"d-flex align-items-center\" *ngIf=\"operators.length\">\r\n      <!-- Only number column icon broken. add mb when not default symbol -->\r\n      <sd-button class=\"{{ (column.type === 'number' && inlineSymbol !== 'filter_alt') ? 'mb-4 mr-2 ' :'mr-2 '}}\" fontSet=\"material-symbols-outlined\" [icon]=\"inlineSymbol\" size=\"sm\"\r\n      [matMenuTriggerFor]=\"menu\" type=\"link\"> </sd-button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        <button *ngFor=\"let operator of operators\" (click)=\"onChangeOperator(operator)\" mat-menu-item type=\"button\">\r\n          <mat-icon  fontSet=\"material-symbols-outlined\" class=\"{{column.type === 'number' ? 'mb-8 ':''}}\">{{ operator.symbol }}</mat-icon>\r\n          <span> {{ operator.display }}</span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n    <sd-input\r\n      *ngIf=\"column.type === 'string'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      type=\"text\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-input>\r\n    <sd-input-number\r\n      *ngIf=\"column.type === 'number'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-input-number>\r\n    <sd-select\r\n      *ngIf=\"column.type === 'bool'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [items]=\"[\r\n        { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n        { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n      ]\"\r\n      valueField=\"value\"\r\n      displayField=\"display\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n      <ng-template sdSelectDisplayDef let-item=\"item\">\r\n        <sd-badge *ngIf=\"item.value === '1'\" color=\"success\" [title]=\"column.option?.displayOnTrue || 'True'\"> </sd-badge>\r\n        <sd-badge *ngIf=\"item.value === '0'\" color=\"danger\" [title]=\"column.option?.displayOnFalse || 'False'\"> </sd-badge>\r\n      </ng-template>\r\n    </sd-select>\r\n    <sd-select\r\n      *ngIf=\"(column.type === 'values' || column.type === 'lazy-values') && column?.option?.selection !== 'AUTOCOMPLETE'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [items]=\"items\"\r\n      [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\"\r\n      [multiple]=\"column?.option?.selection === 'MULTIPLE' || column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n      [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n    </sd-select>\r\n    <sd-autocomplete\r\n      *ngIf=\"(column.type === 'values' || column.type === 'lazy-values') && column?.option?.selection === 'AUTOCOMPLETE'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [items]=\"items\"\r\n      [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-autocomplete>\r\n    <ng-container *ngIf=\"column.type === 'date' || column.type === 'datetime' || column.type === 'time'\">\r\n      <sd-date-range\r\n        *ngIf=\"!column.filter?.useFilterDate\"\r\n        style=\"flex: 1\"\r\n        size=\"sm\"\r\n        [(from)]=\"columnFilter[column.field].from\"\r\n        [(to)]=\"columnFilter[column.field].to\"\r\n        (sdChange)=\"onFilterChange()\"\r\n        [disabled]=\"column.filter?.disabled\">\r\n      </sd-date-range>\r\n      <sd-date-time\r\n        *ngIf=\"column.filter?.useFilterDate\"\r\n        style=\"flex: 1\"\r\n        type=\"date\"\r\n        size=\"sm\"\r\n        [(model)]=\"columnFilter[column.field]\"\r\n        (sdChange)=\"onFilterChange()\"\r\n        [disabled]=\"column.filter?.disabled\">\r\n      </sd-date-time>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #noFilter>\r\n    <sd-input type=\"text\" size=\"sm\" disabled> </sd-input>\r\n  </ng-template>\r\n</div>\r\n",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [":host ::ng-deep .c-inline-column .mat-form-field-wrapper{background-color:#fff;border-radius:8px;margin:8px 0 0!important;padding:0!important}"]
                 },] }
@@ -3499,6 +3303,7 @@
         _inlineOperator: [{ type: core.Input, args: ['inlineOperator',] }],
         inlineOperatorChange: [{ type: core.Output }],
         _columnFilter: [{ type: core.Input, args: ['columnFilter',] }],
+        cacheValues: [{ type: core.Input }],
         _column: [{ type: core.Input, args: ['column',] }],
         filterChange: [{ type: core.Output }]
     };
@@ -3605,223 +3410,31 @@
                 },] }
     ];
 
-    var SdGridQuickAction = /** @class */ (function () {
-        function SdGridQuickAction() {
+    var SdTableQuickAction = /** @class */ (function () {
+        function SdTableQuickAction() {
             var _this = this;
             this.clear = new core.EventEmitter();
             this.onClear = function () {
                 _this.clear.emit();
             };
         }
-        return SdGridQuickAction;
+        return SdTableQuickAction;
     }());
-    SdGridQuickAction.decorators = [
+    SdTableQuickAction.decorators = [
         { type: core.Component, args: [{
-                    selector: 'sd-grid-quick-action',
+                    selector: 'sd-table-quick-action',
                     template: "<sd-quick-action *ngIf=\"selectedItems | selectionActionFilter: gridOption?.selector?.actions as actions\"\r\n  [isOpened]=\"actions?.length\">\r\n  <div class=\"d-flex align-items-center\" sdMessage>\r\n    <div class=\"c-bg-length\">\r\n      <span class=\"c-length\">{{ selectedItems.length }}</span>\r\n    </div>\r\n    <div class=\"c-message\">{{ gridOption?.selector?.message || 'd\u1EEF li\u1EC7u \u0111\u01B0\u1EE3c ch\u1ECDn' }}</div>\r\n  </div>\r\n  <div class=\"d-flex align-items-center mr-8\" sdAction>\r\n    <ng-container *ngFor=\"let action of actions\">\r\n      <sd-button *ngIf=\"action.click\" class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon\"\r\n        [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n        [title]=\"action.title\" size=\"sm\" (action)=\"action.click(selectedItems)\"></sd-button>\r\n      <ng-container *ngIf=\"action.children?.length\">\r\n        <sd-button class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon || 'more_vert'\"\r\n          [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n          [title]=\"action.title\" size=\"sm\" [matMenuTriggerFor]=\"menu\">\r\n        </sd-button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <span>\r\n            <button *ngFor=\"let childAction of action.children\" mat-menu-item (click)=\"childAction.click(selectedItems)\"\r\n              [disabled]=\"childAction.disabled\">\r\n              <mat-icon [fontSet]=\"childAction.fontSet\" class=\"c-icon\">{{ childAction.icon }}\r\n              </mat-icon>\r\n              <span> {{ childAction.title }}</span>\r\n            </button>\r\n          </span>\r\n        </mat-menu>\r\n      </ng-container>\r\n    </ng-container>\r\n    <sd-button class=\"ml-5\" icon=\"close\" color=\"secondary\" type=\"outline\" size=\"sm\"\r\n      (action)=\"onClear()\" width=\"35px\"></sd-button>\r\n  </div>\r\n</sd-quick-action>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [".c-bg-length{align-items:flex-start;background:#2962ff;border-radius:4px 0 0 4px;display:flex;flex-direction:column;height:48px;left:0;min-width:48px;padding:12px 8px;position:static;top:0;width:auto}.c-bg-length .c-length{color:#fff;font-size:16px;font-weight:500;height:24px;left:8px;line-height:24px;min-width:32px;text-align:center;top:12px;width:auto}.c-bg-length .c-length,.c-message{font-family:Roboto;font-style:normal;position:static}.c-message{color:#000;font-size:14px;font-weight:400;height:20px;left:0;line-height:20px;margin:0 0 0 16px;min-width:200px;top:6px}"]
                 },] }
     ];
-    SdGridQuickAction.ctorParameters = function () { return []; };
-    SdGridQuickAction.propDecorators = {
+    SdTableQuickAction.ctorParameters = function () { return []; };
+    SdTableQuickAction.propDecorators = {
         gridOption: [{ type: core.Input }],
         selectedItems: [{ type: core.Input }],
         clear: [{ type: core.Output }]
     };
 
-    var _maxSecond, _maxMinute, _maxHour, _maxDay, _maxMonth, _isMobileOrTablet$1;
-    var SdCellViewPipe = /** @class */ (function () {
-        function SdCellViewPipe(deviceService, utilityService, columnValuesPipe) {
-            this.utilityService = utilityService;
-            this.columnValuesPipe = columnValuesPipe;
-            _maxSecond.set(this, 60);
-            _maxMinute.set(this, __classPrivateFieldGet(this, _maxSecond) * 60);
-            _maxHour.set(this, __classPrivateFieldGet(this, _maxMinute) * 24);
-            _maxDay.set(this, __classPrivateFieldGet(this, _maxHour) * 30);
-            _maxMonth.set(this, __classPrivateFieldGet(this, _maxHour) * 365);
-            _isMobileOrTablet$1.set(this, false);
-            __classPrivateFieldSet(this, _isMobileOrTablet$1, !deviceService.isDesktop());
-        }
-        SdCellViewPipe.prototype.transform = function (value, tableItem, column, gridOption) {
-            var _a;
-            return __awaiter(this, void 0, void 0, function () {
-                var displayOnEmpty, rowData, align, click, tooltip, htmlTemplate, transform, result, transformDate, val, _b, option, seconds, date, time, dateTime, _c, option, values, display, emptyValues;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
-                        case 0:
-                            displayOnEmpty = gridOption.displayOnEmpty;
-                            rowData = tableItem.current;
-                            align = column.align, click = column.click, tooltip = column.tooltip, htmlTemplate = column.htmlTemplate, transform = column.transform;
-                            result = {
-                                badge: null,
-                                tooltip: null,
-                                display: {
-                                    align: align || (column.type === 'number' ? 'right' : 'left'),
-                                    value: value
-                                },
-                                click: null
-                            };
-                            if (!(typeof (htmlTemplate) === 'function')) return [3 /*break*/, 1];
-                            result.display.hasHtml = true;
-                            result.display.html = htmlTemplate(value, rowData, __classPrivateFieldGet(this, _isMobileOrTablet$1));
-                            return [3 /*break*/, 10];
-                        case 1:
-                            if (column.type === 'datetime' || column.type === 'date' || column.type === 'time') {
-                                transformDate = column.transformDate;
-                                if (transformDate) {
-                                    value = transformDate(value, rowData);
-                                }
-                            }
-                            if (!(typeof (transform) === 'function')) return [3 /*break*/, 5];
-                            val = transform(value, rowData);
-                            if (!(val instanceof Promise)) return [3 /*break*/, 3];
-                            _b = result.display;
-                            return [4 /*yield*/, val];
-                        case 2:
-                            _b.value = _d.sent();
-                            return [3 /*break*/, 4];
-                        case 3:
-                            result.display.value = val;
-                            _d.label = 4;
-                        case 4: return [3 /*break*/, 9];
-                        case 5:
-                            if (column.type === 'date' || column.type === 'datetime') {
-                                option = column.option;
-                                seconds = Math.round((new Date().getTime() - new Date(value).getTime()) / 1000);
-                                if ((option === null || option === void 0 ? void 0 : option.timeDifferent) === 'month' && seconds < __classPrivateFieldGet(this, _maxMonth)) {
-                                    result.display.value = this.utilityService.timeDifference(value);
-                                    result.tooltip = Date.toFormat(value, column.type === 'date' ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm');
-                                }
-                                else if ((option === null || option === void 0 ? void 0 : option.timeDifferent) === 'day' && seconds < __classPrivateFieldGet(this, _maxDay)) {
-                                    result.display.value = this.utilityService.timeDifference(value);
-                                    result.tooltip = Date.toFormat(value, column.type === 'date' ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm');
-                                }
-                                else if ((option === null || option === void 0 ? void 0 : option.timeDifferent) === 'hour' && seconds < __classPrivateFieldGet(this, _maxHour)) {
-                                    result.display.value = this.utilityService.timeDifference(value);
-                                    result.tooltip = Date.toFormat(value, column.type === 'date' ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm');
-                                }
-                                else if ((option === null || option === void 0 ? void 0 : option.timeDifferent) === 'minute' && seconds < __classPrivateFieldGet(this, _maxMinute)) {
-                                    result.display.value = this.utilityService.timeDifference(value);
-                                    result.tooltip = Date.toFormat(value, column.type === 'date' ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm');
-                                }
-                                else if ((option === null || option === void 0 ? void 0 : option.timeDifferent) === 'second' && seconds < __classPrivateFieldGet(this, _maxSecond)) {
-                                    result.display.value = this.utilityService.timeDifference(value);
-                                    result.tooltip = Date.toFormat(value, column.type === 'date' ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm');
-                                }
-                                else {
-                                    date = Date.toFormat(value, 'dd/MM/yyyy');
-                                    time = Date.toFormat(value, 'HH:mm');
-                                    dateTime = Date.toFormat(value, 'HH:mm');
-                                    if (column.type === 'datetime' && time && time !== '00:00') {
-                                        result.display.value = dateTime;
-                                        result.display.hasHtml = true;
-                                        result.display.html = "<span class=\"d-block T14R text-black400\">" + Date.toFormat(value, 'HH:mm') + "</span><span class=\"d-block T14R\">" + Date.toFormat(value, 'dd/MM/yyyy') + "</span>";
-                                    }
-                                    else {
-                                        result.display.value = date;
-                                    }
-                                }
-                            }
-                            if (column.type === 'time') {
-                                result.display.value = Date.toFormat(value, 'HH:mm');
-                            }
-                            if (!(column.type === 'values')) return [3 /*break*/, 7];
-                            _c = result.display;
-                            return [4 /*yield*/, this.columnValuesPipe.transform(value, column)];
-                        case 6:
-                            _c.value = _d.sent();
-                            return [3 /*break*/, 8];
-                        case 7:
-                            if (column.type === 'number' && Number.isNumber(value)) {
-                                result.display.value = Number.toVNCurrency(value);
-                            }
-                            _d.label = 8;
-                        case 8:
-                            if (column.type === 'bool') {
-                                option = column.option;
-                                if (value !== undefined && value !== null && value !== '') {
-                                    result.display.value = value === true ? ((option === null || option === void 0 ? void 0 : option.displayOnTrue) || 'True') : ((option === null || option === void 0 ? void 0 : option.displayOnFalse) || 'False');
-                                }
-                                else {
-                                    result.display.value = null;
-                                }
-                            }
-                            _d.label = 9;
-                        case 9:
-                            if (displayOnEmpty) {
-                                values = [null, undefined, ''];
-                                if (typeof (displayOnEmpty) === 'object') {
-                                    display = displayOnEmpty.display, emptyValues = displayOnEmpty.emptyValues;
-                                    values = __spread([null, undefined, ''], emptyValues);
-                                    if (values.includes(result.display.value)) {
-                                        if (typeof (display) === 'function') {
-                                            result.display.hasHtml = true;
-                                            result.display.html = display(rowData, column);
-                                        }
-                                        else {
-                                            result.display.hasHtml = true;
-                                            result.display.html = "<div class=\"T16R text-black400\">--</div>";
-                                        }
-                                    }
-                                }
-                                else {
-                                    if (values.includes(result.display.value)) {
-                                        if (typeof (displayOnEmpty) === 'function') {
-                                            result.display.hasHtml = true;
-                                            result.display.html = displayOnEmpty(rowData, column);
-                                        }
-                                        else {
-                                            result.display.hasHtml = true;
-                                            result.display.html = "<div class=\"T16R text-black400\">--</div>";
-                                        }
-                                    }
-                                }
-                            }
-                            _d.label = 10;
-                        case 10:
-                            // Badge
-                            if ((column.type === 'string' || column.type === 'number' || column.type === 'values') && column.badge) {
-                                result.badge = {
-                                    type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
-                                    color: column.badge(value, rowData),
-                                    icon: (_a = column === null || column === void 0 ? void 0 : column.badgeIcon) === null || _a === void 0 ? void 0 : _a.call(column, value, rowData)
-                                };
-                            }
-                            else if (column.type === 'bool') {
-                                result.badge = {
-                                    type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
-                                    color: !!value ? 'success' : 'danger',
-                                    icon: null
-                                };
-                            }
-                            // Tooltip
-                            if (typeof (tooltip) === 'function') {
-                                result.tooltip = tooltip(value, rowData);
-                            }
-                            // Clickable
-                            if (typeof (click) === 'function') {
-                                result.click = function () { return click(value, rowData); };
-                            }
-                            return [2 /*return*/, result];
-                    }
-                });
-            });
-        };
-        return SdCellViewPipe;
-    }());
-    _maxSecond = new WeakMap(), _maxMinute = new WeakMap(), _maxHour = new WeakMap(), _maxDay = new WeakMap(), _maxMonth = new WeakMap(), _isMobileOrTablet$1 = new WeakMap();
-    SdCellViewPipe.decorators = [
-        { type: core.Pipe, args: [{
-                    name: 'cellView'
-                },] }
-    ];
-    SdCellViewPipe.ctorParameters = function () { return [
-        { type: ngxDeviceDetector.DeviceDetectorService },
-        { type: utility.SdUtilityService },
-        { type: SdColumnValuesPipe }
-    ]; };
-
     var SdGroupPipe = /** @class */ (function () {
         function SdGroupPipe() {
         }
@@ -3969,7 +3582,7 @@
                         group.SdGroupModule,
                     ],
                     declarations: [
-                        SdGridQuickAction,
+                        SdTableQuickAction,
                         SdDesktopCell,
                         SdDesktopCellView,
                         SdDesktopCommand,
@@ -3980,28 +3593,21 @@
                         SdMaterialFilterDefDirective,
                         SdMaterialSubInformationDefDirective,
                         SdMaterialEmptyDataDefDirective,
-                        SdPopupGridConfiguration,
-                        SdGridFilter,
+                        SdPopupConfiguration,
+                        SdTableFilter,
                         SdPopupFilter,
                         // Pipes
-                        SdGridConfigurationResultPipe,
-                        SdColumnChildrenFilterPipe,
                         SdCommandFilterPipe,
                         SdCommandDisablePipe,
                         SdCommandIconPipe,
                         SdCommandTitlePipe,
-                        SdColumnValuesPipe,
-                        SdColumnHtmlTemplatePipe,
-                        SdColumnTransformPipe,
                         SdColumnTooltipPipe,
-                        SdColumnBadgePipe,
                         SdFilterColumnPipe,
                         SdFilterExternalPipe,
                         SdSelectionActionFilterPipe,
                         SdSelectionVisiblePipe,
                         SdSelectionDisablePipe,
                         SdSelectionVisibleSelectAllPipe,
-                        SdCellViewPipe,
                         SdGroupPipe,
                     ],
                     exports: [
@@ -4018,7 +3624,6 @@
                         table$1.CdkColumnDef,
                         SdTableFilterService,
                         SdTableConfigurationService,
-                        SdColumnValuesPipe,
                         {
                             provide: paginator.MatPaginatorIntl,
                             useClass: MatPaginatorIntlCro,
@@ -4037,41 +3642,34 @@
     exports.SdTable = SdTable;
     exports.SdTableModule = SdTableModule;
     exports.TABLE_CONFIG = TABLE_CONFIG;
-    exports.ɵa = SdGridQuickAction;
+    exports.ɵa = SdTableQuickAction;
     exports.ɵb = SdDesktopCell;
-    exports.ɵba = SdColumnTooltipPipe;
-    exports.ɵbb = SdColumnBadgePipe;
-    exports.ɵbc = SdFilterColumnPipe;
-    exports.ɵbd = SdFilterExternalPipe;
-    exports.ɵbe = SdSelectionActionFilterPipe;
-    exports.ɵbf = SdSelectionVisiblePipe;
-    exports.ɵbg = SdSelectionDisablePipe;
-    exports.ɵbh = SdSelectionVisibleSelectAllPipe;
-    exports.ɵbi = SdCellViewPipe;
-    exports.ɵbj = SdGroupPipe;
+    exports.ɵba = SdSelectionDisablePipe;
+    exports.ɵbb = SdSelectionVisibleSelectAllPipe;
+    exports.ɵbc = SdGroupPipe;
     exports.ɵc = SdDesktopCellView;
     exports.ɵd = SdDesktopCommand;
     exports.ɵe = SdColumnInlineFilter;
-    exports.ɵf = SdGridFilter;
-    exports.ɵg = SdPopupFilter;
-    exports.ɵh = SdMaterialSubInformationDefDirective;
-    exports.ɵi = SdMaterialEmptyDataDefDirective;
-    exports.ɵj = SdMaterialCellDefDirective;
-    exports.ɵk = SdMaterialFooterDefDirective;
-    exports.ɵl = SdMaterialFilterDefDirective;
-    exports.ɵn = TABLE_CONFIG;
-    exports.ɵo = SdTableConfigurationService;
-    exports.ɵp = SdColumnValuesPipe;
+    exports.ɵf = SdPopupConfiguration;
+    exports.ɵg = SdTableConfigurationService;
+    exports.ɵi = TABLE_CONFIG;
+    exports.ɵj = SdTableFilter;
+    exports.ɵk = SdPopupFilter;
+    exports.ɵl = SdMaterialSubInformationDefDirective;
+    exports.ɵm = SdMaterialEmptyDataDefDirective;
+    exports.ɵn = SdMaterialCellDefDirective;
+    exports.ɵo = SdMaterialFooterDefDirective;
+    exports.ɵp = SdMaterialFilterDefDirective;
     exports.ɵq = SdTableFilterService;
-    exports.ɵr = SdPopupGridConfiguration;
-    exports.ɵs = SdGridConfigurationResultPipe;
-    exports.ɵt = SdColumnChildrenFilterPipe;
-    exports.ɵu = SdCommandFilterPipe;
-    exports.ɵv = SdCommandDisablePipe;
-    exports.ɵw = SdCommandIconPipe;
-    exports.ɵx = SdCommandTitlePipe;
-    exports.ɵy = SdColumnHtmlTemplatePipe;
-    exports.ɵz = SdColumnTransformPipe;
+    exports.ɵr = SdCommandFilterPipe;
+    exports.ɵs = SdCommandDisablePipe;
+    exports.ɵt = SdCommandIconPipe;
+    exports.ɵu = SdCommandTitlePipe;
+    exports.ɵv = SdColumnTooltipPipe;
+    exports.ɵw = SdFilterColumnPipe;
+    exports.ɵx = SdFilterExternalPipe;
+    exports.ɵy = SdSelectionActionFilterPipe;
+    exports.ɵz = SdSelectionVisiblePipe;
 
     Object.defineProperty(exports, '__esModule', { value: true });