@sd-angular/core 1.3.150 → 1.3.151

package/fesm2015/sd-angular-core-table.js

@@ -1,11 +1,11 @@
 import { SdScrollDirective, SdCommonModule } from '@sd-angular/core/common';
-import { InjectionToken, Directive, TemplateRef, Input, Component, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, Injectable, Inject, Optional, Pipe, QueryList, ContentChild, ContentChildren, EventEmitter, HostListener, Output, NgModule } from '@angular/core';
+import { InjectionToken, Directive, TemplateRef, Input, Component, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, Injectable, Inject, Optional, EventEmitter, HostListener, QueryList, ContentChild, ContentChildren, Pipe, Output, NgModule } from '@angular/core';
 import { CommonModule, DatePipe, DecimalPipe } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { __classPrivateFieldGet, __classPrivateFieldSet, __awaiter, __rest } from 'tslib';
+import { __classPrivateFieldGet, __classPrivateFieldSet, __awaiter } from 'tslib';
 import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { trigger, state, style, transition, animate } from '@angular/animations';
@@ -16,15 +16,15 @@ import { startWith, map, debounceTime, switchMap } from 'rxjs/operators';
 import { SdModal } from '@sd-angular/core/modal';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { SdExportService } from '@sd-angular/core/export';
-import * as hash from 'object-hash';
-import hash__default from 'object-hash';
 import { SdSettingService } from '@sd-angular/core/setting';
 import { SdQuickAction } from '@sd-angular/core/quick-action';
+import * as hash from 'object-hash';
+import hash__default from 'object-hash';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { MatTableModule } from '@angular/material/table';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { CdkTableModule, CdkColumnDef } from '@angular/cdk/table';
 import { ScrollingModule } from '@angular/cdk/scrolling';
-import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatButtonModule } from '@angular/material/button';
@@ -35,10 +35,8 @@ import { MatRadioModule } from '@angular/material/radio';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { SdFormModule } from '@sd-angular/core/form';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { SdTranslateService } from '@sd-angular/core/translate';
 import { MatListModule } from '@angular/material/list';
 import { MatDividerModule } from '@angular/material/divider';
-import { SdUtilityService } from '@sd-angular/core/utility';
 import { SdGroupModule } from '@sd-angular/core/group';
 
 const DEFAULT_TABLE_CONFIG = {
@@ -126,7 +124,7 @@ _filterRegister = new WeakMap();
 SdPopupFilter.decorators = [
     { type: 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: 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}"]
             },] }
@@ -143,7 +141,7 @@ SdPopupFilter.propDecorators = {
 };
 
 var _subscription;
