@den4ik92/ng2-smart-table 1.0.9 → 2.0.0

package/fesm2020/den4ik92-ng2-smart-table.mjs

@@ -5,8 +5,7 @@ import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormsModule, UntypedFormControl, NgControl, ReactiveFormsModule } from '@angular/forms';
 import { Subject } from 'rxjs';
-import { debounceTime, distinctUntilChanged, skip, map } from 'rxjs/operators';
-import { HttpParams } from '@angular/common/http';
+import { debounceTime, distinctUntilChanged, skip } from 'rxjs/operators';
 
 /**
  * Extending object that entered in first argument.
@@ -76,7 +75,7 @@ class Deferred {
     }
 }
 // getDeepFromObject({result: {data: 1}}, 'result.data', 2); // returns 1
-function getDeepFromObject(object = {}, name, defaultValue) {
+function getDeepFromObject(object = {}, name, defaultValue = null) {
     const keys = name.split('.');
     // clone the object
     let level = deepExtend({}, object);
@@ -184,7 +183,7 @@ class Column {
         this.settings = settings;
         this.dataSet = dataSet;
         this.title = '';
-        this.type = '';
+        this.type = 'text';
         this.class = '';
         this.width = '';
         this.hide = false;
@@ -192,16 +191,12 @@ class Column {
         this.isEditable = true;
         this.isAddable = true;
         this.isFilterable = false;
-        this.sortDirection = '';
-        this.defaultSortDirection = '';
-        this.editor = { type: '', config: {}, component: null };
-        this.filter = { type: '', config: {}, component: null };
-        this.renderComponent = null;
+        this.sortDirection = 'asc';
+        this.defaultSortDirection = false;
+        this.editor = false;
+        this.filter = false;
         this.process();
     }
-    getOnComponentInitFunction() {
-        return this.onComponentInitFunction;
-    }
     getCompareFunction() {
         return this.compareFunction;
     }
@@ -212,44 +207,47 @@ class Column {
         return this.filterFunction;
     }
     getConfig() {
-        return this.editor && this.editor.config;
+        if (this.editor && (this.editor.type === 'checkbox' || this.editor.type === 'custom' || this.editor.type === 'list')) {
+            return this.editor?.config;
+        }
+        return false;
     }
     getFilterType() {
         return this.filter && this.filter.type;
     }
     getFilterConfig() {
-        return this.filter && this.filter.config;
+        if (this.filter && (this.filter.type === 'checkbox' || this.filter.type === 'custom' || this.filter.type === 'list')) {
+            return this.filter?.config;
+        }
+        return false;
     }
     process() {
-        this.title = this.settings['title'];
-        this.class = this.settings['class'];
-        this.width = this.settings['width'];
-        this.hide = !!this.settings['hide'];
-        this.type = this.prepareType();
-        this.editor = this.settings['editor'];
-        this.filter = this.settings['filter'];
-        this.renderComponent = this.settings['renderComponent'];
-        this.isFilterable = typeof this.settings['filter'] === 'undefined' ? true : !!this.settings['filter'];
-        this.defaultSortDirection = ['asc', 'desc']
-            .indexOf(this.settings['sortDirection']) !== -1 ? this.settings['sortDirection'] : '';
-        this.isSortable = typeof this.settings['sort'] === 'undefined' ? true : !!this.settings['sort'];
-        this.isEditable = typeof this.settings['editable'] === 'undefined' ? true : !!this.settings['editable'];
-        this.isAddable = typeof this.settings['addable'] === 'undefined' ? true : !!this.settings['addable'];
+        this.title = this.settings.title;
+        this.class = this.settings.class || '';
+        this.width = this.settings.width || '';
+        this.hide = !!this.settings.hide;
+        this.type = this.settings.type;
+        if (this.settings?.editor) {
+            this.editor = this.settings.editor;
+        }
+        if (this.settings?.filter) {
+            this.filter = this.settings.filter;
+        }
+        if (this.settings.type === 'custom' && this.settings.renderComponent) {
+            this.renderComponent = this.settings.renderComponent;
+        }
+        this.isFilterable = typeof this.settings.filter === 'undefined' ? true : !!this.settings['filter'];
+        this.defaultSortDirection = this.settings?.sortDirection || false;
+        this.isSortable = typeof this.settings.sort === 'undefined' ? true : this.settings.sort;
+        this.isEditable = typeof this.settings.editable === 'undefined' ? true : this.settings.editable;
+        this.isAddable = typeof this.settings.addable === 'undefined' ? true : this.settings.addable;
         this.sortDirection = this.prepareSortDirection();
-        this.compareFunction = this.settings['compareFunction'];
-        this.valuePrepareFunction = this.settings['valuePrepareFunction'];
-        this.filterFunction = this.settings['filterFunction'];
-        this.onComponentInitFunction = this.settings['onComponentInitFunction'];
-    }
-    prepareType() {
-        return this.settings['type'] || this.determineType();
+        this.compareFunction = this.settings.compareFunction;
+        this.valuePrepareFunction = this.settings.valuePrepareFunction;
+        this.filterFunction = this.settings.filterFunction;
     }
     prepareSortDirection() {
-        return this.settings['sort'] === 'desc' ? 'desc' : 'asc';
-    }
-    determineType() {
-        // TODO: determine type by data
-        return 'text';
+        return this.defaultSortDirection === 'desc' ? 'desc' : 'asc';
     }
 }
 
@@ -372,7 +370,7 @@ class Grid {
         return position == this.getSetting('actions.position');
     }
     isActionsVisible() {
-        return this.getSetting('actions.add') || this.getSetting('actions.edit') || this.getSetting('actions.delete') || this.getSetting('actions.custom').length;
+        return this.getSetting('actions.add', false) || this.getSetting('actions.edit', false) || this.getSetting('actions.delete', false) || !!this.getSetting('actions.custom', [])?.length;
     }
     isMultiSelectVisible() {
         return this.getSetting('selectMode') === 'multi';
@@ -396,7 +394,9 @@ class Grid {
         this.sourceOnChangedSubscription = this.source.onChanged().subscribe((changes) => this.processDataChange(changes));
         this.sourceOnUpdatedSubscription = this.source.onUpdated().subscribe((data) => {
             const changedRow = this.dataSet.findRowByData(data);
-            changedRow.setData(data);
+            if (changedRow) {
+                changedRow.setData(data);
+            }
         });
     }
     getSetting(name, defaultValue) {
@@ -516,26 +516,26 @@ class Grid {
         return false;
     }
     prepareSource(source) {
-        const initialSource = this.getInitialSort();
-        if (initialSource && initialSource['field'] && initialSource['direction']) {
-            source.setSort([initialSource], false);
+        const initialSort = this.getInitialSort();
+        if (initialSort) {
+            source.setSort([initialSort], false);
         }
         if (this.getSetting('pager.display') === true) {
-            source.setPaging(this.getPageToSelect(source), this.getSetting('pager.perPage'), false);
+            source.setPaging(1, this.getSetting('pager.perPage'), false);
         }
         source.refresh();
         return source;
     }
     getInitialSort() {
-        const sortConf = {};
-        this.getColumns().forEach((column) => {
-            if (column.isSortable && column.defaultSortDirection) {
-                sortConf['field'] = column.id;
-                sortConf['direction'] = column.defaultSortDirection;
-                sortConf['compare'] = column.getCompareFunction();
-            }
-        });
-        return sortConf;
+        const defaultSortColumn = this.getColumns().find((column) => column.isSortable && column.defaultSortDirection);
+        if (!defaultSortColumn) {
+            return false;
+        }
+        return {
+            field: defaultSortColumn.id,
+            direction: defaultSortColumn.defaultSortDirection || 'asc',
+            compare: defaultSortColumn.getCompareFunction(),
+        };
     }
     getSelectedRowsData() {
         return this.dataSet.getRows();
@@ -549,21 +549,6 @@ class Grid {
     getLastRow() {
         return this.dataSet.getLastRow();
     }
-    getSelectionInfo() {
-        const switchPageToSelectedRowPage = this.getSetting('switchPageToSelectedRowPage');
-        const selectedRowIndex = Number(this.getSetting('selectedRowIndex', 0)) || 0;
-        const { perPage, page } = this.getSetting('pager');
-        return { perPage, page, selectedRowIndex, switchPageToSelectedRowPage };
-    }
-    getPageToSelect(source) {
-        const { switchPageToSelectedRowPage, selectedRowIndex, perPage, page } = this.getSelectionInfo();
-        let pageToSelect = Math.max(1, page);
-        if (switchPageToSelectedRowPage && selectedRowIndex >= 0) {
-            pageToSelect = getPageForRowIndex(selectedRowIndex, perPage);
-        }
-        const maxPageAmount = Math.ceil(source.count() / perPage);
-        return maxPageAmount ? Math.min(pageToSelect, maxPageAmount) : pageToSelect;
-    }
 }
 
 class EditCellDefault {
@@ -604,8 +589,9 @@ class CustomEditComponent extends EditCellDefault {
         this.resolver = resolver;
     }
     ngOnChanges(changes) {
-        if (this.cell && !this.customComponent) {
-            const componentFactory = this.resolver.resolveComponentFactory(this.cell.getColumn().editor.component);
+        const editor = this.cell.getColumn().editor;
+        if (this.cell && !this.customComponent && editor && editor.type == 'custom') {
+            const componentFactory = this.resolver.resolveComponentFactory(editor.component);
             this.customComponent = this.dynamicTarget.createComponent(componentFactory);
             // set @Inputs and @Outputs of custom component
             this.customComponent.instance.cell = this.cell;
@@ -640,6 +626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class DefaultEditor {
     constructor() {
+        this.inputClass = '';
         this.onStopEditing = new EventEmitter();
         this.onEdited = new EventEmitter();
         this.onClick = new EventEmitter();
@@ -669,8 +656,9 @@ class CheckboxEditorComponent extends DefaultEditor {
         super();
     }
     onChange(event) {
-        const trueVal = (this.cell.getColumn().getConfig() && this.cell.getColumn().getConfig().true) || true;
-        const falseVal = (this.cell.getColumn().getConfig() && this.cell.getColumn().getConfig().false) || false;
+        const config = this.cell.getColumn().getConfig();
+        const trueVal = (config && config?.true) || true;
+        const falseVal = (config && config?.false) || false;
         this.cell.newValue = event.target.checked ? trueVal : falseVal;
     }
 }
@@ -681,7 +669,7 @@ CheckboxEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
            class="form-control"
            [name]="cell.getId()"
            [disabled]="!cell.isEditable()"
-           [checked]="cell.getValue() == (cell.getColumn().getConfig()?.true || true)"
+           [checked]="cell.getValue() === (cell.getColumn().getConfig()?.true || true)"
            (click)="onClick.emit($event)"
            (change)="onChange($event)">
     `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
@@ -693,55 +681,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
            class="form-control"
            [name]="cell.getId()"
            [disabled]="!cell.isEditable()"
-           [checked]="cell.getValue() == (cell.getColumn().getConfig()?.true || true)"
+           [checked]="cell.getValue() === (cell.getColumn().getConfig()?.true || true)"
            (click)="onClick.emit($event)"
            (change)="onChange($event)">
     `, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
         }], ctorParameters: function () { return []; } });
 
-class CompleterEditorComponent extends DefaultEditor {
-    constructor() {
-        super();
-        this.completerStr = '';
-    }
-    ngOnInit() {
-        // if (this.cell.getColumn().editor && this.cell.getColumn().editor.type === 'completer') {
-        //   const config = this.cell.getColumn().getConfig().completer;
-        //   config.dataService = this.completerService.local(config.data, config.searchFields, config.titleField);
-        //   config.dataService.descriptionField(config.descriptionField);
-        // }
-    }
-    onEditedCompleter(event) {
-        this.cell.newValue = event.title;
-        return false;
-    }
-}
-CompleterEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CompleterEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CompleterEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CompleterEditorComponent, selector: "completer-editor", usesInheritance: true, ngImport: i0, template: `
-    <!-- <ng2-completer [(ngModel)]="completerStr"
-                   [dataService]="cell.getColumn().getConfig().completer.dataService"
-                   [minSearchLength]="cell.getColumn().getConfig().completer.minSearchLength || 0"
-                   [pause]="cell.getColumn().getConfig().completer.pause || 0"
-                   [placeholder]="cell.getColumn().getConfig().completer.placeholder || 'Start typing...'"
-                   (selected)="onEditedCompleter($event)">
-    </ng2-completer> -->
-    `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CompleterEditorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'completer-editor',
-                    template: `
-    <!-- <ng2-completer [(ngModel)]="completerStr"
-                   [dataService]="cell.getColumn().getConfig().completer.dataService"
-                   [minSearchLength]="cell.getColumn().getConfig().completer.minSearchLength || 0"
-                   [pause]="cell.getColumn().getConfig().completer.pause || 0"
-                   [placeholder]="cell.getColumn().getConfig().completer.placeholder || 'Start typing...'"
-                   (selected)="onEditedCompleter($event)">
-    </ng2-completer> -->
-    `,
-                }]
-        }], ctorParameters: function () { return []; } });
-
 class InputEditorComponent extends DefaultEditor {
     constructor() {
         super();
@@ -856,14 +801,18 @@ class DefaultEditComponent extends EditCellDefault {
         super();
     }
     getEditorType() {
-        return this.cell.getColumn().editor && this.cell.getColumn().editor.type;
+        const editor = this.cell.getColumn().editor;
+        if (editor) {
+            return editor.type;
+        }
+        return 'text';
     }
 }
 DefaultEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DefaultEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DefaultEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DefaultEditComponent, selector: "table-cell-default-editor", usesInheritance: true, ngImport: i0, template: "<div [ngSwitch]=\"getEditorType()\">\n    <select-editor *ngSwitchCase=\"'list'\"\n                   [cell]=\"cell\"\n                   [inputClass]=\"inputClass\"\n                   (onClick)=\"onClick($event)\"\n                   (onEdited)=\"onEdited($event)\"\n                   (onStopEditing)=\"onStopEditing()\">\n    </select-editor>\n\n    <textarea-editor *ngSwitchCase=\"'textarea'\"\n                     [cell]=\"cell\"\n                     [inputClass]=\"inputClass\"\n                     (onClick)=\"onClick($event)\"\n                     (onEdited)=\"onEdited($event)\"\n                     (onStopEditing)=\"onStopEditing()\">\n    </textarea-editor>\n\n    <checkbox-editor *ngSwitchCase=\"'checkbox'\"\n                     [cell]=\"cell\"\n                     [inputClass]=\"inputClass\"\n                     (onClick)=\"onClick($event)\">\n    </checkbox-editor>\n\n    <completer-editor *ngSwitchCase=\"'completer'\"\n                      [cell]=\"cell\">\n    </completer-editor>\n\n    <input-editor *ngSwitchDefault\n                  [cell]=\"cell\"\n                  [inputClass]=\"inputClass\"\n                  (onClick)=\"onClick($event)\"\n                  (onEdited)=\"onEdited($event)\"\n                  (onStopEditing)=\"onStopEditing()\">\n    </input-editor>\n</div>", dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: CheckboxEditorComponent, selector: "checkbox-editor" }, { kind: "component", type: CompleterEditorComponent, selector: "completer-editor" }, { kind: "component", type: InputEditorComponent, selector: "input-editor" }, { kind: "component", type: SelectEditorComponent, selector: "select-editor" }, { kind: "component", type: TextareaEditorComponent, selector: "textarea-editor" }] });
+DefaultEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DefaultEditComponent, selector: "table-cell-default-editor", usesInheritance: true, ngImport: i0, template: "<div [ngSwitch]=\"getEditorType()\">\n    <select-editor *ngSwitchCase=\"'list'\"\n                   [cell]=\"cell\"\n                   [inputClass]=\"inputClass\"\n                   (onClick)=\"onClick($event)\"\n                   (onEdited)=\"onEdited($event)\"\n                   (onStopEditing)=\"onStopEditing()\">\n    </select-editor>\n\n    <textarea-editor *ngSwitchCase=\"'textarea'\"\n                     [cell]=\"cell\"\n                     [inputClass]=\"inputClass\"\n                     (onClick)=\"onClick($event)\"\n                     (onEdited)=\"onEdited($event)\"\n                     (onStopEditing)=\"onStopEditing()\">\n    </textarea-editor>\n\n    <checkbox-editor *ngSwitchCase=\"'checkbox'\"\n                     [cell]=\"cell\"\n                     [inputClass]=\"inputClass\"\n                     (onClick)=\"onClick($event)\">\n    </checkbox-editor>\n\n    <input-editor *ngSwitchDefault\n                  [cell]=\"cell\"\n                  [inputClass]=\"inputClass\"\n                  (onClick)=\"onClick($event)\"\n                  (onEdited)=\"onEdited($event)\"\n                  (onStopEditing)=\"onStopEditing()\">\n    </input-editor>\n</div>", dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: CheckboxEditorComponent, selector: "checkbox-editor" }, { kind: "component", type: InputEditorComponent, selector: "input-editor" }, { kind: "component", type: SelectEditorComponent, selector: "select-editor" }, { kind: "component", type: TextareaEditorComponent, selector: "textarea-editor" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DefaultEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'table-cell-default-editor', template: "<div [ngSwitch]=\"getEditorType()\">\n    <select-editor *ngSwitchCase=\"'list'\"\n                   [cell]=\"cell\"\n                   [inputClass]=\"inputClass\"\n                   (onClick)=\"onClick($event)\"\n                   (onEdited)=\"onEdited($event)\"\n                   (onStopEditing)=\"onStopEditing()\">\n    </select-editor>\n\n    <textarea-editor *ngSwitchCase=\"'textarea'\"\n                     [cell]=\"cell\"\n                     [inputClass]=\"inputClass\"\n                     (onClick)=\"onClick($event)\"\n                     (onEdited)=\"onEdited($event)\"\n                     (onStopEditing)=\"onStopEditing()\">\n    </textarea-editor>\n\n    <checkbox-editor *ngSwitchCase=\"'checkbox'\"\n                     [cell]=\"cell\"\n                     [inputClass]=\"inputClass\"\n                     (onClick)=\"onClick($event)\">\n    </checkbox-editor>\n\n    <completer-editor *ngSwitchCase=\"'completer'\"\n                      [cell]=\"cell\">\n    </completer-editor>\n\n    <input-editor *ngSwitchDefault\n                  [cell]=\"cell\"\n                  [inputClass]=\"inputClass\"\n                  (onClick)=\"onClick($event)\"\n                  (onEdited)=\"onEdited($event)\"\n                  (onStopEditing)=\"onStopEditing()\">\n    </input-editor>\n</div>" }]
+            args: [{ selector: 'table-cell-default-editor', template: "<div [ngSwitch]=\"getEditorType()\">\n    <select-editor *ngSwitchCase=\"'list'\"\n                   [cell]=\"cell\"\n                   [inputClass]=\"inputClass\"\n                   (onClick)=\"onClick($event)\"\n                   (onEdited)=\"onEdited($event)\"\n                   (onStopEditing)=\"onStopEditing()\">\n    </select-editor>\n\n    <textarea-editor *ngSwitchCase=\"'textarea'\"\n                     [cell]=\"cell\"\n                     [inputClass]=\"inputClass\"\n                     (onClick)=\"onClick($event)\"\n                     (onEdited)=\"onEdited($event)\"\n                     (onStopEditing)=\"onStopEditing()\">\n    </textarea-editor>\n\n    <checkbox-editor *ngSwitchCase=\"'checkbox'\"\n                     [cell]=\"cell\"\n                     [inputClass]=\"inputClass\"\n                     (onClick)=\"onClick($event)\">\n    </checkbox-editor>\n\n    <input-editor *ngSwitchDefault\n                  [cell]=\"cell\"\n                  [inputClass]=\"inputClass\"\n                  (onClick)=\"onClick($event)\"\n                  (onEdited)=\"onEdited($event)\"\n                  (onStopEditing)=\"onStopEditing()\">\n    </input-editor>\n</div>" }]
         }], ctorParameters: function () { return []; } });
 
 class EditCellComponent {
@@ -876,7 +825,11 @@ class EditCellComponent {
         return false;
     }
     getEditorType() {
-        return this.cell.getColumn().editor && this.cell.getColumn().editor.type;
+        const editor = this.cell.getColumn().editor;
+        if (editor) {
+            return editor.type;
+        }
+        return 'text';
     }
 }
 EditCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EditCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -928,7 +881,6 @@ class CustomViewComponent {
     ngOnInit() {
         if (this.cell && !this.customComponent) {
             this.createCustomComponent();
-            this.callOnComponentInit();
             this.patchInstance();
         }
     }
@@ -941,10 +893,6 @@ class CustomViewComponent {
         const componentFactory = this.resolver.resolveComponentFactory(this.cell.getColumn().renderComponent);
         this.customComponent = this.dynamicTarget.createComponent(componentFactory);
     }
-    callOnComponentInit() {
-        const onComponentInitFunction = this.cell.getColumn().getOnComponentInitFunction();
-        onComponentInitFunction && onComponentInitFunction(this.customComponent.instance);
-    }
     patchInstance() {
         Object.assign(this.customComponent.instance, this.getPatch());
     }
@@ -1067,7 +1015,6 @@ const CELL_COMPONENTS = [
     DefaultEditComponent,
     EditCellComponent,
     CheckboxEditorComponent,
-    CompleterEditorComponent,
     InputEditorComponent,
     SelectEditorComponent,
     TextareaEditorComponent,
@@ -1084,7 +1031,6 @@ CellModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15
         DefaultEditComponent,
         EditCellComponent,
         CheckboxEditorComponent,
-        CompleterEditorComponent,
         InputEditorComponent,
         SelectEditorComponent,
         TextareaEditorComponent,
@@ -1097,7 +1043,6 @@ CellModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15
         DefaultEditComponent,
         EditCellComponent,
         CheckboxEditorComponent,
-        CompleterEditorComponent,
         InputEditorComponent,
         SelectEditorComponent,
         TextareaEditorComponent,
@@ -1121,6 +1066,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
+function compareValues(direction, a, b) {
+    if (a < b) {
+        return -1 * direction;
+    }
+    if (a > b) {
+        return direction;
+    }
+    return 0;
+}
+class LocalSorter {
+    static sort(data, field, direction, customCompare) {
+        const dir = (direction === 'asc') ? 1 : -1;
+        const compare = customCompare ? customCompare : compareValues;
+        return data.sort((a, b) => {
+            return compare.call(null, dir, a[field], b[field]);
+        });
+    }
+}
+
+function filterValues(value, search) {
+    return value.toString().toLowerCase().includes(search.toString().toLowerCase());
+}
+class LocalFilter {
+    static filter(data, field, search, customFilter) {
+        const filter = customFilter ? customFilter : filterValues;
+        return data.filter((el) => {
+            const value = typeof el[field] === 'undefined' || el[field] === null ? '' : el[field];
+            return filter.call(null, value, search);
+        });
+    }
+}
+
+class LocalPager {
+    static paginate(data, page, perPage) {
+        return data.slice(perPage * (page - 1), perPage * page);
+    }
+}
+
 var SmartTableOnChangedEventName;
 (function (SmartTableOnChangedEventName) {
     SmartTableOnChangedEventName["load"] = "load";
@@ -1147,7 +1130,7 @@ class DataSource {
     refresh() {
         this.emitOnChanged(SmartTableOnChangedEventName.refresh);
     }
-    load(data) {
+    loadEmit() {
         this.emitOnChanged(SmartTableOnChangedEventName.load);
         return Promise.resolve(true);
     }
@@ -1163,59 +1146,49 @@ class DataSource {
     onRemoved() {
         return this.onRemovedSource.asObservable();
     }
-    prepend(element) {
+    prependEmit(element) {
         this.emitOnAdded(element);
         this.emitOnChanged(SmartTableOnChangedEventName.prepend);
         return Promise.resolve(true);
     }
-    append(element) {
+    appendEmit(element) {
         this.emitOnAdded(element);
         this.emitOnChanged(SmartTableOnChangedEventName.append);
         return Promise.resolve(true);
     }
-    add(element) {
+    addEmit(element) {
         this.emitOnAdded(element);
         this.emitOnChanged(SmartTableOnChangedEventName.add);
         return Promise.resolve(true);
     }
-    remove(element) {
+    removeEmit(element) {
         this.emitOnRemoved(element);
         this.emitOnChanged(SmartTableOnChangedEventName.remove);
         return Promise.resolve(true);
     }
-    update(element, values) {
+    updateEmit(element) {
         this.emitOnUpdated(element);
         this.emitOnChanged(SmartTableOnChangedEventName.update);
         return Promise.resolve(true);
     }
-    empty() {
+    emptyEmit() {
         this.emitOnChanged(SmartTableOnChangedEventName.empty);
         return Promise.resolve(true);
     }
-    setSort(conf, doEmit) {
-        if (doEmit) {
-            this.emitOnChanged(SmartTableOnChangedEventName.sort);
-        }
+    setSortEmit() {
+        this.emitOnChanged(SmartTableOnChangedEventName.sort);
     }
-    setFilter(conf, andOperator, doEmit) {
-        if (doEmit) {
-            this.emitOnChanged(SmartTableOnChangedEventName.filter);
-        }
+    setFilterEmit() {
+        this.emitOnChanged(SmartTableOnChangedEventName.filter);
     }
-    addFilter(fieldConf, andOperator, doEmit) {
-        if (doEmit) {
-            this.emitOnChanged(SmartTableOnChangedEventName.filter);
-        }
+    addFilterEmit() {
+        this.emitOnChanged(SmartTableOnChangedEventName.filter);
     }
-    setPaging(page, perPage, doEmit) {
-        if (doEmit) {
-            this.emitOnChanged(SmartTableOnChangedEventName.paging);
-        }
+    setPagingEmit() {
+        this.emitOnChanged(SmartTableOnChangedEventName.paging);
     }
-    setPage(page, doEmit) {
-        if (doEmit) {
-            this.emitOnChanged(SmartTableOnChangedEventName.page);
-        }
+    setPageEmit() {
+        this.emitOnChanged(SmartTableOnChangedEventName.page);
     }
     emitOnRemoved(element) {
         this.onRemovedSource.next(element);
@@ -1237,1793 +1210,1747 @@ class DataSource {
     }
 }
 
-class FilterDefault {
-    constructor() {
-        this.inputClass = '';
-        this.filter = new EventEmitter();
-        this.query = '';
+class LocalDataSource extends DataSource {
+    constructor(data = []) {
+        super();
+        this.data = [];
+        this.filteredAndSorted = [];
+        this.sortConf = [];
+        this.filterConf = {
+            filters: [],
+            andOperator: true,
+        };
+        this.pagingConf = false;
+        this.data = data;
     }
-    onFilter(query) {
-        this.source.addFilter({
-            field: this.column.id,
-            search: query,
-            filter: this.column.getFilterFunction(),
-        });
+    load(data) {
+        this.data = data;
+        return super.loadEmit();
     }
-}
-FilterDefault.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterDefault, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FilterDefault.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FilterDefault, selector: "ng-component", inputs: { column: "column", source: "source", inputClass: "inputClass" }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterDefault, decorators: [{
-            type: Component,
-            args: [{
-                    template: '',
-                }]
-        }], propDecorators: { column: [{
-                type: Input
-            }], source: [{
-                type: Input
-            }], inputClass: [{
-                type: Input
-            }], filter: [{
-                type: Output
-            }] } });
-
-class DefaultFilter {
-    constructor() {
-        this.delay = 300;
-        this.filter = new EventEmitter();
+    prepend(element) {
+        this.reset(true);
+        this.data.unshift(element);
+        return super.prependEmit(element);
     }
-    ngOnDestroy() {
-        if (this.changesSubscription) {
-            this.changesSubscription.unsubscribe();
-        }
+    append(element) {
+        this.reset(true);
+        this.data.push(element);
+        return super.appendEmit(element);
     }
-    setFilter() {
-        this.filter.emit(this.query);
+    add(element) {
+        this.data.push(element);
+        return super.addEmit(element);
     }
-}
-DefaultFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DefaultFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DefaultFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DefaultFilter, selector: "ng-component", inputs: { query: "query", inputClass: "inputClass", column: "column" }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DefaultFilter, decorators: [{
-            type: Component,
-            args: [{
-                    template: '',
-                }]
-        }], propDecorators: { query: [{
-                type: Input
-            }], inputClass: [{
-                type: Input
-            }], column: [{
-                type: Input
-            }], filter: [{
-                type: Output
-            }] } });
-
-class CheckboxFilterComponent extends DefaultFilter {
-    constructor() {
-        super();
-        this.filterActive = false;
-        this.inputControl = new UntypedFormControl();
+    remove(element) {
+        this.data = this.data.filter(el => el !== element);
+        return super.removeEmit(element);
     }
-    ngOnInit() {
-        this.changesSubscription = this.inputControl.valueChanges
-            .pipe(debounceTime(this.delay))
-            .subscribe((checked) => {
-            this.filterActive = true;
-            const trueVal = (this.column.getFilterConfig() && this.column.getFilterConfig().true) || true;
-            const falseVal = (this.column.getFilterConfig() && this.column.getFilterConfig().false) || false;
-            this.query = checked ? trueVal : falseVal;
-            this.setFilter();
+    update(element, values) {
+        return new Promise((resolve, reject) => {
+            this.find(element).then((found) => {
+                found = deepExtend(found, values);
+                super.updateEmit(found).then(resolve).catch(reject);
+            }).catch(reject);
         });
     }
-    resetFilter(event) {
-        event.preventDefault();
-        this.query = '';
-        this.inputControl.setValue(false, { emitEvent: false });
-        this.filterActive = false;
-        this.setFilter();
-    }
-}
-CheckboxFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckboxFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CheckboxFilterComponent, selector: "checkbox-filter", usesInheritance: true, ngImport: i0, template: `
-    <input type="checkbox" [formControl]="inputControl" [ngClass]="inputClass" class="form-control">
-    <a href="#" *ngIf="filterActive"
-                (click)="resetFilter($event)">{{column.getFilterConfig()?.resetText || 'reset'}}</a>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxFilterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'checkbox-filter',
-                    template: `
-    <input type="checkbox" [formControl]="inputControl" [ngClass]="inputClass" class="form-control">
-    <a href="#" *ngIf="filterActive"
-                (click)="resetFilter($event)">{{column.getFilterConfig()?.resetText || 'reset'}}</a>
-  `,
-                }]
-        }], ctorParameters: function () { return []; } });
-
-class CompleterFilterComponent extends DefaultFilter {
-    constructor() {
-        super();
-        this.completerContent = new Subject();
-    }
-    ngOnInit() {
-        // const config = this.column.getFilterConfig().completer;
-        // config.dataService = this.completerService.local(config.data, config.searchFields, config.titleField);
-        // config.dataService.descriptionField(config.descriptionField);
-        // this.changesSubscription = this.completerContent
-        //   .pipe(
-        //     map((ev: any) => (ev && ev.title) || ev || ''),
-        //     distinctUntilChanged(),
-        //     debounceTime(this.delay)
-        //   )
-        //   .subscribe((search: string) => {
-        //     this.query = search;
-        //     this.setFilter();
-        //   });
-    }
-    inputTextChanged(event) {
-        // workaround to trigger the search event when the home/end buttons are clicked
-        // when this happens the [(ngModel)]="query" is set to "" but the (selected) method is not called
-        // so here it gets called manually
-        if (event === '') {
-            this.completerContent.next(event);
+    find(element) {
+        const found = this.data.find(el => el === element);
+        if (found) {
+            return Promise.resolve(found);
         }
+        return Promise.reject(new Error('Element was not found in the dataset'));
     }
-}
-CompleterFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CompleterFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CompleterFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CompleterFilterComponent, selector: "completer-filter", usesInheritance: true, ngImport: i0, template: `
-    <!-- <ng2-completer [(ngModel)]="query"
-                   (ngModelChange)="inputTextChanged($event)"
-                   [dataService]="column.getFilterConfig().completer.dataService"
-                   [minSearchLength]="column.getFilterConfig().completer.minSearchLength || 0"
-                   [pause]="column.getFilterConfig().completer.pause || 0"
-                   [placeholder]="column.getFilterConfig().completer.placeholder || 'Start typing...'"
-                   (selected)="completerContent.next($event)">
-    </ng2-completer> -->
-  `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CompleterFilterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'completer-filter',
-                    template: `
-    <!-- <ng2-completer [(ngModel)]="query"
-                   (ngModelChange)="inputTextChanged($event)"
-                   [dataService]="column.getFilterConfig().completer.dataService"
-                   [minSearchLength]="column.getFilterConfig().completer.minSearchLength || 0"
-                   [pause]="column.getFilterConfig().completer.pause || 0"
-                   [placeholder]="column.getFilterConfig().completer.placeholder || 'Start typing...'"
-                   (selected)="completerContent.next($event)">
-    </ng2-completer> -->
-  `,
-                }]
-        }], ctorParameters: function () { return []; } });
-
-class InputFilterComponent extends DefaultFilter {
-    constructor() {
-        super();
-        this.inputControl = new UntypedFormControl();
+    getElements() {
+        const data = this.data.slice(0);
+        return Promise.resolve(this.prepareData(data));
     }
-    ngOnInit() {
-        if (this.query) {
-            this.inputControl.setValue(this.query);
-        }
-        this.inputControl.valueChanges
-            .pipe(distinctUntilChanged(), debounceTime(this.delay))
-            .subscribe((value) => {
-            this.query = this.inputControl.value;
-            this.setFilter();
-        });
+    getFilteredAndSorted() {
+        let data = this.data.slice(0);
+        this.prepareData(data);
+        return Promise.resolve(this.filteredAndSorted);
     }
-    ngOnChanges(changes) {
-        if (changes.query) {
-            this.inputControl.setValue(this.query);
-        }
-    }
-}
-InputFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: InputFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: InputFilterComponent, selector: "input-filter", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-    <input
-      [ngClass]="inputClass"
-      [formControl]="inputControl"
-      class="form-control"
-      type="text"
-      placeholder="{{ column.title }}"/>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: InputFilterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'input-filter',
-                    template: `
-    <input
-      [ngClass]="inputClass"
-      [formControl]="inputControl"
-      class="form-control"
-      type="text"
-      placeholder="{{ column.title }}"/>
-  `,
-                }]
-        }], ctorParameters: function () { return []; } });
-
-class SelectFilterComponent extends DefaultFilter {
-    constructor() {
-        super();
-    }
-    ngOnInit() {
-        this.inputControl.valueChanges
-            .pipe(skip(1), distinctUntilChanged(), debounceTime(this.delay))
-            .subscribe((value) => this.setFilter());
-    }
-}
-SelectFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SelectFilterComponent, selector: "select-filter", viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["inputControl"], descendants: true, read: NgControl, static: true }], usesInheritance: true, ngImport: i0, template: `
-    <select [ngClass]="inputClass"
-            class="form-control"
-            #inputControl
-            [(ngModel)]="query">
-
-        <option value="">{{ column.getFilterConfig().selectText }}</option>
-        <option *ngFor="let option of column.getFilterConfig().list" [value]="option.value">
-          {{ option.title }}
-        </option>
-    </select>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectFilterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'select-filter',
-                    template: `
-    <select [ngClass]="inputClass"
-            class="form-control"
-            #inputControl
-            [(ngModel)]="query">
-
-        <option value="">{{ column.getFilterConfig().selectText }}</option>
-        <option *ngFor="let option of column.getFilterConfig().list" [value]="option.value">
-          {{ option.title }}
-        </option>
-    </select>
-  `,
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { inputControl: [{
-                type: ViewChild,
-                args: ['inputControl', { read: NgControl, static: true }]
-            }] } });
-
-class DefaultFilterComponent extends FilterDefault {
-}
-DefaultFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DefaultFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DefaultFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DefaultFilterComponent, selector: "default-table-filter", inputs: { query: "query" }, usesInheritance: true, ngImport: i0, template: `
-    <ng-container [ngSwitch]="column.getFilterType()">
-      <select-filter *ngSwitchCase="'list'"
-                     [query]="query"
-                     [ngClass]="inputClass"
-                     [column]="column"
-                     (filter)="onFilter($event)">
-      </select-filter>
-      <checkbox-filter *ngSwitchCase="'checkbox'"
-                       [query]="query"
-                       [ngClass]="inputClass"
-                       [column]="column"
-                       (filter)="onFilter($event)">
-      </checkbox-filter>
-      <completer-filter *ngSwitchCase="'completer'"
-                        [query]="query"
-                        [ngClass]="inputClass"
-                        [column]="column"
-                        (filter)="onFilter($event)">
-      </completer-filter>
-      <input-filter *ngSwitchDefault
-                    [query]="query"
-                    [ngClass]="inputClass"
-                    [column]="column"
-                    (filter)="onFilter($event)">
-      </input-filter>
-    </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: CheckboxFilterComponent, selector: "checkbox-filter" }, { kind: "component", type: CompleterFilterComponent, selector: "completer-filter" }, { kind: "component", type: InputFilterComponent, selector: "input-filter" }, { kind: "component", type: SelectFilterComponent, selector: "select-filter" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DefaultFilterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'default-table-filter',
-                    template: `
-    <ng-container [ngSwitch]="column.getFilterType()">
-      <select-filter *ngSwitchCase="'list'"
-                     [query]="query"
-                     [ngClass]="inputClass"
-                     [column]="column"
-                     (filter)="onFilter($event)">
-      </select-filter>
-      <checkbox-filter *ngSwitchCase="'checkbox'"
-                       [query]="query"
-                       [ngClass]="inputClass"
-                       [column]="column"
-                       (filter)="onFilter($event)">
-      </checkbox-filter>
-      <completer-filter *ngSwitchCase="'completer'"
-                        [query]="query"
-                        [ngClass]="inputClass"
-                        [column]="column"
-                        (filter)="onFilter($event)">
-      </completer-filter>
-      <input-filter *ngSwitchDefault
-                    [query]="query"
-                    [ngClass]="inputClass"
-                    [column]="column"
-                    (filter)="onFilter($event)">
-      </input-filter>
-    </ng-container>
-  `,
-                }]
-        }], propDecorators: { query: [{
-                type: Input
-            }] } });
-
-class CustomFilterComponent extends FilterDefault {
-    constructor(resolver) {
-        super();
-        this.resolver = resolver;
+    getAll() {
+        const data = this.data.slice(0);
+        return Promise.resolve(data);
     }
-    ngOnChanges(changes) {
-        if (this.column && !this.customComponent) {
-            const componentFactory = this.resolver.resolveComponentFactory(this.column.filter.component);
-            this.customComponent = this.dynamicTarget.createComponent(componentFactory);
-            // set @Inputs and @Outputs of custom component
-            this.customComponent.instance.query = this.query;
-            this.customComponent.instance.column = this.column;
-            this.customComponent.instance.source = this.source;
-            this.customComponent.instance.inputClass = this.inputClass;
-            this.customComponent.instance.filter.subscribe((event) => this.onFilter(event));
+    reset(silent = false) {
+        if (silent) {
+            this.filterConf = {
+                filters: [],
+                andOperator: true,
+            };
+            this.sortConf = [];
+            if (this.pagingConf) {
+                this.pagingConf.page = 1;
+            }
         }
-        if (this.customComponent) {
-            this.customComponent.instance.ngOnChanges(changes);
+        else {
+            this.setFilter([], true, false);
+            this.setSort([], false);
+            if (this.pagingConf) {
+                this.setPage(1);
+            }
         }
     }
-    ngOnDestroy() {
-        if (this.customComponent) {
-            this.customComponent.destroy();
-        }
+    empty() {
+        this.data = [];
+        return super.emptyEmit();
     }
-}
-CustomFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CustomFilterComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
-CustomFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CustomFilterComponent, selector: "custom-table-filter", inputs: { query: "query" }, viewQueries: [{ propertyName: "dynamicTarget", first: true, predicate: ["dynamicTarget"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `<ng-template #dynamicTarget></ng-template>`, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CustomFilterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'custom-table-filter',
-                    template: `<ng-template #dynamicTarget></ng-template>`,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }]; }, propDecorators: { query: [{
-                type: Input
-            }], dynamicTarget: [{
-                type: ViewChild,
-                args: ['dynamicTarget', { read: ViewContainerRef, static: true }]
-            }] } });
-
-class FilterComponent extends FilterDefault {
-    constructor() {
-        super(...arguments);
-        this.query = '';
+    count() {
+        return this.filteredAndSorted.length;
     }
-    ngOnChanges(changes) {
-        if (changes.source) {
-            if (!changes.source.firstChange) {
-                this.dataChangedSub.unsubscribe();
-            }
-            this.dataChangedSub = this.source.onChanged().subscribe((dataChanges) => {
-                const filterConf = this.source.getFilter();
-                if (filterConf && filterConf.filters && filterConf.filters.length === 0) {
-                    this.query = '';
-                    // add a check for existing filters an set the query if one exists for this column
-                    // this covers instances where the filter is set by user code while maintaining existing functionality
-                }
-                else if (filterConf && filterConf.filters && filterConf.filters.length > 0) {
-                    filterConf.filters.forEach((k, v) => {
-                        if (k.field == this.column.id) {
-                            this.query = k.search;
-                        }
-                    });
+    /**
+     *
+     * Array of conf objects
+     * [
+     *  {field: string, direction: asc|desc|null, compare: Function|null},
+     * ]
+     * @param conf
+     * @param doEmit
+     * @returns {LocalDataSource}
+     */
+    setSort(conf, doEmit = true) {
+        if (conf !== null) {
+            conf.forEach((fieldConf) => {
+                if (!fieldConf.field || typeof fieldConf.direction === 'undefined') {
+                    throw new Error('Sort configuration object is not valid');
                 }
             });
+            this.sortConf = conf;
         }
-    }
-}
-FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FilterComponent, selector: "ng2-smart-table-filter", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-      <div class="ng2-smart-filter" *ngIf="column.isFilterable" [ngSwitch]="column.getFilterType()">
-        <custom-table-filter *ngSwitchCase="'custom'"
-                             [query]="query"
-                             [column]="column"
-                             [source]="source"
-                             [inputClass]="inputClass"
-                             (filter)="onFilter($event)">
-        </custom-table-filter>
-        <default-table-filter *ngSwitchDefault
-                              [query]="query"
-                              [column]="column"
-                              [source]="source"
-                              [inputClass]="inputClass"
-                              (filter)="onFilter($event)">
-        </default-table-filter>
-      </div>
-    `, isInline: true, styles: [":host .ng2-smart-filter ::ng-deep input,:host .ng2-smart-filter ::ng-deep select{width:100%;line-height:normal;padding:.375em .75em;font-weight:400}:host .ng2-smart-filter ::ng-deep input[type=search]{box-sizing:inherit}:host .ng2-smart-filter ::ng-deep .completer-dropdown-holder{font-weight:400}:host .ng2-smart-filter ::ng-deep a{font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: DefaultFilterComponent, selector: "default-table-filter", inputs: ["query"] }, { kind: "component", type: CustomFilterComponent, selector: "custom-table-filter", inputs: ["query"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ng2-smart-table-filter', template: `
-      <div class="ng2-smart-filter" *ngIf="column.isFilterable" [ngSwitch]="column.getFilterType()">
-        <custom-table-filter *ngSwitchCase="'custom'"
-                             [query]="query"
-                             [column]="column"
-                             [source]="source"
-                             [inputClass]="inputClass"
-                             (filter)="onFilter($event)">
-        </custom-table-filter>
-        <default-table-filter *ngSwitchDefault
-                              [query]="query"
-                              [column]="column"
-                              [source]="source"
-                              [inputClass]="inputClass"
-                              (filter)="onFilter($event)">
-        </default-table-filter>
-      </div>
-    `, styles: [":host .ng2-smart-filter ::ng-deep input,:host .ng2-smart-filter ::ng-deep select{width:100%;line-height:normal;padding:.375em .75em;font-weight:400}:host .ng2-smart-filter ::ng-deep input[type=search]{box-sizing:inherit}:host .ng2-smart-filter ::ng-deep .completer-dropdown-holder{font-weight:400}:host .ng2-smart-filter ::ng-deep a{font-weight:400}\n"] }]
-        }] });
-
-const FILTER_COMPONENTS = [
-    FilterDefault,
-    DefaultFilter,
-    FilterComponent,
-    DefaultFilterComponent,
-    CustomFilterComponent,
-    CheckboxFilterComponent,
-    CompleterFilterComponent,
-    InputFilterComponent,
-    SelectFilterComponent,
-];
-class FilterModule {
-}
-FilterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: FilterModule, declarations: [FilterDefault,
-        DefaultFilter,
-        FilterComponent,
-        DefaultFilterComponent,
-        CustomFilterComponent,
-        CheckboxFilterComponent,
-        CompleterFilterComponent,
-        InputFilterComponent,
-        SelectFilterComponent], imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule], exports: [FilterDefault,
-        DefaultFilter,
-        FilterComponent,
-        DefaultFilterComponent,
-        CustomFilterComponent,
-        CheckboxFilterComponent,
-        CompleterFilterComponent,
-        InputFilterComponent,
-        SelectFilterComponent] });
-FilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterModule, imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                    ],
-                    declarations: [
-                        ...FILTER_COMPONENTS,
-                    ],
-                    exports: [
-                        ...FILTER_COMPONENTS,
-                    ],
-                }]
-        }] });
-
-class PagerComponent {
-    constructor() {
-        this.perPageSelect = [];
-        this.changePage = new EventEmitter();
-        this.count = 0;
-    }
-    ngOnChanges(changes) {
-        if (changes.source) {
-            if (!changes.source.firstChange) {
-                this.dataChangedSub.unsubscribe();
-            }
-            this.dataChangedSub = this.source.onChanged().subscribe((dataChanges) => {
-                this.page = this.source.getPaging().page;
-                this.perPage = this.source.getPaging().perPage;
-                this.currentPerPage = this.perPage;
-                this.count = this.source.count();
-                if (this.isPageOutOfBounce()) {
-                    this.source.setPage(--this.page);
-                }
-                this.processPageChange(dataChanges);
-                this.initPages();
-            });
+        if (doEmit) {
+            super.setSortEmit();
         }
+        return this;
     }
     /**
-     * We change the page here depending on the action performed against data source
-     * if a new element was added to the end of the table - then change the page to the last
-     * if a new element was added to the beginning of the table - then to the first page
-     * @param changes
+     *
+     * Array of conf objects
+     * [
+     *  {field: string, search: string, filter: Function|null},
+     * ]
+     * @param conf
+     * @param andOperator
+     * @param doEmit
+     * @returns {LocalDataSource}
      */
-    processPageChange(changes) {
-        if (changes['action'] === 'prepend') {
-            this.source.setPage(1);
+    setFilter(conf, andOperator = true, doEmit = true) {
+        if (conf && conf.length > 0) {
+            conf.forEach((fieldConf) => {
+                this.addFilter(fieldConf, andOperator, false);
+            });
+        }
+        else {
+            this.filterConf = {
+                filters: [],
+                andOperator: true,
+            };
+        }
+        this.filterConf.andOperator = andOperator;
+        if (this.pagingConf) {
+            this.pagingConf.page = 1;
         }
-        if (changes['action'] === 'append') {
-            this.source.setPage(this.getLast());
+        if (doEmit) {
+            super.setFilterEmit();
         }
+        return this;
     }
-    shouldShow() {
-        return this.source.count() > this.perPage;
-    }
-    paginate(page) {
-        this.source.setPage(page);
-        this.page = page;
-        this.changePage.emit({ page });
-        return false;
+    addFilter(fieldConf, andOperator = true, doEmit = true) {
+        if (!fieldConf.field || typeof fieldConf.search === 'undefined') {
+            throw new Error('Filter configuration object is not valid');
+        }
+        let found = false;
+        this.filterConf.filters.forEach((currentFieldConf, index) => {
+            if (currentFieldConf.field === fieldConf.field) {
+                this.filterConf.filters[index] = fieldConf;
+                found = true;
+            }
+        });
+        if (!found) {
+            this.filterConf.filters.push(fieldConf);
+        }
+        this.filterConf.andOperator = andOperator;
+        if (doEmit) {
+            super.addFilterEmit();
+        }
+        return this;
     }
-    next() {
-        return this.paginate(this.getPage() + 1);
+    setPaging(page = 1, perPage, doEmit = true) {
+        if (this.pagingConf) {
+            this.pagingConf.page = page;
+            this.pagingConf.perPage = perPage;
+        }
+        else {
+            this.pagingConf = {
+                page, perPage
+            };
+        }
+        if (doEmit) {
+            super.setPagingEmit();
+        }
+        return;
     }
-    prev() {
-        return this.paginate(this.getPage() - 1);
+    setPage(page, doEmit = true) {
+        if (!this.pagingConf) {
+            return;
+        }
+        this.pagingConf.page = page;
+        if (doEmit) {
+            super.setPageEmit();
+        }
+        return;
     }
-    getPage() {
-        return this.page;
+    getSort() {
+        return this.sortConf;
     }
-    getPages() {
-        return this.pages;
+    getFilter() {
+        return this.filterConf;
     }
-    getLast() {
-        return Math.ceil(this.count / this.perPage);
+    getPaging() {
+        return this.pagingConf;
     }
-    isPageOutOfBounce() {
-        return (this.page * this.perPage) >= (this.count + this.perPage) && this.page > 1;
+    prepareData(data) {
+        data = this.filter(data);
+        data = this.sort(data);
+        this.filteredAndSorted = data.slice(0);
+        if (this.pagingConf) {
+            return this.paginate(data);
+        }
+        else
+            return data;
     }
-    initPages() {
-        const pagesCount = this.getLast();
-        let showPagesCount = 4;
-        showPagesCount = pagesCount < showPagesCount ? pagesCount : showPagesCount;
-        this.pages = [];
-        if (this.shouldShow()) {
-            let middleOne = Math.ceil(showPagesCount / 2);
-            middleOne = this.page >= middleOne ? this.page : middleOne;
-            let lastOne = middleOne + Math.floor(showPagesCount / 2);
-            lastOne = lastOne >= pagesCount ? pagesCount : lastOne;
-            const firstOne = lastOne - showPagesCount + 1;
-            for (let i = firstOne; i <= lastOne; i++) {
-                this.pages.push(i);
-            }
+    sort(data) {
+        if (this.sortConf) {
+            this.sortConf.forEach((fieldConf) => {
+                data = LocalSorter
+                    .sort(data, fieldConf.field, fieldConf.direction, fieldConf.compare);
+            });
         }
+        return data;
     }
-    onChangePerPage(event) {
-        if (this.currentPerPage) {
-            if (typeof this.currentPerPage === 'string' && this.currentPerPage.toLowerCase() === 'all') {
-                this.source.getPaging().perPage = null;
+    // TODO: refactor?
+    filter(data) {
+        if (this.filterConf.filters) {
+            if (this.filterConf.andOperator) {
+                this.filterConf.filters.forEach((fieldConf) => {
+                    if (fieldConf.search?.length > 0) {
+                        data = LocalFilter
+                            .filter(data, fieldConf.field, fieldConf.search, fieldConf.filter);
+                    }
+                });
             }
             else {
-                this.source.getPaging().perPage = this.currentPerPage * 1;
-                this.source.refresh();
+                let mergedData = [];
+                this.filterConf.filters.forEach((fieldConf) => {
+                    if (fieldConf.search?.length > 0) {
+                        mergedData = mergedData.concat(LocalFilter
+                            .filter(data, fieldConf.field, fieldConf.search, fieldConf.filter));
+                    }
+                });
+                // remove non unique items
+                data = mergedData.filter((elem, pos, arr) => {
+                    return arr.indexOf(elem) === pos;
+                });
             }
-            this.initPages();
         }
+        return data;
+    }
+    paginate(data) {
+        if (this.pagingConf && this.pagingConf.page && this.pagingConf.perPage) {
+            data = LocalPager.paginate(data, this.pagingConf.page, this.pagingConf.perPage);
+        }
+        return data;
     }
 }
-PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: { source: "source", perPageSelect: "perPageSelect" }, outputs: { changePage: "changePage" }, usesOnChanges: true, ngImport: i0, template: `
-    <nav *ngIf="shouldShow()" class="ng2-smart-pagination-nav">
-      <ul class="ng2-smart-pagination pagination">
-        <li class="ng2-smart-page-item page-item" [ngClass]="{disabled: getPage() == 1}">
-          <a class="ng2-smart-page-link page-link" href="#"
-          (click)="getPage() == 1 ? false : paginate(1)" aria-label="First">
-            <span aria-hidden="true">&laquo;</span>
-            <span class="sr-only">First</span>
-          </a>
-        </li>
-        <li class="ng2-smart-page-item page-item" [ngClass]="{disabled: getPage() == 1}">
-          <a class="ng2-smart-page-link page-link page-link-prev" href="#"
-             (click)="getPage() == 1 ? false : prev()" aria-label="Prev">
-            <span aria-hidden="true">&lt;</span>
-            <span class="sr-only">Prev</span>
-          </a>
-        </li>
-        <li class="ng2-smart-page-item page-item"
-        [ngClass]="{active: getPage() == page}" *ngFor="let page of getPages()">
-          <span class="ng2-smart-page-link page-link"
-          *ngIf="getPage() == page">{{ page }} <span class="sr-only">(current)</span></span>
-          <a class="ng2-smart-page-link page-link" href="#"
-          (click)="paginate(page)" *ngIf="getPage() != page">{{ page }}</a>
-        </li>
-
-        <li class="ng2-smart-page-item page-item"
-            [ngClass]="{disabled: getPage() == getLast()}">
-          <a class="ng2-smart-page-link page-link page-link-next" href="#"
-             (click)="getPage() == getLast() ? false : next()" aria-label="Next">
-            <span aria-hidden="true">&gt;</span>
-            <span class="sr-only">Next</span>
-          </a>
-        </li>
-        
-        <li class="ng2-smart-page-item page-item"
-        [ngClass]="{disabled: getPage() == getLast()}">
-          <a class="ng2-smart-page-link page-link" href="#"
-          (click)="getPage() == getLast() ? false : paginate(getLast())" aria-label="Last">
-            <span aria-hidden="true">&raquo;</span>
-            <span class="sr-only">Last</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-    
-    <nav *ngIf="perPageSelect && perPageSelect.length > 0" class="ng2-smart-pagination-per-page">
-      <label for="per-page">
-        Per Page:
-      </label>
-      <select (change)="onChangePerPage($event)" [(ngModel)]="currentPerPage" id="per-page">
-        <option *ngFor="let item of perPageSelect" [value]="item">{{ item }}</option>
-      </select>
-    </nav>
-  `, isInline: true, styles: [".ng2-smart-pagination{display:inline-flex;font-size:.875em;padding:0}.ng2-smart-pagination .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}:host{display:flex;justify-content:space-between}:host select{margin:1rem 0 1rem 1rem}:host label{margin:1rem 0 1rem 1rem;line-height:2.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PagerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ng2-smart-table-pager', template: `
-    <nav *ngIf="shouldShow()" class="ng2-smart-pagination-nav">
-      <ul class="ng2-smart-pagination pagination">
-        <li class="ng2-smart-page-item page-item" [ngClass]="{disabled: getPage() == 1}">
-          <a class="ng2-smart-page-link page-link" href="#"
-          (click)="getPage() == 1 ? false : paginate(1)" aria-label="First">
-            <span aria-hidden="true">&laquo;</span>
-            <span class="sr-only">First</span>
-          </a>
-        </li>
-        <li class="ng2-smart-page-item page-item" [ngClass]="{disabled: getPage() == 1}">
-          <a class="ng2-smart-page-link page-link page-link-prev" href="#"
-             (click)="getPage() == 1 ? false : prev()" aria-label="Prev">
-            <span aria-hidden="true">&lt;</span>
-            <span class="sr-only">Prev</span>
-          </a>
-        </li>
-        <li class="ng2-smart-page-item page-item"
-        [ngClass]="{active: getPage() == page}" *ngFor="let page of getPages()">
-          <span class="ng2-smart-page-link page-link"
-          *ngIf="getPage() == page">{{ page }} <span class="sr-only">(current)</span></span>
-          <a class="ng2-smart-page-link page-link" href="#"
-          (click)="paginate(page)" *ngIf="getPage() != page">{{ page }}</a>
-        </li>
-
-        <li class="ng2-smart-page-item page-item"
-            [ngClass]="{disabled: getPage() == getLast()}">
-          <a class="ng2-smart-page-link page-link page-link-next" href="#"
-             (click)="getPage() == getLast() ? false : next()" aria-label="Next">
-            <span aria-hidden="true">&gt;</span>
-            <span class="sr-only">Next</span>
-          </a>
-        </li>
-        
-        <li class="ng2-smart-page-item page-item"
-        [ngClass]="{disabled: getPage() == getLast()}">
-          <a class="ng2-smart-page-link page-link" href="#"
-          (click)="getPage() == getLast() ? false : paginate(getLast())" aria-label="Last">
-            <span aria-hidden="true">&raquo;</span>
-            <span class="sr-only">Last</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-    
-    <nav *ngIf="perPageSelect && perPageSelect.length > 0" class="ng2-smart-pagination-per-page">
-      <label for="per-page">
-        Per Page:
-      </label>
-      <select (change)="onChangePerPage($event)" [(ngModel)]="currentPerPage" id="per-page">
-        <option *ngFor="let item of perPageSelect" [value]="item">{{ item }}</option>
-      </select>
-    </nav>
-  `, styles: [".ng2-smart-pagination{display:inline-flex;font-size:.875em;padding:0}.ng2-smart-pagination .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}:host{display:flex;justify-content:space-between}:host select{margin:1rem 0 1rem 1rem}:host label{margin:1rem 0 1rem 1rem;line-height:2.5rem}\n"] }]
-        }], propDecorators: { source: [{
-                type: Input
-            }], perPageSelect: [{
-                type: Input
-            }], changePage: [{
-                type: Output
-            }] } });
 
-class PagerModule {
+class FilterDefault {
+    constructor() {
+        this.inputClass = '';
+        this.query = '';
+        this.filter = new EventEmitter();
+    }
+    onFilter(query) {
+        this.source.addFilter({
+            field: this.column.id,
+            search: query,
+            filter: this.column.getFilterFunction(),
+        });
+    }
 }
-PagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: PagerModule, declarations: [PagerComponent], imports: [CommonModule,
-        FormsModule], exports: [PagerComponent] });
-PagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PagerModule, imports: [CommonModule,
-        FormsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PagerModule, decorators: [{
-            type: NgModule,
+FilterDefault.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterDefault, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FilterDefault.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FilterDefault, selector: "ng-component", inputs: { column: "column", source: "source", inputClass: "inputClass", query: "query" }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterDefault, decorators: [{
+            type: Component,
             args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                    ],
-                    declarations: [
-                        PagerComponent,
-                    ],
-                    exports: [
-                        PagerComponent,
-                    ],
+                    template: '',
                 }]
-        }] });
+        }], propDecorators: { column: [{
+                type: Input
+            }], source: [{
+                type: Input
+            }], inputClass: [{
+                type: Input
+            }], query: [{
+                type: Input
+            }], filter: [{
+                type: Output
+            }] } });
 
-class TbodyCreateCancelComponent {
-    onSave(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.grid.save(this.row, this.editConfirm);
+class DefaultFilter {
+    constructor() {
+        this.delay = 300;
+        this.query = '';
+        this.inputClass = '';
+        this.filter = new EventEmitter();
     }
-    onCancelEdit(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.editCancel.emit(true);
-        this.row.isInEditing = false;
+    ngOnDestroy() {
+        if (this.changesSubscription) {
+            this.changesSubscription.unsubscribe();
+        }
     }
-    ngOnChanges() {
-        this.saveButtonContent = this.grid.getSetting('edit.saveButtonContent');
-        this.cancelButtonContent = this.grid.getSetting('edit.cancelButtonContent');
+    setFilter() {
+        this.filter.emit(this.query);
     }
 }
-TbodyCreateCancelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TbodyCreateCancelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TbodyCreateCancelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TbodyCreateCancelComponent, selector: "ng2-st-tbody-create-cancel", inputs: { grid: "grid", row: "row", editConfirm: "editConfirm", editCancel: "editCancel" }, usesOnChanges: true, ngImport: i0, template: `
-    <a href="#" class="ng2-smart-action ng2-smart-action-edit-save"
-        [innerHTML]="saveButtonContent" (click)="onSave($event)"></a>
-    <a href="#" class="ng2-smart-action ng2-smart-action-edit-cancel"
-        [innerHTML]="cancelButtonContent" (click)="onCancelEdit($event)"></a>
-  `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TbodyCreateCancelComponent, decorators: [{
+DefaultFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DefaultFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DefaultFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DefaultFilter, selector: "ng-component", inputs: { query: "query", inputClass: "inputClass", column: "column" }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DefaultFilter, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ng2-st-tbody-create-cancel',
-                    template: `
-    <a href="#" class="ng2-smart-action ng2-smart-action-edit-save"
-        [innerHTML]="saveButtonContent" (click)="onSave($event)"></a>
-    <a href="#" class="ng2-smart-action ng2-smart-action-edit-cancel"
-        [innerHTML]="cancelButtonContent" (click)="onCancelEdit($event)"></a>
-  `,
+                    template: '',
                 }]
-        }], propDecorators: { grid: [{
-                type: Input
-            }], row: [{
+        }], propDecorators: { query: [{
                 type: Input
-            }], editConfirm: [{
+            }], inputClass: [{
                 type: Input
-            }], editCancel: [{
+            }], column: [{
                 type: Input
+            }], filter: [{
+                type: Output
             }] } });
 
-class TbodyEditDeleteComponent {
+class CheckboxFilterComponent extends DefaultFilter {
     constructor() {
-        this.edit = new EventEmitter();
-        this.delete = new EventEmitter();
-        this.editRowSelect = new EventEmitter();
+        super();
+        this.filterActive = false;
+        this.inputControl = new UntypedFormControl();
     }
-    onEdit(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.editRowSelect.emit(this.row);
-        this.edit.emit({
-            data: this.row.getData(),
-            source: this.source,
+    ngOnInit() {
+        this.changesSubscription = this.inputControl.valueChanges
+            .pipe(debounceTime(this.delay))
+            .subscribe((checked) => {
+            this.filterActive = true;
+            const trueVal = (this.column.getFilterConfig() && this.column.getFilterConfig().true) || true;
+            const falseVal = (this.column.getFilterConfig() && this.column.getFilterConfig().false) || false;
+            this.query = checked ? trueVal : falseVal;
+            this.setFilter();
         });
-        if (this.grid.getSetting('mode') !== 'external') {
-            this.grid.edit(this.row);
-        }
     }
-    onDelete(event) {
+    resetFilter(event) {
         event.preventDefault();
-        event.stopPropagation();
-        if (this.grid.getSetting('mode') === 'external') {
-            this.delete.emit({
-                data: this.row.getData(),
-                source: this.source,
-            });
+        this.query = '';
+        this.inputControl.setValue(false, { emitEvent: false });
+        this.filterActive = false;
+        this.setFilter();
+    }
+}
+CheckboxFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CheckboxFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CheckboxFilterComponent, selector: "checkbox-filter", usesInheritance: true, ngImport: i0, template: `
+    <input type="checkbox" [formControl]="inputControl" [ngClass]="inputClass" class="form-control">
+    <a href="#" *ngIf="filterActive"
+                (click)="resetFilter($event)">{{column.getFilterConfig()?.resetText || 'reset'}}</a>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxFilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'checkbox-filter',
+                    template: `
+    <input type="checkbox" [formControl]="inputControl" [ngClass]="inputClass" class="form-control">
+    <a href="#" *ngIf="filterActive"
+                (click)="resetFilter($event)">{{column.getFilterConfig()?.resetText || 'reset'}}</a>
+  `,
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class InputFilterComponent extends DefaultFilter {
+    constructor() {
+        super();
+        this.inputControl = new UntypedFormControl();
+    }
+    ngOnInit() {
+        if (this.query) {
+            this.inputControl.setValue(this.query);
         }
-        else {
-            this.grid.delete(this.row, this.deleteConfirm);
+        this.inputControl.valueChanges
+            .pipe(distinctUntilChanged(), debounceTime(this.delay))
+            .subscribe((value) => {
+            this.query = this.inputControl.value;
+            this.setFilter();
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes?.['query']) {
+            this.inputControl.setValue(this.query);
         }
     }
-    ngOnChanges() {
-        this.isActionEdit = this.grid.getSetting('actions.edit');
-        this.isActionDelete = this.grid.getSetting('actions.delete');
-        this.editRowButtonContent = this.grid.getSetting('edit.editButtonContent');
-        this.deleteRowButtonContent = this.grid.getSetting('delete.deleteButtonContent');
+}
+InputFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: InputFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InputFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: InputFilterComponent, selector: "input-filter", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    <input
+      [ngClass]="inputClass"
+      [formControl]="inputControl"
+      class="form-control"
+      type="text"
+      placeholder="{{ column.title }}"/>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: InputFilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'input-filter',
+                    template: `
+    <input
+      [ngClass]="inputClass"
+      [formControl]="inputControl"
+      class="form-control"
+      type="text"
+      placeholder="{{ column.title }}"/>
+  `,
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class SelectFilterComponent extends DefaultFilter {
+    constructor() {
+        super();
+    }
+    ngOnInit() {
+        if (this.inputControl.valueChanges) {
+            this.inputControl.valueChanges
+                .pipe(skip(1), distinctUntilChanged(), debounceTime(this.delay))
+                .subscribe((value) => this.setFilter());
+        }
     }
 }
-TbodyEditDeleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TbodyEditDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TbodyEditDeleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TbodyEditDeleteComponent, selector: "ng2-st-tbody-edit-delete", inputs: { grid: "grid", row: "row", source: "source", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm" }, outputs: { edit: "edit", delete: "delete", editRowSelect: "editRowSelect" }, usesOnChanges: true, ngImport: i0, template: `
-    <a href="#" *ngIf="isActionEdit" class="ng2-smart-action ng2-smart-action-edit-edit"
-        [innerHTML]="editRowButtonContent" (click)="onEdit($event)"></a>
-    <a href="#" *ngIf="isActionDelete" class="ng2-smart-action ng2-smart-action-delete-delete"
-        [innerHTML]="deleteRowButtonContent" (click)="onDelete($event)"></a>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TbodyEditDeleteComponent, decorators: [{
+SelectFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SelectFilterComponent, selector: "select-filter", viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["inputControl"], descendants: true, read: NgControl, static: true }], usesInheritance: true, ngImport: i0, template: `
+    <select [ngClass]="inputClass"
+            class="form-control"
+            #inputControl
+            [(ngModel)]="query">
+
+        <option value="">{{ column.getFilterConfig().selectText }}</option>
+        <option *ngFor="let option of column.getFilterConfig().list" [value]="option.value">
+          {{ option.title }}
+        </option>
+    </select>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectFilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'select-filter',
+                    template: `
+    <select [ngClass]="inputClass"
+            class="form-control"
+            #inputControl
+            [(ngModel)]="query">
+
+        <option value="">{{ column.getFilterConfig().selectText }}</option>
+        <option *ngFor="let option of column.getFilterConfig().list" [value]="option.value">
+          {{ option.title }}
+        </option>
+    </select>
+  `,
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { inputControl: [{
+                type: ViewChild,
+                args: ['inputControl', { read: NgControl, static: true }]
+            }] } });
+
+class DefaultFilterComponent extends FilterDefault {
+}
+DefaultFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DefaultFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DefaultFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DefaultFilterComponent, selector: "default-table-filter", usesInheritance: true, ngImport: i0, template: `
+    <ng-container [ngSwitch]="column.getFilterType()">
+      <select-filter *ngSwitchCase="'list'"
+                     [query]="query"
+                     [ngClass]="inputClass"
+                     [column]="column"
+                     (filter)="onFilter($event)">
+      </select-filter>
+      <checkbox-filter *ngSwitchCase="'checkbox'"
+                       [query]="query"
+                       [ngClass]="inputClass"
+                       [column]="column"
+                       (filter)="onFilter($event)">
+      </checkbox-filter>
+      <input-filter *ngSwitchDefault
+                    [query]="query"
+                    [ngClass]="inputClass"
+                    [column]="column"
+                    (filter)="onFilter($event)">
+      </input-filter>
+    </ng-container>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: CheckboxFilterComponent, selector: "checkbox-filter" }, { kind: "component", type: InputFilterComponent, selector: "input-filter" }, { kind: "component", type: SelectFilterComponent, selector: "select-filter" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DefaultFilterComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ng2-st-tbody-edit-delete',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'default-table-filter',
                     template: `
-    <a href="#" *ngIf="isActionEdit" class="ng2-smart-action ng2-smart-action-edit-edit"
-        [innerHTML]="editRowButtonContent" (click)="onEdit($event)"></a>
-    <a href="#" *ngIf="isActionDelete" class="ng2-smart-action ng2-smart-action-delete-delete"
-        [innerHTML]="deleteRowButtonContent" (click)="onDelete($event)"></a>
+    <ng-container [ngSwitch]="column.getFilterType()">
+      <select-filter *ngSwitchCase="'list'"
+                     [query]="query"
+                     [ngClass]="inputClass"
+                     [column]="column"
+                     (filter)="onFilter($event)">
+      </select-filter>
+      <checkbox-filter *ngSwitchCase="'checkbox'"
+                       [query]="query"
+                       [ngClass]="inputClass"
+                       [column]="column"
+                       (filter)="onFilter($event)">
+      </checkbox-filter>
+      <input-filter *ngSwitchDefault
+                    [query]="query"
+                    [ngClass]="inputClass"
+                    [column]="column"
+                    (filter)="onFilter($event)">
+      </input-filter>
+    </ng-container>
   `,
                 }]
-        }], propDecorators: { grid: [{
-                type: Input
-            }], row: [{
-                type: Input
-            }], source: [{
-                type: Input
-            }], deleteConfirm: [{
-                type: Input
-            }], editConfirm: [{
-                type: Input
-            }], edit: [{
-                type: Output
-            }], delete: [{
-                type: Output
-            }], editRowSelect: [{
-                type: Output
-            }] } });
+        }] });
 
