@den4ik92/ng2-smart-table 19.1.6 → 19.2.1

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

@@ -1,53 +1,65 @@
 import * as i0 from '@angular/core';
-import { input, Component, output, Input, signal, effect, computed, inject, ElementRef, Directive, ViewContainerRef, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { input, Component, output, signal, effect, computed, inject, ElementRef, Directive, ViewContainerRef, ViewChild, ChangeDetectionStrategy, Input, ChangeDetectorRef, DestroyRef } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { distinctUntilChanged, debounceTime, takeUntil, switchMap, map } from 'rxjs/operators';
 import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { Subject } from 'rxjs';
-import { takeUntil, debounceTime, distinctUntilChanged, skip } from 'rxjs/operators';
 import { moveItemInArray, CdkDropList, CdkDrag, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
-import * as i1 from '@angular/forms';
-import { FormsModule, UntypedFormControl, ReactiveFormsModule, NgControl } from '@angular/forms';
 import { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
-class DefaultEditor {
+class BaseEditorComponent {
     constructor() {
         this.cell = input.required();
-        this.inputClass = input("");
+        this.inputClass = input('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: DefaultEditor, isStandalone: true, selector: "ng2-default-editor-base-component", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "", isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: BaseEditorComponent, isStandalone: true, selector: "ng2-editor-base-component", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseEditorComponent, decorators: [{
             type: Component,
-            args: [{ template: "", selector: 'ng2-default-editor-base-component' }]
+            args: [{ template: '', selector: 'ng2-editor-base-component' }]
         }] });
 
-class DefaultFilter {
+class BaseFilterComponent {
     constructor() {
         this.delay = 300;
-        this.query = '';
+        this.query = input('');
         this.inputClass = input('');
         this.source = input.required();
         this.column = input.required();
         this.filter = output();
+        this.inputControl = new UntypedFormControl();
     }
     ngOnDestroy() {
         if (this.changesSubscription) {
             this.changesSubscription.unsubscribe();
         }
     }
-    setFilter() {
-        this.filter.emit(this.query);
+    ngOnInit() {
+        this.changesSubscription = this.inputControl.valueChanges
+            .pipe(distinctUntilChanged(), debounceTime(this.delay))
+            .subscribe((value) => {
+            this.setFilter(value);
+        });
+    }
+    ngOnChanges({ query }) {
+        if (query) {
+            this.inputControl.setValue(query.currentValue, { emitEvent: false });
+        }
+    }
+    setFilter(query) {
+        this.filter.emit(query);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultFilter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: DefaultFilter, isStandalone: true, selector: "ng2-default-base-filter-component", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: false, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: BaseFilterComponent, isStandalone: true, selector: "ng2-base-filter-component", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filter: "filter" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultFilter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseFilterComponent, decorators: [{
             type: Component,
-            args: [{ template: '', selector: 'ng2-default-base-filter-component' }]
-        }], propDecorators: { query: [{
-                type: Input
-            }] } });
+            args: [{ template: '', selector: 'ng2-base-filter-component' }]
+        }] });
 
 /**
  * Extending object that entered in first argument.
@@ -166,7 +178,7 @@ function getLocalStorage(key) {
 
 class TableColumnsEditorComponent {
     constructor() {
-        this.infoText = "You can drag and drop columns as you wish and also disable unnecessary ones.";
+        this.infoText = 'You can drag and drop columns as you wish and also disable unnecessary ones.';
         this.grid = input();
         this.close = input.required();
         this.currentState = [];
@@ -200,7 +212,7 @@ class TableColumnsEditorComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TableColumnsEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: "ng2-table-columns-editor", imports: [CdkDropList, CdkDrag, CdkDragPlaceholder], template: "<div class=\"sort-card\">\n  <div class=\"sort-card-header\">\n    <h6>Table columns setup</h6>\n  </div>\n  <div class=\"sort-card-body\">\n    <div\n      class=\"list\"\n      cdkDropList\n      [cdkDropListData]=\"currentState\"\n      (cdkDropListDropped)=\"drop($event)\"\n    >\n      @for (column of currentState; track column.key + i; let i = $index) {\n\n      <div\n        cdkDrag\n        [cdkDragLockAxis]=\"'y'\"\n        [cdkDragStartDelay]=\"300\"\n        [cdkDragDisabled]=\"column.moveDisabled\"\n        class=\"drag-row\"\n        #dragRow\n        [style.--drag-row-height]=\"50\"\n      >\n        <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n        <div class=\"index-cell\">\n          {{ i + 1 }}\n        </div>\n        <label class=\"sort-column-checkbox-wrap\" [for]=\"'sort-column-checkbox-' + i\">\n          <span></span>\n          <input\n            [disabled]=\"column.moveDisabled\"\n            [id]=\"'sort-column-checkbox-' + i\"\n            title=\"Active state. If checked the column will be displayed\"\n            type=\"checkbox\"\n            class=\"sort-column-checkbox-input\"\n            [checked]=\"!column.hide\"\n            (change)=\"setVisibility(i)\"\n          />\n          <span></span>\n        </label>\n        {{ column.title }}\n      </div>\n      }\n    </div>\n  </div>\n  @if (stateHasChanged()) {\n  <div class=\"sort-card-footer\">\n    <button class=\"reset-button\" (click)=\"resetChanges()\">reset</button>\n    <button class=\"update-button\" (click)=\"setAndUpdate()\">Update</button>\n  </div>\n  }\n</div>\n", styles: [".list{overflow:auto;display:flex;flex-direction:column;gap:.3rem;max-height:100%}.drag-row{border:solid 1px var(--drag-row-border-color, #ccc);border-radius:.3rem;display:flex;align-items:center;box-sizing:border-box;cursor:grab;background:var(--drag-row-background, #ffffff);box-shadow:0 0 6px 1px #ebebeb33}.drag-row.cdk-drag-disabled{filter:opacity(.5);cursor:not-allowed}.drag-row .index-cell{min-width:2.2rem;border-right:1px solid var(--drag-row-border-color, #ccc)}.drag-row>div{padding:.3rem}.drag-row .sort-column-checkbox-wrap{margin:0 .5rem}.cdk-drag-preview{box-sizing:border-box;border-radius:.3rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list.cdk-drop-list-dragging .drag-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-placeholder{background:var(--drag-placeholder-background, #ccc);border:dotted 3px #999;min-height:var(--drag-row-heightpx, 2.5rem);transition:transform .25s cubic-bezier(0,0,.2,1)}.overlay-card nb-card-body{padding:.25rem;max-height:100%}.sort-card{box-shadow:0 0 6px 1px #0003;min-width:18rem;padding:.25rem;max-height:80dvh;background:var(--sort-card-background, #ffffff);border-radius:.5rem}.sort-card .sort-card-header{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--sort-card-header-divider-color, #edf1f7)}.sort-card .sort-card-header h6{margin:0}.sort-card .sort-card-body{padding:.5rem 0}.sort-card .sort-card-footer{border-top:1px solid var(--sort-card-header-divider-color, #edf1f7);display:flex;align-items:center;justify-content:end;gap:1rem;padding:1rem}.sort-card .sort-card-footer .update-button,.sort-card .sort-card-footer .reset-button{border-radius:.3rem;padding:.4rem 1rem;border:none;color:#fff;font-size:.875rem;font-weight:700;text-transform:uppercase}.sort-card .sort-card-footer .update-button{background-color:#36f}.sort-card .sort-card-footer .update-button:hover{background-color:#598bff}.sort-card .sort-card-footer .reset-button{background-color:#ff3d71}.sort-card .sort-card-footer .reset-button:hover{background-color:#ff708d}\n"] }]
+            args: [{ selector: 'ng2-table-columns-editor', imports: [CdkDropList, CdkDrag, CdkDragPlaceholder], template: "<div class=\"sort-card\">\n  <div class=\"sort-card-header\">\n    <h6>Table columns setup</h6>\n  </div>\n  <div class=\"sort-card-body\">\n    <div\n      class=\"list\"\n      cdkDropList\n      [cdkDropListData]=\"currentState\"\n      (cdkDropListDropped)=\"drop($event)\"\n    >\n      @for (column of currentState; track column.key + i; let i = $index) {\n\n      <div\n        cdkDrag\n        [cdkDragLockAxis]=\"'y'\"\n        [cdkDragStartDelay]=\"300\"\n        [cdkDragDisabled]=\"column.moveDisabled\"\n        class=\"drag-row\"\n        #dragRow\n        [style.--drag-row-height]=\"50\"\n      >\n        <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n        <div class=\"index-cell\">\n          {{ i + 1 }}\n        </div>\n        <label class=\"sort-column-checkbox-wrap\" [for]=\"'sort-column-checkbox-' + i\">\n          <span></span>\n          <input\n            [disabled]=\"column.moveDisabled\"\n            [id]=\"'sort-column-checkbox-' + i\"\n            title=\"Active state. If checked the column will be displayed\"\n            type=\"checkbox\"\n            class=\"sort-column-checkbox-input\"\n            [checked]=\"!column.hide\"\n            (change)=\"setVisibility(i)\"\n          />\n          <span></span>\n        </label>\n        {{ column.title }}\n      </div>\n      }\n    </div>\n  </div>\n  @if (stateHasChanged()) {\n  <div class=\"sort-card-footer\">\n    <button class=\"reset-button\" (click)=\"resetChanges()\">reset</button>\n    <button class=\"update-button\" (click)=\"setAndUpdate()\">Update</button>\n  </div>\n  }\n</div>\n", styles: [".list{overflow:auto;display:flex;flex-direction:column;gap:.3rem;max-height:100%}.drag-row{border:solid 1px var(--drag-row-border-color, #ccc);border-radius:.3rem;display:flex;align-items:center;box-sizing:border-box;cursor:grab;background:var(--drag-row-background, #ffffff);box-shadow:0 0 6px 1px #ebebeb33}.drag-row.cdk-drag-disabled{filter:opacity(.5);cursor:not-allowed}.drag-row .index-cell{min-width:2.2rem;border-right:1px solid var(--drag-row-border-color, #ccc)}.drag-row>div{padding:.3rem}.drag-row .sort-column-checkbox-wrap{margin:0 .5rem}.cdk-drag-preview{box-sizing:border-box;border-radius:.3rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list.cdk-drop-list-dragging .drag-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-placeholder{background:var(--drag-placeholder-background, #ccc);border:dotted 3px #999;min-height:var(--drag-row-heightpx, 2.5rem);transition:transform .25s cubic-bezier(0,0,.2,1)}.overlay-card nb-card-body{padding:.25rem;max-height:100%}.sort-card{box-shadow:0 0 6px 1px #0003;min-width:18rem;padding:.25rem;max-height:80dvh;background:var(--sort-card-background, #ffffff);border-radius:.5rem}.sort-card .sort-card-header{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--sort-card-header-divider-color, #edf1f7)}.sort-card .sort-card-header h6{margin:0}.sort-card .sort-card-body{padding:.5rem 0}.sort-card .sort-card-footer{border-top:1px solid var(--sort-card-header-divider-color, #edf1f7);display:flex;align-items:center;justify-content:end;gap:1rem;padding:1rem}.sort-card .sort-card-footer .update-button,.sort-card .sort-card-footer .reset-button{border-radius:.3rem;padding:.4rem 1rem;border:none;color:#fff;font-size:.875rem;font-weight:700;text-transform:uppercase}.sort-card .sort-card-footer .update-button{background-color:#36f}.sort-card .sort-card-footer .update-button:hover{background-color:#598bff}.sort-card .sort-card-footer .reset-button{background-color:#ff3d71}.sort-card .sort-card-footer .reset-button:hover{background-color:#ff708d}\n"] }]
         }], ctorParameters: () => [] });
 
 class SmartTableColumnEditorDirective {
@@ -222,9 +234,12 @@ class SmartTableColumnEditorDirective {
         this.overlayRef = this.overlay.create(this.getOverlayConfig());
         const componentPortal = new ComponentPortal(TableColumnsEditorComponent);
         const dropdownRef = this.overlayRef.attach(componentPortal);
-        dropdownRef.setInput("grid", this.grid());
-        dropdownRef.setInput("close", this.hide.bind(this));
-        this.overlayRef?.backdropClick().pipe(takeUntil(this.destroy$)).subscribe(() => this.hide());
+        dropdownRef.setInput('grid', this.grid());
+        dropdownRef.setInput('close', this.hide.bind(this));
+        this.overlayRef
+            ?.backdropClick()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => this.hide());
     }
     hide() {
         this.overlayRef?.detach();
@@ -241,46 +256,46 @@ class SmartTableColumnEditorDirective {
             .withPush(false)
             .withPositions([
             {
-                originX: "center",
-                originY: "bottom",
-                overlayX: "end",
-                overlayY: "top",
+                originX: 'center',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'top',
             },
             {
-                originX: "center",
-                originY: "bottom",
-                overlayX: "center",
-                overlayY: "top",
+                originX: 'center',
+                originY: 'bottom',
+                overlayX: 'center',
+                overlayY: 'top',
             },
             {
-                originX: "center",
-                originY: "bottom",
-                overlayX: "start",
-                overlayY: "top",
+                originX: 'center',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
             },
             {
-                originX: "center",
-                originY: "top",
-                overlayX: "start",
-                overlayY: "bottom",
+                originX: 'center',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
             },
             {
-                originX: "center",
-                originY: "top",
-                overlayX: "center",
-                overlayY: "bottom",
+                originX: 'center',
+                originY: 'top',
+                overlayX: 'center',
+                overlayY: 'bottom',
             },
             {
-                originX: "center",
-                originY: "top",
-                overlayX: "start",
-                overlayY: "bottom",
+                originX: 'center',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
             },
         ]);
         return new OverlayConfig({
             positionStrategy: positionStrategy,
             hasBackdrop: true,
-            backdropClass: "cdk-overlay-transparent-backdrop",
+            backdropClass: 'cdk-overlay-transparent-backdrop',
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SmartTableColumnEditorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -289,9 +304,9 @@ class SmartTableColumnEditorDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SmartTableColumnEditorDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: "[ng2SmartTableColumnEditor]",
+                    selector: '[ng2SmartTableColumnEditor]',
                     host: {
-                        "(click)": "buttclicked()",
+                        '(click)': 'buttclicked()',
                     },
                 }]
         }] });
@@ -316,7 +331,7 @@ class Cell {
         return this.row;
     }
     getValue() {
-        const prepare = this.column.getValuePrepareFunction() || this.prepareValue;
+        const prepare = this.column.valuePrepareFunction || this.prepareValue;
         return prepare.call(null, this.value, this.row.getData(), this);
     }
     getNotPrepareValue() {
@@ -356,36 +371,8 @@ class Column {
         this.isAddable = true;
         this.isFilterable = false;
         this.sortDirection = 'asc';
-        this.defaultSortDirection = false;
         this.editor = false;
         this.filter = false;
-        this.process(this.settings);
-    }
-    getCompareFunction() {
-        return this.compareFunction;
-    }
-    getValuePrepareFunction() {
-        return this.valuePrepareFunction;
-    }
-    getFilterFunction() {
-        return this.filterFunction;
-    }
-    getConfig() {
-        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() {
-        if (this.filter && (this.filter.type === 'checkbox' || this.filter.type === 'custom' || this.filter.type === 'list')) {
-            return this.filter?.config;
-        }
-        return false;
-    }
-    process(settings) {
         this.title = settings.title;
         this.class = settings.class || '';
         this.width = settings.width || '';
@@ -401,17 +388,28 @@ class Column {
             this.renderComponent = settings.renderComponent;
         }
         this.isFilterable = typeof settings.filter === 'undefined' ? true : !!settings['filter'];
-        this.defaultSortDirection = settings?.sortDirection || false;
-        this.isSortable = typeof settings.sort === 'undefined' ? true : settings.sort;
-        this.isEditable = typeof settings.editable === 'undefined' ? true : settings.editable;
-        this.isAddable = typeof settings.addable === 'undefined' ? true : settings.addable;
-        this.sortDirection = this.prepareSortDirection();
+        this.isSortable = settings.sort ?? true;
+        this.isEditable = settings.editable ?? true;
+        this.isAddable = settings.addable ?? false;
+        this.sortDirection = settings.sortDirection || 'asc';
         this.compareFunction = settings.compareFunction;
         this.valuePrepareFunction = settings.valuePrepareFunction;
         this.filterFunction = settings.filterFunction;
     }
-    prepareSortDirection() {
-        return this.defaultSortDirection === 'desc' ? 'desc' : 'asc';
+    getEditorConfig() {
+        if (this.editor) {
+            return this.editor?.config;
+        }
+        return false;
+    }
+    getFilterType() {
+        return this.filter && this.filter.type;
+    }
+    getFilterConfig() {
+        if (this.filter) {
+            return this.filter?.config;
+        }
+        return false;
     }
 }
 
@@ -423,21 +421,19 @@ class Row {
         this.pending = signal(false);
         this.isSelected = signal(false);
         this.isInEditing = signal(false);
-        this.cells = [];
+        this.cells = signal([]);
+        this.visibleCells = computed(() => this.cells().filter((cell) => !cell.getColumn().hide));
         this.process();
     }
     getCell(column) {
-        return this.cells.find(el => el.getColumn() === column);
-    }
-    getCells() {
-        return this.cells;
+        return this.cells().find((el) => el.getColumn() === column);
     }
     getData() {
         return this.data;
     }
     getNewData() {
         const values = Object.assign({}, this.data);
-        this.getCells().forEach((cell) => values[cell.getColumn().id] = cell.newValue);
+        this.cells().forEach((cell) => (values[cell.getColumn().id] = cell.newValue));
         return values;
     }
     setData(data) {
@@ -445,15 +441,15 @@ class Row {
         this.process();
     }
     process() {
-        this.cells = [];
-        this._dataSet.getColumns().forEach((column) => {
-            const cell = this.createCell(column);
-            this.cells.push(cell);
-        });
+        const cells = this._dataSet
+            .getColumns()
+            .map((column) => this.createCell(column));
+        this.cells.set(cells);
     }
     createCell(column) {
-        const defValue = column.settings.defaultValue ? column.settings.defaultValue : '';
-        const value = typeof this.data[column.id] === 'undefined' ? defValue : this.data[column.id];
+        const value = typeof this.data[column.id] === "undefined"
+            ? ""
+            : this.data[column.id];
         return new Cell(value, this, column, this._dataSet);
     }
 }
@@ -470,117 +466,161 @@ var SmartTableOnChangedEventName;
     SmartTableOnChangedEventName["add"] = "add";
     SmartTableOnChangedEventName["remove"] = "remove";
     SmartTableOnChangedEventName["append"] = "append";
+    SmartTableOnChangedEventName["appendMany"] = "appendMany";
     SmartTableOnChangedEventName["prepend"] = "prepend";
     SmartTableOnChangedEventName["refresh"] = "refresh";
+    SmartTableOnChangedEventName["columnRefresh"] = "columnRefresh";
 })(SmartTableOnChangedEventName || (SmartTableOnChangedEventName = {}));
 
 class DataSource {
     constructor() {
         this.onChangedSource = new Subject();
-        this.onAddedSource = new Subject();
-        this.onUpdatedSource = new Subject();
-        this.onRemovedSource = new Subject();
+        this.sortConf = { field: '', direction: 'asc' };
+        this.filters = [];
+        this.pagingConf = signal({
+            page: 1,
+            perPage: 100,
+            total: 0,
+            display: false,
+            perPageSelect: [],
+        });
+        this.data = [];
     }
     refresh() {
-        this.emitOnChanged(SmartTableOnChangedEventName.refresh);
+        this.emitOnChanged({ action: SmartTableOnChangedEventName.refresh });
     }
-    loadEmit() {
-        this.emitOnChanged(SmartTableOnChangedEventName.load);
-        return Promise.resolve(true);
+    columnRefresh() {
+        this.emitOnChanged({ action: SmartTableOnChangedEventName.columnRefresh });
     }
     onChanged() {
         return this.onChangedSource.asObservable();
     }
-    onAdded() {
-        return this.onAddedSource.asObservable();
-    }
-    onUpdated() {
-        return this.onUpdatedSource.asObservable();
-    }
-    onRemoved() {
-        return this.onRemovedSource.asObservable();
-    }
-    prependEmit(element) {
-        this.emitOnAdded(element);
-        this.emitOnChanged(SmartTableOnChangedEventName.prepend);
+    prepend(element) {
+        this.data.unshift(element);
+        this.emitOnChanged({ action: SmartTableOnChangedEventName.prepend, newItems: [element] });
         return Promise.resolve(true);
     }
-    appendEmit(element) {
-        this.emitOnAdded(element);
-        this.emitOnChanged(SmartTableOnChangedEventName.append);
+    appendMany(elements) {
+        this.data = [...this.data, ...elements];
+        this.emitOnChanged({ action: SmartTableOnChangedEventName.appendMany, newItems: elements }, this.data);
         return Promise.resolve(true);
     }
-    addEmit(element) {
-        this.emitOnAdded(element);
-        this.emitOnChanged(SmartTableOnChangedEventName.add);
+    append(element) {
+        this.data.push(element);
+        this.emitOnChanged({ action: SmartTableOnChangedEventName.append, newItems: [element] });
         return Promise.resolve(true);
     }
-    removeEmit(element) {
-        this.emitOnRemoved(element);
-        this.emitOnChanged(SmartTableOnChangedEventName.remove);
+    add(element) {
+        this.data.push(element);
+        this.emitOnChanged({ action: SmartTableOnChangedEventName.add, newItems: [element] });
         return Promise.resolve(true);
     }
-    updateEmit(element) {
-        this.emitOnUpdated(element);
-        this.emitOnChanged(SmartTableOnChangedEventName.update);
+    remove(element) {
+        this.data = this.data.filter((el) => el !== element);
+        this.emitOnChanged({ action: SmartTableOnChangedEventName.remove, item: element }, this.data);
         return Promise.resolve(true);
     }
-    emptyEmit() {
-        this.emitOnChanged(SmartTableOnChangedEventName.empty);
+    update(oldItem, newItem) {
+        this.emitOnChanged({ action: SmartTableOnChangedEventName.update, oldItem, newItem });
         return Promise.resolve(true);
     }
-    setSortEmit() {
-        this.emitOnChanged(SmartTableOnChangedEventName.sort);
-    }
-    setFilterEmit() {
-        this.emitOnChanged(SmartTableOnChangedEventName.filter);
-    }
-    addFilterEmit() {
-        this.emitOnChanged(SmartTableOnChangedEventName.filter);
-    }
-    setPagingEmit() {
-        this.emitOnChanged(SmartTableOnChangedEventName.paging);
+    empty() {
+        this.data = [];
+        this.emitOnChanged({ action: SmartTableOnChangedEventName.empty });
+        return Promise.resolve(true);
     }
-    setPageEmit() {
-        this.emitOnChanged(SmartTableOnChangedEventName.page);
+    setSort(conf, doEmit = true) {
+        this.sortConf = conf;
+        this.pagingConf.update((old) => ({ ...old, page: 1 }));
+        if (doEmit) {
+            this.emitOnChanged({ action: SmartTableOnChangedEventName.sort });
+        }
     }
-    emitOnRemoved(element) {
-        this.onRemovedSource.next(element);
+    addFilter(newFilter, doEmit = true) {
+        if (!newFilter.field) {
+            return;
+        }
+        const foundIndex = this.filters.findIndex((filter) => filter.field === newFilter.field);
+        if (foundIndex === -1) {
+            if (newFilter.search) {
+                this.filters.push(newFilter);
+            }
+        }
+        else {
+            if (newFilter.search) {
+                this.filters[foundIndex].search = newFilter.search;
+            }
+            else {
+                this.filters.splice(foundIndex, 1);
+            }
+        }
+        this.pagingConf.update((old) => ({ ...old, page: 1 }));
+        if (doEmit) {
+            this.emitOnChanged({ action: SmartTableOnChangedEventName.filter });
+        }
     }
-    emitOnUpdated(element) {
-        this.onUpdatedSource.next(element);
+    setFilters(newFilters, doEmit = true) {
+        this.filters = [...newFilters];
+        this.pagingConf.update((old) => ({ ...old, page: 1 }));
+        if (doEmit) {
+            this.emitOnChanged({ action: SmartTableOnChangedEventName.filter });
+        }
     }
-    emitOnAdded(element) {
-        this.onAddedSource.next(element);
+    setPaging(page = 1, perPage, doEmit = true) {
+        this.pagingConf.update((old) => ({ ...old, page: page, perPage: perPage }));
+        if (doEmit) {
+            this.emitOnChanged({ action: SmartTableOnChangedEventName.paging });
+        }
     }
-    emitOnChanged(action) {
-        this.getElements().then((elements) => this.onChangedSource.next({
-            action: action,
-            elements: elements,
-            paging: this.getPaging(),
-            filter: this.getFilter(),
-            sort: this.getSort(),
-        }));
+    setPage(page, doEmit = true) {
+        this.pagingConf.update((old) => ({ ...old, page: page }));
+        if (doEmit) {
+            this.emitOnChanged({ action: SmartTableOnChangedEventName.page });
+        }
+    }
+    emitOnChanged(eventData, newElements) {
+        const actionData = () => {
+            const elements = newElements || this.data;
+            const emitData = {
+                ...eventData,
+                elements,
+                paging: this.pagingConf(),
+                filters: this.getFilters(),
+                sort: this.getSort(),
+            };
+            if (eventData.action === SmartTableOnChangedEventName.remove) {
+                return {
+                    ...emitData,
+                    elements: elements.filter((el) => el !== eventData.item),
+                };
+            }
+            return emitData;
+        };
+        this.onChangedSource.next(actionData());
     }
 }
 
 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);
-        });
-    }
+function isElementSatisfied(element, filters) {
+    return filters.every((filter) => {
+        if (!filter.search?.length) {
+            return true;
+        }
+        const filterFunction = filter.filter || filterValues;
+        try {
+            const value = element[filter.field];
+            return filterFunction(value, filter.search);
+        }
+        catch {
+            return false;
+        }
+    });
 }
 
-class LocalPager {
-    static paginate(data, page, perPage) {
-        return data.slice(perPage * (page - 1), perPage * page);
-    }
+function paginateList(data, page, perPage) {
+    return [...data].slice(perPage * (page - 1), perPage * page);
 }
 
 function compareValues(direction, a, b) {
@@ -605,66 +645,26 @@ class LocalSorter {
 class LocalDataSource extends DataSource {
     constructor(data = []) {
         super();
-        this.data = [];
-        this.filteredAndSorted = [];
-        this.sortConf = [];
-        this.filterConf = {
-            filters: [],
-            andOperator: true,
-        };
-        this.pagingConf = false;
+        this.filteredAndSorted = signal([]);
+        this.count = computed(() => this.filteredAndSorted().length);
         this.data = data;
     }
     load(data) {
         this.data = data;
-        return super.loadEmit();
+        this.emitOnChanged({ action: SmartTableOnChangedEventName.load });
+        return Promise.resolve(true);
     }
     prepend(element) {
         this.reset(true);
-        this.data.unshift(element);
-        return super.prependEmit(element);
+        return super.prepend(element);
     }
     appendMany(elements) {
         this.reset(true);
-        this.data = [...this.data, ...elements];
-        return super.loadEmit();
+        return super.appendMany(elements);
     }
     append(element) {
         this.reset(true);
-        this.data.push(element);
-        return super.appendEmit(element);
-    }
-    add(element) {
-        this.data.push(element);
-        return super.addEmit(element);
-    }
-    remove(element) {
-        this.data = this.data.filter(el => el !== element);
-        return super.removeEmit(element);
-    }
-    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);
-        });
-    }
-    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() {
-        const data = this.data.slice(0);
-        this.prepareData(data);
-        return Promise.resolve(this.filteredAndSorted);
+        return super.append(element);
     }
     getAll() {
         const data = this.data.slice(0);
@@ -672,552 +672,183 @@ class LocalDataSource extends DataSource {
     }
     reset(silent = false) {
         if (silent) {
-            this.filterConf = {
-                filters: [],
-                andOperator: true,
-            };
-            this.sortConf = [];
-            if (this.pagingConf) {
-                this.pagingConf.page = 1;
-            }
+            this.filters = [];
+            this.sortConf = { field: '', direction: 'asc' };
+            this.pagingConf.update((old) => ({ ...old, page: 1 }));
         }
         else {
-            this.setFilter([], true, false);
-            this.setSort([], false);
-            if (this.pagingConf) {
+            this.setFilters([], false);
+            this.setSort({ field: '', direction: 'asc' }, false);
+            if (this.pagingConf().display) {
                 this.setPage(1);
             }
         }
     }
-    empty() {
-        this.data = [];
-        return super.emptyEmit();
-    }
-    count() {
-        return this.filteredAndSorted.length;
-    }
-    /**
-     *
-     * 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;
-        }
-        if (doEmit) {
-            super.setSortEmit();
-        }
-        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;
-        if (this.pagingConf) {
-            this.pagingConf.page = 1;
-        }
-        if (doEmit) {
-            super.setFilterEmit();
-        }
-        return this;
+    getSort() {
+        return this.sortConf;
     }
-    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;
+    getFilters() {
+        return this.filters;
     }
-    setPaging(page = 1, perPage, doEmit = true) {
-        if (this.pagingConf) {
-            this.pagingConf.page = page;
-            this.pagingConf.perPage = perPage;
+    emitOnChanged(event) {
+        let renderData = this.filteredAndSorted();
+        const action = event.action;
+        if (['filter', 'refresh', 'load'].includes(action)) {
+            renderData = this.filter(this.data.slice(0));
+            this.filteredAndSorted.set(this.sort(renderData));
+            renderData = this.filteredAndSorted();
         }
-        else {
-            this.pagingConf = {
-                page, perPage
-            };
-        }
-        if (doEmit) {
-            super.setPagingEmit();
+        if (['sort', 'filter', 'refresh', 'load'].includes(action)) {
+            this.filteredAndSorted.update((list) => this.sort(list));
+            renderData = this.filteredAndSorted();
         }
-        return;
-    }
-    setPage(page, doEmit = true) {
-        if (!this.pagingConf) {
-            return;
+        if (this.pagingConf().display &&
+            ['page', 'paging', 'refresh', 'load', 'sort', 'filter'].includes(action)) {
+            renderData = this.paginate(this.filteredAndSorted());
         }
-        this.pagingConf.page = page;
-        if (doEmit) {
-            super.setPageEmit();
-        }
-        return;
-    }
-    getSort() {
-        return this.sortConf;
-    }
-    getFilter() {
-        return this.filterConf;
-    }
-    getPaging() {
-        return this.pagingConf;
-    }
-    prepareData(data) {
-        data = this.filter(data);
-        data = this.sort(data);
-        this.filteredAndSorted = data.slice(0);
-        if (this.pagingConf) {
-            return this.paginate(data);
+        super.emitOnChanged(event, renderData);
+        if (this.pagingConf().display && this.isPageOutOfBounce()) {
+            this.setPage(this.pagingConf().page - 1);
         }
-        else
-            return data;
     }
     sort(data) {
         if (this.sortConf) {
-            this.sortConf.forEach((fieldConf) => {
-                data = LocalSorter
-                    .sort(data, fieldConf.field, fieldConf.direction, fieldConf.compare);
-            });
+            data = LocalSorter.sort(data, this.sortConf.field, this.sortConf.direction, this.sortConf.compare);
         }
         return data;
     }
-    // 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;
-                });
-            }
+        if (this.filters.length > 0) {
+            return data.filter((item) => {
+                return isElementSatisfied(item, this.filters);
+            });
         }
         return data;
     }
     paginate(data) {
-        if (this.pagingConf && this.pagingConf.page && this.pagingConf.perPage) {
-            data = LocalPager.paginate(data, this.pagingConf.page, this.pagingConf.perPage);
+        if (this.pagingConf().display) {
+            return paginateList(data, this.pagingConf().page, this.pagingConf().perPage);
         }
         return data;
     }
+    isPageOutOfBounce() {
+        const { page, perPage } = this.pagingConf();
+        return page * perPage >= this.count() + perPage && page > 1;
+    }
 }
 
-class PagerComponent {
-    constructor() {
-        this.perPageSelect = [];
-        this.changePage = output();
-        this.currentPerPage = 0;
-        this.pages = [];
-        this.page = 1;
-        this.count = 0;
-        this.perPage = 0;
+class ServerDataSource extends DataSource {
+    constructor(paramPrepareFunction, requestFunction, initPagingConf) {
+        super();
+        this.initPagingConf = initPagingConf;
+        this.count = computed(() => this.pagingConf().total);
+        this.pagingConf.update((old) => ({ ...old, ...this.initPagingConf }));
+        this.paramPrepareFunction = paramPrepareFunction;
+        this.requestFunction = requestFunction;
     }
-    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();
-            });
-        }
+    getAll() {
+        return Promise.resolve(this.data);
     }
-    /**
-     * 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);
+    getSort() {
+        return this.sortConf;
+    }
+    getFilters() {
+        return this.filters;
+    }
+    emitOnChanged(eventData, newElements) {
+        if ([
+            SmartTableOnChangedEventName.filter,
+            SmartTableOnChangedEventName.sort,
+            SmartTableOnChangedEventName.page,
+            SmartTableOnChangedEventName.paging,
+            SmartTableOnChangedEventName.refresh,
+        ].includes(eventData.action)) {
+            this.paramPrepareFunction({
+                sort: this.sortConf,
+                filters: this.filters,
+                page: this.pagingConf().page,
+                limit: this.pagingConf().perPage,
+            })
+                .pipe(switchMap((params) => this.requestFunction(params)))
+                .subscribe((res) => {
+                this.data = res.data;
+                this.pagingConf.update((old) => ({ ...old, total: res.total }));
+                super.emitOnChanged(eventData, res.data);
+            });
         }
-        if (changes["action"] === "append") {
-            this.source.setPage(this.getLast());
+        else {
+            super.emitOnChanged(eventData, newElements);
         }
     }
-    shouldShow() {
-        return this.source.count() > this.perPage;
+}
+
+class PagerComponent {
+    constructor() {
+        this.source = input.required();
+        this.pagingConf = computed(() => this.source().pagingConf());
+        this.currentPerPage = computed(() => this.pagingConf().perPage);
+        this.currentPage = computed(() => this.pagingConf().page);
+        this.count = computed(() => this.source().count());
+        this.shouldShow = computed(() => this.pagingConf().display && this.count() > this.currentPerPage());
+        this.lastPage = computed(() => Math.ceil(this.count() / this.currentPerPage()));
+        this.pages = computed(() => this.getPages(this.currentPage(), this.lastPage()));
     }
     paginate(page) {
-        this.source.setPage(page);
-        this.page = page;
-        this.changePage.emit({ page });
-        return false;
+        this.source().setPage(page);
     }
     next() {
-        return this.paginate(this.getPage() + 1);
+        this.paginate(this.currentPage() + 1);
     }
     prev() {
-        return this.paginate(this.getPage() - 1);
-    }
-    getPage() {
-        return this.page;
-    }
-    getPages() {
-        return this.pages;
+        this.paginate(this.currentPage() - 1);
     }
-    getLast() {
-        return Math.ceil(this.count / this.perPage);
+    isString(value) {
+        return typeof value === 'string';
     }
-    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);
+    getPages(current, last) {
+        const delta = 2, left = current - delta, right = current + delta + 1, range = [], rangeWithDots = [];
+        let l;
+        for (let i = 1; i <= last; i++) {
+            if (i == 1 || i == last || (i >= left && i < right)) {
+                range.push(i);
             }
         }
-    }
-    onChangePerPage() {
-        const paging = this.source.getPaging();
-        if (paging) {
-            paging.perPage = this.currentPerPage * 1;
+        for (const i of range) {
+            if (l) {
+                if (i - l === 2) {
+                    rangeWithDots.push(l + 1);
+                }
+                else if (i - l !== 1) {
+                    rangeWithDots.push('...');
+                }
+            }
+            rangeWithDots.push(i);
+            l = i;
         }
-        this.source.refresh();
-        this.initPages();
+        return rangeWithDots;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: PagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: PagerComponent, isStandalone: true, selector: "ng2-smart-table-pager", inputs: { source: "source", perPageSelect: "perPageSelect" }, outputs: { changePage: "changePage" }, usesOnChanges: true, ngImport: i0, template: `
-    @if (shouldShow()) {
-    <nav class="ng2-smart-pagination-nav">
-      <ul class="ng2-smart-pagination pagination">
-        <li
-          class="ng2-smart-page-item page-item"
-          [class.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"
-          [class.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>
-        @for (page of getPages(); track page) {
-        <li
-          class="ng2-smart-page-item page-item"
-          [class.active]="getPage() === page"
-        >
-          @if (getPage() === page) {
-          <span class="ng2-smart-page-link page-link"
-            >{{ page }} <span class="sr-only">(current)</span></span
-          >
-          } @if (getPage() !== page) {
-          <a
-            class="ng2-smart-page-link page-link"
-            href="#"
-            (click)="paginate(page)"
-            >{{ page }}</a
-          >
-          }
-        </li>
-        }
-        <li
-          class="ng2-smart-page-item page-item"
-          [class.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"
-          [class.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>
-    } @if (perPageSelect && perPageSelect.length > 0) {
-    <nav class="ng2-smart-pagination-per-page">
-      <label for="per-page"> Per Page: </label>
-      <select
-        (change)="onChangePerPage()"
-        [(ngModel)]="currentPerPage"
-        id="per-page"
-      >
-        @for (item of perPageSelect; track $index) {
-        <option [value]="item">{{ item }}</option>
+    onChangePerPage(target) {
+        if (!target.value) {
+            return;
         }
-      </select>
-    </nav>
+        this.source().setPaging(1, +target.value);
     }
-  `, 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: PagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: PagerComponent, isStandalone: true, selector: "ng2-smart-table-pager", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (shouldShow()) {\n<div class=\"ng2-smart-pagination-wrap\">\n  @if ((pagingConf().perPageSelect?.length || 0) > 0) {\n  <div></div>\n  }\n  <nav class=\"ng2-smart-pagination-nav\">\n    <ul class=\"ng2-smart-pagination pagination\">\n      <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === 1\">\n        <a\n          class=\"ng2-smart-page-link page-link\"\n          href=\"#\"\n          (click)=\"currentPage() === 1 ? false : paginate(1)\"\n          aria-label=\"First\">\n          <span aria-hidden=\"true\">&laquo;</span>\n        </a>\n      </li>\n      <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === 1\">\n        <a\n          class=\"ng2-smart-page-link page-link page-link-prev\"\n          href=\"#\"\n          (click)=\"currentPage() === 1 ? false : prev()\"\n          aria-label=\"Prev\">\n          <span aria-hidden=\"true\">&lt;</span>\n        </a>\n      </li>\n      @for (page of pages(); track $index) {\n      <li class=\"ng2-smart-page-item page-item\" [class.active]=\"currentPage() === page\">\n        @if (currentPage() === page || isString(page)) {\n        <span class=\"ng2-smart-page-link page-link\">{{ page }}</span>\n        } @else {\n        <a class=\"ng2-smart-page-link page-link\" href=\"#\" (click)=\"paginate(page)\">{{ page }}</a>\n        }\n      </li>\n      }\n      <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === lastPage()\">\n        <a\n          class=\"ng2-smart-page-link page-link page-link-next\"\n          href=\"#\"\n          (click)=\"currentPage() === lastPage() ? false : next()\"\n          aria-label=\"Next\">\n          <span aria-hidden=\"true\">&gt;</span>\n        </a>\n      </li>\n      <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === lastPage()\">\n        <a\n          class=\"ng2-smart-page-link page-link\"\n          href=\"#\"\n          (click)=\"currentPage() === lastPage() ? false : paginate(lastPage())\"\n          aria-label=\"Last\">\n          <span aria-hidden=\"true\">&raquo;</span>\n        </a>\n      </li>\n    </ul>\n  </nav>\n  @if ((pagingConf().perPageSelect?.length || 0) > 0) {\n  <nav class=\"ng2-smart-pagination-per-page\">\n    <label for=\"per-page\"> Per Page: </label>\n    <select (change)=\"onChangePerPage($any($event.target))\" [ngModel]=\"currentPerPage()\" id=\"per-page\">\n      @for (item of pagingConf().perPageSelect; track $index) {\n      <option [value]=\"item\">{{ item }}</option>\n      }\n    </select>\n  </nav>\n  }\n</div>\n\n}\n", styles: [".ng2-smart-pagination{display:inline-flex;align-items:center;font-size:.875em;padding:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline;padding:.2rem}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}.ng2-smart-pagination-nav{margin:0 auto}.ng2-smart-pagination-wrap{display:flex;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
-            args: [{ selector: "ng2-smart-table-pager", template: `
-    @if (shouldShow()) {
-    <nav class="ng2-smart-pagination-nav">
-      <ul class="ng2-smart-pagination pagination">
-        <li
-          class="ng2-smart-page-item page-item"
-          [class.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"
-          [class.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>
-        @for (page of getPages(); track page) {
-        <li
-          class="ng2-smart-page-item page-item"
-          [class.active]="getPage() === page"
-        >
-          @if (getPage() === page) {
-          <span class="ng2-smart-page-link page-link"
-            >{{ page }} <span class="sr-only">(current)</span></span
-          >
-          } @if (getPage() !== page) {
-          <a
-            class="ng2-smart-page-link page-link"
-            href="#"
-            (click)="paginate(page)"
-            >{{ page }}</a
-          >
-          }
-        </li>
-        }
-        <li
-          class="ng2-smart-page-item page-item"
-          [class.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"
-          [class.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>
-    } @if (perPageSelect && perPageSelect.length > 0) {
-    <nav class="ng2-smart-pagination-per-page">
-      <label for="per-page"> Per Page: </label>
-      <select
-        (change)="onChangePerPage()"
-        [(ngModel)]="currentPerPage"
-        id="per-page"
-      >
-        @for (item of perPageSelect; track $index) {
-        <option [value]="item">{{ item }}</option>
-        }
-      </select>
-    </nav>
-    }
-  `, standalone: true, imports: [FormsModule], 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
-            }] } });
-
-class EditCellDefaultComponent {
-    constructor() {
-        this.cell = input.required();
-        this.inputClass = input('');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EditCellDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: EditCellDefaultComponent, isStandalone: true, selector: "ng2-edit-cell-default-base-component", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EditCellDefaultComponent, decorators: [{
-            type: Component,
-            args: [{ template: '', selector: 'ng2-edit-cell-default-base-component' }]
+            args: [{ selector: 'ng2-smart-table-pager', standalone: true, imports: [FormsModule], template: "@if (shouldShow()) {\n<div class=\"ng2-smart-pagination-wrap\">\n  @if ((pagingConf().perPageSelect?.length || 0) > 0) {\n  <div></div>\n  }\n  <nav class=\"ng2-smart-pagination-nav\">\n    <ul class=\"ng2-smart-pagination pagination\">\n      <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === 1\">\n        <a\n          class=\"ng2-smart-page-link page-link\"\n          href=\"#\"\n          (click)=\"currentPage() === 1 ? false : paginate(1)\"\n          aria-label=\"First\">\n          <span aria-hidden=\"true\">&laquo;</span>\n        </a>\n      </li>\n      <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === 1\">\n        <a\n          class=\"ng2-smart-page-link page-link page-link-prev\"\n          href=\"#\"\n          (click)=\"currentPage() === 1 ? false : prev()\"\n          aria-label=\"Prev\">\n          <span aria-hidden=\"true\">&lt;</span>\n        </a>\n      </li>\n      @for (page of pages(); track $index) {\n      <li class=\"ng2-smart-page-item page-item\" [class.active]=\"currentPage() === page\">\n        @if (currentPage() === page || isString(page)) {\n        <span class=\"ng2-smart-page-link page-link\">{{ page }}</span>\n        } @else {\n        <a class=\"ng2-smart-page-link page-link\" href=\"#\" (click)=\"paginate(page)\">{{ page }}</a>\n        }\n      </li>\n      }\n      <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === lastPage()\">\n        <a\n          class=\"ng2-smart-page-link page-link page-link-next\"\n          href=\"#\"\n          (click)=\"currentPage() === lastPage() ? false : next()\"\n          aria-label=\"Next\">\n          <span aria-hidden=\"true\">&gt;</span>\n        </a>\n      </li>\n      <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === lastPage()\">\n        <a\n          class=\"ng2-smart-page-link page-link\"\n          href=\"#\"\n          (click)=\"currentPage() === lastPage() ? false : paginate(lastPage())\"\n          aria-label=\"Last\">\n          <span aria-hidden=\"true\">&raquo;</span>\n        </a>\n      </li>\n    </ul>\n  </nav>\n  @if ((pagingConf().perPageSelect?.length || 0) > 0) {\n  <nav class=\"ng2-smart-pagination-per-page\">\n    <label for=\"per-page\"> Per Page: </label>\n    <select (change)=\"onChangePerPage($any($event.target))\" [ngModel]=\"currentPerPage()\" id=\"per-page\">\n      @for (item of pagingConf().perPageSelect; track $index) {\n      <option [value]=\"item\">{{ item }}</option>\n      }\n    </select>\n  </nav>\n  }\n</div>\n\n}\n", styles: [".ng2-smart-pagination{display:inline-flex;align-items:center;font-size:.875em;padding:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline;padding:.2rem}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}.ng2-smart-pagination-nav{margin:0 auto}.ng2-smart-pagination-wrap{display:flex;align-items:center;justify-content:space-between}\n"] }]
         }] });
 
-class CustomEditComponent extends EditCellDefaultComponent {
-    ngOnChanges(changes) {
-        const editor = this.cell().getColumn().editor;
-        if (this.customComponent) {
-            if (this.customComponent?.instance && 'ngOnChanges' in this.customComponent.instance) {
-                const onChanges = this.customComponent.instance.ngOnChanges;
-                onChanges(changes);
-            }
-            return;
-        }
-        if (this.cell() &&
-            !this.customComponent &&
-            editor &&
-            editor.type == "custom") {
-            this.customComponent = this.dynamicTarget?.createComponent(editor.component);
-            this.customComponent?.setInput('cell', this.cell());
-            this.customComponent?.setInput('inputClass', this.inputClass());
-        }
-    }
-    ngOnDestroy() {
-        if (this.customComponent) {
-            this.customComponent.destroy();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: CustomEditComponent, isStandalone: true, selector: "ng2-table-cell-custom-editor", 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: "19.0.3", ngImport: i0, type: CustomEditComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "ng2-table-cell-custom-editor",
-                    template: ` <ng-template #dynamicTarget></ng-template> `,
-                    standalone: true,
-                }]
-        }], propDecorators: { dynamicTarget: [{
-                type: ViewChild,
-                args: ["dynamicTarget", { read: ViewContainerRef, static: true }]
-            }] } });
-
-class CheckboxEditorComponent extends DefaultEditor {
+class CheckboxEditorComponent extends BaseEditorComponent {
     constructor() {
         super();
         this.trueVal = computed(() => {
-            return this.cell().getColumn().getConfig()?.true || true;
+            return this.cell().getColumn().getEditorConfig()?.true || true;
         });
         this.falseVal = computed(() => {
-            return this.cell().getColumn().getConfig()?.false || false;
+            return this.cell().getColumn().getEditorConfig()?.false || false;
         });
     }
     onChange(event) {
@@ -1232,15 +863,12 @@ class CheckboxEditorComponent extends DefaultEditor {
       [name]="cell().getId()"
       [disabled]="!cell().isEditable()"
       (change)="onChange($event)"
-      [checked]="
-        cell().getValue() === trueVal()
-      "
-    />
+      [checked]="cell().getValue() === trueVal()" />
   `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: "ng2-checkbox-editor", template: `
+            args: [{ selector: 'ng2-checkbox-editor', template: `
     <input
       [class]="inputClass()"
       type="checkbox"
@@ -1248,18 +876,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
       [name]="cell().getId()"
       [disabled]="!cell().isEditable()"
       (change)="onChange($event)"
-      [checked]="
-        cell().getValue() === trueVal()
-      "
-    />
+      [checked]="cell().getValue() === trueVal()" />
   `, standalone: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
         }], ctorParameters: () => [] });
 
-class InputEditorComponent extends DefaultEditor {
-    constructor() {
-        super();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+class InputEditorComponent extends BaseEditorComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: InputEditorComponent, isStandalone: true, selector: "ng2-input-editor", usesInheritance: true, ngImport: i0, template: `
     <input
       [class]="inputClass()"
@@ -1267,42 +889,33 @@ class InputEditorComponent extends DefaultEditor {
       [(ngModel)]="cell().newValue"
       [name]="cell().getId()"
       [placeholder]="cell().getTitle()"
-      [disabled]="!cell().isEditable()"
-    />
+      [disabled]="!cell().isEditable()" />
   `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: "ng2-input-editor", template: `
+            args: [{ selector: 'ng2-input-editor', template: `
     <input
       [class]="inputClass()"
       class="form-control"
       [(ngModel)]="cell().newValue"
       [name]="cell().getId()"
       [placeholder]="cell().getTitle()"
-      [disabled]="!cell().isEditable()"
-    />
+      [disabled]="!cell().isEditable()" />
   `, standalone: true, imports: [FormsModule], styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
-        }], ctorParameters: () => [] });
+        }] });
 
-class SelectEditorComponent extends DefaultEditor {
-    constructor() {
-        super();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+class SelectEditorComponent extends BaseEditorComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: SelectEditorComponent, isStandalone: true, selector: "ng2-select-editor", usesInheritance: true, ngImport: i0, template: `
     <select
       [class]="inputClass()"
       class="form-control"
       [(ngModel)]="cell().newValue"
       [name]="cell().getId()"
-      [disabled]="!cell().isEditable()"
-    >
-      @for (option of cell().getColumn().getConfig()?.list; track $index) {
-      <option
-        [value]="option.value"
-        [selected]="option.value === cell().getValue()"
-      >
+      [disabled]="!cell().isEditable()">
+      @for (option of cell().getColumn().getEditorConfig()?.list; track $index) {
+      <option [value]="option.value" [selected]="option.value === cell().getValue()">
         {{ option.title }}
       </option>
       }
@@ -1312,20 +925,16 @@ class SelectEditorComponent extends DefaultEditor {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectEditorComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "ng2-select-editor",
+                    selector: 'ng2-select-editor',
                     template: `
     <select
       [class]="inputClass()"
       class="form-control"
       [(ngModel)]="cell().newValue"
       [name]="cell().getId()"
-      [disabled]="!cell().isEditable()"
-    >
-      @for (option of cell().getColumn().getConfig()?.list; track $index) {
-      <option
-        [value]="option.value"
-        [selected]="option.value === cell().getValue()"
-      >
+      [disabled]="!cell().isEditable()">
+      @for (option of cell().getColumn().getEditorConfig()?.list; track $index) {
+      <option [value]="option.value" [selected]="option.value === cell().getValue()">
         {{ option.title }}
       </option>
       }
@@ -1334,13 +943,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     standalone: true,
                     imports: [FormsModule],
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
-class TextareaEditorComponent extends DefaultEditor {
-    constructor() {
-        super();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TextareaEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+class TextareaEditorComponent extends BaseEditorComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TextareaEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: TextareaEditorComponent, isStandalone: true, selector: "ng2-textarea-editor", usesInheritance: true, ngImport: i0, template: `
     <textarea
       [class]="inputClass()"
@@ -1348,98 +954,117 @@ class TextareaEditorComponent extends DefaultEditor {
       [(ngModel)]="cell().newValue"
       [name]="cell().getId()"
       [disabled]="!cell().isEditable()"
-      [placeholder]="cell().getTitle()"
-    >
+      [placeholder]="cell().getTitle()">
     </textarea>
   `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TextareaEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: "ng2-textarea-editor", template: `
+            args: [{ selector: 'ng2-textarea-editor', template: `
     <textarea
       [class]="inputClass()"
       class="form-control"
       [(ngModel)]="cell().newValue"
       [name]="cell().getId()"
       [disabled]="!cell().isEditable()"
-      [placeholder]="cell().getTitle()"
-    >
+      [placeholder]="cell().getTitle()">
     </textarea>
   `, standalone: true, imports: [FormsModule], styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
-        }], ctorParameters: () => [] });
+        }] });
 
-class DefaultEditComponent extends EditCellDefaultComponent {
+class BuildInEditorComponent extends BaseEditorComponent {
     constructor() {
-        super();
+        super(...arguments);
+        this.editorType = computed(() => {
+            const editor = this.cell().getColumn().editor;
+            if (editor) {
+                return editor.type || 'text';
+            }
+            return 'text';
+        });
     }
-    getEditorType() {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BuildInEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: BuildInEditorComponent, isStandalone: true, selector: "ng2-table-cell-build-in-editor", usesInheritance: true, ngImport: i0, template: "<div role=\"none\" (click)=\"$event.stopPropagation()\">\n  @switch (editorType()) {\n    @case ('list') {\n      <ng2-select-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </ng2-select-editor>\n    }\n    @case ('textarea') {\n      <ng2-textarea-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </ng2-textarea-editor>\n    }\n    @case ('checkbox') {\n      <ng2-checkbox-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </ng2-checkbox-editor>\n    }\n    @default {\n      <ng2-input-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n    </ng2-input-editor>\n  }\n}\n</div>", dependencies: [{ kind: "component", type: SelectEditorComponent, selector: "ng2-select-editor" }, { kind: "component", type: TextareaEditorComponent, selector: "ng2-textarea-editor" }, { kind: "component", type: CheckboxEditorComponent, selector: "ng2-checkbox-editor" }, { kind: "component", type: InputEditorComponent, selector: "ng2-input-editor" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BuildInEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng2-table-cell-build-in-editor', imports: [SelectEditorComponent, TextareaEditorComponent, CheckboxEditorComponent, InputEditorComponent], standalone: true, template: "<div role=\"none\" (click)=\"$event.stopPropagation()\">\n  @switch (editorType()) {\n    @case ('list') {\n      <ng2-select-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </ng2-select-editor>\n    }\n    @case ('textarea') {\n      <ng2-textarea-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </ng2-textarea-editor>\n    }\n    @case ('checkbox') {\n      <ng2-checkbox-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </ng2-checkbox-editor>\n    }\n    @default {\n      <ng2-input-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n    </ng2-input-editor>\n  }\n}\n</div>" }]
+        }] });
+
+class CustomEditComponent extends BaseEditorComponent {
+    ngOnChanges(changes) {
         const editor = this.cell().getColumn().editor;
-        if (editor) {
-            return editor.type || "text";
+        if (this.customComponent) {
+            if (this.customComponent?.instance && 'ngOnChanges' in this.customComponent.instance) {
+                const onChanges = this.customComponent.instance.ngOnChanges;
+                onChanges(changes);
+            }
+            return;
+        }
+        if (this.cell() && !this.customComponent && editor && editor.type == 'custom') {
+            this.customComponent = this.dynamicTarget?.createComponent(editor.component);
+            this.customComponent?.setInput('cell', this.cell());
+            this.customComponent?.setInput('inputClass', this.inputClass());
+        }
+    }
+    ngOnDestroy() {
+        if (this.customComponent) {
+            this.customComponent.destroy();
         }
-        return "text";
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: DefaultEditComponent, isStandalone: true, selector: "ng2-table-cell-default-editor", usesInheritance: true, ngImport: i0, template: "<div role=\"none\" (click)=\"$event.stopPropagation()\">\n  @switch (getEditorType()) {\n    @case ('list') {\n      <ng2-select-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </ng2-select-editor>\n    }\n    @case ('textarea') {\n      <ng2-textarea-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </ng2-textarea-editor>\n    }\n    @case ('checkbox') {\n      <ng2-checkbox-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </ng2-checkbox-editor>\n    }\n    @default {\n      <ng2-input-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n    </ng2-input-editor>\n  }\n}\n</div>", dependencies: [{ kind: "component", type: SelectEditorComponent, selector: "ng2-select-editor" }, { kind: "component", type: TextareaEditorComponent, selector: "ng2-textarea-editor" }, { kind: "component", type: CheckboxEditorComponent, selector: "ng2-checkbox-editor" }, { kind: "component", type: InputEditorComponent, selector: "ng2-input-editor" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: CustomEditComponent, isStandalone: true, selector: "ng2-table-cell-custom-editor", 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: "19.0.3", ngImport: i0, type: DefaultEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: "ng2-table-cell-default-editor", imports: [
-                        SelectEditorComponent,
-                        TextareaEditorComponent,
-                        CheckboxEditorComponent,
-                        InputEditorComponent,
-                    ], standalone: true, template: "<div role=\"none\" (click)=\"$event.stopPropagation()\">\n  @switch (getEditorType()) {\n    @case ('list') {\n      <ng2-select-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </ng2-select-editor>\n    }\n    @case ('textarea') {\n      <ng2-textarea-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </ng2-textarea-editor>\n    }\n    @case ('checkbox') {\n      <ng2-checkbox-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </ng2-checkbox-editor>\n    }\n    @default {\n      <ng2-input-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n    </ng2-input-editor>\n  }\n}\n</div>" }]
-        }], ctorParameters: () => [] });
+            args: [{
+                    selector: 'ng2-table-cell-custom-editor',
+                    template: ` <ng-template #dynamicTarget></ng-template> `,
+                    standalone: true,
+                }]
+        }], propDecorators: { dynamicTarget: [{
+                type: ViewChild,
+                args: ['dynamicTarget', { read: ViewContainerRef, static: true }]
+            }] } });
 
 class EditCellComponent {
     constructor() {
         this.cell = input.required();
-        this.inputClass = input("");
+        this.inputClass = input('');
     }
     getEditorType() {
         const editor = this.cell().getColumn().editor;
         if (editor) {
             return editor.type;
         }
-        return "text";
+        return 'text';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EditCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: EditCellComponent, isStandalone: true, selector: "ng2-table-cell-edit-mode", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div>
       @switch (getEditorType()) { @case ('custom') {
-      <ng2-table-cell-custom-editor [cell]="cell()" [inputClass]="inputClass()">
-      </ng2-table-cell-custom-editor>
+      <ng2-table-cell-custom-editor [cell]="cell()" [inputClass]="inputClass()"> </ng2-table-cell-custom-editor>
       } @default {
-      <ng2-table-cell-default-editor
-        [cell]="cell()"
-        [inputClass]="inputClass()"
-      >
-      </ng2-table-cell-default-editor>
+      <ng2-table-cell-build-in-editor [cell]="cell()" [inputClass]="inputClass()"> </ng2-table-cell-build-in-editor>
       } }
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: CustomEditComponent, selector: "ng2-table-cell-custom-editor" }, { kind: "component", type: DefaultEditComponent, selector: "ng2-table-cell-default-editor" }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: CustomEditComponent, selector: "ng2-table-cell-custom-editor" }, { kind: "component", type: BuildInEditorComponent, selector: "ng2-table-cell-build-in-editor" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EditCellComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "ng2-table-cell-edit-mode",
+                    selector: 'ng2-table-cell-edit-mode',
                     template: `
     <div>
       @switch (getEditorType()) { @case ('custom') {
-      <ng2-table-cell-custom-editor [cell]="cell()" [inputClass]="inputClass()">
-      </ng2-table-cell-custom-editor>
+      <ng2-table-cell-custom-editor [cell]="cell()" [inputClass]="inputClass()"> </ng2-table-cell-custom-editor>
       } @default {
-      <ng2-table-cell-default-editor
-        [cell]="cell()"
-        [inputClass]="inputClass()"
-      >
-      </ng2-table-cell-default-editor>
+      <ng2-table-cell-build-in-editor [cell]="cell()" [inputClass]="inputClass()"> </ng2-table-cell-build-in-editor>
       } }
     </div>
   `,
                     standalone: true,
-                    imports: [CustomEditComponent, DefaultEditComponent],
+                    imports: [CustomEditComponent, BuildInEditorComponent],
                 }]
         }] });
 
@@ -1745,41 +1370,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
 class DataSet {
     constructor(data = [], columnSettings) {
         this.columnSettings = columnSettings;
-        this.data = [];
-        this.columns = [];
-        this.rows = [];
+        this.data = signal([]);
+        this.columns = signal([]);
+        this.rows = signal([]);
         this.selectedRows = new Set();
+        this.getColumns = computed(() => this.columns());
+        this.getVisibleColumns = computed(() => this.columns().filter((column) => !column.hide));
+        this.getRows = computed(() => {
+            return this.rows();
+        });
+        this.isAllSelected = computed(() => this.rows().every((row) => row.isSelected()));
         this.createColumns(columnSettings);
         this.setData(data);
         this.createNewRow();
     }
     setData(data) {
-        this.data = data;
+        this.data.set(data);
         this.createRows();
     }
-    getColumns() {
-        return this.columns;
-    }
-    getRows() {
-        return this.rows;
-    }
     getFirstRow() {
-        return this.rows[0];
+        return this.rows()[0];
     }
     getLastRow() {
-        return this.rows[this.rows.length - 1];
+        return this.rows()[this.rows().length - 1];
     }
     findRowByData(data) {
-        return this.rows.find((row) => row.getData() === data);
+        return this.rows().find((row) => row.getData() === data);
     }
     setSelectAll(state) {
-        this.rows.forEach((row) => {
+        this.rows().forEach((row) => {
             row.isSelected.set(state);
             this.storeSelectedRow(row);
         });
     }
     deselectAll() {
-        this.rows.forEach((row) => {
+        this.rows().forEach((row) => {
             row.isSelected.set(false);
         });
         // we need to clear selectedRow field because no one row selected
@@ -1807,24 +1432,20 @@ class DataSet {
      * @private
      */
     createColumns(columnsParams) {
-        columnsParams.forEach((params) => {
-            this.columns.push(new Column(params.key, params, this));
-        });
+        const columns = columnsParams.map((params) => new Column(params.key, params, this));
+        this.columns.set(columns);
     }
     /**
      * Create rows based on current data prepared in data source
      * @private
      */
     createRows() {
-        this.rows = [];
-        this.data.forEach((el, index) => {
+        const rows = this.data().map((el, index) => {
             const row = new Row(index, el, this);
             row.isSelected.set(this.selectedRows.has(row.getData()));
-            this.rows.push(row);
+            return row;
         });
-    }
-    get isAllSelected() {
-        return this.rows.every((row) => row.isSelected());
+        this.rows.set(rows);
     }
     storeSelectedRow(row) {
         if (row.isSelected()) {
@@ -1839,12 +1460,10 @@ class DataSet {
 class Grid {
     constructor(source, settings) {
         this.createFormShown = false;
-        this.onSelectRowSource = new Subject();
-        this.onDeselectRowSource = new Subject();
         this.currentColumnsSortState = [];
         this.settings = signal({});
         this.isMultiSelectVisible = computed(() => {
-            return this.settings().selectMode === "multi";
+            return this.settings().selectMode === 'multi';
         });
         this.isActionsVisible = computed(() => {
             const actions = this.settings().actions;
@@ -1858,8 +1477,8 @@ class Grid {
         this.actionIsOnRight = computed(() => {
             return this.settings().actionsPosition === 'right';
         });
+        this.setSource(source, settings);
         this.setSettings(settings);
-        this.setSource(source);
     }
     setColumnsSortedEmitter(emitter) {
         this.columnsSortedEmitter = emitter;
@@ -1877,7 +1496,7 @@ class Grid {
     }
     setSettings(settings) {
         this.updateSettingsAndDataSet(settings);
-        if (this.getSetting('columnSort', false)) {
+        if (settings.columnSort) {
             this.setColumnsSortState(settings.columns);
         }
     }
@@ -1887,24 +1506,12 @@ class Grid {
     getSetting(name, defaultValue) {
         return getDeepFromObject(this.settings(), name, defaultValue);
     }
-    getColumns() {
-        return this.dataSet.getColumns();
-    }
-    getRows() {
-        return this.dataSet.getRows();
-    }
     selectRow(row, state) {
         this.dataSet.selectRow(row, state);
     }
     multipleSelectRow(row) {
         this.dataSet.multipleSelectRow(row);
     }
-    onSelectRow() {
-        return this.onSelectRowSource.asObservable();
-    }
-    onDeselectRow() {
-        return this.onDeselectRowSource.asObservable();
-    }
     edit(row) {
         row.isInEditing.set(true);
     }
@@ -1923,7 +1530,7 @@ class Grid {
             .catch((err) => {
             row.pending.set(false);
         });
-        if (this.getSetting("add.confirmCreate", false)) {
+        if (this.getSetting('add.confirmCreate', false)) {
             confirmEmitter.emit({
                 newData: row.getNewData(),
                 source: this.source,
@@ -1950,7 +1557,7 @@ class Grid {
             row.pending.set(false);
             row.isInEditing.set(false);
         });
-        if (this.getSetting("edit.confirmSave", false)) {
+        if (this.getSetting('edit.confirmSave', false)) {
             confirmEmitter.emit({
                 data: row.getData(),
                 newData: row.getNewData(),
@@ -1975,7 +1582,7 @@ class Grid {
             row.pending.set(false);
             // doing nothing
         });
-        if (this.getSetting("delete.confirmDelete")) {
+        if (this.getSetting('delete.confirmDelete', true)) {
             confirmEmitter.emit({
                 data: row.getData(),
                 source: this.source,
@@ -1990,39 +1597,49 @@ class Grid {
             this.dataSet.selectRow(row, false);
         }
     }
-    processDataChange({ action, elements }) {
-        if (action === "load") {
+    processDataChange(event) {
+        if (event.action === 'load') {
             this.dataSet.deselectAll();
         }
-        if (action !== "update") {
-            this.dataSet.setData(elements);
+        if (event.action !== 'update') {
+            this.dataSet.setData(event.elements);
+        }
+        else {
+            const changedRow = this.dataSet.findRowByData(event.oldItem);
+            if (changedRow) {
+                changedRow.setData(event.newItem || event.oldItem);
+            }
         }
     }
-    prepareSource(source) {
+    prepareSource(source, initialSort, initialPaging) {
         const preparedSource = source || new LocalDataSource();
-        const initialSort = this.getInitialSort();
         if (initialSort) {
-            preparedSource.setSort([initialSort], false);
+            preparedSource.setSort(initialSort, false);
         }
-        if (this.getSetting("pager.display", false) === true) {
-            preparedSource.setPaging(1, this.getSetting("pager.perPage"), false);
+        if (initialPaging && initialPaging?.display) {
+            preparedSource.pagingConf.update((old) => ({
+                ...old,
+                ...initialPaging,
+            }));
         }
-        preparedSource.refresh();
         return preparedSource;
     }
-    getInitialSort() {
-        const defaultSortColumn = this.getColumns().find((column) => column.isSortable && column.defaultSortDirection);
+    getInitialSort(columns) {
+        if (!columns || !columns.length) {
+            return false;
+        }
+        const defaultSortColumn = columns?.find((column) => column.sortDirection);
         if (!defaultSortColumn) {
             return false;
         }
         return {
-            field: defaultSortColumn.id,
-            direction: defaultSortColumn.defaultSortDirection || "asc",
-            compare: defaultSortColumn.getCompareFunction(),
+            field: defaultSortColumn.key,
+            direction: defaultSortColumn.sortDirection || 'asc',
+            compare: defaultSortColumn.compareFunction,
         };
     }
     getSelectedRowsData() {
-        return this.dataSet.getRows();
+        return this.dataSet.getSelectedRowsData();
     }
     selectAllRows(status) {
         this.dataSet.setSelectAll(status);
@@ -2033,27 +1650,28 @@ class Grid {
     getLastRow() {
         return this.dataSet.getLastRow();
     }
-    updateSettingsAndDataSet(settings) {
+    updateSettingsAndDataSet(settings, emittedEvent = 'refresh') {
         this.settings.set(settings);
         this.dataSet = new DataSet([], settings.columns);
         if (this.source) {
-            this.source.refresh();
+            console.log('updateSettingsAndDataSet', emittedEvent);
+            this.source.pagingConf.update((old) => ({
+                ...old,
+                display: this.getSetting('pager.display'),
+            }));
+            if (emittedEvent === 'columnRefresh') {
+                this.source.columnRefresh();
+            }
+            else {
+                this.source.refresh();
+            }
         }
     }
-    setSource(source) {
-        this.source = this.prepareSource(source);
+    setSource(source, settings) {
+        const initialSort = this.getInitialSort(settings?.columns);
+        this.source = this.prepareSource(source, initialSort, settings?.pager || false);
         this.detach();
-        this.sourceOnChangedSubscription = this.source
-            .onChanged()
-            .subscribe((changes) => this.processDataChange(changes));
-        this.sourceOnUpdatedSubscription = this.source
-            .onUpdated()
-            .subscribe((data) => {
-            const changedRow = this.dataSet.findRowByData(data);
-            if (changedRow) {
-                changedRow.setData(data);
-            }
-        });
+        this.sourceOnChangedSubscription = this.source.onChanged().subscribe((changes) => this.processDataChange(changes));
     }
     // ------------------------------- column sort
     async getSortedTableColumns(newState, columns) {
@@ -2071,7 +1689,7 @@ class Grid {
         this.updateSettingsAndDataSet({
             ...this.settings(),
             columns: await this.getSortedTableColumns(this.currentColumnsSortState, this.settings()?.columns),
-        });
+        }, 'columnRefresh');
         if (this.columnStateStorageKey) {
             setLocalStorage(this.columnStateStorageKey, this.currentColumnsSortState);
         }
@@ -2135,7 +1753,7 @@ class TbodyCustomComponent {
         });
     }
     customActions() {
-        return this.grid.getSetting("actions.custom");
+        return this.grid.getSetting('actions.custom');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyCustomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TbodyCustomComponent, isStandalone: true, selector: "ng2-st-tbody-custom", inputs: { grid: "grid", row: "row", source: "source" }, outputs: { custom: "custom" }, ngImport: i0, template: `
@@ -2145,17 +1763,14 @@ class TbodyCustomComponent {
       href="#"
       class="ng2-smart-action ng2-smart-action-custom-custom"
       [innerHTML]="action.title"
-      (click)="
-        $event.stopPropagation(); $event.preventDefault(); onCustom(action)
-      "
-    ></a>
+      (click)="$event.stopPropagation(); $event.preventDefault(); onCustom(action)"></a>
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyCustomComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "ng2-st-tbody-custom",
+                    selector: 'ng2-st-tbody-custom',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     @for (action of customActions(); track $index) {
@@ -2164,10 +1779,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
       href="#"
       class="ng2-smart-action ng2-smart-action-custom-custom"
       [innerHTML]="action.title"
-      (click)="
-        $event.stopPropagation(); $event.preventDefault(); onCustom(action)
-      "
-    ></a>
+      (click)="$event.stopPropagation(); $event.preventDefault(); onCustom(action)"></a>
     }
   `,
                     standalone: true,
@@ -2192,8 +1804,8 @@ class TbodyEditDeleteComponent {
         this.isActionEdit = false;
         this.isActionDelete = false;
         this.isExternalMode = false;
-        this.editRowButtonContent = "Edit";
-        this.deleteRowButtonContent = "Delete";
+        this.editRowButtonContent = 'Edit';
+        this.deleteRowButtonContent = 'Delete';
         effect(() => {
             const settings = this.grid().settings();
             const actions = settings.actions;
@@ -2202,12 +1814,8 @@ class TbodyEditDeleteComponent {
                 this.isActionEdit = !!actions.edit;
             }
             this.isExternalMode = settings.mode === 'external';
-            this.editRowButtonContent = settings.edit
-                ? settings.edit.editButtonContent || "Edit"
-                : "Edit";
-            this.deleteRowButtonContent = settings.delete
-                ? settings.delete.deleteButtonContent || "Delete"
-                : "Delete";
+            this.editRowButtonContent = settings.edit ? settings.edit.editButtonContent || 'Edit' : 'Edit';
+            this.deleteRowButtonContent = settings.delete ? settings.delete.deleteButtonContent || 'Delete' : 'Delete';
             this.cdr.detectChanges();
         });
     }
@@ -2243,16 +1851,14 @@ class TbodyEditDeleteComponent {
       [id]="'row-' + row().index + '_action-edit-button'"
       class="ng2-smart-action ng2-smart-action-edit-edit"
       [innerHTML]="editRowButtonContent"
-      (click)="onEdit($event)"
-    ></a>
+      (click)="onEdit($event)"></a>
     } @if (isActionDelete) {
     <a
       href="#"
       [id]="'row-' + row().index + '_action-delete-button'"
       class="ng2-smart-action ng2-smart-action-delete-delete"
       [innerHTML]="deleteRowButtonContent"
-      (click)="onDelete($event)"
-    ></a>
+      (click)="onDelete($event)"></a>
     } } @else {
     <div style="display: flex;">
       @if (isActionEdit) {
@@ -2268,12 +1874,10 @@ class TbodyEditDeleteComponent {
         y="0px"
         viewBox="0 0 100 100"
         enable-background="new 0 0 0 0"
-        xml:space="preserve"
-      >
+        xml:space="preserve">
         <path
           fill="#e9e9e9"
-          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
-        >
+          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
           <animateTransform
             attributeName="transform"
             attributeType="XML"
@@ -2281,8 +1885,7 @@ class TbodyEditDeleteComponent {
             dur="1s"
             from="0 50 50"
             to="360 50 50"
-            repeatCount="indefinite"
-          />
+            repeatCount="indefinite" />
         </path>
       </svg>
       } @if (isActionDelete) {
@@ -2298,12 +1901,10 @@ class TbodyEditDeleteComponent {
         y="0px"
         viewBox="0 0 100 100"
         enable-background="new 0 0 0 0"
-        xml:space="preserve"
-      >
+        xml:space="preserve">
         <path
           fill="#e9e9e9"
-          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
-        >
+          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
           <animateTransform
             attributeName="transform"
             attributeType="XML"
@@ -2311,8 +1912,7 @@ class TbodyEditDeleteComponent {
             dur="1s"
             from="0 50 50"
             to="360 50 50"
-            repeatCount="indefinite"
-          />
+            repeatCount="indefinite" />
         </path>
       </svg>
       }
@@ -2323,7 +1923,7 @@ class TbodyEditDeleteComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyEditDeleteComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "ng2-st-tbody-edit-delete",
+                    selector: 'ng2-st-tbody-edit-delete',
                     template: `
     @if (!row().pending()) { @if (isActionEdit) {
     <a
@@ -2331,16 +1931,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
       [id]="'row-' + row().index + '_action-edit-button'"
       class="ng2-smart-action ng2-smart-action-edit-edit"
       [innerHTML]="editRowButtonContent"
-      (click)="onEdit($event)"
-    ></a>
+      (click)="onEdit($event)"></a>
     } @if (isActionDelete) {
     <a
       href="#"
       [id]="'row-' + row().index + '_action-delete-button'"
       class="ng2-smart-action ng2-smart-action-delete-delete"
       [innerHTML]="deleteRowButtonContent"
-      (click)="onDelete($event)"
-    ></a>
+      (click)="onDelete($event)"></a>
     } } @else {
     <div style="display: flex;">
       @if (isActionEdit) {
@@ -2356,12 +1954,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         y="0px"
         viewBox="0 0 100 100"
         enable-background="new 0 0 0 0"
-        xml:space="preserve"
-      >
+        xml:space="preserve">
         <path
           fill="#e9e9e9"
-          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
-        >
+          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
           <animateTransform
             attributeName="transform"
             attributeType="XML"
@@ -2369,8 +1965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             dur="1s"
             from="0 50 50"
             to="360 50 50"
-            repeatCount="indefinite"
-          />
+            repeatCount="indefinite" />
         </path>
       </svg>
       } @if (isActionDelete) {
@@ -2386,12 +1981,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         y="0px"
         viewBox="0 0 100 100"
         enable-background="new 0 0 0 0"
-        xml:space="preserve"
-      >
+        xml:space="preserve">
         <path
           fill="#e9e9e9"
-          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
-        >
+          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
           <animateTransform
             attributeName="transform"
             attributeType="XML"
@@ -2399,8 +1992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             dur="1s"
             from="0 50 50"
             to="360 50 50"
-            repeatCount="indefinite"
-          />
+            repeatCount="indefinite" />
         </path>
       </svg>
       }
@@ -2419,7 +2011,7 @@ class Ng2SmartTableTbodyComponent {
         this.deleteConfirm = input.required();
         this.createConfirm = input.required();
         this.editConfirm = input.required();
-        this.rowClassFunction = input(() => "");
+        this.rowClassFunction = input(() => '');
         this.save = output();
         this.edit = output();
         this.editCancel = output();
@@ -2437,154 +2029,80 @@ class Ng2SmartTableTbodyComponent {
             return editOptions.inputClass || '';
         });
         this.noDataMessage = computed(() => {
-            return this.grid().settings().noDataMessage || "No data found";
+            return this.grid().settings().noDataMessage || 'No data found';
         });
     }
-    getVisibleCells(cells) {
-        return (cells || []).filter((cell) => !cell.getColumn().hide);
-    }
     trackByIdOrIndex(index, item) {
         return item?.id || index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTbodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableTbodyComponent, isStandalone: true, selector: "[ng2-st-tbody]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, deleteConfirm: { classPropertyName: "deleteConfirm", publicName: "deleteConfirm", isSignal: true, isRequired: true, transformFunction: null }, createConfirm: { classPropertyName: "createConfirm", publicName: "createConfirm", isSignal: true, isRequired: true, transformFunction: null }, editConfirm: { classPropertyName: "editConfirm", publicName: "editConfirm", isSignal: true, isRequired: true, transformFunction: null }, rowClassFunction: { classPropertyName: "rowClassFunction", publicName: "rowClassFunction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", edit: "edit", editCancel: "editCancel", delete: "delete", custom: "custom", edited: "edited", userSelectRow: "userSelectRow", userClickedRow: "userClickedRow", multipleSelectRow: "multipleSelectRow" }, ngImport: i0, template: "@for (row of grid().getRows(); track trackByIdOrIndex($index, row)) {\n<tr\n  (click)=\"userClickedRow.emit(row)\"\n  class=\"ng2-smart-row\"\n  [class]=\"rowClassFunction()(row)\"\n  [class.selected]=\"row.isSelected()\"\n>\n  @if (grid().isMultiSelectVisible()) {\n  <td\n    class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n    (click)=\"$event.stopPropagation(); multipleSelectRow.emit(row)\"\n  >\n    <input\n      type=\"checkbox\"\n      [id]=\"'row-' + row.index + '_select-checkbox'\"\n      class=\"form-control\"\n      [ngModel]=\"row.isSelected()\"\n    />\n  </td>\n  } @if (grid().actionIsOnLeft()) {\n  <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  } @for (cell of getVisibleCells(row.cells); track cell.getId() + $index) {\n  <td [class]=\"cell.getColumnClass()\">\n    <ng2-smart-table-cell\n      [cell]=\"cell\"\n      [inputClass]=\"editInputClass()\"\n      [isInEditing]=\"row.isInEditing()\"\n    >\n    </ng2-smart-table-cell>\n  </td>\n  } @if (grid().actionIsOnRight()) {\n  <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  }\n</tr>\n\n<ng-template #actions>\n  @if (row.isInEditing()) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid()\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm()\"\n      [editCancel]=\"editCancel\"\n    ></ng2-st-tbody-create-cancel>\n  </td>\n  } @if (!row.isInEditing() && grid().isActionsVisible() ) {\n  <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n    <ng2-st-tbody-custom\n      [grid]=\"grid()\"\n      (custom)=\"custom.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source()\"\n    ></ng2-st-tbody-custom>\n    <ng2-st-tbody-edit-delete\n      [grid]=\"grid()\"\n      [deleteConfirm]=\"deleteConfirm()\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      [row]=\"row\"\n      [source]=\"source()\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  }\n</ng-template>\n} @empty {\n<tr>\n  <td colspan=\"50\">\n    {{ noDataMessage() }}\n  </td>\n</tr>\n}\n", styles: [":host .ng2-smart-row.selected{background:#0000000d}: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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TbodyCustomComponent, selector: "ng2-st-tbody-custom", inputs: ["grid", "row", "source"], outputs: ["custom"] }, { kind: "component", type: TbodyEditDeleteComponent, selector: "ng2-st-tbody-edit-delete", inputs: ["grid", "row", "source", "deleteConfirm"], outputs: ["edit", "delete"] }, { kind: "component", type: TbodyCreateCancelComponent, selector: "ng2-st-tbody-create-cancel", inputs: ["grid", "row", "editConfirm", "editCancel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["cell", "inputClass", "isInEditing"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableTbodyComponent, isStandalone: true, selector: "[ng2-st-tbody]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, deleteConfirm: { classPropertyName: "deleteConfirm", publicName: "deleteConfirm", isSignal: true, isRequired: true, transformFunction: null }, createConfirm: { classPropertyName: "createConfirm", publicName: "createConfirm", isSignal: true, isRequired: true, transformFunction: null }, editConfirm: { classPropertyName: "editConfirm", publicName: "editConfirm", isSignal: true, isRequired: true, transformFunction: null }, rowClassFunction: { classPropertyName: "rowClassFunction", publicName: "rowClassFunction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", edit: "edit", editCancel: "editCancel", delete: "delete", custom: "custom", edited: "edited", userSelectRow: "userSelectRow", userClickedRow: "userClickedRow", multipleSelectRow: "multipleSelectRow" }, ngImport: i0, template: "@for (row of grid().dataSet.getRows(); track trackByIdOrIndex($index, row)) {\n<tr\n  (click)=\"userClickedRow.emit(row)\"\n  class=\"ng2-smart-row\"\n  [class]=\"rowClassFunction()(row)\"\n  [class.selected]=\"row.isSelected()\">\n  @if (grid().isMultiSelectVisible()) {\n  <td\n    class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n    (click)=\"$event.stopPropagation(); multipleSelectRow.emit(row)\">\n    <input\n      type=\"checkbox\"\n      [id]=\"'row-' + row.index + '_select-checkbox'\"\n      class=\"form-control\"\n      [ngModel]=\"row.isSelected()\" />\n  </td>\n  } @if (grid().actionIsOnLeft()) {\n  <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  } @for (cell of row.visibleCells(); track cell.getId() + $index) {\n  <td [class]=\"cell.getColumnClass()\">\n    <ng2-smart-table-cell [cell]=\"cell\" [inputClass]=\"editInputClass()\" [isInEditing]=\"row.isInEditing()\">\n    </ng2-smart-table-cell>\n  </td>\n  } @if (grid().actionIsOnRight()) {\n  <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  }\n</tr>\n\n<ng-template #actions>\n  @if (row.isInEditing()) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid()\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm()\"\n      [editCancel]=\"editCancel\"></ng2-st-tbody-create-cancel>\n  </td>\n  } @if (!row.isInEditing() && grid().isActionsVisible() ) {\n  <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n    <ng2-st-tbody-custom\n      [grid]=\"grid()\"\n      (custom)=\"custom.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source()\"></ng2-st-tbody-custom>\n    <ng2-st-tbody-edit-delete\n      [grid]=\"grid()\"\n      [deleteConfirm]=\"deleteConfirm()\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      [row]=\"row\"\n      [source]=\"source()\">\n    </ng2-st-tbody-edit-delete>\n  </td>\n  }\n</ng-template>\n} @empty {\n<tr>\n  <td colspan=\"50\">\n    {{ noDataMessage() }}\n  </td>\n</tr>\n}\n", styles: [":host .ng2-smart-row.selected{background:#0000000d}: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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TbodyCustomComponent, selector: "ng2-st-tbody-custom", inputs: ["grid", "row", "source"], outputs: ["custom"] }, { kind: "component", type: TbodyEditDeleteComponent, selector: "ng2-st-tbody-edit-delete", inputs: ["grid", "row", "source", "deleteConfirm"], outputs: ["edit", "delete"] }, { kind: "component", type: TbodyCreateCancelComponent, selector: "ng2-st-tbody-create-cancel", inputs: ["grid", "row", "editConfirm", "editCancel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["cell", "inputClass", "isInEditing"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTbodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: "[ng2-st-tbody]", standalone: true, imports: [
+            args: [{ selector: '[ng2-st-tbody]', standalone: true, imports: [
                         FormsModule,
                         TbodyCustomComponent,
                         TbodyEditDeleteComponent,
                         TbodyCreateCancelComponent,
                         NgTemplateOutlet,
                         CellComponent,
-                    ], template: "@for (row of grid().getRows(); track trackByIdOrIndex($index, row)) {\n<tr\n  (click)=\"userClickedRow.emit(row)\"\n  class=\"ng2-smart-row\"\n  [class]=\"rowClassFunction()(row)\"\n  [class.selected]=\"row.isSelected()\"\n>\n  @if (grid().isMultiSelectVisible()) {\n  <td\n    class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n    (click)=\"$event.stopPropagation(); multipleSelectRow.emit(row)\"\n  >\n    <input\n      type=\"checkbox\"\n      [id]=\"'row-' + row.index + '_select-checkbox'\"\n      class=\"form-control\"\n      [ngModel]=\"row.isSelected()\"\n    />\n  </td>\n  } @if (grid().actionIsOnLeft()) {\n  <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  } @for (cell of getVisibleCells(row.cells); track cell.getId() + $index) {\n  <td [class]=\"cell.getColumnClass()\">\n    <ng2-smart-table-cell\n      [cell]=\"cell\"\n      [inputClass]=\"editInputClass()\"\n      [isInEditing]=\"row.isInEditing()\"\n    >\n    </ng2-smart-table-cell>\n  </td>\n  } @if (grid().actionIsOnRight()) {\n  <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  }\n</tr>\n\n<ng-template #actions>\n  @if (row.isInEditing()) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid()\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm()\"\n      [editCancel]=\"editCancel\"\n    ></ng2-st-tbody-create-cancel>\n  </td>\n  } @if (!row.isInEditing() && grid().isActionsVisible() ) {\n  <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n    <ng2-st-tbody-custom\n      [grid]=\"grid()\"\n      (custom)=\"custom.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source()\"\n    ></ng2-st-tbody-custom>\n    <ng2-st-tbody-edit-delete\n      [grid]=\"grid()\"\n      [deleteConfirm]=\"deleteConfirm()\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      [row]=\"row\"\n      [source]=\"source()\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  }\n</ng-template>\n} @empty {\n<tr>\n  <td colspan=\"50\">\n    {{ noDataMessage() }}\n  </td>\n</tr>\n}\n", styles: [":host .ng2-smart-row.selected{background:#0000000d}: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"] }]
+                    ], template: "@for (row of grid().dataSet.getRows(); track trackByIdOrIndex($index, row)) {\n<tr\n  (click)=\"userClickedRow.emit(row)\"\n  class=\"ng2-smart-row\"\n  [class]=\"rowClassFunction()(row)\"\n  [class.selected]=\"row.isSelected()\">\n  @if (grid().isMultiSelectVisible()) {\n  <td\n    class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n    (click)=\"$event.stopPropagation(); multipleSelectRow.emit(row)\">\n    <input\n      type=\"checkbox\"\n      [id]=\"'row-' + row.index + '_select-checkbox'\"\n      class=\"form-control\"\n      [ngModel]=\"row.isSelected()\" />\n  </td>\n  } @if (grid().actionIsOnLeft()) {\n  <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  } @for (cell of row.visibleCells(); track cell.getId() + $index) {\n  <td [class]=\"cell.getColumnClass()\">\n    <ng2-smart-table-cell [cell]=\"cell\" [inputClass]=\"editInputClass()\" [isInEditing]=\"row.isInEditing()\">\n    </ng2-smart-table-cell>\n  </td>\n  } @if (grid().actionIsOnRight()) {\n  <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  }\n</tr>\n\n<ng-template #actions>\n  @if (row.isInEditing()) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid()\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm()\"\n      [editCancel]=\"editCancel\"></ng2-st-tbody-create-cancel>\n  </td>\n  } @if (!row.isInEditing() && grid().isActionsVisible() ) {\n  <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n    <ng2-st-tbody-custom\n      [grid]=\"grid()\"\n      (custom)=\"custom.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source()\"></ng2-st-tbody-custom>\n    <ng2-st-tbody-edit-delete\n      [grid]=\"grid()\"\n      [deleteConfirm]=\"deleteConfirm()\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      [row]=\"row\"\n      [source]=\"source()\">\n    </ng2-st-tbody-edit-delete>\n  </td>\n  }\n</ng-template>\n} @empty {\n<tr>\n  <td colspan=\"50\">\n    {{ noDataMessage() }}\n  </td>\n</tr>\n}\n", styles: [":host .ng2-smart-row.selected{background:#0000000d}: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"] }]
         }] });
 
-class FilterDefault {
-    constructor() {
-        this.column = input.required();
-        this.source = input.required();
-        this.inputClass = input('');
-        this.query = '';
-        this.filter = output();
-    }
-    onFilter(query) {
-        this.source().addFilter({
-            field: this.column().id,
-            search: query,
-            filter: this.column().getFilterFunction(),
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterDefault, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: FilterDefault, isStandalone: true, selector: "ng2-filter-default-component", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterDefault, decorators: [{
-            type: Component,
-            args: [{ template: '', selector: 'ng2-filter-default-component' }]
-        }], propDecorators: { query: [{
-                type: Input
-            }] } });
-
-class CustomFilterComponent extends FilterDefault {
-    ngOnChanges(changes) {
-        if (this.customComponent) {
-            if (this.customComponent?.instance &&
-                "ngOnChanges" in this.customComponent.instance) {
-                const onChanges = this.customComponent.instance.ngOnChanges;
-                onChanges(changes);
-            }
-            return;
-        }
-        const columnFilter = this.column().filter;
-        if (columnFilter && columnFilter.type === "custom") {
-            this.customComponent = this.dynamicTarget?.createComponent(columnFilter?.component);
-            // set @Inputs and @Outputs of custom component
-            this.customComponent?.setInput("query", this.query);
-            this.customComponent?.setInput("column", this.column());
-            this.customComponent?.setInput("source", this.source());
-            this.customComponent?.setInput("inputClass", this.inputClass());
-            this.customComponent?.instance.filter.subscribe((event) => this.onFilter(event));
-        }
-    }
-    ngOnDestroy() {
-        if (this.customComponent) {
-            this.customComponent.destroy();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: CustomFilterComponent, isStandalone: true, selector: "ng2-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: "19.0.3", ngImport: i0, type: CustomFilterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "ng2-custom-table-filter",
-                    template: `<ng-template #dynamicTarget></ng-template>`,
-                    standalone: true,
-                }]
-        }], propDecorators: { dynamicTarget: [{
-                type: ViewChild,
-                args: ["dynamicTarget", { read: ViewContainerRef, static: true }]
-            }] } });
-
-class CheckboxFilterComponent extends DefaultFilter {
+class CheckboxFilterComponent extends BaseFilterComponent {
     constructor() {
         super();
         this.filterActive = false;
-        this.inputControl = new UntypedFormControl();
+        this.trueVal = true;
+        this.falseVal = false;
     }
     ngOnInit() {
+        const filterConfig = this.column().getFilterConfig();
+        try {
+            const { true: trueVal, false: falseVal } = filterConfig;
+            this.trueVal = trueVal ?? true;
+            this.falseVal = falseVal ?? false;
+        }
+        catch {
+            // do nothing
+        }
         this.changesSubscription = this.inputControl.valueChanges
-            .pipe(debounceTime(this.delay))
+            .pipe(distinctUntilChanged(), 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();
+            const value = checked ? this.trueVal : this.falseVal;
+            this.setFilter(value);
         });
     }
+    ngOnChanges({ query }) {
+        if (query) {
+            this.inputControl.setValue(query.currentValue === this.trueVal, { emitEvent: false });
+        }
+    }
     resetFilter(event) {
         event.preventDefault();
-        this.query = "";
+        event.stopPropagation();
         this.inputControl.setValue(false, { emitEvent: false });
         this.filterActive = false;
-        this.setFilter();
+        this.setFilter(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: CheckboxFilterComponent, isStandalone: true, selector: "ng2-checkbox-filter", usesInheritance: true, ngImport: i0, template: `
-    <input
-      type="checkbox"
-      [formControl]="inputControl"
-      [class]="inputClass()"
-      class="form-control"
-    />
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: CheckboxFilterComponent, isStandalone: true, selector: "ng2-checkbox-filter", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    <input type="checkbox" [formControl]="inputControl" [class]="inputClass()" class="form-control" />
     @if (filterActive) {
-    <a href="#" (click)="resetFilter($event)">{{
-      column().getFilterConfig()?.resetText || "reset"
-    }}</a>
+    <a href="#" (click)="resetFilter($event)">{{ column().getFilterConfig()?.resetText || 'reset' }}</a>
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxFilterComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "ng2-checkbox-filter",
+                    selector: 'ng2-checkbox-filter',
                     template: `
-    <input
-      type="checkbox"
-      [formControl]="inputControl"
-      [class]="inputClass()"
-      class="form-control"
-    />
+    <input type="checkbox" [formControl]="inputControl" [class]="inputClass()" class="form-control" />
     @if (filterActive) {
-    <a href="#" (click)="resetFilter($event)">{{
-      column().getFilterConfig()?.resetText || "reset"
-    }}</a>
+    <a href="#" (click)="resetFilter($event)">{{ column().getFilterConfig()?.resetText || 'reset' }}</a>
     }
   `,
                     standalone: true,
@@ -2592,264 +2110,269 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-class InputFilterComponent extends DefaultFilter {
-    constructor() {
-        super();
-        this.inputControl = new UntypedFormControl();
-    }
-    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();
-        });
-    }
-    ngOnChanges(changes) {
-        if (changes?.["query"]) {
-            this.inputControl.setValue(this.query);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: InputFilterComponent, isStandalone: true, selector: "ng2-input-filter", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+class InputFilterComponent extends BaseFilterComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: InputFilterComponent, isStandalone: true, selector: "ng2-input-filter", usesInheritance: true, ngImport: i0, template: `
     <input
       [class]="inputClass()"
       [formControl]="inputControl"
       class="form-control"
       type="text"
-      placeholder="{{ column().title }}"
-    />
+      placeholder="{{ column().title }}" />
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputFilterComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "ng2-input-filter",
+                    selector: 'ng2-input-filter',
                     template: `
     <input
       [class]="inputClass()"
       [formControl]="inputControl"
       class="form-control"
       type="text"
-      placeholder="{{ column().title }}"
-    />
+      placeholder="{{ column().title }}" />
   `,
                     standalone: true,
                     imports: [FormsModule, ReactiveFormsModule],
                 }]
-        }], ctorParameters: () => [] });
-
-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());
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: SelectFilterComponent, isStandalone: true, selector: "ng2-select-filter", viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["inputControl"], descendants: true, read: NgControl, static: true }], usesInheritance: true, ngImport: i0, template: `
-    <select [class]="inputClass()"
-      class="form-control"
-      #inputControl
-      [(ngModel)]="query">
+        }] });
 
+class SelectFilterComponent extends BaseFilterComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: SelectFilterComponent, isStandalone: true, selector: "ng2-select-filter", usesInheritance: true, ngImport: i0, template: `
+    <select [class]="inputClass()" class="form-control" [formControl]="inputControl">
       <option value="">{{ column().getFilterConfig().selectText }}</option>
       @for (option of column().getFilterConfig().list; track $index) {
-        <option [value]="option.value">
-          {{ option.title }}
-        </option>
+      <option [value]="option.value">
+        {{ option.title }}
+      </option>
       }
     </select>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng2-select-filter',
                     template: `
-    <select [class]="inputClass()"
-      class="form-control"
-      #inputControl
-      [(ngModel)]="query">
-
+    <select [class]="inputClass()" class="form-control" [formControl]="inputControl">
       <option value="">{{ column().getFilterConfig().selectText }}</option>
       @for (option of column().getFilterConfig().list; track $index) {
-        <option [value]="option.value">
-          {{ option.title }}
-        </option>
+      <option [value]="option.value">
+        {{ option.title }}
+      </option>
       }
     </select>
-    `,
+  `,
                     standalone: true,
-                    imports: [FormsModule]
+                    imports: [FormsModule, ReactiveFormsModule],
                 }]
-        }], ctorParameters: () => [], propDecorators: { inputControl: [{
-                type: ViewChild,
-                args: ['inputControl', { read: NgControl, static: true }]
-            }] } });
+        }] });
 
-class DefaultFilterComponent extends FilterDefault {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: DefaultFilterComponent, isStandalone: true, selector: "ng2-default-table-filter", usesInheritance: true, ngImport: i0, template: `
+class BuildInFilterComponent {
+    constructor() {
+        this.query = input('');
+        this.inputClass = input('');
+        this.source = input.required();
+        this.column = input.required();
+        this.filter = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BuildInFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: BuildInFilterComponent, isStandalone: true, selector: "ng2-build-in-table-filter", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filter: "filter" }, ngImport: i0, template: `
     @switch (column().getFilterType()) { @case ('list') {
     <ng2-select-filter
-      [query]="query"
+      [query]="query()"
       [class]="inputClass()"
       [source]="source()"
       [column]="column()"
-      (filter)="onFilter($event)"
-    >
+      (filter)="filter.emit($event)">
     </ng2-select-filter>
     } @case ('checkbox') {
     <ng2-checkbox-filter
-      [query]="query"
+      [query]="query()"
       [source]="source()"
       [class]="inputClass()"
       [column]="column()"
-      (filter)="onFilter($event)"
-    >
+      (filter)="filter.emit($event)">
     </ng2-checkbox-filter>
     } @default {
     <ng2-input-filter
-      [query]="query"
+      [query]="query()"
       [source]="source()"
       [class]="inputClass()"
       [column]="column()"
-      (filter)="onFilter($event)"
-    >
+      (filter)="filter.emit($event)">
     </ng2-input-filter>
     } }
   `, isInline: true, dependencies: [{ kind: "component", type: SelectFilterComponent, selector: "ng2-select-filter" }, { kind: "component", type: CheckboxFilterComponent, selector: "ng2-checkbox-filter" }, { kind: "component", type: InputFilterComponent, selector: "ng2-input-filter" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BuildInFilterComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "ng2-default-table-filter",
+                    selector: 'ng2-build-in-table-filter',
                     template: `
     @switch (column().getFilterType()) { @case ('list') {
     <ng2-select-filter
-      [query]="query"
+      [query]="query()"
       [class]="inputClass()"
       [source]="source()"
       [column]="column()"
-      (filter)="onFilter($event)"
-    >
+      (filter)="filter.emit($event)">
     </ng2-select-filter>
     } @case ('checkbox') {
     <ng2-checkbox-filter
-      [query]="query"
+      [query]="query()"
       [source]="source()"
       [class]="inputClass()"
       [column]="column()"
-      (filter)="onFilter($event)"
-    >
+      (filter)="filter.emit($event)">
     </ng2-checkbox-filter>
     } @default {
     <ng2-input-filter
-      [query]="query"
+      [query]="query()"
       [source]="source()"
       [class]="inputClass()"
       [column]="column()"
-      (filter)="onFilter($event)"
-    >
+      (filter)="filter.emit($event)">
     </ng2-input-filter>
     } }
   `,
                     standalone: true,
-                    imports: [
-                        SelectFilterComponent,
-                        CheckboxFilterComponent,
-                        InputFilterComponent,
-                    ],
+                    imports: [SelectFilterComponent, CheckboxFilterComponent, InputFilterComponent],
                 }]
         }] });
 
-class FilterComponent extends FilterDefault {
+class CustomFilterComponent {
+    constructor() {
+        this.query = input('');
+        this.inputClass = input('');
+        this.source = input.required();
+        this.column = input.required();
+        this.filter = output();
+    }
     ngOnChanges(changes) {
-        if (changes['source']) {
-            if (!changes['source'].firstChange && this.dataChangedSub) {
-                this.dataChangedSub.unsubscribe();
+        if (this.customComponent) {
+            if (this.customComponent?.instance && 'ngOnChanges' in this.customComponent.instance) {
+                const onChanges = this.customComponent.instance.ngOnChanges;
+                onChanges(changes);
             }
-            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;
-                        }
-                    });
-                }
-            });
+            return;
+        }
+        const columnFilter = this.column().filter;
+        if (columnFilter && columnFilter.type === 'custom') {
+            this.customComponent = this.dynamicTarget?.createComponent(columnFilter?.component);
+            // set @Inputs and @Outputs of custom component
+            this.customComponent?.setInput('query', this.query());
+            this.customComponent?.setInput('column', this.column());
+            this.customComponent?.setInput('source', this.source());
+            this.customComponent?.setInput('inputClass', this.inputClass());
+            this.filterSubscription = this.customComponent?.instance.filter.subscribe((event) => this.filter.emit(event));
+        }
+    }
+    ngOnDestroy() {
+        if (this.customComponent) {
+            this.customComponent.destroy();
+        }
+        if (this.filterSubscription) {
+            this.filterSubscription.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: FilterComponent, isStandalone: true, selector: "ng2-smart-table-filter", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-      @if (column().isFilterable) {
-        <div class="ng2-smart-filter">
-          @switch (column().getFilterType()) {
-            @case ('custom') {
-              <ng2-custom-table-filter
-                [query]="query"
-                [column]="column()"
-                [source]="source()"
-                [inputClass]="inputClass()"
-                (filter)="onFilter($event)">
-              </ng2-custom-table-filter>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: CustomFilterComponent, isStandalone: true, selector: "ng2-custom-table-filter", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filter: "filter" }, viewQueries: [{ propertyName: "dynamicTarget", first: true, predicate: ["dynamicTarget"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `<ng-template #dynamicTarget></ng-template>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomFilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ng2-custom-table-filter',
+                    template: `<ng-template #dynamicTarget></ng-template>`,
+                    standalone: true,
+                }]
+        }], propDecorators: { dynamicTarget: [{
+                type: ViewChild,
+                args: ['dynamicTarget', { read: ViewContainerRef, static: true }]
+            }] } });
+
+class FilterComponent {
+    constructor() {
+        this.query = signal('');
+        this.column = input.required();
+        this.source = input.required();
+        this.inputClass = input('');
+        this.destroyRef = inject(DestroyRef);
+    }
+    ngOnInit() {
+        this.source()
+            .onChanged()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(({ filters }) => {
+            if (!filters.length) {
+                return;
             }
-            @default {
-              <ng2-default-table-filter
-                [query]="query"
-                [column]="column()"
-                [source]="source()"
-                [inputClass]="inputClass()"
-                (filter)="onFilter($event)">
-              </ng2-default-table-filter>
+            const columnFilter = filters.find((filter) => filter.field === this.column().id);
+            if (!columnFilter) {
+                return;
             }
-          }
-        </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: "component", type: CustomFilterComponent, selector: "ng2-custom-table-filter" }, { kind: "component", type: DefaultFilterComponent, selector: "ng2-default-table-filter" }] }); }
+            this.query.set(columnFilter.search);
+        });
+    }
+    onFilter(query) {
+        this.source().addFilter({
+            field: this.column().id,
+            search: query,
+            filter: this.column().filterFunction,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: FilterComponent, isStandalone: true, selector: "ng2-smart-table-filter", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (column().isFilterable) {
+    <div class="ng2-smart-filter">
+      @switch (column().getFilterType()) { @case ('custom') {
+      <ng2-custom-table-filter
+        [query]="query()"
+        [column]="column()"
+        [source]="source()"
+        [inputClass]="inputClass()"
+        (filter)="onFilter($event)">
+      </ng2-custom-table-filter>
+      } @default {
+      <ng2-build-in-table-filter
+        [query]="query()"
+        [column]="column()"
+        [source]="source()"
+        [inputClass]="inputClass()"
+        (filter)="onFilter($event)">
+      </ng2-build-in-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: "component", type: CustomFilterComponent, selector: "ng2-custom-table-filter", inputs: ["query", "inputClass", "source", "column"], outputs: ["filter"] }, { kind: "component", type: BuildInFilterComponent, selector: "ng2-build-in-table-filter", inputs: ["query", "inputClass", "source", "column"], outputs: ["filter"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng2-smart-table-filter', template: `
-      @if (column().isFilterable) {
-        <div class="ng2-smart-filter">
-          @switch (column().getFilterType()) {
-            @case ('custom') {
-              <ng2-custom-table-filter
-                [query]="query"
-                [column]="column()"
-                [source]="source()"
-                [inputClass]="inputClass()"
-                (filter)="onFilter($event)">
-              </ng2-custom-table-filter>
-            }
-            @default {
-              <ng2-default-table-filter
-                [query]="query"
-                [column]="column()"
-                [source]="source()"
-                [inputClass]="inputClass()"
-                (filter)="onFilter($event)">
-              </ng2-default-table-filter>
-            }
-          }
-        </div>
-      }
-      `, standalone: true, imports: [CustomFilterComponent, DefaultFilterComponent], 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"] }]
+    @if (column().isFilterable) {
+    <div class="ng2-smart-filter">
+      @switch (column().getFilterType()) { @case ('custom') {
+      <ng2-custom-table-filter
+        [query]="query()"
+        [column]="column()"
+        [source]="source()"
+        [inputClass]="inputClass()"
+        (filter)="onFilter($event)">
+      </ng2-custom-table-filter>
+      } @default {
+      <ng2-build-in-table-filter
+        [query]="query()"
+        [column]="column()"
+        [source]="source()"
+        [inputClass]="inputClass()"
+        (filter)="onFilter($event)">
+      </ng2-build-in-table-filter>
+      } }
+    </div>
+    }
+  `, standalone: true, imports: [CustomFilterComponent, BuildInFilterComponent], 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"] }]
         }] });
 
 class AddButtonComponent {
@@ -2867,15 +2390,15 @@ class AddButtonComponent {
         this.addNewButtonContent = computed(() => {
             const addParams = this.grid().settings()?.add;
             if (!addParams) {
-                return "Add New";
+                return 'Add New';
             }
-            return addParams?.addButtonContent || "Add New";
+            return addParams?.addButtonContent || 'Add New';
         });
     }
     onAdd(event) {
         event.preventDefault();
         event.stopPropagation();
-        if (this.grid().getSetting("mode") === "external") {
+        if (this.grid().getSetting('mode') === 'external') {
             this.create.emit({
                 source: this.source(),
             });
@@ -2891,27 +2414,25 @@ class AddButtonComponent {
       href="#"
       class="ng2-smart-action ng2-smart-action-add-add"
       [innerHTML]="addNewButtonContent()"
-      (click)="onAdd($event)"
-    ></a>
+      (click)="onAdd($event)"></a>
     }
   `, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AddButtonComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "[ng2-st-add-button]",
+                    selector: '[ng2-st-add-button]',
                     template: `
     @if (isActionAdd()) {
     <a
       href="#"
       class="ng2-smart-action ng2-smart-action-add-add"
       [innerHTML]="addNewButtonContent()"
-      (click)="onAdd($event)"
-    ></a>
+      (click)="onAdd($event)"></a>
     }
   `,
                     host: {
-                        class: "ng2-smart-actions-title ng2-smart-actions-title-add",
+                        class: 'ng2-smart-actions-title ng2-smart-actions-title-add',
                     },
                     standalone: true,
                 }]
@@ -2922,80 +2443,46 @@ class TheadFiltersRowComponent {
         this.grid = input.required();
         this.source = input.required();
         this.create = output();
-        this.filter = output();
         this.filterInputClass = computed(() => {
             const filterOptions = this.grid().settings()?.filter;
             if (!filterOptions) {
-                return "";
+                return '';
             }
-            return filterOptions.inputClass || "";
+            return filterOptions.inputClass || '';
         });
     }
-    getVisibleColumns() {
-        return (this.grid().getColumns() || []).filter((column) => !column.hide);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFiltersRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadFiltersRowComponent, isStandalone: true, selector: "[ng2-st-thead-filters-row]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { create: "create", filter: "filter" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadFiltersRowComponent, isStandalone: true, selector: "[ng2-st-thead-filters-row]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { create: "create" }, ngImport: i0, template: `
     @if (grid().isMultiSelectVisible()) {
     <th></th>
     } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
-    <th
-      ng2-st-add-button
-      [source]="source()"
-      [grid]="grid()"
-      (create)="create.emit($event)"
-    ></th>
-    } @for (column of getVisibleColumns(); track column.id + $index) {
+    <th ng2-st-add-button [source]="source()" [grid]="grid()" (create)="create.emit($event)"></th>
+    } @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
     <th class="ng2-smart-th {{ column.id }}">
-      <ng2-smart-table-filter
-        [source]="source()"
-        [column]="column"
-        [inputClass]="filterInputClass()"
-        (filter)="filter.emit($event)"
-      >
+      <ng2-smart-table-filter [source]="source()" [column]="column" [inputClass]="filterInputClass()">
       </ng2-smart-table-filter>
     </th>
     } @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
-    <th
-      ng2-st-add-button
-      [grid]="grid()"
-      [source]="source()"
-      (create)="create.emit($event)"
-    ></th>
+    <th ng2-st-add-button [grid]="grid()" [source]="source()" (create)="create.emit($event)"></th>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: ["grid", "source"], outputs: ["create"] }, { kind: "component", type: FilterComponent, selector: "ng2-smart-table-filter" }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: ["grid", "source"], outputs: ["create"] }, { kind: "component", type: FilterComponent, selector: "ng2-smart-table-filter", inputs: ["column", "source", "inputClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFiltersRowComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "[ng2-st-thead-filters-row]",
+                    selector: '[ng2-st-thead-filters-row]',
                     template: `
     @if (grid().isMultiSelectVisible()) {
     <th></th>
     } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
-    <th
-      ng2-st-add-button
-      [source]="source()"
-      [grid]="grid()"
-      (create)="create.emit($event)"
-    ></th>
-    } @for (column of getVisibleColumns(); track column.id + $index) {
+    <th ng2-st-add-button [source]="source()" [grid]="grid()" (create)="create.emit($event)"></th>
+    } @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
     <th class="ng2-smart-th {{ column.id }}">
-      <ng2-smart-table-filter
-        [source]="source()"
-        [column]="column"
-        [inputClass]="filterInputClass()"
-        (filter)="filter.emit($event)"
-      >
+      <ng2-smart-table-filter [source]="source()" [column]="column" [inputClass]="filterInputClass()">
       </ng2-smart-table-filter>
     </th>
     } @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
-    <th
-      ng2-st-add-button
-      [grid]="grid()"
-      [source]="source()"
-      (create)="create.emit($event)"
-    ></th>
+    <th ng2-st-add-button [grid]="grid()" [source]="source()" (create)="create.emit($event)"></th>
     }
   `,
                     standalone: true,
@@ -3067,9 +2554,9 @@ class TheadFormRowComponent {
         this.addInputClass = computed(() => {
             const addOptions = this.grid().settings()?.add;
             if (!addOptions) {
-                return "";
+                return '';
             }
-            return addOptions.inputClass || "";
+            return addOptions.inputClass || '';
         });
     }
     onCreate(event) {
@@ -3077,7 +2564,7 @@ class TheadFormRowComponent {
         this.grid().create(this.grid().getNewRow(), this.createConfirm);
     }
     getVisibleCells() {
-        return (this.grid().getNewRow().getCells() || []).filter((cell) => !cell.getColumn().hide);
+        return (this.grid().getNewRow().cells() || []).filter((cell) => !cell.getColumn().hide);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFormRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadFormRowComponent, isStandalone: true, selector: "[ng2-st-thead-form-row]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, createConfirm: { classPropertyName: "createConfirm", publicName: "createConfirm", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { create: "create" }, ngImport: i0, template: `
@@ -3085,26 +2572,19 @@ class TheadFormRowComponent {
     <td></td>
     } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
     <td class="ng2-smart-actions">
-      <ng2-st-actions
-        [grid]="grid()"
-        (create)="onCreate($event)"
-      ></ng2-st-actions>
+      <ng2-st-actions [grid]="grid()" (create)="onCreate($event)"></ng2-st-actions>
     </td>
     } @for (cell of getVisibleCells(); track cell.getId()+ $index) {
     <td>
       <ng2-smart-table-cell
         [cell]="cell"
         [inputClass]="addInputClass()"
-        [isInEditing]="grid().getNewRow().isInEditing()"
-      >
+        [isInEditing]="grid().getNewRow().isInEditing()">
       </ng2-smart-table-cell>
     </td>
     } @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
     <td class="ng2-smart-actions">
-      <ng2-st-actions
-        [grid]="grid()"
-        (create)="onCreate($event)"
-      ></ng2-st-actions>
+      <ng2-st-actions [grid]="grid()" (create)="onCreate($event)"></ng2-st-actions>
     </td>
     }
   `, isInline: true, dependencies: [{ kind: "component", type: ActionsComponent, selector: "ng2-st-actions", inputs: ["grid"], outputs: ["create"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["cell", "inputClass", "isInEditing"] }] }); }
@@ -3112,32 +2592,25 @@ class TheadFormRowComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFormRowComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "[ng2-st-thead-form-row]",
+                    selector: '[ng2-st-thead-form-row]',
                     template: `
     @if (grid().isMultiSelectVisible()) {
     <td></td>
     } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
     <td class="ng2-smart-actions">
-      <ng2-st-actions
-        [grid]="grid()"
-        (create)="onCreate($event)"
-      ></ng2-st-actions>
+      <ng2-st-actions [grid]="grid()" (create)="onCreate($event)"></ng2-st-actions>
     </td>
     } @for (cell of getVisibleCells(); track cell.getId()+ $index) {
     <td>
       <ng2-smart-table-cell
         [cell]="cell"
         [inputClass]="addInputClass()"
-        [isInEditing]="grid().getNewRow().isInEditing()"
-      >
+        [isInEditing]="grid().getNewRow().isInEditing()">
       </ng2-smart-table-cell>
     </td>
     } @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
     <td class="ng2-smart-actions">
-      <ng2-st-actions
-        [grid]="grid()"
-        (create)="onCreate($event)"
-      ></ng2-st-actions>
+      <ng2-st-actions [grid]="grid()" (create)="onCreate($event)"></ng2-st-actions>
     </td>
     }
   `,
@@ -3180,7 +2653,7 @@ class CheckboxSelectAllComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxSelectAllComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: CheckboxSelectAllComponent, isStandalone: true, selector: "[ng2-st-checkbox-select-all]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    <input type="checkbox" [ngModel]="this.grid().dataSet.isAllSelected" />
+    <input type="checkbox" [ngModel]="this.grid().dataSet.isAllSelected()" />
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxSelectAllComponent, decorators: [{
@@ -3188,7 +2661,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             args: [{
                     selector: "[ng2-st-checkbox-select-all]",
                     template: `
-    <input type="checkbox" [ngModel]="this.grid().dataSet.isAllSelected" />
+    <input type="checkbox" [ngModel]="this.grid().dataSet.isAllSelected()" />
   `,
                     standalone: true,
                     imports: [FormsModule],
@@ -3197,117 +2670,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
 
 class TitleComponent {
     constructor() {
-        this.currentDirection = "";
         this.source = input.required();
         this.column = input.required();
-        this.sort = output();
-        this.dataChangedSub = false;
+        this.destroyRef = inject(DestroyRef);
+        this.currentSortDirection = signal('');
     }
-    ngOnChanges(changes) {
-        if (changes["source"]) {
-            if (!changes["source"].firstChange && this.dataChangedSub) {
-                this.dataChangedSub.unsubscribe();
+    ngOnInit() {
+        this.source()
+            .onChanged()
+            .pipe(map(({ sort }) => {
+            if (sort.field === this.column().id) {
+                return sort.direction;
             }
-            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 = "";
-                }
-            });
-        }
-    }
-    ngOnDestroy() {
-        if (this.dataChangedSub) {
-            this.dataChangedSub?.unsubscribe();
-        }
+            else {
+                return '';
+            }
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe(this.currentSortDirection.set);
     }
     _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);
-    }
-    changeSortDirection() {
-        if (this.currentDirection) {
-            const newDirection = this.currentDirection === "asc" ? "desc" : "asc";
-            this.currentDirection = newDirection;
-        }
-        else {
-            this.currentDirection = this.column().sortDirection;
-        }
-        return this.currentDirection;
+        this.source().setSort({
+            field: this.column().id,
+            direction: this.currentSortDirection() === 'desc' ? 'asc' : 'desc',
+            compare: this.column().compareFunction,
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TitleComponent, isStandalone: true, selector: "ng2-smart-table-title", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { sort: "sort" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TitleComponent, isStandalone: true, selector: "ng2-smart-table-title", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     @if (column().isSortable) {
-    <a
-      href="#"
-      (click)="_sort($event)"
-      class="ng2-smart-sort-link sort"
-      [class]="currentDirection"
-    >
+    <a href="#" (click)="_sort($event)" class="ng2-smart-sort-link sort" [class]="currentSortDirection()">
       {{ column().title }}
     </a>
     } @else {
     <span class="ng2-smart-sort">{{ 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{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);margin-bottom:-2px}\n"] }); }
+  `, isInline: true, styles: ["a.sort{white-space:nowrap}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{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);margin-bottom:-2px}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: "ng2-smart-table-title", template: `
+            args: [{ selector: 'ng2-smart-table-title', template: `
     @if (column().isSortable) {
-    <a
-      href="#"
-      (click)="_sort($event)"
-      class="ng2-smart-sort-link sort"
-      [class]="currentDirection"
-    >
+    <a href="#" (click)="_sort($event)" class="ng2-smart-sort-link sort" [class]="currentSortDirection()">
       {{ column().title }}
     </a>
     } @else {
     <span class="ng2-smart-sort">{{ column().title }}</span>
     }
-  `, standalone: 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{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);margin-bottom:-2px}\n"] }]
+  `, standalone: true, styles: ["a.sort{white-space:nowrap}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{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);margin-bottom:-2px}\n"] }]
         }] });
 
 class ColumnTitleComponent {
     constructor() {
         this.source = input.required();
         this.column = input.required();
-        this.sort = output();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: ColumnTitleComponent, isStandalone: true, selector: "ng2-st-column-title", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { sort: "sort" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: ColumnTitleComponent, isStandalone: true, selector: "ng2-st-column-title", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     <div class="ng2-smart-title">
-      <ng2-smart-table-title
-        [source]="source()"
-        [column]="column()"
-        (sort)="sort.emit($event)"
-      ></ng2-smart-table-title>
+      <ng2-smart-table-title [source]="source()" [column]="column()"></ng2-smart-table-title>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: TitleComponent, selector: "ng2-smart-table-title", inputs: ["source", "column"], outputs: ["sort"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: TitleComponent, selector: "ng2-smart-table-title", inputs: ["source", "column"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTitleComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "ng2-st-column-title",
+                    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>
+      <ng2-smart-table-title [source]="source()" [column]="column()"></ng2-smart-table-title>
     </div>
   `,
                     standalone: true,
@@ -3319,76 +2750,44 @@ class TheadTitlesRowComponent {
     constructor() {
         this.grid = input.required();
         this.source = input.required();
-        this.sort = output();
         this.selectAllRows = output();
     }
-    getVisibleColumns() {
-        return (this.grid().getColumns() || []).filter((column) => !column.hide);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadTitlesRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadTitlesRowComponent, isStandalone: true, selector: "[ng2-st-thead-titles-row]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { sort: "sort", selectAllRows: "selectAllRows" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadTitlesRowComponent, isStandalone: true, selector: "[ng2-st-thead-titles-row]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectAllRows: "selectAllRows" }, ngImport: i0, template: `
     @if (grid().isMultiSelectVisible()) {
-    <th
-      ng2-st-checkbox-select-all
-      [grid]="grid()"
-      (click)="selectAllRows.emit($event)"
-    ></th>
+    <th ng2-st-checkbox-select-all [grid]="grid()" (click)="selectAllRows.emit()"></th>
     } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
 
     <th ng2-st-actions-title [grid]="grid()"></th>
-    } @for (column of getVisibleColumns(); track column.id + $index) {
-    <th
-      class="ng2-smart-th {{ column.id }}"
-      [class]="column.class"
-      [style.width]="column.width"
-    >
-      <ng2-st-column-title
-        [source]="source()"
-        [column]="column"
-        (sort)="sort.emit($event)"
-      ></ng2-st-column-title>
+    } @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
+    <th class="ng2-smart-th {{ column.id }}" [class]="column.class" [style.width]="column.width">
+      <ng2-st-column-title [source]="source()" [column]="column"></ng2-st-column-title>
     </th>
     } @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
     <th ng2-st-actions-title [grid]="grid()"></th>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: CheckboxSelectAllComponent, selector: "[ng2-st-checkbox-select-all]", inputs: ["grid"] }, { kind: "component", type: ActionsTitleComponent, selector: "[ng2-st-actions-title]", inputs: ["grid"] }, { kind: "component", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["source", "column"], outputs: ["sort"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: CheckboxSelectAllComponent, selector: "[ng2-st-checkbox-select-all]", inputs: ["grid"] }, { kind: "component", type: ActionsTitleComponent, selector: "[ng2-st-actions-title]", inputs: ["grid"] }, { kind: "component", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["source", "column"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadTitlesRowComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "[ng2-st-thead-titles-row]",
+                    selector: '[ng2-st-thead-titles-row]',
                     template: `
     @if (grid().isMultiSelectVisible()) {
-    <th
-      ng2-st-checkbox-select-all
-      [grid]="grid()"
-      (click)="selectAllRows.emit($event)"
-    ></th>
+    <th ng2-st-checkbox-select-all [grid]="grid()" (click)="selectAllRows.emit()"></th>
     } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
 
     <th ng2-st-actions-title [grid]="grid()"></th>
-    } @for (column of getVisibleColumns(); track column.id + $index) {
-    <th
-      class="ng2-smart-th {{ column.id }}"
-      [class]="column.class"
-      [style.width]="column.width"
-    >
-      <ng2-st-column-title
-        [source]="source()"
-        [column]="column"
-        (sort)="sort.emit($event)"
-      ></ng2-st-column-title>
+    } @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
+    <th class="ng2-smart-th {{ column.id }}" [class]="column.class" [style.width]="column.width">
+      <ng2-st-column-title [source]="source()" [column]="column"></ng2-st-column-title>
     </th>
     } @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
     <th ng2-st-actions-title [grid]="grid()"></th>
     }
   `,
                     standalone: true,
-                    imports: [
-                        CheckboxSelectAllComponent,
-                        ActionsTitleComponent,
-                        ColumnTitleComponent,
-                    ],
+                    imports: [CheckboxSelectAllComponent, ActionsTitleComponent, ColumnTitleComponent],
                 }]
         }] });
 
@@ -3396,10 +2795,8 @@ class Ng2SmartTableTheadComponent {
     constructor() {
         this.grid = input.required();
         this.source = input.required();
-        this.sort = output();
         this.selectAllRows = output();
         this.create = output();
-        this.filter = output();
         this.isHideHeader = computed(() => {
             return this.grid().settings()?.hideHeader || false;
         });
@@ -3408,15 +2805,11 @@ class Ng2SmartTableTheadComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableTheadComponent, isStandalone: true, selector: "[ng2-st-thead]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, createConfirm: { classPropertyName: "createConfirm", publicName: "createConfirm", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { sort: "sort", selectAllRows: "selectAllRows", create: "create", filter: "filter" }, ngImport: i0, template: "@if (!isHideHeader()) {\n  <tr ng2-st-thead-titles-row\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\n@if (!isHideSubHeader()) {\n  <tr ng2-st-thead-filters-row\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\n@if (grid().createFormShown) {\n  <tr ng2-st-thead-form-row\n    [grid]=\"grid()\"\n    [createConfirm]=\"createConfirm\">\n  </tr>\n}\n", dependencies: [{ kind: "component", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: ["grid", "source"], outputs: ["sort", "selectAllRows"] }, { kind: "component", type: TheadFiltersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: ["grid", "source"], outputs: ["create", "filter"] }, { kind: "component", type: TheadFormRowComponent, selector: "[ng2-st-thead-form-row]", inputs: ["grid", "createConfirm"], outputs: ["create"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableTheadComponent, isStandalone: true, selector: "[ng2-st-thead]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, createConfirm: { classPropertyName: "createConfirm", publicName: "createConfirm", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectAllRows: "selectAllRows", create: "create" }, ngImport: i0, template: "@if (!isHideHeader()) {\n  <tr ng2-st-thead-titles-row\n    class=\"ng2-smart-titles\"\n    [grid]=\"grid()\"\n    [source]=\"source()\"\n    (selectAllRows)=\"selectAllRows.emit()\">\n  </tr>\n}\n\n@if (!isHideSubHeader()) {\n  <tr ng2-st-thead-filters-row\n    class=\"ng2-smart-filters\"\n    [grid]=\"grid()\"\n    [source]=\"source()\"\n    (create)=\"create.emit($event)\">\n  </tr>\n}\n\n@if (grid().createFormShown) {\n  <tr ng2-st-thead-form-row\n    [grid]=\"grid()\"\n    [createConfirm]=\"createConfirm\">\n  </tr>\n}\n", dependencies: [{ kind: "component", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: ["grid", "source"], outputs: ["selectAllRows"] }, { kind: "component", type: TheadFiltersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: ["grid", "source"], outputs: ["create"] }, { kind: "component", type: TheadFormRowComponent, selector: "[ng2-st-thead-form-row]", inputs: ["grid", "createConfirm"], outputs: ["create"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTheadComponent, decorators: [{
             type: Component,
-            args: [{ selector: "[ng2-st-thead]", standalone: true, imports: [
-                        TheadTitlesRowComponent,
-                        TheadFiltersRowComponent,
-                        TheadFormRowComponent,
-                    ], template: "@if (!isHideHeader()) {\n  <tr ng2-st-thead-titles-row\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\n@if (!isHideSubHeader()) {\n  <tr ng2-st-thead-filters-row\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\n@if (grid().createFormShown) {\n  <tr ng2-st-thead-form-row\n    [grid]=\"grid()\"\n    [createConfirm]=\"createConfirm\">\n  </tr>\n}\n" }]
+            args: [{ selector: '[ng2-st-thead]', standalone: true, imports: [TheadTitlesRowComponent, TheadFiltersRowComponent, TheadFormRowComponent], template: "@if (!isHideHeader()) {\n  <tr ng2-st-thead-titles-row\n    class=\"ng2-smart-titles\"\n    [grid]=\"grid()\"\n    [source]=\"source()\"\n    (selectAllRows)=\"selectAllRows.emit()\">\n  </tr>\n}\n\n@if (!isHideSubHeader()) {\n  <tr ng2-st-thead-filters-row\n    class=\"ng2-smart-filters\"\n    [grid]=\"grid()\"\n    [source]=\"source()\"\n    (create)=\"create.emit($event)\">\n  </tr>\n}\n\n@if (grid().createFormShown) {\n  <tr ng2-st-thead-form-row\n    [grid]=\"grid()\"\n    [createConfirm]=\"createConfirm\">\n  </tr>\n}\n" }]
         }], propDecorators: { createConfirm: [{
                 type: Input
             }] } });
@@ -3437,21 +2830,17 @@ class Ng2SmartTableComponent {
         this.editConfirm = output();
         this.createConfirm = output();
         this.tableClass = computed(() => {
-            return this.settings().attr?.class || "";
+            return this.settings().attr?.class || '';
         });
         this.tableId = computed(() => {
             return this.settings().attr?.id || getRandomId();
         });
-        this.perPageSelect = computed(() => {
-            const { pager } = this.settings();
-            return pager ? pager.perPageSelect || [] : [];
-        });
         this.isPagerDisplay = computed(() => {
             const { pager } = this.settings();
             return pager ? pager.display : false;
         });
         this.rowClassFunction = computed(() => {
-            return this.settings().rowClassFunction || (() => "");
+            return this.settings().rowClassFunction || (() => '');
         });
     }
     ngOnChanges({ settings }) {
@@ -3472,7 +2861,7 @@ class Ng2SmartTableComponent {
         this.emitUserSelectRow(row);
     }
     onSelectAllRows() {
-        this.grid.selectAllRows(!this.grid.dataSet.isAllSelected);
+        this.grid.selectAllRows(!this.grid.dataSet.isAllSelected());
         this.emitUserSelectRow(null);
     }
     onSelectRow(row, state) {
@@ -3497,20 +2886,16 @@ class Ng2SmartTableComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableComponent, isStandalone: true, selector: "ng2-smart-table", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { multiRowSelect: "multiRowSelect", rowClicked: "rowClicked", columnsSorted: "columnsSorted", delete: "delete", edit: "edit", editCancel: "editCancel", create: "create", custom: "custom", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm", createConfirm: "createConfirm" }, usesOnChanges: true, ngImport: i0, template: "<table [id]=\"tableId()\" [class]=\"tableClass()\">\n  <thead\n    ng2-st-thead\n    [grid]=\"grid\"\n    [source]=\"source()\"\n    [createConfirm]=\"createConfirm\"\n    (create)=\"create.emit($event)\"\n    (selectAllRows)=\"onSelectAllRows()\"\n  ></thead>\n\n  <tbody\n    ng2-st-tbody\n    [grid]=\"grid\"\n    [source]=\"source()\"\n    [deleteConfirm]=\"deleteConfirm\"\n    [editConfirm]=\"editConfirm\"\n    [createConfirm]=\"createConfirm\"\n    [rowClassFunction]=\"rowClassFunction()\"\n    (edit)=\"edit.emit($event)\"\n    (editCancel)=\"editCancel.emit($event)\"\n    (delete)=\"delete.emit($event)\"\n    (custom)=\"custom.emit($event)\"\n    (userClickedRow)=\"emitUserRowClicked($event)\"\n    (multipleSelectRow)=\"multipleSelectRow($event)\"\n  ></tbody>\n</table>\n\n@if (isPagerDisplay()) {\n<ng2-smart-table-pager [source]=\"source()\" [perPageSelect]=\"perPageSelect()\">\n</ng2-smart-table-pager>\n}\n", styles: [":host{font-size:1rem}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep button,:host ::ng-deep input,:host ::ng-deep optgroup,:host ::ng-deep select,:host ::ng-deep textarea{color:inherit;font:inherit;margin:0}:host ::ng-deep table{line-height:1.5em;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;word-break:normal;word-break:keep-all;overflow:auto}:host ::ng-deep table tr th{font-weight:700}:host ::ng-deep table tr section{font-size:.75em;font-weight:700}:host ::ng-deep table tr td,:host ::ng-deep table tr th{font-size:.875em;margin:0;padding:.5em 1em}:host ::ng-deep a{color:#1e6bb8;text-decoration:none}:host ::ng-deep a:hover{text-decoration:underline}\n"], dependencies: [{ kind: "component", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: ["grid", "source", "createConfirm"], outputs: ["sort", "selectAllRows", "create", "filter"] }, { kind: "component", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: ["grid", "source", "deleteConfirm", "createConfirm", "editConfirm", "rowClassFunction"], outputs: ["save", "edit", "editCancel", "delete", "custom", "edited", "userSelectRow", "userClickedRow", "multipleSelectRow"] }, { kind: "component", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: ["source", "perPageSelect"], outputs: ["changePage"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableComponent, isStandalone: true, selector: "ng2-smart-table", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { multiRowSelect: "multiRowSelect", rowClicked: "rowClicked", columnsSorted: "columnsSorted", delete: "delete", edit: "edit", editCancel: "editCancel", create: "create", custom: "custom", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm", createConfirm: "createConfirm" }, usesOnChanges: true, ngImport: i0, template: "<table [id]=\"tableId()\" [class]=\"tableClass()\">\n  <thead\n    ng2-st-thead\n    [grid]=\"grid\"\n    [source]=\"source()\"\n    [createConfirm]=\"createConfirm\"\n    (create)=\"create.emit($event)\"\n    (selectAllRows)=\"onSelectAllRows()\"\n  ></thead>\n\n  <tbody\n    ng2-st-tbody\n    [grid]=\"grid\"\n    [source]=\"source()\"\n    [deleteConfirm]=\"deleteConfirm\"\n    [editConfirm]=\"editConfirm\"\n    [createConfirm]=\"createConfirm\"\n    [rowClassFunction]=\"rowClassFunction()\"\n    (edit)=\"edit.emit($event)\"\n    (editCancel)=\"editCancel.emit($event)\"\n    (delete)=\"delete.emit($event)\"\n    (custom)=\"custom.emit($event)\"\n    (userClickedRow)=\"emitUserRowClicked($event)\"\n    (multipleSelectRow)=\"multipleSelectRow($event)\"\n  ></tbody>\n</table>\n\n@if (isPagerDisplay()) {\n<ng2-smart-table-pager [source]=\"source()\">\n</ng2-smart-table-pager>\n}\n", styles: [":host{font-size:1rem}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep button,:host ::ng-deep input,:host ::ng-deep optgroup,:host ::ng-deep select,:host ::ng-deep textarea{color:inherit;font:inherit;margin:0}:host ::ng-deep table{line-height:1.5em;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;word-break:normal;word-break:keep-all;overflow:auto}:host ::ng-deep table tr th{font-weight:700}:host ::ng-deep table tr section{font-size:.75em;font-weight:700}:host ::ng-deep table tr td,:host ::ng-deep table tr th{font-size:.875em;margin:0;padding:.5em 1em}:host ::ng-deep a{color:#1e6bb8;text-decoration:none}:host ::ng-deep a:hover{text-decoration:underline}\n"], dependencies: [{ kind: "component", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: ["grid", "source", "createConfirm"], outputs: ["selectAllRows", "create"] }, { kind: "component", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: ["grid", "source", "deleteConfirm", "createConfirm", "editConfirm", "rowClassFunction"], outputs: ["save", "edit", "editCancel", "delete", "custom", "edited", "userSelectRow", "userClickedRow", "multipleSelectRow"] }, { kind: "component", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: ["source"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: "ng2-smart-table", standalone: true, imports: [
-                        Ng2SmartTableTheadComponent,
-                        Ng2SmartTableTbodyComponent,
-                        PagerComponent,
-                    ], template: "<table [id]=\"tableId()\" [class]=\"tableClass()\">\n  <thead\n    ng2-st-thead\n    [grid]=\"grid\"\n    [source]=\"source()\"\n    [createConfirm]=\"createConfirm\"\n    (create)=\"create.emit($event)\"\n    (selectAllRows)=\"onSelectAllRows()\"\n  ></thead>\n\n  <tbody\n    ng2-st-tbody\n    [grid]=\"grid\"\n    [source]=\"source()\"\n    [deleteConfirm]=\"deleteConfirm\"\n    [editConfirm]=\"editConfirm\"\n    [createConfirm]=\"createConfirm\"\n    [rowClassFunction]=\"rowClassFunction()\"\n    (edit)=\"edit.emit($event)\"\n    (editCancel)=\"editCancel.emit($event)\"\n    (delete)=\"delete.emit($event)\"\n    (custom)=\"custom.emit($event)\"\n    (userClickedRow)=\"emitUserRowClicked($event)\"\n    (multipleSelectRow)=\"multipleSelectRow($event)\"\n  ></tbody>\n</table>\n\n@if (isPagerDisplay()) {\n<ng2-smart-table-pager [source]=\"source()\" [perPageSelect]=\"perPageSelect()\">\n</ng2-smart-table-pager>\n}\n", styles: [":host{font-size:1rem}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep button,:host ::ng-deep input,:host ::ng-deep optgroup,:host ::ng-deep select,:host ::ng-deep textarea{color:inherit;font:inherit;margin:0}:host ::ng-deep table{line-height:1.5em;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;word-break:normal;word-break:keep-all;overflow:auto}:host ::ng-deep table tr th{font-weight:700}:host ::ng-deep table tr section{font-size:.75em;font-weight:700}:host ::ng-deep table tr td,:host ::ng-deep table tr th{font-size:.875em;margin:0;padding:.5em 1em}:host ::ng-deep a{color:#1e6bb8;text-decoration:none}:host ::ng-deep a:hover{text-decoration:underline}\n"] }]
+            args: [{ selector: 'ng2-smart-table', standalone: true, imports: [Ng2SmartTableTheadComponent, Ng2SmartTableTbodyComponent, PagerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table [id]=\"tableId()\" [class]=\"tableClass()\">\n  <thead\n    ng2-st-thead\n    [grid]=\"grid\"\n    [source]=\"source()\"\n    [createConfirm]=\"createConfirm\"\n    (create)=\"create.emit($event)\"\n    (selectAllRows)=\"onSelectAllRows()\"\n  ></thead>\n\n  <tbody\n    ng2-st-tbody\n    [grid]=\"grid\"\n    [source]=\"source()\"\n    [deleteConfirm]=\"deleteConfirm\"\n    [editConfirm]=\"editConfirm\"\n    [createConfirm]=\"createConfirm\"\n    [rowClassFunction]=\"rowClassFunction()\"\n    (edit)=\"edit.emit($event)\"\n    (editCancel)=\"editCancel.emit($event)\"\n    (delete)=\"delete.emit($event)\"\n    (custom)=\"custom.emit($event)\"\n    (userClickedRow)=\"emitUserRowClicked($event)\"\n    (multipleSelectRow)=\"multipleSelectRow($event)\"\n  ></tbody>\n</table>\n\n@if (isPagerDisplay()) {\n<ng2-smart-table-pager [source]=\"source()\">\n</ng2-smart-table-pager>\n}\n", styles: [":host{font-size:1rem}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep button,:host ::ng-deep input,:host ::ng-deep optgroup,:host ::ng-deep select,:host ::ng-deep textarea{color:inherit;font:inherit;margin:0}:host ::ng-deep table{line-height:1.5em;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;word-break:normal;word-break:keep-all;overflow:auto}:host ::ng-deep table tr th{font-weight:700}:host ::ng-deep table tr section{font-size:.75em;font-weight:700}:host ::ng-deep table tr td,:host ::ng-deep table tr th{font-size:.875em;margin:0;padding:.5em 1em}:host ::ng-deep a{color:#1e6bb8;text-decoration:none}:host ::ng-deep a:hover{text-decoration:underline}\n"] }]
         }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { Cell, Column, DataSource, DefaultEditor, DefaultFilter, Deferred, LocalDataSource, Ng2SmartTableComponent, Row, SmartTableColumnEditorDirective, SmartTableOnChangedEventName };
+export { BaseEditorComponent, BaseFilterComponent, Cell, Column, DataSource, Deferred, LocalDataSource, Ng2SmartTableComponent, Row, ServerDataSource, SmartTableColumnEditorDirective, SmartTableOnChangedEventName };
 //# sourceMappingURL=den4ik92-ng2-smart-table.mjs.map