-class SdGridFilter {
+class SdTableFilter {
     constructor(ref, deviceService) {
         this.ref = ref;
         this.deviceService = deviceService;
@@ -214,19 +212,19 @@ class SdGridFilter {
     }
 }
 _subscription = new WeakMap();
-SdGridFilter.decorators = [
+SdTableFilter.decorators = [
     { type: 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: 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 = () => [
+SdTableFilter.ctorParameters = () => [
     { type: ChangeDetectorRef },
     { type: DeviceDetectorService }
 ];
-SdGridFilter.propDecorators = {
+SdTableFilter.propDecorators = {
     popupFilter: [{ type: ViewChild, args: [SdPopupFilter,] }],
     _filter: [{ type: Input, args: ['filter',] }],
     columns: [{ type: Input }],
@@ -301,221 +299,34 @@ SdMaterialEmptyDataDefDirective.ctorParameters = () => [
     { type: TemplateRef }
 ];
 
-var _COLUMNS, _cache, _getKey, _default, _load, _get, _set, _remove;
+var _COLUMNS, _prefix, _getSetting, _default;
 class SdTableConfigurationService {
     constructor(settingService, gridMaterialConfiguration) {
         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 = (key, gridOption) => {
-            if (!__classPrivateFieldGet(this, _cache)[key]) {
-                const subject = new Subject();
-                __classPrivateFieldGet(this, _cache)[key] = {
-                    load: __classPrivateFieldGet(this, _load).call(this, gridOption, subject),
-                    get: __classPrivateFieldGet(this, _get).call(this, gridOption),
-                    set: (configuration) => {
-                        configuration = __classPrivateFieldGet(this, _set).call(this, gridOption, configuration);
-                        subject.next(Object.assign({}, configuration));
-                        return configuration;
-                    },
-                    remove: () => {
-                        __classPrivateFieldGet(this, _remove).call(this, gridOption)();
-                        subject.next(__classPrivateFieldGet(this, _default).call(this, gridOption));
-                    },
-                    observer: subject,
-                };
-            }
-            return __classPrivateFieldGet(this, _cache)[key];
-        };
-        _getKey.set(this, (gridOption) => {
-            var _a, _b;
-            const 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;
+        _prefix.set(this, 'bd364e28-fe67-48b9-a537-1a306f7d195c');
+        _getSetting.set(this, (gridOption) => {
+            if (gridOption === null || gridOption === void 0 ? void 0 : gridOption.key) {
+                throw new Error('Invalid key');
             }
-            return hash__default({
-                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),
-            });
-        });
-        _default.set(this, (gridOption) => {
-            var _a;
-            const columns = ((_a = gridOption === null || gridOption === void 0 ? void 0 : gridOption.columns) === null || _a === void 0 ? void 0 : _a.filter(e => !e.hidden).map(e => ({
-                origin: {
-                    field: e.field,
-                    title: e.title,
-                    width: e.width,
-                    invisible: e.invisible,
-                },
-                invisible: e.invisible,
-                fixed: false,
-            }))) || [];
-            return {
-                columns,
-            };
-        });
-        _load.set(this, (gridOption, subject) => {
-            return () => __awaiter(this, void 0, void 0, function* () {
-                const get = __classPrivateFieldGet(this, _get).call(this, gridOption);
-                const configuration = yield get();
-                subject.next(Object.assign({}, configuration));
-            });
-        });
-        _get.set(this, (gridOption) => {
-            return () => __awaiter(this, void 0, void 0, function* () {
-                const key = __classPrivateFieldGet(this, _getKey).call(this, gridOption);
-                if (!key) {
-                    return __classPrivateFieldGet(this, _default).call(this, gridOption);
-                }
-                const { columns, config } = gridOption;
-                let configuration;
-                if ((config === null || config === void 0 ? void 0 : config.storage) === 'server') {
-                    const { get, remove } = this.settingService.createServer(key, {
-                        args: config === null || config === void 0 ? void 0 : config.args,
-                    });
-                    configuration = yield get().catch(() => undefined);
-                    if (!(configuration === null || configuration === void 0 ? void 0 : configuration.columns)) {
-                        remove().catch(console.error);
-                        return __classPrivateFieldGet(this, _default).call(this, gridOption);
-                    }
-                }
-                else {
-                    const { get, remove } = this.settingService.create(key, {
-                        type: config === null || config === void 0 ? void 0 : config.storage,
-                        args: config === null || config === void 0 ? void 0 : config.args,
-                    });
-                    configuration = get();
-                    if (!(configuration === null || configuration === void 0 ? void 0 : configuration.columns)) {
-                        remove();
-                        return __classPrivateFieldGet(this, _default).call(this, 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 => { 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 configuration;
+            return this.settingService.create({ prefix: __classPrivateFieldGet(this, _prefix), key: gridOption.key }, {
+                default: __classPrivateFieldGet(this, _default).call(this, gridOption),
             });
         });
-        _set.set(this, (gridOption, configuration) => {
-            var _a, _b, _c, _d;
-            const 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') {
-                    const { 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(configuration);
-                }
-                else {
-                    const { 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(configuration);
-                }
+        this.loadConfiguration = (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, (gridOption) => {
-            return () => {
-                var _a, _b, _c, _d;
-                const 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') {
-                        const { 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();
-                    }
-                    else {
-                        const { 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();
-                    }
-                }
-            };
-        });
-        // 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 = (configuration, gridOption, sdSubInformation) => {
+            const setting = __classPrivateFieldGet(this, _getSetting).call(this, gridOption);
+            return setting.get();
+        };
+        this.loadConfigurationResult = (gridOption, configuration) => {
             var _a, _b;
             const result = {
                 column: {},
@@ -567,7 +378,7 @@ class SdTableConfigurationService {
                     }
                 }
             });
-            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);
             }
@@ -576,9 +387,28 @@ class SdTableConfigurationService {
             result.displayedFooters = result.displayedColumns.filter(val => val !== __classPrivateFieldGet(this, _COLUMNS).SUBINFORMATION);
             return result;
         };
+        this.init = (gridOption) => {
+            return __classPrivateFieldGet(this, _getSetting).call(this, gridOption);
+        };
+        _default.set(this, (gridOption) => {
+            var _a;
+            const columns = ((_a = gridOption === null || gridOption === void 0 ? void 0 : gridOption.columns) === null || _a === void 0 ? void 0 : _a.filter(e => !e.hidden).map(e => ({
+                origin: {
+                    field: e.field,
+                    title: e.title,
+                    width: e.width,
+                    invisible: e.invisible,
+                },
+                invisible: e.invisible,
+                fixed: false,
+            }))) || [];
+            return {
+                columns,
+            };
+        });
     }
 }
-_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: Injectable }
 ];
@@ -588,10 +418,10 @@ SdTableConfigurationService.ctorParameters = () => [
 ];
 
 const MapToSdTableItem = (item) => ({
-    current: JSON.parse(JSON.stringify(item)),
-    origin: item,
+    data: item,
     meta: {
         id: hash(item),
+        display: {},
         expand: {
             isExpanding: false,
             isExpanded: false,
@@ -601,73 +431,13 @@ const MapToSdTableItem = (item) => ({
     },
 });
 
-var _prefix, _cache$1;
-class SdColumnValuesPipe {
-    constructor() {
-        _prefix.set(this, 'a1e67660-8aa2-4c11-b02d-71a32188719f');
-        _cache$1.set(this, {});
-        this.transform = (value, column) => __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-            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 value;
-            }
-            const _l = column.option, { items, valueField, displayField, selection } = _l, remain = __rest(_l, ["items", "valueField", "displayField", "selection"]);
-            const key = hash__default({
-                prefix: __classPrivateFieldGet(this, _prefix),
-                valueField,
-                displayField,
-                selection,
-                remain,
-                value
-            });
-            const isMultible = ['MULTIPLE', 'MULTIPLEAUTOCOMPLETE', 'MULTIPLE_EDITOR', 'MULTIPLEAUTOCOMPLETE_EDITOR'].includes(selection);
-            if (typeof (items) === 'function') {
-                if (!__classPrivateFieldGet(this, _cache$1)[key]) {
-                    const values = yield items(value, true);
-                    let result = '';
-                    if (isMultible && Array.isArray(value)) {
-                        result = ((_e = (_d = values === null || values === void 0 ? void 0 : values.filter(e => 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(e => 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(e => (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
-                    };
-                }
-            }
-            else {
-                if (!__classPrivateFieldGet(this, _cache$1)[key]) {
-                    let result = '';
-                    if (isMultible && Array.isArray(value)) {
-                        result = (_j = (_h = (_g = items === null || items === void 0 ? void 0 : items.filter(e => 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(e => 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(e => (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
-                    };
-                }
-            }
-            return __classPrivateFieldGet(this, _cache$1)[key].result;
-        });
-    }
-}
-_prefix = new WeakMap(), _cache$1 = new WeakMap();
-SdColumnValuesPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'columnValues'
-            },] }
-];
-
-var _filterConfiguration, _filterValue, _cache$2, _defaultConfiguration, _defaultValue, _initConfiguration, _initValue;
+var _filterConfiguration, _filterValue, _cache, _defaultConfiguration, _defaultValue, _initConfiguration, _initValue;
 class SdTableFilterService {
     constructor(settingService) {
         this.settingService = settingService;
         _filterConfiguration.set(this, 'GRID-FILTER-CONFIGURATION');
         _filterValue.set(this, 'GRID-FILTER-VALUE');
-        _cache$2.set(this, {});
+        _cache.set(this, {});
         this.register = (filter, args) => {
             let cacheSession = false;
             const { id, columns, externalFilters } = args;
@@ -680,7 +450,7 @@ class SdTableFilterService {
             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
                 const filterConfiguration = this.settingService.create({
                     prefix: __classPrivateFieldGet(this, _filterConfiguration),
@@ -701,7 +471,7 @@ class SdTableFilterService {
                 });
                 // Lấy giá trị value merge với giá trị default của args nếu như args có thay đổi
                 filterValue.set(__classPrivateFieldGet(this, _initValue).call(this, args, filterValue.get()));
-                __classPrivateFieldGet(this, _cache$2)[key] = {
+                __classPrivateFieldGet(this, _cache)[key] = {
                     configuration: {
                         get: () => {
                             return filterConfiguration.get();
@@ -757,7 +527,7 @@ class SdTableFilterService {
                     },
                 };
             }
-            return __classPrivateFieldGet(this, _cache$2)[key];
+            return __classPrivateFieldGet(this, _cache)[key];
         };
         _defaultConfiguration.set(this, (args) => {
             var _a;
@@ -877,7 +647,7 @@ class 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: Injectable }
 ];
@@ -885,15 +655,78 @@ SdTableFilterService.ctorParameters = () => [
     { type: 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;
+class SdPopupConfiguration {
+    constructor(ref, notifyService, gridConfigurationService) {
+        this.ref = ref;
+        this.notifyService = notifyService;
+        this.gridConfigurationService = gridConfigurationService;
+        this.changes = new EventEmitter();
+        _setting.set(this, void 0);
+        this.isCreatingColumn = false;
+        this.selected = {};
+        this.disabledDrag = true;
+        this.open = () => __awaiter(this, void 0, void 0, function* () {
+            __classPrivateFieldSet(this, _setting, this.gridConfigurationService.init(this.gridOption));
+            this.configuration = __classPrivateFieldGet(this, _setting).get();
+            this.modal.open();
+        });
+        this.onSave = () => {
+            __classPrivateFieldGet(this, _setting).set(this.configuration);
+            this.modal.close();
+            this.ref.detectChanges();
+        };
+        this.onReset = () => __awaiter(this, void 0, void 0, function* () {
+            this.notifyService.confirm('Xác nhận đưa tất cả thiết lập về mặc định').then(() => {
+                __classPrivateFieldGet(this, _setting).remove();
+                this.modal.close();
+                this.ref.detectChanges();
+            });
+        });
+    }
+    ngOnInit() { }
+    mouseUp(event) {
+        this.disabledDrag = true;
+    }
+    dropTable(event) {
+        moveItemInArray(this.configuration.columns, event.previousIndex, event.currentIndex);
+        this.table.renderRows();
+    }
+    handleMouseDown() {
+        this.disabledDrag = false;
+    }
+    handleMouseUp() {
+        this.disabledDrag = true;
+    }
+}
+_setting = new WeakMap();
+SdPopupConfiguration.decorators = [
+    { type: 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 = () => [
+    { type: ChangeDetectorRef },
+    { type: SdNotifyService },
+    { type: SdTableConfigurationService }
+];
+SdPopupConfiguration.propDecorators = {
+    gridOption: [{ type: Input }],
+    modal: [{ type: ViewChild, args: ['modal',] }],
+    table: [{ type: ViewChild, args: ['table',] }],
+    mouseUp: [{ type: 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;
 class SdTable {
-    constructor(ref, configuration, gridConfigurationService, exportService, notifyService, columnValuesPipe, gridFilterService) {
+    constructor(ref, tableConfiguration, gridConfigurationService, exportService, notifyService, gridFilterService) {
         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, v4());
         this.key = v4();
@@ -928,6 +761,8 @@ class SdTable {
         this.isSelectAll = false;
         this.exportTitle = 'Export';
         _loadCompleted.set(this, false);
+        this.cacheValues = {};
+        _cacheObjValues.set(this, {});
         _initCellDef.set(this, () => {
             this.cellDef = {};
             for (const cellDef of this.sdCellDefs) {
@@ -972,23 +807,23 @@ class SdTable {
             // 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,
             };
             for (const column of option.columns || []) {
                 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) || [];
                     }
                 }
             }
@@ -1026,7 +861,7 @@ class SdTable {
             const { rawColumnFilter, orderBy, orderDirection, pageSize, pageNumber } = filterInfo;
             const items = localItems.filter(tableItem => {
                 var _a, _b, _c, _d;
-                const item = tableItem.current;
+                const item = tableItem.data;
                 for (const column of columns) {
                     const { field, type } = column;
                     const filterValue = (rawColumnFilter[field] || '').toString().trim().toLowerCase();
@@ -1040,7 +875,7 @@ class SdTable {
                                 return false;
                             }
                         }
-                        else if (type === 'values') {
+                        else if (type === 'values' || type === 'lazy-values') {
                             if (columnValue !== filterValue) {
                                 return false;
                             }
@@ -1107,17 +942,17 @@ class SdTable {
                 if (column) {
                     const { type, field } = column;
                     items.sort((tableItemCurrent, tableItemNext) => {
-                        const current = tableItemCurrent.current;
-                        const next = tableItemNext.current;
+                        const data = tableItemCurrent.data;
+                        const next = tableItemNext.data;
                         if (type === 'number') {
-                            return (current[field] || 0) - (next[field] || 0);
+                            return (data[field] || 0) - (next[field] || 0);
                         }
                         if (type === 'date' || type === 'datetime' || type === 'time') {
-                            const d1 = new Date(current[field] || '').getTime();
-                            const d2 = new Date(current[field] || '').getTime();
+                            const d1 = new Date(data[field] || '').getTime();
+                            const d2 = new Date(data[field] || '').getTime();
                             return d1 - d2;
                         }
-                        const s1 = (current[field] || '').toString();
+                        const s1 = (data[field] || '').toString();
                         const s2 = (next[field] || '').toString();
                         if (s1 > s2) {
                             return 1;
@@ -1153,7 +988,7 @@ class SdTable {
                 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, (filterReq, force = true) => __awaiter(this, void 0, void 0, function* () {
+        _load.set(this, (filterReq, force = true) => __awaiter(this, void 0, void 0, function* () {
             this.isLoading = true;
             if (this.gridOption.type === 'server') {
                 const { items } = this.gridOption;
@@ -1167,7 +1002,7 @@ class SdTable {
                 });
                 this.isLoading = false;
                 return {
-                    items: (data === null || data === void 0 ? void 0 : data.items.map(MapToSdTableItem)) || [],
+                    items: yield __classPrivateFieldGet(this, _format).call(this, data === null || data === void 0 ? void 0 : data.items, this.gridOption.columns),
                     total: (data === null || data === void 0 ? void 0 : data.total) || 0,
                 };
             }
@@ -1189,9 +1024,9 @@ class SdTable {
                     this.notifyService.notify.warning('Dữ liệu không phải là một mảng');
                     data = [];
                 }
-                __classPrivateFieldSet(this, _localItems, data.map(MapToSdTableItem));
-                this.isLoading = false;
+                __classPrivateFieldSet(this, _localItems, yield __classPrivateFieldGet(this, _format).call(this, data, this.gridOption.columns));
             }
+            this.isLoading = false;
             return __classPrivateFieldGet(this, _filterLocal).call(this, __classPrivateFieldGet(this, _localItems), filterReq);
         }));
         _render.set(this, (args) => __awaiter(this, void 0, void 0, function* () {
@@ -1205,8 +1040,8 @@ class SdTable {
         }));
         this.reload = (force = true) => __awaiter(this, void 0, void 0, function* () {
             var _e, _f;
-            (_f = (_e = this.gridFilter) === null || _e === void 0 ? void 0 : _e.updateFilter) === null || _f === void 0 ? void 0 : _f.call(_e);
-            const data = 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);
+            const data = yield __classPrivateFieldGet(this, _load).call(this, __classPrivateFieldGet(this, _getFilter).call(this), force);
             __classPrivateFieldGet(this, _render).call(this, data);
         });
         _exportedItems.set(this, (pageNumber = 0, pageSize = 10000) => __awaiter(this, void 0, void 0, function* () {
@@ -1312,7 +1147,7 @@ class SdTable {
                     for (const item of exportItems) {
                         const obj = {};
                         const handle = (exportColumn) => __awaiter(this, void 0, void 0, function* () {
-                            var _v, _w, _x;
+                            var _v, _w, _x, _y;
                             obj[exportColumn.field] = item[exportColumn.field];
                             const column = allColumns.find(e => e.field === exportColumn.field);
                             const exportedColumn = allExportedColumns.find(e => e.field === exportColumn.field);
@@ -1360,34 +1195,22 @@ class SdTable {
                             }
                             else if (column.type === 'date') {
                                 let date = item[column.field];
-                                const { transformDate } = column;
-                                if (transformDate) {
-                                    date = transformDate(date, item);
-                                }
                                 // Nếu là date thì convert theo đúng format
                                 obj[column.field] = Date.toFormat(date, 'dd/MM/yyyy');
                             }
                             else if (column.type === 'datetime') {
                                 let date = item[column.field];
-                                const { transformDate } = column;
-                                if (transformDate) {
-                                    date = transformDate(date, item);
-                                }
                                 // Nếu là datetime thì convert theo đúng format
                                 obj[column.field] = Date.toFormat(date, 'dd/MM/yyyy HH:mm');
                             }
                             else if (column.type === 'time') {
                                 let date = item[column.field];
-                                const { transformDate } = column;
-                                if (transformDate) {
-                                    date = transformDate(date, item);
-                                }
                                 // Nếu là time thì convert theo đúng format
                                 obj[column.field] = Date.toFormat(date, 'HH:mm');
                             }
                             else if (column.type === 'values') {
                                 // Nếu là values thì lấy giá trị của value được chọn
-                                obj[column.field] = yield this.columnValuesPipe.transform(item[column.field], column);
+                                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];
@@ -1469,21 +1292,16 @@ class SdTable {
             __classPrivateFieldGet(this, _onExport).call(this, true);
         };
         this.onFilterChange = () => {
-            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 = (rowData) => __awaiter(this, void 0, void 0, function* () {
-            var _y, _z, _0, _1, _2;
-            if ((_y = this.gridOption.expand) === null || _y === void 0 ? void 0 : _y.always) {
+            var _z, _0, _1, _2, _3;
+            if ((_z = this.gridOption.expand) === null || _z === void 0 ? void 0 : _z.always) {
                 return;
             }
             if (rowData.meta.expand.isExpanding) {
@@ -1493,8 +1311,8 @@ class SdTable {
                 rowData.meta.expand.isExpanded = false;
                 return;
             }
-            const 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)) {
+            const 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(item => (item.meta.expand.isExpanding = item.meta.expand.isExpanded = false));
             }
             if (data instanceof Promise) {
@@ -1515,7 +1333,7 @@ class SdTable {
             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(e => (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(e => e.meta.selector.isSelected).map(e => 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(e => e.meta.selector.isSelected).map(e => e.data));
                 this.isSelectAll = this.items.every(e => e.meta.selector.isSelected);
                 __classPrivateFieldGet(this, _updateSelectedItems).call(this);
             }
@@ -1525,7 +1343,7 @@ class SdTable {
                     __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(e => e.meta.selector.isSelected).map(e => 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(e => e.meta.selector.isSelected).map(e => e.data));
                 this.isSelectAll = this.items.every(e => e.meta.selector.isSelected);
                 __classPrivateFieldGet(this, _updateSelectedItems).call(this);
             }
@@ -1538,7 +1356,7 @@ class SdTable {
                     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(e => e.meta.selector.isSelected).map(e => 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(e => e.meta.selector.isSelected).map(e => e.data));
             __classPrivateFieldGet(this, _updateSelectedItems).call(this);
         };
         this.onClearSelection = (items) => {
@@ -1548,16 +1366,15 @@ class SdTable {
             __classPrivateFieldGet(this, _updateSelectedItems).call(this);
         };
         _updateSelectedItems.set(this, () => {
-            this.selectedItems = this.items.filter(item => item.meta.selector.isSelected).map(item => item.current);
+            this.selectedItems = this.items.filter(item => item.meta.selector.isSelected).map(item => item.data);
             this.ref.detectChanges();
         });
         this.clearFilter = () => {
             this.filterRegister.value.remove();
         };
         this.setFilter = (args) => {
-            var _a, _b;
             const { columnFilter, externalFilter, filterDef } = args || {};
-            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({
@@ -1567,32 +1384,159 @@ class SdTable {
             });
         };
         this.detectChanges = () => this.ref.detectChanges();
-    }
-    set _gridFilter(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());
-        }
+        _loadValues.set(this, (columns) => __awaiter(this, void 0, void 0, function* () {
+            const promises = [];
+            for (const column of columns) {
+                if (column.type === 'values' && !this.cacheValues[column.field]) {
+                    if (typeof column.option.items === 'function') {
+                        promises.push(column.option
+                            .items()
+                            .then(data => ({
+                            key: column.field,
+                            valueField: column.option.valueField,
+                            displayField: column.option.displayField,
+                            data: Array.isArray(data) ? data : [],
+                        }))
+                            .catch(err => {
+                            console.error(err);
+                            return {
+                                key: column.field,
+                                valueField: column.option.valueField,
+                                displayField: column.option.displayField,
+                                data: [],
+                            };
+                        }));
+                    }
+                    else {
+                        this.cacheValues[column.field] = column.option.items.map(e => ({
+                            [column.option.valueField]: e === null || e === void 0 ? void 0 : e[column.option.valueField],
+                            [column.option.displayField]: e === null || e === void 0 ? void 0 : e[column.option.displayField],
+                        }));
+                        __classPrivateFieldGet(this, _cacheObjValues)[column.field] = Array.toObject(this.cacheValues[column.field], column.option.valueField);
+                    }
+                }
+            }
+            if (promises.length) {
+                const results = yield Promise.all(promises);
+                for (const result of results) {
+                    this.cacheValues[result.key] = result.data.map(e => ({
+                        [result.valueField]: e === null || e === void 0 ? void 0 : e[result.valueField],
+                        [result.displayField]: e === null || e === void 0 ? void 0 : e[result.displayField],
+                    }));
+                    __classPrivateFieldGet(this, _cacheObjValues)[result.key] = Array.toObject(this.cacheValues[result.key], result.valueField);
+                }
+            }
+        }));
+        _format.set(this, (rawItems, columns) => __awaiter(this, void 0, void 0, function* () {
+            var _4, _5;
+            const items = rawItems.map(MapToSdTableItem);
+            for (const column of columns) {
+                // Clickable
+                const { field, cellStyle, click, tooltip, htmlTemplate, transform } = column;
+                let objValues = {};
+                if (column.type === 'values') {
+                    objValues = __classPrivateFieldGet(this, _cacheObjValues)[field] || {};
+                }
+                if (column.type === 'lazy-values') {
+                    const values = items.map(e => { var _a; return (_a = e.data) === null || _a === void 0 ? void 0 : _a[field]; }).filter(val => !!val || val === 0);
+                    const { option: { views }, } = column;
+                    objValues = Array.toObject(yield views(values), column.option.valueField) || {};
+                }
+                for (const item of items) {
+                    const rowData = item.data;
+                    const 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' ? () => click(value, rowData) : undefined,
+                    };
+                    const display = item.meta.display[field];
+                    // Display
+                    if (typeof htmlTemplate === 'function') {
+                        display.isHtml = true;
+                        display.data = htmlTemplate(value, rowData);
+                    }
+                    else if (typeof transform === 'function') {
+                        const newValue = transform(value, rowData);
+                        if (newValue instanceof Promise) {
+                            display.data = yield newValue;
+                        }
+                        else {
+                            display.data = newValue;
+                        }
+                    }
+                    else {
+                        if (column.type === 'date' || column.type === 'datetime' || column.type === 'time') {
+                            const date = Date.toFormat(value, 'dd/MM/yyyy');
+                            let 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') {
+                            const { option } = column;
+                            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,
+                            };
+                        }
+                    }
+                }
+            }
+            return items;
+        }));
     }
     set option(option) {
         if (option) {
             option = __classPrivateFieldGet(this, _initConfiguration$1).call(this, option);
             this.gridOption = option;
             __classPrivateFieldSet(this, _loadCompleted, false);
-            const configuration = this.gridConfigurationService.init(this.key, this.gridOption);
-            this.gridConfigurationObserver = configuration.observer;
-            configuration.load();
-            __classPrivateFieldGet(this, _optionChanges).next(this.gridOption);
+            const setting = this.gridConfigurationService.init(this.gridOption);
+            __classPrivateFieldGet(this, _subscription$1).add(setting.observer.pipe(startWith(setting.subject.getValue())).subscribe((configuration) => __awaiter(this, void 0, void 0, function* () {
+                const configurationResult = this.gridConfigurationService.loadConfigurationResult(this.gridOption, configuration);
+                const displayColumns = configurationResult.displayedColumns || [];
+                yield __classPrivateFieldGet(this, _loadValues).call(this, this.gridOption.columns.filter(column => displayColumns.includes(column.field)));
+                this.configuration = configurationResult;
+                __classPrivateFieldGet(this, _optionChanges).next(this.gridOption);
+            })));
         }
     }
     set paginator(paginator) {
@@ -1625,7 +1569,7 @@ class SdTable {
     ngAfterViewInit() {
         __classPrivateFieldGet(this, _subscription$1).add(__classPrivateFieldGet(this, _reload).pipe(debounceTime(200), switchMap((data) => __awaiter(this, void 0, void 0, function* () {
             const filterInfo = __classPrivateFieldGet(this, _getFilter).call(this);
-            const result = yield __classPrivateFieldGet(this, _load$1).call(this, filterInfo, !__classPrivateFieldGet(this, _loadCompleted) || data.force);
+            const result = yield __classPrivateFieldGet(this, _load).call(this, filterInfo, !__classPrivateFieldGet(this, _loadCompleted) || data.force);
             __classPrivateFieldSet(this, _loadCompleted, true);
             return result;
         })))
@@ -1652,14 +1596,14 @@ class SdTable {
         __classPrivateFieldGet(this, _subscription$1).unsubscribe();
     }
     get gridItems() {
-        return this.items.map(item => item.current);
+        return this.items.map(item => item.data);
     }
 }
-_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: 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: ChangeDetectionStrategy.OnPush,
                 animations: [
                     trigger('detailExpand', [
@@ -1677,13 +1621,13 @@ SdTable.ctorParameters = () => [
     { type: SdTableConfigurationService },
     { type: SdExportService },
     { type: SdNotifyService },
-    { type: SdColumnValuesPipe },
     { type: SdTableFilterService }
 ];
 SdTable.propDecorators = {
+    popupConfiguration: [{ type: ViewChild, args: [SdPopupConfiguration,] }],
     sdScroll: [{ type: ViewChild, args: [SdScrollDirective,] }],
     quickAction: [{ type: ViewChild, args: [SdQuickAction,] }],
-    _gridFilter: [{ type: ViewChild, args: [SdGridFilter,] }],
+    tableFilter: [{ type: ViewChild, args: [SdTableFilter,] }],
     option: [{ type: Input }],
     paginator: [{ type: ViewChild, args: [MatPaginator,] }],
     sort: [{ type: ViewChild, args: [MatSort,] }],
@@ -1822,34 +1766,13 @@ SdCommandTitlePipe.decorators = [
             },] }
 ];
 
-class SdColumnHtmlTemplatePipe {
-    constructor(deviceService) {
-        this.isMobileOrTablet = false;
-        this.isMobileOrTablet = !deviceService.isDesktop();
-    }
-    transform(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);
-    }
-}
-SdColumnHtmlTemplatePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'columnHtmlTemplate'
-            },] }
-];
-SdColumnHtmlTemplatePipe.ctorParameters = () => [
-    { type: DeviceDetectorService }
-];
-
 class SdDesktopCellView {
     constructor() { }
 }
 SdDesktopCellView.decorators = [
     { type: 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: 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}"]
             },] }
@@ -1863,38 +1786,6 @@ SdDesktopCellView.propDecorators = {
     gridOption: [{ type: Input }]
 };
 
-class SdColumnTransformPipe {
-    constructor(columnValuesPipe) {
-        this.columnValuesPipe = columnValuesPipe;
-    }
-    transform(value, rowData, column, key) {
-        var _a, _b;
-        return __awaiter(this, void 0, void 0, function* () {
-            if (column === null || column === void 0 ? void 0 : column.transform) {
-                return column.transform(value, rowData);
-            }
-            if (column.type === 'values') {
-                return yield this.columnValuesPipe.transform(value, column);
-            }
-            if (column.type === 'number' && Number.isNumber(value)) {
-                return Number.toVNCurrency(value); // this.decimalPipe.transform(value, '1.0-2');
-            }
-            if (column.type === 'bool') {
-                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 value;
-        });
-    }
-}
-SdColumnTransformPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'columnTransform'
-            },] }
-];
-SdColumnTransformPipe.ctorParameters = () => [
-    { type: SdColumnValuesPipe }
-];
-
 class SdFilterExternalPipe {
     transform(externalFilters, field) {
         const results = [];
@@ -1942,34 +1833,6 @@ SdFilterColumnPipe.decorators = [
             },] }
 ];
 
-var _isMobileOrTablet;
-class SdColumnChildrenFilterPipe {
-    constructor(deviceService) {
-        _isMobileOrTablet.set(this, false);
-        __classPrivateFieldSet(this, _isMobileOrTablet, !deviceService.isDesktop());
-    }
-    transform(columns, item) {
-        return columns.filter(column => {
-            var _a, _b;
-            const value = item === null || item === void 0 ? void 0 : item[column.field];
-            const transformValue = (_a = column.transform) === null || _a === void 0 ? void 0 : _a.call(column, item[column.field], item);
-            const 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 !== '');
-        });
-    }
-}
-_isMobileOrTablet = new WeakMap();
-SdColumnChildrenFilterPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'columnChildrenFilter'
-            },] }
-];
-SdColumnChildrenFilterPipe.ctorParameters = () => [
-    { type: DeviceDetectorService }
-];
-
 class SdDesktopCommand {
     constructor() {
         this.commands = [];
@@ -1989,155 +1852,6 @@ SdDesktopCommand.propDecorators = {
     commands: [{ type: Input }]
 };
 
-class SdColumnBadgePipe {
-    constructor() { }
-    transform(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;
-    }
-}
-SdColumnBadgePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'columnBadge'
-            },] }
-];
-SdColumnBadgePipe.ctorParameters = () => [];
-
-class SdGridConfigurationResultPipe {
-    constructor(gridConfigurationService) {
-        this.gridConfigurationService = gridConfigurationService;
-    }
-    transform(configuration, gridOption, sdSubInformation) {
-        const a = this.gridConfigurationService.generateConfigurationResult(configuration, gridOption, sdSubInformation);
-        console.log(a);
-        return a;
-    }
-}
-SdGridConfigurationResultPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'sdGridConfigurationResult'
-            },] }
-];
-SdGridConfigurationResultPipe.ctorParameters = () => [
-    { type: SdTableConfigurationService }
-];
-
-var _cache$3;
-class SdPopupGridConfiguration {
-    constructor(ref, notifyService, translateService, gridConfigurationService) {
-        this.ref = ref;
-        this.notifyService = notifyService;
-        this.translateService = translateService;
-        this.gridConfigurationService = gridConfigurationService;
-        this.changes = new EventEmitter();
-        _cache$3.set(this, void 0);
-        this.isCreatingColumn = false;
-        this.selected = {};
-        this.disabledDrag = true;
-        this.open = () => __awaiter(this, void 0, void 0, function* () {
-            __classPrivateFieldSet(this, _cache$3, this.gridConfigurationService.init(this.key, this.gridOption));
-            this.configuration = yield __classPrivateFieldGet(this, _cache$3).get();
-            this.modal.open();
-        });
-        this.onSave = () => {
-            __classPrivateFieldGet(this, _cache$3).set(this.configuration);
-            this.modal.close();
-            this.ref.detectChanges();
-        };
-        this.onReset = () => __awaiter(this, void 0, void 0, function* () {
-            const { translate } = this.translateService;
-            this.notifyService.confirm(translate('Reset grid configuration to default')).then(() => {
-                __classPrivateFieldGet(this, _cache$3).remove();
-                this.modal.close();
-                this.ref.detectChanges();
-            });
-        });
-        this.createColumn = () => __awaiter(this, void 0, void 0, function* () {
-            this.selected = {};
-            this.isCreatingColumn = true;
-        });
-        this.confirm = () => __awaiter(this, void 0, void 0, function* () {
-            const generatedColumn = {
-                origin: {
-                    field: 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;
-        });
-    }
-    ngOnInit() { }
-    mouseUp(event) {
-        this.disabledDrag = true;
-    }
-    dropTable(event) {
-        moveItemInArray(this.configuration.columns, event.previousIndex, event.currentIndex);
-        this.table.renderRows();
-    }
-    handleMouseDown() {
-        this.disabledDrag = false;
-    }
-    handleMouseUp() {
-        this.disabledDrag = true;
-    }
-}
-_cache$3 = new WeakMap();
-SdPopupGridConfiguration.decorators = [
-    { type: 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 = () => [
-    { type: ChangeDetectorRef },
-    { type: SdNotifyService },
-    { type: SdTranslateService },
-    { type: SdTableConfigurationService }
-];
-SdPopupGridConfiguration.propDecorators = {
-    gridOption: [{ type: Input }],
-    key: [{ type: Input }],
-    modal: [{ type: ViewChild, args: ['modal',] }],
-    table: [{ type: ViewChild, args: ['table',] }],
-    mouseUp: [{ type: HostListener, args: ['window:mouseup', ['$event'],] }]
-};
-
 class SdColumnTooltipPipe {
     constructor() { }
     transform(value, rowData, column) {
@@ -2356,12 +2070,12 @@ const SdFilterOperators = [
     {
         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',
@@ -2376,22 +2090,22 @@ const SdFilterOperators = [
     {
         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',
     },
 ];
 
@@ -2404,6 +2118,7 @@ class SdColumnInlineFilter {
         this.inlineOperatorChange = new EventEmitter();
         this.columnFilter = {};
         this.operators = [];
+        this.items = [];
         this.filterChange = new EventEmitter();
         _valueChanges.set(this, new Subject());
         _subcription.set(this, new Subscription());
@@ -2439,7 +2154,7 @@ class SdColumnInlineFilter {
         __classPrivateFieldGet(this, _valueChanges).next();
     }
     set _column(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(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); });
@@ -2447,12 +2162,23 @@ class SdColumnInlineFilter {
         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;
+        }
     }
     ngOnInit() {
         __classPrivateFieldGet(this, _subcription).add(__classPrivateFieldGet(this, _valueChanges).pipe(startWith(this.columnFilter)).subscribe(() => {
             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,
@@ -2469,7 +2195,7 @@ _inlineOperator_1 = new WeakMap(), _valueChanges = new WeakMap(), _subcription =
 SdColumnInlineFilter.decorators = [
     { type: 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: 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}"]
             },] }
@@ -2482,6 +2208,7 @@ SdColumnInlineFilter.propDecorators = {
     _inlineOperator: [{ type: Input, args: ['inlineOperator',] }],
     inlineOperatorChange: [{ type: Output }],
     _columnFilter: [{ type: Input, args: ['columnFilter',] }],
+    cacheValues: [{ type: Input }],
     _column: [{ type: Input, args: ['column',] }],
     filterChange: [{ type: Output }]
 };
@@ -2566,7 +2293,7 @@ SdSelectionVisiblePipe.decorators = [
             },] }
 ];
 
-class SdGridQuickAction {
+class SdTableQuickAction {
     constructor() {
         this.clear = new EventEmitter();
         this.onClear = () => {
@@ -2574,196 +2301,21 @@ class SdGridQuickAction {
         };
     }
 }
-SdGridQuickAction.decorators = [
+SdTableQuickAction.decorators = [
     { type: 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: 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 = () => [];
-SdGridQuickAction.propDecorators = {
+SdTableQuickAction.ctorParameters = () => [];
+SdTableQuickAction.propDecorators = {
     gridOption: [{ type: Input }],
     selectedItems: [{ type: Input }],
     clear: [{ type: Output }]
 };
 
-var _maxSecond, _maxMinute, _maxHour, _maxDay, _maxMonth, _isMobileOrTablet$1;
-class SdCellViewPipe {
-    constructor(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());
-    }
-    transform(value, tableItem, column, gridOption) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            const { displayOnEmpty } = gridOption;
-            const rowData = tableItem.current;
-            const { align, click, tooltip, htmlTemplate, transform } = column;
-            const result = {
-                badge: null,
-                tooltip: null,
-                display: {
-                    align: align || (column.type === 'number' ? 'right' : 'left'),
-                    value
-                },
-                click: null
-            };
-            // Display
-            if (typeof (htmlTemplate) === 'function') {
-                result.display.hasHtml = true;
-                result.display.html = htmlTemplate(value, rowData, __classPrivateFieldGet(this, _isMobileOrTablet$1));
-            }
-            else {
-                if (column.type === 'datetime' || column.type === 'date' || column.type === 'time') {
-                    const { transformDate } = column;
-                    if (transformDate) {
-                        value = transformDate(value, rowData);
-                    }
-                }
-                if (typeof (transform) === 'function') {
-                    const val = transform(value, rowData);
-                    if (val instanceof Promise) {
-                        result.display.value = yield val;
-                    }
-                    else {
-                        result.display.value = val;
-                    }
-                }
-                else {
-                    if (column.type === 'date' || column.type === 'datetime') {
-                        const { option } = column;
-                        const 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 {
-                            const date = Date.toFormat(value, 'dd/MM/yyyy');
-                            const time = Date.toFormat(value, 'HH:mm');
-                            const 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') {
-                        result.display.value = yield this.columnValuesPipe.transform(value, column);
-                    }
-                    else if (column.type === 'number' && Number.isNumber(value)) {
-                        result.display.value = Number.toVNCurrency(value);
-                    }
-                    if (column.type === 'bool') {
-                        const { option } = column;
-                        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;
-                        }
-                    }
-                }
-                if (displayOnEmpty) {
-                    let values = [null, undefined, ''];
-                    if (typeof (displayOnEmpty) === 'object') {
-                        const { display, emptyValues } = displayOnEmpty;
-                        values = [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>`;
-                            }
-                        }
-                    }
-                }
-            }
-            // 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 = () => click(value, rowData);
-            }
-            return result;
-        });
-    }
-}
-_maxSecond = new WeakMap(), _maxMinute = new WeakMap(), _maxHour = new WeakMap(), _maxDay = new WeakMap(), _maxMonth = new WeakMap(), _isMobileOrTablet$1 = new WeakMap();
-SdCellViewPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'cellView'
-            },] }
-];
-SdCellViewPipe.ctorParameters = () => [
-    { type: DeviceDetectorService },
-    { type: SdUtilityService },
-    { type: SdColumnValuesPipe }
-];
-
 class SdGroupPipe {
     transform(items, gridOption) {
         var _a;
@@ -2861,7 +2413,7 @@ SdTableModule.decorators = [
                     SdGroupModule,
                 ],
                 declarations: [
-                    SdGridQuickAction,
+                    SdTableQuickAction,
                     SdDesktopCell,
                     SdDesktopCellView,
                     SdDesktopCommand,
@@ -2872,28 +2424,21 @@ SdTableModule.decorators = [
                     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: [
@@ -2910,7 +2455,6 @@ SdTableModule.decorators = [
                     CdkColumnDef,
                     SdTableFilterService,
                     SdTableConfigurationService,
-                    SdColumnValuesPipe,
                     {
                         provide: MatPaginatorIntl,
                         useClass: MatPaginatorIntlCro,
@@ -2923,5 +2467,5 @@ SdTableModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_TABLE_CONFIG, MatPaginatorIntlCro, SdFilterOperators, SdTable, SdTableModule, TABLE_CONFIG, SdGridQuickAction as ɵa, SdDesktopCell as ɵb, SdColumnTooltipPipe as ɵba, SdColumnBadgePipe as ɵbb, SdFilterColumnPipe as ɵbc, SdFilterExternalPipe as ɵbd, SdSelectionActionFilterPipe as ɵbe, SdSelectionVisiblePipe as ɵbf, SdSelectionDisablePipe as ɵbg, SdSelectionVisibleSelectAllPipe as ɵbh, SdCellViewPipe as ɵbi, SdGroupPipe as ɵbj, SdDesktopCellView as ɵc, SdDesktopCommand as ɵd, SdColumnInlineFilter as ɵe, SdGridFilter as ɵf, SdPopupFilter as ɵg, SdMaterialSubInformationDefDirective as ɵh, SdMaterialEmptyDataDefDirective as ɵi, SdMaterialCellDefDirective as ɵj, SdMaterialFooterDefDirective as ɵk, SdMaterialFilterDefDirective as ɵl, TABLE_CONFIG as ɵn, SdTableConfigurationService as ɵo, SdColumnValuesPipe as ɵp, SdTableFilterService as ɵq, SdPopupGridConfiguration as ɵr, SdGridConfigurationResultPipe as ɵs, SdColumnChildrenFilterPipe as ɵt, SdCommandFilterPipe as ɵu, SdCommandDisablePipe as ɵv, SdCommandIconPipe as ɵw, SdCommandTitlePipe as ɵx, SdColumnHtmlTemplatePipe as ɵy, SdColumnTransformPipe as ɵz };
+export { DEFAULT_TABLE_CONFIG, MatPaginatorIntlCro, SdFilterOperators, SdTable, SdTableModule, TABLE_CONFIG, SdTableQuickAction as ɵa, SdDesktopCell as ɵb, SdSelectionDisablePipe as ɵba, SdSelectionVisibleSelectAllPipe as ɵbb, SdGroupPipe as ɵbc, SdDesktopCellView as ɵc, SdDesktopCommand as ɵd, SdColumnInlineFilter as ɵe, SdPopupConfiguration as ɵf, SdTableConfigurationService as ɵg, TABLE_CONFIG as ɵi, SdTableFilter as ɵj, SdPopupFilter as ɵk, SdMaterialSubInformationDefDirective as ɵl, SdMaterialEmptyDataDefDirective as ɵm, SdMaterialCellDefDirective as ɵn, SdMaterialFooterDefDirective as ɵo, SdMaterialFilterDefDirective as ɵp, SdTableFilterService as ɵq, SdCommandFilterPipe as ɵr, SdCommandDisablePipe as ɵs, SdCommandIconPipe as ɵt, SdCommandTitlePipe as ɵu, SdColumnTooltipPipe as ɵv, SdFilterColumnPipe as ɵw, SdFilterExternalPipe as ɵx, SdSelectionActionFilterPipe as ɵy, SdSelectionVisiblePipe as ɵz };
 //# sourceMappingURL=sd-angular-core-table.js.map