-class TbodyCustomComponent {
-    constructor() {
-        this.custom = new EventEmitter();
+class CustomFilterComponent extends FilterDefault {
+    constructor(resolver) {
+        super();
+        this.resolver = resolver;
     }
-    onCustom(action, event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.custom.emit({
-            action: action.name,
-            data: this.row.getData(),
-            source: this.source
-        });
+    ngOnChanges(changes) {
+        if (this.customComponent) {
+            this.customComponent.instance.ngOnChanges(changes);
+            return;
+        }
+        if (this.column.filter && this.column.filter.type === 'custom') {
+            const componentFactory = this.resolver.resolveComponentFactory(this.column.filter?.component);
+            this.customComponent = this.dynamicTarget.createComponent(componentFactory);
+        }
+        // set @Inputs and @Outputs of custom component
+        this.customComponent.instance.query = this.query;
+        this.customComponent.instance.column = this.column;
+        this.customComponent.instance.source = this.source;
+        this.customComponent.instance.inputClass = this.inputClass;
+        this.customComponent.instance.filter.subscribe((event) => this.onFilter(event));
+    }
+    ngOnDestroy() {
+        if (this.customComponent) {
+            this.customComponent.destroy();
+        }
     }
 }
-TbodyCustomComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TbodyCustomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TbodyCustomComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TbodyCustomComponent, selector: "ng2-st-tbody-custom", inputs: { grid: "grid", row: "row", source: "source" }, outputs: { custom: "custom" }, ngImport: i0, template: `
-      <a *ngFor="let action of grid.getSetting('actions.custom')" href="#"
-         class="ng2-smart-action ng2-smart-action-custom-custom" 
-         [innerHTML]="action.title"
-         (click)="onCustom(action, $event)"></a>
-        `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TbodyCustomComponent, decorators: [{
+CustomFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CustomFilterComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
+CustomFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CustomFilterComponent, selector: "custom-table-filter", viewQueries: [{ propertyName: "dynamicTarget", first: true, predicate: ["dynamicTarget"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `<ng-template #dynamicTarget></ng-template>`, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CustomFilterComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ng2-st-tbody-custom',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-      <a *ngFor="let action of grid.getSetting('actions.custom')" href="#"
-         class="ng2-smart-action ng2-smart-action-custom-custom" 
-         [innerHTML]="action.title"
-         (click)="onCustom(action, $event)"></a>
-        `
+                    selector: 'custom-table-filter',
+                    template: `<ng-template #dynamicTarget></ng-template>`,
                 }]
-        }], propDecorators: { grid: [{
-                type: Input
-            }], row: [{
-                type: Input
-            }], source: [{
-                type: Input
-            }], custom: [{
-                type: Output
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }]; }, propDecorators: { dynamicTarget: [{
+                type: ViewChild,
+                args: ['dynamicTarget', { read: ViewContainerRef, static: true }]
             }] } });
 
-class Ng2SmartTableTbodyComponent {
-    constructor() {
-        this.save = new EventEmitter();
-        this.cancel = new EventEmitter();
-        this.edit = new EventEmitter();
-        this.editCancel = new EventEmitter();
-        this.delete = new EventEmitter();
-        this.custom = new EventEmitter();
-        this.edited = new EventEmitter();
-        this.userSelectRow = new EventEmitter();
-        this.userClickedRow = new EventEmitter();
-        this.editRowSelect = new EventEmitter();
-        this.multipleSelectRow = new EventEmitter();
-    }
-    get tableColumnsCount() {
-        const actionColumns = this.isActionAdd || this.isActionEdit || this.isActionDelete ? 1 : 0;
-        return this.grid.getColumns().length + actionColumns;
-    }
-    ngOnChanges() {
-        this.isMultiSelectVisible = this.grid.isMultiSelectVisible();
-        this.showActionColumnLeft = this.grid.showActionColumn('left');
-        this.mode = this.grid.getSetting('mode');
-        this.editInputClass = this.grid.getSetting('edit.inputClass');
-        this.showActionColumnRight = this.grid.showActionColumn('right');
-        this.isActionAdd = this.grid.getSetting('actions.add');
-        this.isActionEdit = this.grid.getSetting('actions.edit');
-        this.isActionDelete = this.grid.getSetting('actions.delete');
-        this.noDataMessage = this.grid.getSetting('noDataMessage');
-    }
-    getVisibleCells(cells) {
-        return (cells || []).filter((cell) => !cell.getColumn().hide);
-    }
-    trackByIdOrIndex(index, item) {
-        return item?.id || index;
+class FilterComponent extends FilterDefault {
+    ngOnChanges(changes) {
+        if (changes['source']) {
+            if (!changes['source'].firstChange && this.dataChangedSub) {
+                this.dataChangedSub.unsubscribe();
+            }
+            this.dataChangedSub = this.source.onChanged().subscribe((dataChanges) => {
+                const filterConf = this.source.getFilter();
+                if (filterConf && filterConf.filters && filterConf.filters.length === 0) {
+                    this.query = '';
+                    // add a check for existing filters an set the query if one exists for this column
+                    // this covers instances where the filter is set by user code while maintaining existing functionality
+                }
+                else if (filterConf && filterConf.filters && filterConf.filters.length > 0) {
+                    filterConf.filters.forEach((k, v) => {
+                        if (k.field == this.column.id) {
+                            this.query = k.search;
+                        }
+                    });
+                }
+            });
+        }
     }
 }
-Ng2SmartTableTbodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Ng2SmartTableTbodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-Ng2SmartTableTbodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: { grid: "grid", source: "source", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm", rowClassFunction: "rowClassFunction" }, outputs: { save: "save", cancel: "cancel", edit: "edit", editCancel: "editCancel", delete: "delete", custom: "custom", edited: "edited", userSelectRow: "userSelectRow", userClickedRow: "userClickedRow", editRowSelect: "editRowSelect", multipleSelectRow: "multipleSelectRow" }, usesOnChanges: true, ngImport: i0, template: "<tr *ngFor=\"let row of grid.getRows(); trackBy: trackByIdOrIndex\" (click)=\"userClickedRow.emit(row)\" class=\"ng2-smart-row\" [className]=\"rowClassFunction(row)\" [ngClass]=\"{selected: row.isSelected}\">\n  <td *ngIf=\"isMultiSelectVisible\" class=\"ng2-smart-actions ng2-smart-action-multiple-select\" (click)=\"multipleSelectRow.emit(row); $event.stopPropagation();\">\n    <input type=\"checkbox\" class=\"form-control\" [ngModel]=\"row.isSelected\">\n  </td>\n  <td *ngIf=\"!row.isInEditing && showActionColumnLeft\" class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n    <ng2-st-tbody-custom [grid]=\"grid\" (custom)=\"custom.emit($event)\" [row]=\"row\" [source]=\"source\"></ng2-st-tbody-custom>\n\n    <ng2-st-tbody-edit-delete [grid]=\"grid\"\n                              [deleteConfirm]=\"deleteConfirm\"\n                              [editConfirm]=\"editConfirm\"\n                              (edit)=\"edit.emit(row)\"\n                              (delete)=\"delete.emit(row)\"\n                              (editRowSelect)=\"editRowSelect.emit($event)\"\n                              [row]=\"row\"\n                              [source]=\"source\">\n    </ng2-st-tbody-edit-delete>\n  </td>\n   <td *ngIf=\"row.isInEditing && showActionColumnLeft\"  class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel [grid]=\"grid\" [row]=\"row\" [editConfirm]=\"editConfirm\" [editCancel]=\"editCancel\"></ng2-st-tbody-create-cancel>\n  </td>\n  <td *ngFor=\"let cell of getVisibleCells(row.cells)\">\n    <ng2-smart-table-cell [cell]=\"cell\"\n                          [grid]=\"grid\"\n                          [row]=\"row\"\n                          [isNew]=\"false\"\n                          [mode]=\"mode\"\n                          [editConfirm]=\"editConfirm\"\n                          [inputClass]=\"editInputClass\"\n                          [isInEditing]=\"row.isInEditing\">\n    </ng2-smart-table-cell>\n  </td>\n\n  <td *ngIf=\"row.isInEditing && showActionColumnRight\"  class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel [grid]=\"grid\" [row]=\"row\" [editConfirm]=\"editConfirm\"></ng2-st-tbody-create-cancel>\n  </td>\n\n  <td *ngIf=\"!row.isInEditing && showActionColumnRight\" class=\"ng2-smart-actions\">\n    <ng2-st-tbody-custom [grid]=\"grid\" (custom)=\"custom.emit($event)\" [row]=\"row\" [source]=\"source\"></ng2-st-tbody-custom>\n\n    <ng2-st-tbody-edit-delete [grid]=\"grid\"\n                              [deleteConfirm]=\"deleteConfirm\"\n                              [editConfirm]=\"editConfirm\"\n                              [row]=\"row\"\n                              [source]=\"source\"\n                              (edit)=\"edit.emit(row)\"\n                              (delete)=\"delete.emit(row)\"\n                              (editRowSelect)=\"editRowSelect.emit($event)\">\n    </ng2-st-tbody-edit-delete>\n  </td>\n</tr>\n\n<tr *ngIf=\"grid.getRows().length == 0\">\n  <td [attr.colspan]=\"tableColumnsCount\">\n    {{ noDataMessage }}\n  </td>\n</tr>\n", styles: [":host .ng2-smart-row.selected{background:rgba(0,0,0,.05)}:host .ng2-smart-row .ng2-smart-actions.ng2-smart-action-multiple-select{text-align:center}:host ::ng-deep ng2-st-tbody-edit-delete a:first-child,:host ::ng-deep ng2-st-tbody-create-cancel a:first-child{margin-right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["grid", "row", "editConfirm", "createConfirm", "isNew", "cell", "inputClass", "mode", "isInEditing"], outputs: ["edited"] }, { kind: "component", type: TbodyCreateCancelComponent, selector: "ng2-st-tbody-create-cancel", inputs: ["grid", "row", "editConfirm", "editCancel"] }, { kind: "component", type: TbodyEditDeleteComponent, selector: "ng2-st-tbody-edit-delete", inputs: ["grid", "row", "source", "deleteConfirm", "editConfirm"], outputs: ["edit", "delete", "editRowSelect"] }, { kind: "component", type: TbodyCustomComponent, selector: "ng2-st-tbody-custom", inputs: ["grid", "row", "source"], outputs: ["custom"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Ng2SmartTableTbodyComponent, decorators: [{
+FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FilterComponent, selector: "ng2-smart-table-filter", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+      <div class="ng2-smart-filter" *ngIf="column.isFilterable" [ngSwitch]="column.getFilterType()">
+        <custom-table-filter *ngSwitchCase="'custom'"
+                             [query]="query"
+                             [column]="column"
+                             [source]="source"
+                             [inputClass]="inputClass"
+                             (filter)="onFilter($event)">
+        </custom-table-filter>
+        <default-table-filter *ngSwitchDefault
+                              [query]="query"
+                              [column]="column"
+                              [source]="source"
+                              [inputClass]="inputClass"
+                              (filter)="onFilter($event)">
+        </default-table-filter>
+      </div>
+    `, isInline: true, styles: [":host .ng2-smart-filter ::ng-deep input,:host .ng2-smart-filter ::ng-deep select{width:100%;line-height:normal;padding:.375em .75em;font-weight:400}:host .ng2-smart-filter ::ng-deep input[type=search]{box-sizing:inherit}:host .ng2-smart-filter ::ng-deep .completer-dropdown-holder{font-weight:400}:host .ng2-smart-filter ::ng-deep a{font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: DefaultFilterComponent, selector: "default-table-filter" }, { kind: "component", type: CustomFilterComponent, selector: "custom-table-filter" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[ng2-st-tbody]', template: "<tr *ngFor=\"let row of grid.getRows(); trackBy: trackByIdOrIndex\" (click)=\"userClickedRow.emit(row)\" class=\"ng2-smart-row\" [className]=\"rowClassFunction(row)\" [ngClass]=\"{selected: row.isSelected}\">\n  <td *ngIf=\"isMultiSelectVisible\" class=\"ng2-smart-actions ng2-smart-action-multiple-select\" (click)=\"multipleSelectRow.emit(row); $event.stopPropagation();\">\n    <input type=\"checkbox\" class=\"form-control\" [ngModel]=\"row.isSelected\">\n  </td>\n  <td *ngIf=\"!row.isInEditing && showActionColumnLeft\" class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n    <ng2-st-tbody-custom [grid]=\"grid\" (custom)=\"custom.emit($event)\" [row]=\"row\" [source]=\"source\"></ng2-st-tbody-custom>\n\n    <ng2-st-tbody-edit-delete [grid]=\"grid\"\n                              [deleteConfirm]=\"deleteConfirm\"\n                              [editConfirm]=\"editConfirm\"\n                              (edit)=\"edit.emit(row)\"\n                              (delete)=\"delete.emit(row)\"\n                              (editRowSelect)=\"editRowSelect.emit($event)\"\n                              [row]=\"row\"\n                              [source]=\"source\">\n    </ng2-st-tbody-edit-delete>\n  </td>\n   <td *ngIf=\"row.isInEditing && showActionColumnLeft\"  class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel [grid]=\"grid\" [row]=\"row\" [editConfirm]=\"editConfirm\" [editCancel]=\"editCancel\"></ng2-st-tbody-create-cancel>\n  </td>\n  <td *ngFor=\"let cell of getVisibleCells(row.cells)\">\n    <ng2-smart-table-cell [cell]=\"cell\"\n                          [grid]=\"grid\"\n                          [row]=\"row\"\n                          [isNew]=\"false\"\n                          [mode]=\"mode\"\n                          [editConfirm]=\"editConfirm\"\n                          [inputClass]=\"editInputClass\"\n                          [isInEditing]=\"row.isInEditing\">\n    </ng2-smart-table-cell>\n  </td>\n\n  <td *ngIf=\"row.isInEditing && showActionColumnRight\"  class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel [grid]=\"grid\" [row]=\"row\" [editConfirm]=\"editConfirm\"></ng2-st-tbody-create-cancel>\n  </td>\n\n  <td *ngIf=\"!row.isInEditing && showActionColumnRight\" class=\"ng2-smart-actions\">\n    <ng2-st-tbody-custom [grid]=\"grid\" (custom)=\"custom.emit($event)\" [row]=\"row\" [source]=\"source\"></ng2-st-tbody-custom>\n\n    <ng2-st-tbody-edit-delete [grid]=\"grid\"\n                              [deleteConfirm]=\"deleteConfirm\"\n                              [editConfirm]=\"editConfirm\"\n                              [row]=\"row\"\n                              [source]=\"source\"\n                              (edit)=\"edit.emit(row)\"\n                              (delete)=\"delete.emit(row)\"\n                              (editRowSelect)=\"editRowSelect.emit($event)\">\n    </ng2-st-tbody-edit-delete>\n  </td>\n</tr>\n\n<tr *ngIf=\"grid.getRows().length == 0\">\n  <td [attr.colspan]=\"tableColumnsCount\">\n    {{ noDataMessage }}\n  </td>\n</tr>\n", styles: [":host .ng2-smart-row.selected{background:rgba(0,0,0,.05)}:host .ng2-smart-row .ng2-smart-actions.ng2-smart-action-multiple-select{text-align:center}:host ::ng-deep ng2-st-tbody-edit-delete a:first-child,:host ::ng-deep ng2-st-tbody-create-cancel a:first-child{margin-right:.25rem}\n"] }]
-        }], propDecorators: { grid: [{
-                type: Input
-            }], source: [{
-                type: Input
-            }], deleteConfirm: [{
-                type: Input
-            }], editConfirm: [{
-                type: Input
-            }], rowClassFunction: [{
-                type: Input
-            }], save: [{
-                type: Output
-            }], cancel: [{
-                type: Output
-            }], edit: [{
-                type: Output
-            }], editCancel: [{
-                type: Output
-            }], delete: [{
-                type: Output
-            }], custom: [{
-                type: Output
-            }], edited: [{
-                type: Output
-            }], userSelectRow: [{
-                type: Output
-            }], userClickedRow: [{
-                type: Output
-            }], editRowSelect: [{
-                type: Output
-            }], multipleSelectRow: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'ng2-smart-table-filter', template: `
+      <div class="ng2-smart-filter" *ngIf="column.isFilterable" [ngSwitch]="column.getFilterType()">
+        <custom-table-filter *ngSwitchCase="'custom'"
+                             [query]="query"
+                             [column]="column"
+                             [source]="source"
+                             [inputClass]="inputClass"
+                             (filter)="onFilter($event)">
+        </custom-table-filter>
+        <default-table-filter *ngSwitchDefault
+                              [query]="query"
+                              [column]="column"
+                              [source]="source"
+                              [inputClass]="inputClass"
+                              (filter)="onFilter($event)">
+        </default-table-filter>
+      </div>
+    `, styles: [":host .ng2-smart-filter ::ng-deep input,:host .ng2-smart-filter ::ng-deep select{width:100%;line-height:normal;padding:.375em .75em;font-weight:400}:host .ng2-smart-filter ::ng-deep input[type=search]{box-sizing:inherit}:host .ng2-smart-filter ::ng-deep .completer-dropdown-holder{font-weight:400}:host .ng2-smart-filter ::ng-deep a{font-weight:400}\n"] }]
+        }] });
 
-const TBODY_COMPONENTS = [
-    TbodyCreateCancelComponent,
-    TbodyEditDeleteComponent,
-    TbodyCustomComponent,
-    Ng2SmartTableTbodyComponent
+const FILTER_COMPONENTS = [
+    FilterDefault,
+    DefaultFilter,
+    FilterComponent,
+    DefaultFilterComponent,
+    CustomFilterComponent,
+    CheckboxFilterComponent,
+    InputFilterComponent,
+    SelectFilterComponent,
 ];
-class TBodyModule {
+class FilterModule {
 }
-TBodyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TBodyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TBodyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: TBodyModule, declarations: [TbodyCreateCancelComponent,
-        TbodyEditDeleteComponent,
-        TbodyCustomComponent,
-        Ng2SmartTableTbodyComponent], imports: [CommonModule,
+FilterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: FilterModule, declarations: [FilterDefault,
+        DefaultFilter,
+        FilterComponent,
+        DefaultFilterComponent,
+        CustomFilterComponent,
+        CheckboxFilterComponent,
+        InputFilterComponent,
+        SelectFilterComponent], imports: [CommonModule,
         FormsModule,
-        CellModule], exports: [TbodyCreateCancelComponent,
-        TbodyEditDeleteComponent,
-        TbodyCustomComponent,
-        Ng2SmartTableTbodyComponent] });
-TBodyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TBodyModule, imports: [CommonModule,
+        ReactiveFormsModule], exports: [FilterDefault,
+        DefaultFilter,
+        FilterComponent,
+        DefaultFilterComponent,
+        CustomFilterComponent,
+        CheckboxFilterComponent,
+        InputFilterComponent,
+        SelectFilterComponent] });
+FilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterModule, imports: [CommonModule,
         FormsModule,
-        CellModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TBodyModule, decorators: [{
+        ReactiveFormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
                         FormsModule,
-                        CellModule,
+                        ReactiveFormsModule,
                     ],
                     declarations: [
-                        ...TBODY_COMPONENTS,
+                        ...FILTER_COMPONENTS,
                     ],
                     exports: [
-                        ...TBODY_COMPONENTS,
+                        ...FILTER_COMPONENTS,
                     ],
                 }]
         }] });
 
-class AddButtonComponent {
-    constructor(ref) {
-        this.ref = ref;
-        this.create = new EventEmitter();
+class PagerComponent {
+    constructor() {
+        this.perPageSelect = [];
+        this.changePage = new EventEmitter();
+        this.currentPerPage = 0;
+        this.pages = [];
+        this.page = 1;
+        this.count = 0;
+        this.perPage = 0;
     }
-    ngAfterViewInit() {
-        this.ref.nativeElement.classList.add('ng2-smart-actions-title', 'ng2-smart-actions-title-add');
+    ngOnChanges(changes) {
+        if (changes['source']) {
+            if (!changes['source'].firstChange && this.dataChangedSub) {
+                this.dataChangedSub.unsubscribe();
+            }
+            this.dataChangedSub = this.source.onChanged().subscribe((dataChanges) => {
+                const paging = this.source.getPaging();
+                if (paging) {
+                    this.page = paging.page;
+                    this.perPage = paging.perPage;
+                }
+                this.currentPerPage = this.perPage;
+                this.count = this.source.count();
+                if (this.isPageOutOfBounce()) {
+                    this.source.setPage(--this.page);
+                }
+                this.processPageChange(dataChanges);
+                this.initPages();
+            });
+        }
     }
-    ngOnChanges() {
-        this.isActionAdd = this.grid.getSetting('actions.add');
-        this.addNewButtonContent = this.grid.getSetting('add.addButtonContent');
+    /**
+     * We change the page here depending on the action performed against data source
+     * if a new element was added to the end of the table - then change the page to the last
+     * if a new element was added to the beginning of the table - then to the first page
+     * @param changes
+     */
+    processPageChange(changes) {
+        if (changes['action'] === 'prepend') {
+            this.source.setPage(1);
+        }
+        if (changes['action'] === 'append') {
+            this.source.setPage(this.getLast());
+        }
     }
-    onAdd(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (this.grid.getSetting('mode') === 'external') {
-            this.create.emit({
-                source: this.source,
-            });
+    shouldShow() {
+        return this.source.count() > this.perPage;
+    }
+    paginate(page) {
+        this.source.setPage(page);
+        this.page = page;
+        this.changePage.emit({ page });
+        return false;
+    }
+    next() {
+        return this.paginate(this.getPage() + 1);
+    }
+    prev() {
+        return this.paginate(this.getPage() - 1);
+    }
+    getPage() {
+        return this.page;
+    }
+    getPages() {
+        return this.pages;
+    }
+    getLast() {
+        return Math.ceil(this.count / this.perPage);
+    }
+    isPageOutOfBounce() {
+        return (this.page * this.perPage) >= (this.count + this.perPage) && this.page > 1;
+    }
+    initPages() {
+        const pagesCount = this.getLast();
+        let showPagesCount = 4;
+        showPagesCount = pagesCount < showPagesCount ? pagesCount : showPagesCount;
+        this.pages = [];
+        if (this.shouldShow()) {
+            let middleOne = Math.ceil(showPagesCount / 2);
+            middleOne = this.page >= middleOne ? this.page : middleOne;
+            let lastOne = middleOne + Math.floor(showPagesCount / 2);
+            lastOne = lastOne >= pagesCount ? pagesCount : lastOne;
+            const firstOne = lastOne - showPagesCount + 1;
+            for (let i = firstOne; i <= lastOne; i++) {
+                this.pages.push(i);
+            }
         }
-        else {
-            this.grid.createFormShown = true;
+    }
+    onChangePerPage() {
+        const paging = this.source.getPaging();
+        if (paging) {
+            paging.perPage = this.currentPerPage * 1;
         }
+        this.source.refresh();
+        this.initPages();
     }
 }
-AddButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AddButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AddButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: { grid: "grid", source: "source" }, outputs: { create: "create" }, usesOnChanges: true, ngImport: i0, template: `
-    <a *ngIf="isActionAdd" href="#" class="ng2-smart-action ng2-smart-action-add-add"
-        [innerHTML]="addNewButtonContent" (click)="onAdd($event)"></a>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AddButtonComponent, decorators: [{
+PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: { source: "source", perPageSelect: "perPageSelect" }, outputs: { changePage: "changePage" }, usesOnChanges: true, ngImport: i0, template: `
+    <nav *ngIf="shouldShow()" class="ng2-smart-pagination-nav">
+      <ul class="ng2-smart-pagination pagination">
+        <li class="ng2-smart-page-item page-item" [ngClass]="{disabled: getPage() == 1}">
+          <a class="ng2-smart-page-link page-link" href="#"
+          (click)="getPage() == 1 ? false : paginate(1)" aria-label="First">
+            <span aria-hidden="true">&laquo;</span>
+            <span class="sr-only">First</span>
+          </a>
+        </li>
+        <li class="ng2-smart-page-item page-item" [ngClass]="{disabled: getPage() == 1}">
+          <a class="ng2-smart-page-link page-link page-link-prev" href="#"
+             (click)="getPage() == 1 ? false : prev()" aria-label="Prev">
+            <span aria-hidden="true">&lt;</span>
+            <span class="sr-only">Prev</span>
+          </a>
+        </li>
+        <li class="ng2-smart-page-item page-item"
+        [ngClass]="{active: getPage() == page}" *ngFor="let page of getPages()">
+          <span class="ng2-smart-page-link page-link"
+          *ngIf="getPage() == page">{{ page }} <span class="sr-only">(current)</span></span>
+          <a class="ng2-smart-page-link page-link" href="#"
+          (click)="paginate(page)" *ngIf="getPage() != page">{{ page }}</a>
+        </li>
+
+        <li class="ng2-smart-page-item page-item"
+            [ngClass]="{disabled: getPage() == getLast()}">
+          <a class="ng2-smart-page-link page-link page-link-next" href="#"
+             (click)="getPage() == getLast() ? false : next()" aria-label="Next">
+            <span aria-hidden="true">&gt;</span>
+            <span class="sr-only">Next</span>
+          </a>
+        </li>
+        
+        <li class="ng2-smart-page-item page-item"
+        [ngClass]="{disabled: getPage() == getLast()}">
+          <a class="ng2-smart-page-link page-link" href="#"
+          (click)="getPage() == getLast() ? false : paginate(getLast())" aria-label="Last">
+            <span aria-hidden="true">&raquo;</span>
+            <span class="sr-only">Last</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+    
+    <nav *ngIf="perPageSelect && perPageSelect.length > 0" class="ng2-smart-pagination-per-page">
+      <label for="per-page">
+        Per Page:
+      </label>
+      <select (change)="onChangePerPage()" [(ngModel)]="currentPerPage" id="per-page">
+        <option *ngFor="let item of perPageSelect" [value]="item">{{ item }}</option>
+      </select>
+    </nav>
+  `, isInline: true, styles: [".ng2-smart-pagination{display:inline-flex;font-size:.875em;padding:0}.ng2-smart-pagination .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}:host{display:flex;justify-content:space-between}:host select{margin:1rem 0 1rem 1rem}:host label{margin:1rem 0 1rem 1rem;line-height:2.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: '[ng2-st-add-button]',
-                    template: `
-    <a *ngIf="isActionAdd" href="#" class="ng2-smart-action ng2-smart-action-add-add"
-        [innerHTML]="addNewButtonContent" (click)="onAdd($event)"></a>
-  `,
+            args: [{ selector: 'ng2-smart-table-pager', template: `
+    <nav *ngIf="shouldShow()" class="ng2-smart-pagination-nav">
+      <ul class="ng2-smart-pagination pagination">
+        <li class="ng2-smart-page-item page-item" [ngClass]="{disabled: getPage() == 1}">
+          <a class="ng2-smart-page-link page-link" href="#"
+          (click)="getPage() == 1 ? false : paginate(1)" aria-label="First">
+            <span aria-hidden="true">&laquo;</span>
+            <span class="sr-only">First</span>
+          </a>
+        </li>
+        <li class="ng2-smart-page-item page-item" [ngClass]="{disabled: getPage() == 1}">
+          <a class="ng2-smart-page-link page-link page-link-prev" href="#"
+             (click)="getPage() == 1 ? false : prev()" aria-label="Prev">
+            <span aria-hidden="true">&lt;</span>
+            <span class="sr-only">Prev</span>
+          </a>
+        </li>
+        <li class="ng2-smart-page-item page-item"
+        [ngClass]="{active: getPage() == page}" *ngFor="let page of getPages()">
+          <span class="ng2-smart-page-link page-link"
+          *ngIf="getPage() == page">{{ page }} <span class="sr-only">(current)</span></span>
+          <a class="ng2-smart-page-link page-link" href="#"
+          (click)="paginate(page)" *ngIf="getPage() != page">{{ page }}</a>
+        </li>
+
+        <li class="ng2-smart-page-item page-item"
+            [ngClass]="{disabled: getPage() == getLast()}">
+          <a class="ng2-smart-page-link page-link page-link-next" href="#"
+             (click)="getPage() == getLast() ? false : next()" aria-label="Next">
+            <span aria-hidden="true">&gt;</span>
+            <span class="sr-only">Next</span>
+          </a>
+        </li>
+        
+        <li class="ng2-smart-page-item page-item"
+        [ngClass]="{disabled: getPage() == getLast()}">
+          <a class="ng2-smart-page-link page-link" href="#"
+          (click)="getPage() == getLast() ? false : paginate(getLast())" aria-label="Last">
+            <span aria-hidden="true">&raquo;</span>
+            <span class="sr-only">Last</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+    
+    <nav *ngIf="perPageSelect && perPageSelect.length > 0" class="ng2-smart-pagination-per-page">
+      <label for="per-page">
+        Per Page:
+      </label>
+      <select (change)="onChangePerPage()" [(ngModel)]="currentPerPage" id="per-page">
+        <option *ngFor="let item of perPageSelect" [value]="item">{{ item }}</option>
+      </select>
+    </nav>
+  `, styles: [".ng2-smart-pagination{display:inline-flex;font-size:.875em;padding:0}.ng2-smart-pagination .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}:host{display:flex;justify-content:space-between}:host select{margin:1rem 0 1rem 1rem}:host label{margin:1rem 0 1rem 1rem;line-height:2.5rem}\n"] }]
+        }], propDecorators: { source: [{
+                type: Input
+            }], perPageSelect: [{
+                type: Input
+            }], changePage: [{
+                type: Output
+            }] } });
+
+class PagerModule {
+}
+PagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: PagerModule, declarations: [PagerComponent], imports: [CommonModule,
+        FormsModule], exports: [PagerComponent] });
+PagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PagerModule, imports: [CommonModule,
+        FormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PagerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                    ],
+                    declarations: [
+                        PagerComponent,
+                    ],
+                    exports: [
+                        PagerComponent,
+                    ],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { grid: [{
-                type: Input
-            }], source: [{
-                type: Input
-            }], create: [{
-                type: Output
-            }] } });
+        }] });
 
-class TheadFitlersRowComponent {
+class TbodyCreateCancelComponent {
     constructor() {
-        this.create = new EventEmitter();
-        this.filter = new EventEmitter();
+        this.cancelButtonContent = '';
+        this.saveButtonContent = '';
     }
-    ngOnChanges() {
-        this.isMultiSelectVisible = this.grid.isMultiSelectVisible();
-        this.showActionColumnLeft = this.grid.showActionColumn('left');
-        this.showActionColumnRight = this.grid.showActionColumn('right');
-        this.filterInputClass = this.grid.getSetting('filter.inputClass');
+    onSave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.grid.save(this.row, this.editConfirm);
     }
-    getVisibleColumns(columns) {
-        return (columns || []).filter((column) => !column.hide);
+    onCancelEdit(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.editCancel.emit(true);
+        this.row.isInEditing = false;
+    }
+    ngOnChanges() {
+        this.saveButtonContent = this.grid.getSetting('edit.saveButtonContent', 'save');
+        this.cancelButtonContent = this.grid.getSetting('edit.cancelButtonContent', 'cancel');
     }
 }
-TheadFitlersRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheadFitlersRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TheadFitlersRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TheadFitlersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: { grid: "grid", source: "source" }, outputs: { create: "create", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: `
-    <th *ngIf="isMultiSelectVisible"></th>
-    <th ng2-st-add-button *ngIf="showActionColumnLeft"
-                          [grid]="grid"
-                          (create)="create.emit($event)">
-    </th>
-    <th *ngFor="let column of getVisibleColumns(grid.getColumns())" class="ng2-smart-th {{ column.id }}">
-      <ng2-smart-table-filter [source]="source"
-                              [column]="column"
-                              [inputClass]="filterInputClass"
-                              (filter)="filter.emit($event)">
-      </ng2-smart-table-filter>
-    </th>
-    <th ng2-st-add-button *ngIf="showActionColumnRight"
-                          [grid]="grid"
-                          [source]="source"
-                          (create)="create.emit($event)">
-    </th>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FilterComponent, selector: "ng2-smart-table-filter" }, { kind: "component", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: ["grid", "source"], outputs: ["create"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheadFitlersRowComponent, decorators: [{
+TbodyCreateCancelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TbodyCreateCancelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TbodyCreateCancelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TbodyCreateCancelComponent, selector: "ng2-st-tbody-create-cancel", inputs: { grid: "grid", row: "row", editConfirm: "editConfirm", editCancel: "editCancel" }, usesOnChanges: true, ngImport: i0, template: `
+    <a href="#" class="ng2-smart-action ng2-smart-action-edit-save"
+        [innerHTML]="saveButtonContent" (click)="onSave($event)"></a>
+    <a href="#" class="ng2-smart-action ng2-smart-action-edit-cancel"
+        [innerHTML]="cancelButtonContent" (click)="onCancelEdit($event)"></a>
+  `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TbodyCreateCancelComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: '[ng2-st-thead-filters-row]',
+                    selector: 'ng2-st-tbody-create-cancel',
                     template: `
-    <th *ngIf="isMultiSelectVisible"></th>
-    <th ng2-st-add-button *ngIf="showActionColumnLeft"
-                          [grid]="grid"
-                          (create)="create.emit($event)">
-    </th>
-    <th *ngFor="let column of getVisibleColumns(grid.getColumns())" class="ng2-smart-th {{ column.id }}">
-      <ng2-smart-table-filter [source]="source"
-                              [column]="column"
-                              [inputClass]="filterInputClass"
-                              (filter)="filter.emit($event)">
-      </ng2-smart-table-filter>
-    </th>
-    <th ng2-st-add-button *ngIf="showActionColumnRight"
-                          [grid]="grid"
-                          [source]="source"
-                          (create)="create.emit($event)">
-    </th>
+    <a href="#" class="ng2-smart-action ng2-smart-action-edit-save"
+        [innerHTML]="saveButtonContent" (click)="onSave($event)"></a>
+    <a href="#" class="ng2-smart-action ng2-smart-action-edit-cancel"
+        [innerHTML]="cancelButtonContent" (click)="onCancelEdit($event)"></a>
   `,
                 }]
         }], propDecorators: { grid: [{
                 type: Input
-            }], source: [{
+            }], row: [{
+                type: Input
+            }], editConfirm: [{
+                type: Input
+            }], editCancel: [{
                 type: Input
-            }], create: [{
-                type: Output
-            }], filter: [{
-                type: Output
             }] } });
 
-class ActionsComponent {
+class TbodyEditDeleteComponent {
     constructor() {
-        this.create = new EventEmitter();
+        this.edit = new EventEmitter();
+        this.delete = new EventEmitter();
+        this.editRowSelect = new EventEmitter();
+        this.isActionEdit = false;
+        this.isActionDelete = false;
+        this.editRowButtonContent = '';
+        this.deleteRowButtonContent = '';
+    }
+    onEdit(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.editRowSelect.emit(this.row);
+        this.edit.emit({
+            data: this.row.getData(),
+            source: this.source,
+        });
+        if (this.grid.getSetting('mode') !== 'external') {
+            this.grid.edit(this.row);
+        }
+    }
+    onDelete(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.grid.getSetting('mode') === 'external') {
+            this.delete.emit({
+                data: this.row.getData(),
+                source: this.source,
+            });
+        }
+        else {
+            this.grid.delete(this.row, this.deleteConfirm);
+        }
     }
     ngOnChanges() {
-        this.createButtonContent = this.grid.getSetting('add.createButtonContent');
-        this.cancelButtonContent = this.grid.getSetting('add.cancelButtonContent');
+        this.isActionEdit = this.grid.getSetting('actions.edit');
+        this.isActionDelete = this.grid.getSetting('actions.delete');
+        this.editRowButtonContent = this.grid.getSetting('edit.editButtonContent');
+        this.deleteRowButtonContent = this.grid.getSetting('delete.deleteButtonContent');
     }
 }
-ActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ActionsComponent, selector: "ng2-st-actions", inputs: { grid: "grid" }, outputs: { create: "create" }, usesOnChanges: true, ngImport: i0, template: `
-    <a href="#" class="ng2-smart-action ng2-smart-action-add-create"
-        [innerHTML]="createButtonContent"
-        (click)="$event.preventDefault();create.emit($event)"></a>
-    <a href="#" class="ng2-smart-action ng2-smart-action-add-cancel"
-        [innerHTML]="cancelButtonContent"
-        (click)="$event.preventDefault();grid.createFormShown = false;"></a>
-  `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ActionsComponent, decorators: [{
+TbodyEditDeleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TbodyEditDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TbodyEditDeleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TbodyEditDeleteComponent, selector: "ng2-st-tbody-edit-delete", inputs: { grid: "grid", row: "row", source: "source", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm" }, outputs: { edit: "edit", delete: "delete", editRowSelect: "editRowSelect" }, usesOnChanges: true, ngImport: i0, template: `
+    <a href="#" *ngIf="isActionEdit" class="ng2-smart-action ng2-smart-action-edit-edit"
+        [innerHTML]="editRowButtonContent" (click)="onEdit($event)"></a>
+    <a href="#" *ngIf="isActionDelete" class="ng2-smart-action ng2-smart-action-delete-delete"
+        [innerHTML]="deleteRowButtonContent" (click)="onDelete($event)"></a>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TbodyEditDeleteComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ng2-st-actions',
+                    selector: 'ng2-st-tbody-edit-delete',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    <a href="#" class="ng2-smart-action ng2-smart-action-add-create"
-        [innerHTML]="createButtonContent"
-        (click)="$event.preventDefault();create.emit($event)"></a>
-    <a href="#" class="ng2-smart-action ng2-smart-action-add-cancel"
-        [innerHTML]="cancelButtonContent"
-        (click)="$event.preventDefault();grid.createFormShown = false;"></a>
+    <a href="#" *ngIf="isActionEdit" class="ng2-smart-action ng2-smart-action-edit-edit"
+        [innerHTML]="editRowButtonContent" (click)="onEdit($event)"></a>
+    <a href="#" *ngIf="isActionDelete" class="ng2-smart-action ng2-smart-action-delete-delete"
+        [innerHTML]="deleteRowButtonContent" (click)="onDelete($event)"></a>
   `,
                 }]
         }], propDecorators: { grid: [{
                 type: Input
-            }], create: [{
+            }], row: [{
+                type: Input
+            }], source: [{
+                type: Input
+            }], deleteConfirm: [{
+                type: Input
+            }], editConfirm: [{
+                type: Input
+            }], edit: [{
+                type: Output
+            }], delete: [{
+                type: Output
+            }], editRowSelect: [{
                 type: Output
             }] } });
 
-class TheadFormRowComponent {
+class TbodyCustomComponent {
     constructor() {
-        this.create = new EventEmitter();
+        this.custom = new EventEmitter();
     }
-    onCreate(event) {
+    onCustom(action, event) {
+        event.preventDefault();
         event.stopPropagation();
-        this.grid.create(this.grid.getNewRow(), this.createConfirm);
-    }
-    ngOnChanges() {
-        this.isMultiSelectVisible = this.grid.isMultiSelectVisible();
-        this.showActionColumnLeft = this.grid.showActionColumn('left');
-        this.showActionColumnRight = this.grid.showActionColumn('right');
-        this.addInputClass = this.grid.getSetting('add.inputClass');
-    }
-    getVisibleCells(cells) {
-        return (cells || []).filter((cell) => !cell.getColumn().hide);
+        this.custom.emit({
+            action: action.name,
+            data: this.row.getData(),
+            source: this.source
+        });
     }
 }
-TheadFormRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheadFormRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TheadFormRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TheadFormRowComponent, selector: "[ng2-st-thead-form-row]", inputs: { grid: "grid", row: "row", createConfirm: "createConfirm" }, outputs: { create: "create" }, usesOnChanges: true, ngImport: i0, template: `
-      <td *ngIf="grid.isMultiSelectVisible"></td>
-      <td  *ngIf="showActionColumnLeft"  class="ng2-smart-actions">
-        <ng2-st-actions [grid]="grid" (create)="onCreate($event)"></ng2-st-actions>
-      </td>
-      <td *ngFor="let cell of getVisibleCells(grid.getNewRow().getCells())">
-        <ng2-smart-table-cell [cell]="cell"
-                              [grid]="grid"
-                              [isNew]="true"
-                              [createConfirm]="createConfirm"
-                              [inputClass]="addInputClass"
-                              [isInEditing]="grid.getNewRow().isInEditing"
-                              (edited)="onCreate($event)">
-        </ng2-smart-table-cell>
-      </td>
-      <td  *ngIf="showActionColumnRight"  class="ng2-smart-actions">
-        <ng2-st-actions [grid]="grid" (create)="onCreate($event)"></ng2-st-actions>
-      </td>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["grid", "row", "editConfirm", "createConfirm", "isNew", "cell", "inputClass", "mode", "isInEditing"], outputs: ["edited"] }, { kind: "component", type: ActionsComponent, selector: "ng2-st-actions", inputs: ["grid"], outputs: ["create"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheadFormRowComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[ng2-st-thead-form-row]',
-                    template: `
-      <td *ngIf="grid.isMultiSelectVisible"></td>
-      <td  *ngIf="showActionColumnLeft"  class="ng2-smart-actions">
-        <ng2-st-actions [grid]="grid" (create)="onCreate($event)"></ng2-st-actions>
-      </td>
-      <td *ngFor="let cell of getVisibleCells(grid.getNewRow().getCells())">
-        <ng2-smart-table-cell [cell]="cell"
-                              [grid]="grid"
-                              [isNew]="true"
-                              [createConfirm]="createConfirm"
-                              [inputClass]="addInputClass"
-                              [isInEditing]="grid.getNewRow().isInEditing"
-                              (edited)="onCreate($event)">
-        </ng2-smart-table-cell>
-      </td>
-      <td  *ngIf="showActionColumnRight"  class="ng2-smart-actions">
-        <ng2-st-actions [grid]="grid" (create)="onCreate($event)"></ng2-st-actions>
-      </td>
-  `,
+TbodyCustomComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TbodyCustomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TbodyCustomComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TbodyCustomComponent, selector: "ng2-st-tbody-custom", inputs: { grid: "grid", row: "row", source: "source" }, outputs: { custom: "custom" }, ngImport: i0, template: `
+      <a *ngFor="let action of grid.getSetting('actions.custom')" href="#"
+         class="ng2-smart-action ng2-smart-action-custom-custom" 
+         [innerHTML]="action.title"
+         (click)="onCustom(action, $event)"></a>
+        `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TbodyCustomComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ng2-st-tbody-custom',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+      <a *ngFor="let action of grid.getSetting('actions.custom')" href="#"
+         class="ng2-smart-action ng2-smart-action-custom-custom" 
+         [innerHTML]="action.title"
+         (click)="onCustom(action, $event)"></a>
+        `
                 }]
         }], propDecorators: { grid: [{
                 type: Input
             }], row: [{
                 type: Input
-            }], createConfirm: [{
+            }], source: [{
                 type: Input
-            }], create: [{
+            }], custom: [{
                 type: Output
             }] } });
 
-class ActionsTitleComponent {
-    constructor(ref) {
-        this.ref = ref;
+class Ng2SmartTableTbodyComponent {
+    constructor() {
+        this.rowClassFunction = () => '';
+        this.save = new EventEmitter();
+        this.cancel = new EventEmitter();
+        this.edit = new EventEmitter();
+        this.editCancel = new EventEmitter();
+        this.delete = new EventEmitter();
+        this.custom = new EventEmitter();
+        this.edited = new EventEmitter();
+        this.userSelectRow = new EventEmitter();
+        this.userClickedRow = new EventEmitter();
+        this.editRowSelect = new EventEmitter();
+        this.multipleSelectRow = new EventEmitter();
+        this.isMultiSelectVisible = false;
+        this.showActionColumnLeft = false;
+        this.showActionColumnRight = false;
+        this.mode = 'inline';
+        this.editInputClass = '';
+        this.isActionAdd = false;
+        this.isActionEdit = false;
+        this.isActionDelete = false;
+        this.noDataMessage = false;
     }
-    ngAfterViewInit() {
-        this.ref.nativeElement.classList.add('ng2-smart-actions');
+    get tableColumnsCount() {
+        const actionColumns = this.isActionAdd || this.isActionEdit || this.isActionDelete ? 1 : 0;
+        return this.grid.getColumns().length + actionColumns;
     }
     ngOnChanges() {
-        this.actionsColumnTitle = this.grid.getSetting('actions.columnTitle');
+        this.isMultiSelectVisible = this.grid.isMultiSelectVisible();
+        this.showActionColumnLeft = this.grid.showActionColumn('left');
+        this.mode = this.grid.getSetting('mode', 'inline');
+        this.editInputClass = this.grid.getSetting('edit.inputClass', '');
+        this.showActionColumnRight = this.grid.showActionColumn('right');
+        this.isActionAdd = this.grid.getSetting('actions.add', false);
+        this.isActionEdit = this.grid.getSetting('actions.edit', false);
+        this.isActionDelete = this.grid.getSetting('actions.delete', false);
+        this.noDataMessage = this.grid.getSetting('noDataMessage');
+    }
+    getVisibleCells(cells) {
+        return (cells || []).filter((cell) => !cell.getColumn().hide);
+    }
+    trackByIdOrIndex(index, item) {
+        return item?.id || index;
     }
 }
-ActionsTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ActionsTitleComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ActionsTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ActionsTitleComponent, selector: "[ng2-st-actions-title]", inputs: { grid: "grid" }, usesOnChanges: true, ngImport: i0, template: `
-    <div class="ng2-smart-title">{{ actionsColumnTitle }}</div>
-  `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ActionsTitleComponent, decorators: [{
+Ng2SmartTableTbodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Ng2SmartTableTbodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+Ng2SmartTableTbodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: { grid: "grid", source: "source", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm", rowClassFunction: "rowClassFunction" }, outputs: { save: "save", cancel: "cancel", edit: "edit", editCancel: "editCancel", delete: "delete", custom: "custom", edited: "edited", userSelectRow: "userSelectRow", userClickedRow: "userClickedRow", editRowSelect: "editRowSelect", multipleSelectRow: "multipleSelectRow" }, usesOnChanges: true, ngImport: i0, template: "<tr *ngFor=\"let row of grid.getRows(); trackBy: trackByIdOrIndex\" (click)=\"userClickedRow.emit(row)\" class=\"ng2-smart-row\" [className]=\"rowClassFunction(row)\" [ngClass]=\"{selected: row.isSelected}\">\n  <td *ngIf=\"isMultiSelectVisible\" class=\"ng2-smart-actions ng2-smart-action-multiple-select\" (click)=\"multipleSelectRow.emit(row); $event.stopPropagation();\">\n    <input type=\"checkbox\" class=\"form-control\" [ngModel]=\"row.isSelected\">\n  </td>\n  <td *ngIf=\"!row.isInEditing && showActionColumnLeft\" class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n    <ng2-st-tbody-custom [grid]=\"grid\" (custom)=\"custom.emit($event)\" [row]=\"row\" [source]=\"source\"></ng2-st-tbody-custom>\n\n    <ng2-st-tbody-edit-delete [grid]=\"grid\"\n                              [deleteConfirm]=\"deleteConfirm\"\n                              [editConfirm]=\"editConfirm\"\n                              (edit)=\"edit.emit(row)\"\n                              (delete)=\"delete.emit(row)\"\n                              (editRowSelect)=\"editRowSelect.emit($event)\"\n                              [row]=\"row\"\n                              [source]=\"source\">\n    </ng2-st-tbody-edit-delete>\n  </td>\n   <td *ngIf=\"row.isInEditing && showActionColumnLeft\"  class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel [grid]=\"grid\" [row]=\"row\" [editConfirm]=\"editConfirm\" [editCancel]=\"editCancel\"></ng2-st-tbody-create-cancel>\n  </td>\n  <td *ngFor=\"let cell of getVisibleCells(row.cells)\">\n    <ng2-smart-table-cell [cell]=\"cell\"\n                          [grid]=\"grid\"\n                          [row]=\"row\"\n                          [isNew]=\"false\"\n                          [mode]=\"mode\"\n                          [editConfirm]=\"editConfirm\"\n                          [inputClass]=\"editInputClass\"\n                          [isInEditing]=\"row.isInEditing\">\n    </ng2-smart-table-cell>\n  </td>\n\n  <td *ngIf=\"row.isInEditing && showActionColumnRight\"  class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel [grid]=\"grid\" [row]=\"row\" [editConfirm]=\"editConfirm\"></ng2-st-tbody-create-cancel>\n  </td>\n\n  <td *ngIf=\"!row.isInEditing && showActionColumnRight\" class=\"ng2-smart-actions\">\n    <ng2-st-tbody-custom [grid]=\"grid\" (custom)=\"custom.emit($event)\" [row]=\"row\" [source]=\"source\"></ng2-st-tbody-custom>\n\n    <ng2-st-tbody-edit-delete [grid]=\"grid\"\n                              [deleteConfirm]=\"deleteConfirm\"\n                              [editConfirm]=\"editConfirm\"\n                              [row]=\"row\"\n                              [source]=\"source\"\n                              (edit)=\"edit.emit(row)\"\n                              (delete)=\"delete.emit(row)\"\n                              (editRowSelect)=\"editRowSelect.emit($event)\">\n    </ng2-st-tbody-edit-delete>\n  </td>\n</tr>\n\n<tr *ngIf=\"grid.getRows().length == 0\">\n  <td [attr.colspan]=\"tableColumnsCount\">\n    {{ noDataMessage }}\n  </td>\n</tr>\n", styles: [":host .ng2-smart-row.selected{background:rgba(0,0,0,.05)}:host .ng2-smart-row .ng2-smart-actions.ng2-smart-action-multiple-select{text-align:center}:host ::ng-deep ng2-st-tbody-edit-delete a:first-child,:host ::ng-deep ng2-st-tbody-create-cancel a:first-child{margin-right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["grid", "row", "editConfirm", "createConfirm", "isNew", "cell", "inputClass", "mode", "isInEditing"], outputs: ["edited"] }, { kind: "component", type: TbodyCreateCancelComponent, selector: "ng2-st-tbody-create-cancel", inputs: ["grid", "row", "editConfirm", "editCancel"] }, { kind: "component", type: TbodyEditDeleteComponent, selector: "ng2-st-tbody-edit-delete", inputs: ["grid", "row", "source", "deleteConfirm", "editConfirm"], outputs: ["edit", "delete", "editRowSelect"] }, { kind: "component", type: TbodyCustomComponent, selector: "ng2-st-tbody-custom", inputs: ["grid", "row", "source"], outputs: ["custom"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Ng2SmartTableTbodyComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: '[ng2-st-actions-title]',
-                    template: `
-    <div class="ng2-smart-title">{{ actionsColumnTitle }}</div>
-  `,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { grid: [{
+            args: [{ selector: '[ng2-st-tbody]', template: "<tr *ngFor=\"let row of grid.getRows(); trackBy: trackByIdOrIndex\" (click)=\"userClickedRow.emit(row)\" class=\"ng2-smart-row\" [className]=\"rowClassFunction(row)\" [ngClass]=\"{selected: row.isSelected}\">\n  <td *ngIf=\"isMultiSelectVisible\" class=\"ng2-smart-actions ng2-smart-action-multiple-select\" (click)=\"multipleSelectRow.emit(row); $event.stopPropagation();\">\n    <input type=\"checkbox\" class=\"form-control\" [ngModel]=\"row.isSelected\">\n  </td>\n  <td *ngIf=\"!row.isInEditing && showActionColumnLeft\" class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n    <ng2-st-tbody-custom [grid]=\"grid\" (custom)=\"custom.emit($event)\" [row]=\"row\" [source]=\"source\"></ng2-st-tbody-custom>\n\n    <ng2-st-tbody-edit-delete [grid]=\"grid\"\n                              [deleteConfirm]=\"deleteConfirm\"\n                              [editConfirm]=\"editConfirm\"\n                              (edit)=\"edit.emit(row)\"\n                              (delete)=\"delete.emit(row)\"\n                              (editRowSelect)=\"editRowSelect.emit($event)\"\n                              [row]=\"row\"\n                              [source]=\"source\">\n    </ng2-st-tbody-edit-delete>\n  </td>\n   <td *ngIf=\"row.isInEditing && showActionColumnLeft\"  class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel [grid]=\"grid\" [row]=\"row\" [editConfirm]=\"editConfirm\" [editCancel]=\"editCancel\"></ng2-st-tbody-create-cancel>\n  </td>\n  <td *ngFor=\"let cell of getVisibleCells(row.cells)\">\n    <ng2-smart-table-cell [cell]=\"cell\"\n                          [grid]=\"grid\"\n                          [row]=\"row\"\n                          [isNew]=\"false\"\n                          [mode]=\"mode\"\n                          [editConfirm]=\"editConfirm\"\n                          [inputClass]=\"editInputClass\"\n                          [isInEditing]=\"row.isInEditing\">\n    </ng2-smart-table-cell>\n  </td>\n\n  <td *ngIf=\"row.isInEditing && showActionColumnRight\"  class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel [grid]=\"grid\" [row]=\"row\" [editConfirm]=\"editConfirm\"></ng2-st-tbody-create-cancel>\n  </td>\n\n  <td *ngIf=\"!row.isInEditing && showActionColumnRight\" class=\"ng2-smart-actions\">\n    <ng2-st-tbody-custom [grid]=\"grid\" (custom)=\"custom.emit($event)\" [row]=\"row\" [source]=\"source\"></ng2-st-tbody-custom>\n\n    <ng2-st-tbody-edit-delete [grid]=\"grid\"\n                              [deleteConfirm]=\"deleteConfirm\"\n                              [editConfirm]=\"editConfirm\"\n                              [row]=\"row\"\n                              [source]=\"source\"\n                              (edit)=\"edit.emit(row)\"\n                              (delete)=\"delete.emit(row)\"\n                              (editRowSelect)=\"editRowSelect.emit($event)\">\n    </ng2-st-tbody-edit-delete>\n  </td>\n</tr>\n\n<tr *ngIf=\"grid.getRows().length == 0\">\n  <td [attr.colspan]=\"tableColumnsCount\">\n    {{ noDataMessage }}\n  </td>\n</tr>\n", styles: [":host .ng2-smart-row.selected{background:rgba(0,0,0,.05)}:host .ng2-smart-row .ng2-smart-actions.ng2-smart-action-multiple-select{text-align:center}:host ::ng-deep ng2-st-tbody-edit-delete a:first-child,:host ::ng-deep ng2-st-tbody-create-cancel a:first-child{margin-right:.25rem}\n"] }]
+        }], propDecorators: { grid: [{
+                type: Input
+            }], source: [{
+                type: Input
+            }], deleteConfirm: [{
+                type: Input
+            }], editConfirm: [{
                 type: Input
+            }], rowClassFunction: [{
+                type: Input
+            }], save: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }], edit: [{
+                type: Output
+            }], editCancel: [{
+                type: Output
+            }], delete: [{
+                type: Output
+            }], custom: [{
+                type: Output
+            }], edited: [{
+                type: Output
+            }], userSelectRow: [{
+                type: Output
+            }], userClickedRow: [{
+                type: Output
+            }], editRowSelect: [{
+                type: Output
+            }], multipleSelectRow: [{
+                type: Output
             }] } });
 
-class CheckboxSelectAllComponent {
+const TBODY_COMPONENTS = [
+    TbodyCreateCancelComponent,
+    TbodyEditDeleteComponent,
+    TbodyCustomComponent,
+    Ng2SmartTableTbodyComponent
+];
+class TBodyModule {
 }
-CheckboxSelectAllComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxSelectAllComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckboxSelectAllComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CheckboxSelectAllComponent, selector: "[ng2-st-checkbox-select-all]", inputs: { grid: "grid", source: "source" }, ngImport: i0, template: `
-    <input type="checkbox" [ngModel]="this.grid.dataSet.isAllSelected">
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxSelectAllComponent, decorators: [{
-            type: Component,
+TBodyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TBodyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TBodyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: TBodyModule, declarations: [TbodyCreateCancelComponent,
+        TbodyEditDeleteComponent,
+        TbodyCustomComponent,
+        Ng2SmartTableTbodyComponent], imports: [CommonModule,
+        FormsModule,
+        CellModule], exports: [TbodyCreateCancelComponent,
+        TbodyEditDeleteComponent,
+        TbodyCustomComponent,
+        Ng2SmartTableTbodyComponent] });
+TBodyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TBodyModule, imports: [CommonModule,
+        FormsModule,
+        CellModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TBodyModule, decorators: [{
+            type: NgModule,
             args: [{
-                    selector: '[ng2-st-checkbox-select-all]',
-                    template: `
-    <input type="checkbox" [ngModel]="this.grid.dataSet.isAllSelected">
-  `,
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        CellModule,
+                    ],
+                    declarations: [
+                        ...TBODY_COMPONENTS,
+                    ],
+                    exports: [
+                        ...TBODY_COMPONENTS,
+                    ],
                 }]
-        }], propDecorators: { grid: [{
-                type: Input
-            }], source: [{
-                type: Input
-            }] } });
+        }] });
 
-class TitleComponent {
-    constructor() {
-        this.currentDirection = '';
-        this.sort = new EventEmitter();
+class AddButtonComponent {
+    constructor(ref) {
+        this.ref = ref;
+        this.create = new EventEmitter();
+        this.isActionAdd = false;
+        this.addNewButtonContent = '';
     }
-    ngOnChanges(changes) {
-        if (changes.source) {
-            if (!changes.source.firstChange) {
-                this.dataChangedSub.unsubscribe();
-            }
-            this.dataChangedSub = this.source.onChanged().subscribe((dataChanges) => {
-                const sortConf = this.source.getSort();
-                if (sortConf.length > 0 && sortConf[0]['field'] === this.column.id) {
-                    this.currentDirection = sortConf[0]['direction'];
-                }
-                else {
-                    this.currentDirection = '';
-                }
-                sortConf.forEach((fieldConf) => {
-                });
-            });
-        }
+    ngAfterViewInit() {
+        this.ref.nativeElement.classList.add('ng2-smart-actions-title', 'ng2-smart-actions-title-add');
     }
-    _sort(event) {
-        event.preventDefault();
-        this.changeSortDirection();
-        this.source.setSort([
-            {
-                field: this.column.id,
-                direction: this.currentDirection,
-                compare: this.column.getCompareFunction(),
-            },
-        ]);
-        this.sort.emit(null);
+    ngOnChanges() {
+        this.isActionAdd = this.grid.getSetting('actions.add');
+        this.addNewButtonContent = this.grid.getSetting('add.addButtonContent');
     }
-    changeSortDirection() {
-        if (this.currentDirection) {
-            const newDirection = this.currentDirection === 'asc' ? 'desc' : 'asc';
-            this.currentDirection = newDirection;
+    onAdd(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.grid.getSetting('mode') === 'external') {
+            this.create.emit({
+                source: this.source,
+            });
         }
         else {
-            this.currentDirection = this.column.sortDirection;
+            this.grid.createFormShown = true;
         }
-        return this.currentDirection;
-    }
-}
-TitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TitleComponent, selector: "ng2-smart-table-title", inputs: { column: "column", source: "source" }, outputs: { sort: "sort" }, usesOnChanges: true, ngImport: i0, template: `
-    <a href="#" *ngIf="column.isSortable"
-                (click)="_sort($event)"
-                class="ng2-smart-sort-link sort"
-                [ngClass]="currentDirection">
-      {{ column.title }}
-    </a>
-    <span class="ng2-smart-sort" *ngIf="!column.isSortable">{{ column.title }}</span>
-  `, isInline: true, styles: ["a.sort.asc,a.sort.desc{font-weight:700}a.sort.asc:after,a.sort.desc:after{content:\"\";display:inline-block;width:0;height:0;border-bottom:4px solid rgba(0,0,0,.3);border-top:4px solid transparent;border-left:4px solid transparent;border-right:4px solid transparent;margin-bottom:2px}a.sort.desc:after{transform:rotate(-180deg);margin-bottom:-2px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TitleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ng2-smart-table-title', template: `
-    <a href="#" *ngIf="column.isSortable"
-                (click)="_sort($event)"
-                class="ng2-smart-sort-link sort"
-                [ngClass]="currentDirection">
-      {{ column.title }}
-    </a>
-    <span class="ng2-smart-sort" *ngIf="!column.isSortable">{{ column.title }}</span>
-  `, styles: ["a.sort.asc,a.sort.desc{font-weight:700}a.sort.asc:after,a.sort.desc:after{content:\"\";display:inline-block;width:0;height:0;border-bottom:4px solid rgba(0,0,0,.3);border-top:4px solid transparent;border-left:4px solid transparent;border-right:4px solid transparent;margin-bottom:2px}a.sort.desc:after{transform:rotate(-180deg);margin-bottom:-2px}\n"] }]
-        }], propDecorators: { column: [{
-                type: Input
-            }], source: [{
-                type: Input
-            }], sort: [{
-                type: Output
-            }] } });
-
-class ColumnTitleComponent {
-    constructor() {
-        this.sort = new EventEmitter();
     }
 }
-ColumnTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ColumnTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColumnTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: { column: "column", source: "source" }, outputs: { sort: "sort" }, ngImport: i0, template: `
-    <div class="ng2-smart-title">
-      <ng2-smart-table-title [source]="source" [column]="column" (sort)="sort.emit($event)"></ng2-smart-table-title>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: TitleComponent, selector: "ng2-smart-table-title", inputs: ["column", "source"], outputs: ["sort"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ColumnTitleComponent, decorators: [{
+AddButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AddButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AddButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: { grid: "grid", source: "source" }, outputs: { create: "create" }, usesOnChanges: true, ngImport: i0, template: `
+    <a *ngIf="isActionAdd" href="#" class="ng2-smart-action ng2-smart-action-add-add"
+        [innerHTML]="addNewButtonContent" (click)="onAdd($event)"></a>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AddButtonComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ng2-st-column-title',
+                    selector: '[ng2-st-add-button]',
                     template: `
-    <div class="ng2-smart-title">
-      <ng2-smart-table-title [source]="source" [column]="column" (sort)="sort.emit($event)"></ng2-smart-table-title>
-    </div>
+    <a *ngIf="isActionAdd" href="#" class="ng2-smart-action ng2-smart-action-add-add"
+        [innerHTML]="addNewButtonContent" (click)="onAdd($event)"></a>
   `,
                 }]
-        }], propDecorators: { column: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { grid: [{
                 type: Input
             }], source: [{
                 type: Input
-            }], sort: [{
+            }], create: [{
                 type: Output
             }] } });
 
-class TheadTitlesRowComponent {
+class TheadFitlersRowComponent {
     constructor() {
-        this.sort = new EventEmitter();
-        this.selectAllRows = new EventEmitter();
+        this.create = new EventEmitter();
+        this.filter = new EventEmitter();
+        this.isMultiSelectVisible = false;
+        this.showActionColumnLeft = false;
+        this.showActionColumnRight = false;
+        this.filterInputClass = '';
     }
     ngOnChanges() {
         this.isMultiSelectVisible = this.grid.isMultiSelectVisible();
         this.showActionColumnLeft = this.grid.showActionColumn('left');
         this.showActionColumnRight = this.grid.showActionColumn('right');
+        this.filterInputClass = this.grid.getSetting('filter.inputClass', '');
     }
     getVisibleColumns(columns) {
         return (columns || []).filter((column) => !column.hide);
     }
 }
-TheadTitlesRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheadTitlesRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TheadTitlesRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: { grid: "grid", source: "source" }, outputs: { sort: "sort", selectAllRows: "selectAllRows" }, usesOnChanges: true, ngImport: i0, template: `
-    <th ng2-st-checkbox-select-all *ngIf="isMultiSelectVisible"
-                                   [grid]="grid"
-                                   [source]="source"
-                                   (click)="selectAllRows.emit($event)">
+TheadFitlersRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheadFitlersRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TheadFitlersRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TheadFitlersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: { grid: "grid", source: "source" }, outputs: { create: "create", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: `
+    <th *ngIf="isMultiSelectVisible"></th>
+    <th ng2-st-add-button *ngIf="showActionColumnLeft"
+                          [grid]="grid"
+                          (create)="create.emit($event)">
     </th>
-    <th ng2-st-actions-title *ngIf="showActionColumnLeft" [grid]="grid"></th>
-    <th *ngFor="let column of getVisibleColumns(grid.getColumns())"
-        class="ng2-smart-th {{ column.id }}"
-        [ngClass]="column.class"
-        [style.width]="column.width">
-      <ng2-st-column-title [source]="source" [column]="column" (sort)="sort.emit($event)"></ng2-st-column-title>
+    <th *ngFor="let column of getVisibleColumns(grid.getColumns())" class="ng2-smart-th {{ column.id }}">
+      <ng2-smart-table-filter [source]="source"
+                              [column]="column"
+                              [inputClass]="filterInputClass"
+                              (filter)="filter.emit($event)">
+      </ng2-smart-table-filter>
     </th>
-    <th ng2-st-actions-title *ngIf="showActionColumnRight" [grid]="grid"></th>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ActionsTitleComponent, selector: "[ng2-st-actions-title]", inputs: ["grid"] }, { kind: "component", type: CheckboxSelectAllComponent, selector: "[ng2-st-checkbox-select-all]", inputs: ["grid", "source"] }, { kind: "component", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["column", "source"], outputs: ["sort"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheadTitlesRowComponent, decorators: [{
+    <th ng2-st-add-button *ngIf="showActionColumnRight"
+                          [grid]="grid"
+                          [source]="source"
+                          (create)="create.emit($event)">
+    </th>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FilterComponent, selector: "ng2-smart-table-filter" }, { kind: "component", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: ["grid", "source"], outputs: ["create"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheadFitlersRowComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: '[ng2-st-thead-titles-row]',
+                    selector: '[ng2-st-thead-filters-row]',
                     template: `
-    <th ng2-st-checkbox-select-all *ngIf="isMultiSelectVisible"
-                                   [grid]="grid"
-                                   [source]="source"
-                                   (click)="selectAllRows.emit($event)">
+    <th *ngIf="isMultiSelectVisible"></th>
+    <th ng2-st-add-button *ngIf="showActionColumnLeft"
+                          [grid]="grid"
+                          (create)="create.emit($event)">
     </th>
-    <th ng2-st-actions-title *ngIf="showActionColumnLeft" [grid]="grid"></th>
-    <th *ngFor="let column of getVisibleColumns(grid.getColumns())"
-        class="ng2-smart-th {{ column.id }}"
-        [ngClass]="column.class"
-        [style.width]="column.width">
-      <ng2-st-column-title [source]="source" [column]="column" (sort)="sort.emit($event)"></ng2-st-column-title>
+    <th *ngFor="let column of getVisibleColumns(grid.getColumns())" class="ng2-smart-th {{ column.id }}">
+      <ng2-smart-table-filter [source]="source"
+                              [column]="column"
+                              [inputClass]="filterInputClass"
+                              (filter)="filter.emit($event)">
+      </ng2-smart-table-filter>
+    </th>
+    <th ng2-st-add-button *ngIf="showActionColumnRight"
+                          [grid]="grid"
+                          [source]="source"
+                          (create)="create.emit($event)">
     </th>
-    <th ng2-st-actions-title *ngIf="showActionColumnRight" [grid]="grid"></th>
   `,
                 }]
         }], propDecorators: { grid: [{
                 type: Input
             }], source: [{
                 type: Input
-            }], sort: [{
+            }], create: [{
                 type: Output
-            }], selectAllRows: [{
+            }], filter: [{
                 type: Output
             }] } });
 
-class Ng2SmartTableTheadComponent {
+class ActionsComponent {
     constructor() {
-        this.sort = new EventEmitter();
-        this.selectAllRows = new EventEmitter();
         this.create = new EventEmitter();
-        this.filter = new EventEmitter();
+        this.createButtonContent = '';
+        this.cancelButtonContent = '';
     }
     ngOnChanges() {
-        this.isHideHeader = this.grid.getSetting('hideHeader');
-        this.isHideSubHeader = this.grid.getSetting('hideSubHeader');
+        this.createButtonContent = this.grid.getSetting('add.createButtonContent');
+        this.cancelButtonContent = this.grid.getSetting('add.cancelButtonContent');
     }
 }
-Ng2SmartTableTheadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Ng2SmartTableTheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-Ng2SmartTableTheadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: { grid: "grid", source: "source", createConfirm: "createConfirm" }, outputs: { sort: "sort", selectAllRows: "selectAllRows", create: "create", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: "<tr ng2-st-thead-titles-row *ngIf=\"!isHideHeader\"\n                            class=\"ng2-smart-titles\"\n                            [grid]=\"grid\"\n                            [source]=\"source\"\n                            (sort)=\"sort.emit($event)\"\n                            (selectAllRows)=\"selectAllRows.emit($event)\">\n</tr>\n\n<tr ng2-st-thead-filters-row *ngIf=\"!isHideSubHeader\"\n                              class=\"ng2-smart-filters\"\n                              [grid]=\"grid\"\n                              [source]=\"source\"\n                              (create)=\"create.emit($event)\"\n                              (filter)=\"filter.emit($event)\">\n</tr>\n\n<tr ng2-st-thead-form-row *ngIf=\"grid.createFormShown\"\n                          [grid]=\"grid\"\n                          [createConfirm]=\"createConfirm\">\n</tr>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TheadFitlersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: ["grid", "source"], outputs: ["create", "filter"] }, { kind: "component", type: TheadFormRowComponent, selector: "[ng2-st-thead-form-row]", inputs: ["grid", "row", "createConfirm"], outputs: ["create"] }, { kind: "component", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: ["grid", "source"], outputs: ["sort", "selectAllRows"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Ng2SmartTableTheadComponent, decorators: [{
+ActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ActionsComponent, selector: "ng2-st-actions", inputs: { grid: "grid" }, outputs: { create: "create" }, usesOnChanges: true, ngImport: i0, template: `
+    <a href="#" class="ng2-smart-action ng2-smart-action-add-create"
+        [innerHTML]="createButtonContent"
+        (click)="$event.preventDefault();create.emit($event)"></a>
+    <a href="#" class="ng2-smart-action ng2-smart-action-add-cancel"
+        [innerHTML]="cancelButtonContent"
+        (click)="$event.preventDefault();grid.createFormShown = false;"></a>
+  `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[ng2-st-thead]', template: "<tr ng2-st-thead-titles-row *ngIf=\"!isHideHeader\"\n                            class=\"ng2-smart-titles\"\n                            [grid]=\"grid\"\n                            [source]=\"source\"\n                            (sort)=\"sort.emit($event)\"\n                            (selectAllRows)=\"selectAllRows.emit($event)\">\n</tr>\n\n<tr ng2-st-thead-filters-row *ngIf=\"!isHideSubHeader\"\n                              class=\"ng2-smart-filters\"\n                              [grid]=\"grid\"\n                              [source]=\"source\"\n                              (create)=\"create.emit($event)\"\n                              (filter)=\"filter.emit($event)\">\n</tr>\n\n<tr ng2-st-thead-form-row *ngIf=\"grid.createFormShown\"\n                          [grid]=\"grid\"\n                          [createConfirm]=\"createConfirm\">\n</tr>\n" }]
+            args: [{
+                    selector: 'ng2-st-actions',
+                    template: `
+    <a href="#" class="ng2-smart-action ng2-smart-action-add-create"
+        [innerHTML]="createButtonContent"
+        (click)="$event.preventDefault();create.emit($event)"></a>
+    <a href="#" class="ng2-smart-action ng2-smart-action-add-cancel"
+        [innerHTML]="cancelButtonContent"
+        (click)="$event.preventDefault();grid.createFormShown = false;"></a>
+  `,
+                }]
         }], propDecorators: { grid: [{
                 type: Input
-            }], source: [{
-                type: Input
-            }], createConfirm: [{
-                type: Input
-            }], sort: [{
-                type: Output
-            }], selectAllRows: [{
-                type: Output
             }], create: [{
                 type: Output
-            }], filter: [{
-                type: Output
             }] } });
 
-const THEAD_COMPONENTS = [
-    ActionsComponent,
-    ActionsTitleComponent,
-    AddButtonComponent,
-    CheckboxSelectAllComponent,
-    ColumnTitleComponent,
-    TitleComponent,
-    TheadFitlersRowComponent,
-    TheadFormRowComponent,
-    TheadTitlesRowComponent,
-    Ng2SmartTableTheadComponent,
-];
-class THeadModule {
+class TheadFormRowComponent {
+    constructor() {
+        this.create = new EventEmitter();
+        this.isMultiSelectVisible = false;
+        this.showActionColumnLeft = false;
+        this.showActionColumnRight = false;
+        this.addInputClass = '';
+    }
+    onCreate(event) {
+        event.stopPropagation();
+        this.grid.create(this.grid.getNewRow(), this.createConfirm);
+    }
+    ngOnChanges() {
+        this.isMultiSelectVisible = this.grid.isMultiSelectVisible();
+        this.showActionColumnLeft = this.grid.showActionColumn('left');
+        this.showActionColumnRight = this.grid.showActionColumn('right');
+        this.addInputClass = this.grid.getSetting('add.inputClass', '');
+    }
+    getVisibleCells(cells) {
+        return (cells || []).filter((cell) => !cell.getColumn().hide);
+    }
 }
-THeadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: THeadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-THeadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: THeadModule, declarations: [ActionsComponent,
-        ActionsTitleComponent,
-        AddButtonComponent,
-        CheckboxSelectAllComponent,
-        ColumnTitleComponent,
-        TitleComponent,
-        TheadFitlersRowComponent,
-        TheadFormRowComponent,
-        TheadTitlesRowComponent,
-        Ng2SmartTableTheadComponent], imports: [CommonModule,
-        FormsModule,
-        FilterModule,
-        CellModule], exports: [ActionsComponent,
-        ActionsTitleComponent,
-        AddButtonComponent,
-        CheckboxSelectAllComponent,
-        ColumnTitleComponent,
-        TitleComponent,
-        TheadFitlersRowComponent,
-        TheadFormRowComponent,
-        TheadTitlesRowComponent,
-        Ng2SmartTableTheadComponent] });
-THeadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: THeadModule, imports: [CommonModule,
-        FormsModule,
-        FilterModule,
-        CellModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: THeadModule, decorators: [{
-            type: NgModule,
+TheadFormRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheadFormRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TheadFormRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TheadFormRowComponent, selector: "[ng2-st-thead-form-row]", inputs: { grid: "grid", row: "row", createConfirm: "createConfirm" }, outputs: { create: "create" }, usesOnChanges: true, ngImport: i0, template: `
+      <td *ngIf="grid.isMultiSelectVisible"></td>
+      <td  *ngIf="showActionColumnLeft"  class="ng2-smart-actions">
+        <ng2-st-actions [grid]="grid" (create)="onCreate($event)"></ng2-st-actions>
+      </td>
+      <td *ngFor="let cell of getVisibleCells(grid.getNewRow().getCells())">
+        <ng2-smart-table-cell [cell]="cell"
+                              [grid]="grid"
+                              [isNew]="true"
+                              [createConfirm]="createConfirm"
+                              [inputClass]="addInputClass"
+                              [isInEditing]="grid.getNewRow().isInEditing"
+                              (edited)="onCreate($event)">
+        </ng2-smart-table-cell>
+      </td>
+      <td  *ngIf="showActionColumnRight"  class="ng2-smart-actions">
+        <ng2-st-actions [grid]="grid" (create)="onCreate($event)"></ng2-st-actions>
+      </td>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["grid", "row", "editConfirm", "createConfirm", "isNew", "cell", "inputClass", "mode", "isInEditing"], outputs: ["edited"] }, { kind: "component", type: ActionsComponent, selector: "ng2-st-actions", inputs: ["grid"], outputs: ["create"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheadFormRowComponent, decorators: [{
+            type: Component,
             args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        FilterModule,
-                        CellModule,
-                    ],
-                    declarations: [
-                        ...THEAD_COMPONENTS,
-                    ],
-                    exports: [
-                        ...THEAD_COMPONENTS,
-                    ],
+                    selector: '[ng2-st-thead-form-row]',
+                    template: `
+      <td *ngIf="grid.isMultiSelectVisible"></td>
+      <td  *ngIf="showActionColumnLeft"  class="ng2-smart-actions">
+        <ng2-st-actions [grid]="grid" (create)="onCreate($event)"></ng2-st-actions>
+      </td>
+      <td *ngFor="let cell of getVisibleCells(grid.getNewRow().getCells())">
+        <ng2-smart-table-cell [cell]="cell"
+                              [grid]="grid"
+                              [isNew]="true"
+                              [createConfirm]="createConfirm"
+                              [inputClass]="addInputClass"
+                              [isInEditing]="grid.getNewRow().isInEditing"
+                              (edited)="onCreate($event)">
+        </ng2-smart-table-cell>
+      </td>
+      <td  *ngIf="showActionColumnRight"  class="ng2-smart-actions">
+        <ng2-st-actions [grid]="grid" (create)="onCreate($event)"></ng2-st-actions>
+      </td>
+  `,
                 }]
-        }] });
+        }], propDecorators: { grid: [{
+                type: Input
+            }], row: [{
+                type: Input
+            }], createConfirm: [{
+                type: Input
+            }], create: [{
+                type: Output
+            }] } });
 
-function compareValues(direction, a, b) {
-    if (a < b) {
-        return -1 * direction;
-    }
-    if (a > b) {
-        return direction;
+class ActionsTitleComponent {
+    constructor(ref) {
+        this.ref = ref;
+        this.actionsColumnTitle = '';
     }
-    return 0;
-}
-class LocalSorter {
-    static sort(data, field, direction, customCompare) {
-        const dir = (direction === 'asc') ? 1 : -1;
-        const compare = customCompare ? customCompare : compareValues;
-        return data.sort((a, b) => {
-            return compare.call(null, dir, a[field], b[field]);
-        });
+    ngAfterViewInit() {
+        this.ref.nativeElement.classList.add('ng2-smart-actions');
     }
-}
-
-function filterValues(value, search) {
-    return value.toString().toLowerCase().includes(search.toString().toLowerCase());
-}
-class LocalFilter {
-    static filter(data, field, search, customFilter) {
-        const filter = customFilter ? customFilter : filterValues;
-        return data.filter((el) => {
-            const value = typeof el[field] === 'undefined' || el[field] === null ? '' : el[field];
-            return filter.call(null, value, search);
-        });
+    ngOnChanges() {
+        this.actionsColumnTitle = this.grid.getSetting('actions.columnTitle');
     }
 }
+ActionsTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ActionsTitleComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ActionsTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ActionsTitleComponent, selector: "[ng2-st-actions-title]", inputs: { grid: "grid" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="ng2-smart-title">{{ actionsColumnTitle }}</div>
+  `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ActionsTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[ng2-st-actions-title]',
+                    template: `
+    <div class="ng2-smart-title">{{ actionsColumnTitle }}</div>
+  `,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { grid: [{
+                type: Input
+            }] } });
 
-class LocalPager {
-    static paginate(data, page, perPage) {
-        return data.slice(perPage * (page - 1), perPage * page);
-    }
+class CheckboxSelectAllComponent {
 }
+CheckboxSelectAllComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxSelectAllComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CheckboxSelectAllComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CheckboxSelectAllComponent, selector: "[ng2-st-checkbox-select-all]", inputs: { grid: "grid", source: "source" }, ngImport: i0, template: `
+    <input type="checkbox" [ngModel]="this.grid.dataSet.isAllSelected">
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxSelectAllComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[ng2-st-checkbox-select-all]',
+                    template: `
+    <input type="checkbox" [ngModel]="this.grid.dataSet.isAllSelected">
+  `,
+                }]
+        }], propDecorators: { grid: [{
+                type: Input
+            }], source: [{
+                type: Input
+            }] } });
 
-class LocalDataSource extends DataSource {
-    constructor(data = []) {
-        super();
-        this.data = [];
-        this.filteredAndSorted = [];
-        this.sortConf = [];
-        this.filterConf = {
-            filters: [],
-            andOperator: true,
-        };
-        this.pagingConf = {
-            page: 1,
-            perPage: 1,
-        };
-        this.data = data;
-    }
-    load(data) {
-        this.data = data;
-        return super.load(data);
-    }
-    prepend(element) {
-        this.reset(true);
-        this.data.unshift(element);
-        return super.prepend(element);
-    }
-    append(element) {
-        this.reset(true);
-        this.data.push(element);
-        return super.append(element);
-    }
-    add(element) {
-        this.data.push(element);
-        return super.add(element);
-    }
-    remove(element) {
-        this.data = this.data.filter(el => el !== element);
-        return super.remove(element);
-    }
-    update(element, values) {
-        return new Promise((resolve, reject) => {
-            this.find(element).then((found) => {
-                found = deepExtend(found, values);
-                super.update(found, values).then(resolve).catch(reject);
-            }).catch(reject);
-        });
-    }
-    find(element) {
-        const found = this.data.find(el => el === element);
-        if (found) {
-            return Promise.resolve(found);
-        }
-        return Promise.reject(new Error('Element was not found in the dataset'));
-    }
-    getElements() {
-        const data = this.data.slice(0);
-        return Promise.resolve(this.prepareData(data));
-    }
-    getFilteredAndSorted() {
-        let data = this.data.slice(0);
-        this.prepareData(data);
-        return Promise.resolve(this.filteredAndSorted);
-    }
-    getAll() {
-        const data = this.data.slice(0);
-        return Promise.resolve(data);
-    }
-    reset(silent = false) {
-        if (silent) {
-            this.filterConf = {
-                filters: [],
-                andOperator: true,
-            };
-            this.sortConf = [];
-            this.pagingConf.page = 1;
-        }
-        else {
-            this.setFilter([], true, false);
-            this.setSort([], false);
-            this.setPage(1);
-        }
-    }
-    empty() {
-        this.data = [];
-        return super.empty();
-    }
-    count() {
-        return this.filteredAndSorted.length;
+class TitleComponent {
+    constructor() {
+        this.currentDirection = '';
+        this.sort = new EventEmitter();
+        this.dataChangedSub = false;
     }
-    /**
-     *
-     * Array of conf objects
-     * [
-     *  {field: string, direction: asc|desc|null, compare: Function|null},
-     * ]
-     * @param conf
-     * @param doEmit
-     * @returns {LocalDataSource}
-     */
-    setSort(conf, doEmit = true) {
-        if (conf !== null) {
-            conf.forEach((fieldConf) => {
-                if (!fieldConf.field || typeof fieldConf.direction === 'undefined') {
-                    throw new Error('Sort configuration object is not valid');
+    ngOnChanges(changes) {
+        if (changes['source']) {
+            if (!changes['source'].firstChange && this.dataChangedSub) {
+                this.dataChangedSub.unsubscribe();
+            }
+            this.dataChangedSub = this.source.onChanged().subscribe((dataChanges) => {
+                const sortConf = this.source.getSort();
+                if (sortConf.length > 0 && sortConf[0]['field'] === this.column.id) {
+                    this.currentDirection = sortConf[0]['direction'];
+                }
+                else {
+                    this.currentDirection = '';
                 }
             });
-            this.sortConf = conf;
         }
-        super.setSort(conf, doEmit);
-        return this;
     }
-    /**
-     *
-     * Array of conf objects
-     * [
-     *  {field: string, search: string, filter: Function|null},
-     * ]
-     * @param conf
-     * @param andOperator
-     * @param doEmit
-     * @returns {LocalDataSource}
-     */
-    setFilter(conf, andOperator = true, doEmit = true) {
-        if (conf && conf.length > 0) {
-            conf.forEach((fieldConf) => {
-                this.addFilter(fieldConf, andOperator, false);
-            });
-        }
-        else {
-            this.filterConf = {
-                filters: [],
-                andOperator: true,
-            };
-        }
-        this.filterConf.andOperator = andOperator;
-        this.pagingConf.page = 1;
-        super.setFilter(conf, andOperator, doEmit);
-        return this;
+    _sort(event) {
+        event.preventDefault();
+        this.changeSortDirection();
+        this.source.setSort([
+            {
+                field: this.column.id,
+                direction: this.currentDirection === 'desc' ? 'desc' : 'asc',
+                compare: this.column.getCompareFunction(),
+            },
+        ]);
+        this.sort.emit(null);
     }
-    addFilter(fieldConf, andOperator = true, doEmit = true) {
-        if (!fieldConf.field || typeof fieldConf.search === 'undefined') {
-            throw new Error('Filter configuration object is not valid');
+    changeSortDirection() {
+        if (this.currentDirection) {
+            const newDirection = this.currentDirection === 'asc' ? 'desc' : 'asc';
+            this.currentDirection = newDirection;
         }
-        let found = false;
-        this.filterConf.filters.forEach((currentFieldConf, index) => {
-            if (currentFieldConf.field === fieldConf.field) {
-                this.filterConf.filters[index] = fieldConf;
-                found = true;
-            }
-        });
-        if (!found) {
-            this.filterConf.filters.push(fieldConf);
+        else {
+            this.currentDirection = this.column.sortDirection;
         }
-        this.filterConf.andOperator = andOperator;
-        super.addFilter(fieldConf, andOperator, doEmit);
-        return this;
-    }
-    setPaging(page, perPage, doEmit = true) {
-        this.pagingConf.page = page;
-        this.pagingConf.perPage = perPage;
-        super.setPaging(page, perPage, doEmit);
-        return this;
-    }
-    setPage(page, doEmit = true) {
-        this.pagingConf.page = page;
-        super.setPage(page, doEmit);
-        return this;
-    }
-    getSort() {
-        return this.sortConf;
+        return this.currentDirection;
     }
-    getFilter() {
-        return this.filterConf;
+}
+TitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TitleComponent, selector: "ng2-smart-table-title", inputs: { column: "column", source: "source" }, outputs: { sort: "sort" }, usesOnChanges: true, ngImport: i0, template: `
+    <a href="#" *ngIf="column.isSortable"
+                (click)="_sort($event)"
+                class="ng2-smart-sort-link sort"
+                [ngClass]="currentDirection">
+      {{ column.title }}
+    </a>
+    <span class="ng2-smart-sort" *ngIf="!column.isSortable">{{ column.title }}</span>
+  `, isInline: true, styles: ["a.sort.asc,a.sort.desc{font-weight:700}a.sort.asc:after,a.sort.desc:after{content:\"\";display:inline-block;width:0;height:0;border-bottom:4px solid rgba(0,0,0,.3);border-top:4px solid transparent;border-left:4px solid transparent;border-right:4px solid transparent;margin-bottom:2px}a.sort.desc:after{transform:rotate(-180deg);margin-bottom:-2px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TitleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng2-smart-table-title', template: `
+    <a href="#" *ngIf="column.isSortable"
+                (click)="_sort($event)"
+                class="ng2-smart-sort-link sort"
+                [ngClass]="currentDirection">
+      {{ column.title }}
+    </a>
+    <span class="ng2-smart-sort" *ngIf="!column.isSortable">{{ column.title }}</span>
+  `, styles: ["a.sort.asc,a.sort.desc{font-weight:700}a.sort.asc:after,a.sort.desc:after{content:\"\";display:inline-block;width:0;height:0;border-bottom:4px solid rgba(0,0,0,.3);border-top:4px solid transparent;border-left:4px solid transparent;border-right:4px solid transparent;margin-bottom:2px}a.sort.desc:after{transform:rotate(-180deg);margin-bottom:-2px}\n"] }]
+        }], propDecorators: { column: [{
+                type: Input
+            }], source: [{
+                type: Input
+            }], sort: [{
+                type: Output
+            }] } });
+
+class ColumnTitleComponent {
+    constructor() {
+        this.sort = new EventEmitter();
     }
-    getPaging() {
-        return this.pagingConf;
+}
+ColumnTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ColumnTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ColumnTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: { column: "column", source: "source" }, outputs: { sort: "sort" }, ngImport: i0, template: `
+    <div class="ng2-smart-title">
+      <ng2-smart-table-title [source]="source" [column]="column" (sort)="sort.emit($event)"></ng2-smart-table-title>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: TitleComponent, selector: "ng2-smart-table-title", inputs: ["column", "source"], outputs: ["sort"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ColumnTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ng2-st-column-title',
+                    template: `
+    <div class="ng2-smart-title">
+      <ng2-smart-table-title [source]="source" [column]="column" (sort)="sort.emit($event)"></ng2-smart-table-title>
+    </div>
+  `,
+                }]
+        }], propDecorators: { column: [{
+                type: Input
+            }], source: [{
+                type: Input
+            }], sort: [{
+                type: Output
+            }] } });
+
+class TheadTitlesRowComponent {
+    constructor() {
+        this.sort = new EventEmitter();
+        this.selectAllRows = new EventEmitter();
+        this.isMultiSelectVisible = false;
+        this.showActionColumnLeft = false;
+        this.showActionColumnRight = false;
     }
-    prepareData(data) {
-        data = this.filter(data);
-        data = this.sort(data);
-        this.filteredAndSorted = data.slice(0);
-        return this.paginate(data);
+    ngOnChanges() {
+        this.isMultiSelectVisible = this.grid.isMultiSelectVisible();
+        this.showActionColumnLeft = this.grid.showActionColumn('left');
+        this.showActionColumnRight = this.grid.showActionColumn('right');
     }
-    sort(data) {
-        if (this.sortConf) {
-            this.sortConf.forEach((fieldConf) => {
-                data = LocalSorter
-                    .sort(data, fieldConf.field, fieldConf.direction, fieldConf.compare);
-            });
-        }
-        return data;
+    getVisibleColumns(columns) {
+        return (columns || []).filter((column) => !column.hide);
     }
-    // TODO: refactor?
-    filter(data) {
-        if (this.filterConf.filters) {
-            if (this.filterConf.andOperator) {
-                this.filterConf.filters.forEach((fieldConf) => {
-                    if (fieldConf.search?.length > 0) {
-                        data = LocalFilter
-                            .filter(data, fieldConf.field, fieldConf.search, fieldConf.filter);
-                    }
-                });
-            }
-            else {
-                let mergedData = [];
-                this.filterConf.filters.forEach((fieldConf) => {
-                    if (fieldConf.search?.length > 0) {
-                        mergedData = mergedData.concat(LocalFilter
-                            .filter(data, fieldConf.field, fieldConf.search, fieldConf.filter));
-                    }
-                });
-                // remove non unique items
-                data = mergedData.filter((elem, pos, arr) => {
-                    return arr.indexOf(elem) === pos;
-                });
-            }
-        }
-        return data;
+}
+TheadTitlesRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheadTitlesRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TheadTitlesRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: { grid: "grid", source: "source" }, outputs: { sort: "sort", selectAllRows: "selectAllRows" }, usesOnChanges: true, ngImport: i0, template: `
+    <th ng2-st-checkbox-select-all *ngIf="isMultiSelectVisible"
+                                   [grid]="grid"
+                                   [source]="source"
+                                   (click)="selectAllRows.emit($event)">
+    </th>
+    <th ng2-st-actions-title *ngIf="showActionColumnLeft" [grid]="grid"></th>
+    <th *ngFor="let column of getVisibleColumns(grid.getColumns())"
+        class="ng2-smart-th {{ column.id }}"
+        [ngClass]="column.class"
+        [style.width]="column.width">
+      <ng2-st-column-title [source]="source" [column]="column" (sort)="sort.emit($event)"></ng2-st-column-title>
+    </th>
+    <th ng2-st-actions-title *ngIf="showActionColumnRight" [grid]="grid"></th>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ActionsTitleComponent, selector: "[ng2-st-actions-title]", inputs: ["grid"] }, { kind: "component", type: CheckboxSelectAllComponent, selector: "[ng2-st-checkbox-select-all]", inputs: ["grid", "source"] }, { kind: "component", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["column", "source"], outputs: ["sort"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheadTitlesRowComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[ng2-st-thead-titles-row]',
+                    template: `
+    <th ng2-st-checkbox-select-all *ngIf="isMultiSelectVisible"
+                                   [grid]="grid"
+                                   [source]="source"
+                                   (click)="selectAllRows.emit($event)">
+    </th>
+    <th ng2-st-actions-title *ngIf="showActionColumnLeft" [grid]="grid"></th>
+    <th *ngFor="let column of getVisibleColumns(grid.getColumns())"
+        class="ng2-smart-th {{ column.id }}"
+        [ngClass]="column.class"
+        [style.width]="column.width">
+      <ng2-st-column-title [source]="source" [column]="column" (sort)="sort.emit($event)"></ng2-st-column-title>
+    </th>
+    <th ng2-st-actions-title *ngIf="showActionColumnRight" [grid]="grid"></th>
+  `,
+                }]
+        }], propDecorators: { grid: [{
+                type: Input
+            }], source: [{
+                type: Input
+            }], sort: [{
+                type: Output
+            }], selectAllRows: [{
+                type: Output
+            }] } });
+
+class Ng2SmartTableTheadComponent {
+    constructor() {
+        this.sort = new EventEmitter();
+        this.selectAllRows = new EventEmitter();
+        this.create = new EventEmitter();
+        this.filter = new EventEmitter();
+        this.isHideHeader = false;
+        this.isHideSubHeader = false;
     }
-    paginate(data) {
-        if (this.pagingConf && this.pagingConf.page && this.pagingConf.perPage) {
-            data = LocalPager.paginate(data, this.pagingConf.page, this.pagingConf.perPage);
-        }
-        return data;
+    ngOnChanges() {
+        this.isHideHeader = this.grid.getSetting('hideHeader', false);
+        this.isHideSubHeader = this.grid.getSetting('hideSubHeader', false);
     }
 }
+Ng2SmartTableTheadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Ng2SmartTableTheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+Ng2SmartTableTheadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: { grid: "grid", source: "source", createConfirm: "createConfirm" }, outputs: { sort: "sort", selectAllRows: "selectAllRows", create: "create", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: "<tr ng2-st-thead-titles-row *ngIf=\"!isHideHeader\"\n                            class=\"ng2-smart-titles\"\n                            [grid]=\"grid\"\n                            [source]=\"source\"\n                            (sort)=\"sort.emit($event)\"\n                            (selectAllRows)=\"selectAllRows.emit($event)\">\n</tr>\n\n<tr ng2-st-thead-filters-row *ngIf=\"!isHideSubHeader\"\n                              class=\"ng2-smart-filters\"\n                              [grid]=\"grid\"\n                              [source]=\"source\"\n                              (create)=\"create.emit($event)\"\n                              (filter)=\"filter.emit($event)\">\n</tr>\n\n<tr ng2-st-thead-form-row *ngIf=\"grid.createFormShown\"\n                          [grid]=\"grid\"\n                          [createConfirm]=\"createConfirm\">\n</tr>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TheadFitlersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: ["grid", "source"], outputs: ["create", "filter"] }, { kind: "component", type: TheadFormRowComponent, selector: "[ng2-st-thead-form-row]", inputs: ["grid", "row", "createConfirm"], outputs: ["create"] }, { kind: "component", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: ["grid", "source"], outputs: ["sort", "selectAllRows"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Ng2SmartTableTheadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[ng2-st-thead]', template: "<tr ng2-st-thead-titles-row *ngIf=\"!isHideHeader\"\n                            class=\"ng2-smart-titles\"\n                            [grid]=\"grid\"\n                            [source]=\"source\"\n                            (sort)=\"sort.emit($event)\"\n                            (selectAllRows)=\"selectAllRows.emit($event)\">\n</tr>\n\n<tr ng2-st-thead-filters-row *ngIf=\"!isHideSubHeader\"\n                              class=\"ng2-smart-filters\"\n                              [grid]=\"grid\"\n                              [source]=\"source\"\n                              (create)=\"create.emit($event)\"\n                              (filter)=\"filter.emit($event)\">\n</tr>\n\n<tr ng2-st-thead-form-row *ngIf=\"grid.createFormShown\"\n                          [grid]=\"grid\"\n                          [createConfirm]=\"createConfirm\">\n</tr>\n" }]
+        }], propDecorators: { grid: [{
+                type: Input
+            }], source: [{
+                type: Input
+            }], createConfirm: [{
+                type: Input
+            }], sort: [{
+                type: Output
+            }], selectAllRows: [{
+                type: Output
+            }], create: [{
+                type: Output
+            }], filter: [{
+                type: Output
+            }] } });
+
+const THEAD_COMPONENTS = [
+    ActionsComponent,
+    ActionsTitleComponent,
+    AddButtonComponent,
+    CheckboxSelectAllComponent,
+    ColumnTitleComponent,
+    TitleComponent,
+    TheadFitlersRowComponent,
+    TheadFormRowComponent,
+    TheadTitlesRowComponent,
+    Ng2SmartTableTheadComponent,
+];
+class THeadModule {
+}
+THeadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: THeadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+THeadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: THeadModule, declarations: [ActionsComponent,
+        ActionsTitleComponent,
+        AddButtonComponent,
+        CheckboxSelectAllComponent,
+        ColumnTitleComponent,
+        TitleComponent,
+        TheadFitlersRowComponent,
+        TheadFormRowComponent,
+        TheadTitlesRowComponent,
+        Ng2SmartTableTheadComponent], imports: [CommonModule,
+        FormsModule,
+        FilterModule,
+        CellModule], exports: [ActionsComponent,
+        ActionsTitleComponent,
+        AddButtonComponent,
+        CheckboxSelectAllComponent,
+        ColumnTitleComponent,
+        TitleComponent,
+        TheadFitlersRowComponent,
+        TheadFormRowComponent,
+        TheadTitlesRowComponent,
+        Ng2SmartTableTheadComponent] });
+THeadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: THeadModule, imports: [CommonModule,
+        FormsModule,
+        FilterModule,
+        CellModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: THeadModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        FilterModule,
+                        CellModule,
+                    ],
+                    declarations: [
+                        ...THEAD_COMPONENTS,
+                    ],
+                    exports: [
+                        ...THEAD_COMPONENTS,
+                    ],
+                }]
+        }] });
 
 class Ng2SmartTableComponent {
     constructor() {
@@ -3038,15 +2965,17 @@ class Ng2SmartTableComponent {
         this.editConfirm = new EventEmitter();
         this.createConfirm = new EventEmitter();
         this.rowHover = new EventEmitter();
+        this.tableClass = '';
+        this.tableId = '';
+        this.perPageSelect = [];
+        this.isHideHeader = false;
+        this.isHideSubHeader = false;
+        this.isPagerDisplay = false;
+        this.rowClassFunction = () => '';
         this.defaultSettings = {
             mode: 'inline',
             selectMode: 'single',
-            /**
-             * Points to an element in all data
-             *
-             * when < 0 all lines must be deselected
-             */
-            selectedRowIndex: 0,
+            selectedRowIndex: -1,
             switchPageToSelectedRowPage: false,
             hideHeader: false,
             hideSubHeader: false,
@@ -3085,11 +3014,7 @@ class Ng2SmartTableComponent {
             },
             noDataMessage: 'No data found',
             columns: {},
-            pager: {
-                display: true,
-                page: 1,
-                perPage: 10,
-            },
+            pager: false,
             rowClassFunction: () => '',
         };
     }
@@ -3110,10 +3035,9 @@ class Ng2SmartTableComponent {
         this.tableClass = this.grid.getSetting('attr.class');
         this.isHideHeader = this.grid.getSetting('hideHeader');
         this.isHideSubHeader = this.grid.getSetting('hideSubHeader');
-        this.isPagerDisplay = this.grid.getSetting('pager.display');
-        this.isPagerDisplay = this.grid.getSetting('pager.display');
+        this.isPagerDisplay = this.grid.getSetting('pager.display', false);
         this.perPageSelect = this.grid.getSetting('pager.perPageSelect');
-        this.rowClassFunction = this.grid.getSetting('rowClassFunction');
+        this.rowClassFunction = this.grid.getSetting('rowClassFunction', () => '');
     }
     multipleSelectRow(row) {
         this.grid.multipleSelectRow(row);
@@ -3132,7 +3056,7 @@ class Ng2SmartTableComponent {
         this.grid = new Grid(this.source, this.prepareSettings());
     }
     prepareSource() {
-        if (this.source instanceof DataSource) {
+        if (this.source instanceof LocalDataSource) {
             return this.source;
         }
         return new LocalDataSource();
@@ -3143,7 +3067,7 @@ class Ng2SmartTableComponent {
     emitUserSelectRow(row) {
         this.multiRowSelect.emit({
             data: row ? row.getData() : null,
-            isSelected: row ? row.getIsSelected() : null,
+            isSelected: row ? row.getIsSelected() : false,
             source: this.source,
             selected: this.grid.dataSet.getSelectedRowsData(),
         });
@@ -3229,117 +3153,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
-class ServerSourceConf {
-    constructor({ endPoint = '', sortFieldKey = '', sortDirKey = '', pagerPageKey = '', pagerLimitKey = '', filterFieldKey = '', totalKey = '', dataKey = '' } = {}) {
-        this.endPoint = endPoint ? endPoint : '';
-        this.sortFieldKey = sortFieldKey ? sortFieldKey : ServerSourceConf.SORT_FIELD_KEY;
-        this.sortDirKey = sortDirKey ? sortDirKey : ServerSourceConf.SORT_DIR_KEY;
-        this.pagerPageKey = pagerPageKey ? pagerPageKey : ServerSourceConf.PAGER_PAGE_KEY;
-        this.pagerLimitKey = pagerLimitKey ? pagerLimitKey : ServerSourceConf.PAGER_LIMIT_KEY;
-        this.filterFieldKey = filterFieldKey ? filterFieldKey : ServerSourceConf.FILTER_FIELD_KEY;
-        this.totalKey = totalKey ? totalKey : ServerSourceConf.TOTAL_KEY;
-        this.dataKey = dataKey ? dataKey : ServerSourceConf.DATA_KEY;
-    }
-}
-ServerSourceConf.SORT_FIELD_KEY = '_sort';
-ServerSourceConf.SORT_DIR_KEY = '_order';
-ServerSourceConf.PAGER_PAGE_KEY = '_page';
-ServerSourceConf.PAGER_LIMIT_KEY = '_limit';
-ServerSourceConf.FILTER_FIELD_KEY = '#field#_like';
-ServerSourceConf.TOTAL_KEY = 'x-total-count';
-ServerSourceConf.DATA_KEY = '';
-
-class ServerDataSource extends LocalDataSource {
-    constructor(http, conf = {}) {
-        super();
-        this.http = http;
-        this.lastRequestCount = 0;
-        this.conf = new ServerSourceConf(conf);
-        if (!this.conf.endPoint) {
-            throw new Error('At least endPoint must be specified as a configuration of the server data source.');
-        }
-    }
-    count() {
-        return this.lastRequestCount;
-    }
-    getElements() {
-        return this.requestElements()
-            .pipe(map(res => {
-            this.lastRequestCount = this.extractTotalFromResponse(res);
-            this.data = this.extractDataFromResponse(res);
-            return this.data;
-        })).toPromise();
-    }
-    /**
-     * Extracts array of data from server response
-     * @param res
-     * @returns {any}
-     */
-    extractDataFromResponse(res) {
-        const rawData = res.body;
-        const data = !!this.conf.dataKey ? getDeepFromObject(rawData, this.conf.dataKey, []) : rawData;
-        if (data instanceof Array) {
-            return data;
-        }
-        throw new Error(`Data must be an array.
-    Please check that data extracted from the server response by the key '${this.conf.dataKey}' exists and is array.`);
-    }
-    /**
-     * Extracts total rows count from the server response
-     * Looks for the count in the heders first, then in the response body
-     * @param res
-     * @returns {any}
-     */
-    extractTotalFromResponse(res) {
-        if (res.headers.has(this.conf.totalKey)) {
-            return +res.headers.get(this.conf.totalKey);
-        }
-        else {
-            const rawData = res.body;
-            return getDeepFromObject(rawData, this.conf.totalKey, 0);
-        }
-    }
-    requestElements() {
-        let httpParams = this.createRequesParams();
-        return this.http.get(this.conf.endPoint, { params: httpParams, observe: 'response' });
-    }
-    createRequesParams() {
-        let httpParams = new HttpParams();
-        httpParams = this.addSortRequestParams(httpParams);
-        httpParams = this.addFilterRequestParams(httpParams);
-        return this.addPagerRequestParams(httpParams);
-    }
-    addSortRequestParams(httpParams) {
-        if (this.sortConf) {
-            this.sortConf.forEach((fieldConf) => {
-                httpParams = httpParams.set(this.conf.sortFieldKey, fieldConf.field);
-                httpParams = httpParams.set(this.conf.sortDirKey, fieldConf.direction.toUpperCase());
-            });
-        }
-        return httpParams;
-    }
-    addFilterRequestParams(httpParams) {
-        if (this.filterConf.filters) {
-            this.filterConf.filters.forEach((fieldConf) => {
-                if (fieldConf['search']) {
-                    httpParams = httpParams.set(this.conf.filterFieldKey.replace('#field#', fieldConf['field']), fieldConf['search']);
-                }
-            });
-        }
-        return httpParams;
-    }
-    addPagerRequestParams(httpParams) {
-        if (this.pagingConf && this.pagingConf['page'] && this.pagingConf['perPage']) {
-            httpParams = httpParams.set(this.conf.pagerPageKey, this.pagingConf['page']);
-            httpParams = httpParams.set(this.conf.pagerLimitKey, this.pagingConf['perPage']);
-        }
-        return httpParams;
-    }
-}
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { Cell, DefaultEditor, DefaultFilter, LocalDataSource, Ng2SmartTableComponent, Ng2SmartTableModule, ServerDataSource };
+export { Cell, DefaultEditor, DefaultFilter, LocalDataSource, Ng2SmartTableComponent, Ng2SmartTableModule };
 //# sourceMappingURL=den4ik92-ng2-smart-table.mjs.map