@one-paragon/angular-utilities 1.2.11 → 1.2.13

package/fesm2022/one-paragon-angular-utilities.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, inject, Injector, TemplateRef, ViewContainerRef, NgModule, assertInInjectionContext, DestroyRef, isSignal, computed, Injectable, Pipe, Renderer2, ElementRef, booleanAttribute, signal, InjectionToken, makeEnvironmentProviders, HostListener, Component, ChangeDetectionStrategy, EventEmitter, untracked, Output, ContentChildren, ChangeDetectorRef, input, output, ViewChild, EnvironmentInjector, createComponent, viewChild, effect, forwardRef, contentChildren, ContentChild, APP_INITIALIZER } from '@angular/core';
-import { shareReplay, switchAll, map, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap as concatMap$1, takeUntil, distinctUntilChanged, first as first$1, distinctUntilKeyChanged, delay as delay$1, observeOn, scan as scan$1, timestamp as timestamp$1, withLatestFrom, mergeAll } from 'rxjs/operators';
+import { Directive, Input, inject, Injector, TemplateRef, ViewContainerRef, NgModule, assertInInjectionContext, DestroyRef, isSignal, computed, Injectable, Pipe, Renderer2, ElementRef, booleanAttribute, signal, InjectionToken, makeEnvironmentProviders, HostListener, Component, ChangeDetectionStrategy, EventEmitter, untracked, Output, ContentChildren, ChangeDetectorRef, input, output, ViewChild, EnvironmentInjector, createComponent, viewChild, effect, forwardRef, contentChildren, runInInjectionContext, ContentChild, APP_INITIALIZER } from '@angular/core';
+import { shareReplay, switchAll, map, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap as concatMap$1, takeUntil, debounceTime, distinctUntilChanged, first as first$1, observeOn, scan as scan$1, timestamp as timestamp$1, mergeAll } from 'rxjs/operators';
 import * as i1 from 'rxjs';
-import { Subject, isObservable, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, concatMap, merge, delay, fromEvent, tap as tap$1, BehaviorSubject, takeUntil as takeUntil$1, switchMap as switchMap$1, scan, asyncScheduler, animationFrameScheduler, distinctUntilChanged as distinctUntilChanged$1, timestamp, skip } from 'rxjs';
+import { Subject, isObservable, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, concatMap, merge, delay, fromEvent, BehaviorSubject, takeUntil as takeUntil$1, tap as tap$1, switchMap as switchMap$1, scan, animationFrameScheduler, timestamp } from 'rxjs';
 import { ComponentStore } from '@ngrx/component-store';
 import { toObservable, toSignal } from '@angular/core/rxjs-interop';
 import * as i1$8 from '@angular/common';
@@ -10,7 +10,7 @@ import { DatePipe, CurrencyPipe, AsyncPipe, KeyValuePipe, NgTemplateOutlet, NgCl
 import * as i3$2 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { v4 } from 'uuid';
-import { merge as merge$1, get, sumBy, difference, orderBy, intersection, groupBy, set, cloneDeep } from 'lodash';
+import { merge as merge$1, get, sumBy, difference, intersection, groupBy, orderBy, set, cloneDeep } from 'lodash';
 import { CdkColumnDef } from '@angular/cdk/table';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
 import * as i10 from '@angular/material/radio';
@@ -1118,27 +1118,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     selector: ' '
                 }]
         }] });
-class TableFilterDirective extends ComponentStore {
+class TableFilterDirective {
     model = inject(NgControl, { optional: true });
     wrapper = inject(TableWrapperDirective, { optional: true });
     constructor() {
-        super();
         if (this.wrapper) {
             this.wrapper.register(this);
         }
         if (this.model) {
-            this.effect(() => {
-                return this.model.valueChanges.pipe(tap$1(val => {
-                    this.filterValue = val;
-                    this.update();
-                }));
+            subscriber(this.model.valueChanges, val => {
+                this.filterValue = val;
+                this.update();
             });
         }
     }
     reset() {
         this.filterValue = undefined;
     }
-    filter$ = this.state$;
+    filter$ = new Subject;
     filterType;
     key;
     fieldType;
@@ -1173,7 +1170,7 @@ class TableFilterDirective extends ComponentStore {
         this.update();
     }
     setFilter(filter) {
-        this.setState(filter);
+        this.filter$.next(filter);
     }
     update() {
         if (this.ready) {
@@ -1189,7 +1186,7 @@ class TableFilterDirective extends ComponentStore {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TableFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: TableFilterDirective, isStandalone: true, selector: "[tbFilter]", inputs: { filterType: "filterType", key: "key", fieldType: "fieldType", filterId: "filterId", active: "active", filterValue: "filterValue" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: TableFilterDirective, isStandalone: true, selector: "[tbFilter]", inputs: { filterType: "filterType", key: "key", fieldType: "fieldType", filterId: "filterId", active: "active", filterValue: "filterValue" }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TableFilterDirective, decorators: [{
             type: Directive,
@@ -1215,12 +1212,6 @@ class TableFilterStringContainsDirective extends TableFilterDirective {
         super();
         this.filterType = FilterTypes.StringContains;
         this.fieldType = FieldType.String;
-        this.effect(() => {
-            return this.model.valueChanges.pipe(tap$1(val => {
-                this.filterValue = val;
-                this.update();
-            }));
-        });
     }
     reset() {
         if (this.model) {
@@ -1739,7 +1730,7 @@ class TableStore extends ComponentStore {
     }
     selectStateReady = this.select(state => state.initializationState).pipe(filter(i => i === InitializationState.Ready));
     getSavableState() {
-        return this.state$.pipe(map(s => {
+        return this.state$.pipe(debounceTime(300), map(s => {
             return this.mapSaveableState(s);
         }));
     }
@@ -1957,6 +1948,8 @@ class TableStore extends ComponentStore {
         tableSettings.collapseFooter = !tableSettings.collapseFooter;
         return ({ ...state, persistedTableSettings: new PersistedTableSettings(tableSettings) });
     });
+    $collapseFooter = this.selectSignal(state => state.persistedTableSettings.collapseFooter);
+    $collapseHeader = this.selectSignal(state => state.persistedTableSettings.collapseHeader);
     addGroupByKey = this.updater((state, metaDataKey) => ({
         ...state,
         groupBy: [...state.groupBy, { key: metaDataKey, expandedHeaders: [] }]
@@ -2039,27 +2032,22 @@ class TableStore extends ComponentStore {
             return 'all';
         }
     });
-    viewType$ = toObservable(this.$viewType);
-    $orderedVisibleColumns = this.selectSignal(this.$metaData, this.$userDefinedOrder, this.$hiddenKeys, (m, u, h) => orderedVisibleMetaData(m, u, h).map(md => md.key), { equal: (a, b) => b.length === a.length && b.every((s, i) => a[i] === s) });
+    $orderedCodeVisibleMetaDatas = this.selectSignal(this.$metaDataArray, (mds) => mds.filter(m => m.fieldType !== FieldType.Hidden), { equal: (a, b) => b.length === a.length && b.every((s, i) => a[i].key === s.key) });
+    $orderedVisibleColumns = this.selectSignal(this.$orderedCodeVisibleMetaDatas, this.$hiddenKeys, (cs, hiddenKeys) => cs.filter(m => !hiddenKeys.includes(m.key)).map(m => m.key));
+    $currentPage = this.selectSignal(state => state.currentPage);
+    $pageSize = this.selectSignal(s => s.userDefined?.pageSize || s.pageSize);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TableStore });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TableStore, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
-const orderedVisibleColumns = (state) => orderedStateVisibleMetaData(state).map(md => md.key);
 const orderedStateVisibleMetaData = (state) => {
     const ordered = orderStateMetaData(state);
     const orderedVisible = ordered
         .filter(metaData => !state.hiddenKeys.includes(metaData.key) && state.metaData[metaData.key].fieldType !== FieldType.Hidden);
     return orderedVisible;
 };
-const orderedVisibleMetaData = (metaData, userDefinedOrder, hiddenKeys) => {
-    const ordered = orderMetaData(metaData, userDefinedOrder);
-    const orderedVisible = ordered
-        .filter(m => !hiddenKeys.includes(m.key) && metaData[m.key].fieldType !== FieldType.Hidden);
-    return orderedVisible;
-};
 const orderedCodeVisibleMetaData = (state) => orderStateMetaData(state).filter(md => md.fieldType !== FieldType.Hidden);
 const orderStateMetaData = (state) => {
     return orderMetaData(state.metaData, state.userDefined.order);
@@ -2902,15 +2890,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
 
 class GenColDisplayerComponent {
     tableState = inject(TableStore);
-    columns$;
-    constructor() {
-        this.columns$ = this.tableState.state$.pipe(map(state => orderedCodeVisibleMetaData(state)
-            .map(md => ({
-            key: md.key,
-            displayName: md.displayName,
-            isVisible: !state.hiddenKeys.includes(md.key)
-        }))), defaultShareReplay());
-    }
+    $columns = computed(() => this.tableState.$orderedCodeVisibleMetaDatas().map(md => ({
+        key: md.key,
+        displayName: md.displayName,
+        isVisible: !this.tableState.$hiddenKeys().includes(md.key)
+    })));
     reset(displayCols) {
         displayCols.forEach(c => c.isVisible = true);
         this.emit(displayCols);
@@ -2926,15 +2910,15 @@ class GenColDisplayerComponent {
         this.tableState.setHiddenColumns(displayCols.map(c => ({ key: c.key, visible: c.isVisible })));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GenColDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: GenColDisplayerComponent, isStandalone: true, selector: "tb-col-displayer", ngImport: i0, template: "@if(columns$ | async; as displayCols){\r\n  <span matTooltip=\"Show/hide columns\">\r\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    </button>\r\n  </span>\r\n  <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\r\n\r\n    <button mat-menu-item>\r\n      <span matTooltip=\"Close\">\r\n        <button class=\"filter-button\" mat-icon-button>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <button mat-menu-item stop-propagation>\r\n      <span matTooltip=\"Show all columns\">\r\n        <button mat-icon-button (click)=\"reset(displayCols)\">\r\n          <mat-icon color=\"primary\">done_all</mat-icon>\r\n        </button>\r\n      </span>\r\n\r\n      <span matTooltip=\"Hide all columns\">\r\n        <button mat-icon-button (click)=\"unset(displayCols)\">\r\n          <mat-icon color=\"primary\">cancel</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation [cdkDropListLockAxis]=\"'y'\">\r\n      @for (col of displayCols; track col.key) {\r\n        <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\">\r\n        <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\">\r\n          @if(col.isVisible){\r\n            <button mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\">\r\n              <mat-icon color=\"primary\">check_box</mat-icon>\r\n            </button>\r\n          } @else {\r\n            <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\r\n              <mat-icon>indeterminate_check_box</mat-icon>\r\n            </button>\r\n          }\r\n          \r\n          <p class=\"label\">\r\n            {{col.displayName || (col.key | spaceCase) }}\r\n          </p>\r\n\r\n        </div>\r\n      </button>\r\n      }\r\n\r\n    </div>\r\n  </mat-menu>\r\n}", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.label{color:#6495ed;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: GenColDisplayerComponent, isStandalone: true, selector: "tb-col-displayer", ngImport: i0, template: "@if($columns(); as displayCols){\r\n  <span matTooltip=\"Show/hide columns\">\r\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    </button>\r\n  </span>\r\n  <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\r\n\r\n    <button mat-menu-item>\r\n      <span matTooltip=\"Close\">\r\n        <button class=\"filter-button\" mat-icon-button>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <button mat-menu-item stop-propagation>\r\n      <span matTooltip=\"Show all columns\">\r\n        <button mat-icon-button (click)=\"reset(displayCols)\">\r\n          <mat-icon color=\"primary\">done_all</mat-icon>\r\n        </button>\r\n      </span>\r\n\r\n      <span matTooltip=\"Hide all columns\">\r\n        <button mat-icon-button (click)=\"unset(displayCols)\">\r\n          <mat-icon color=\"primary\">cancel</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation [cdkDropListLockAxis]=\"'y'\">\r\n      @for (col of displayCols; track col.key) {\r\n        <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\">\r\n        <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\">\r\n          @if(col.isVisible){\r\n            <button mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\">\r\n              <mat-icon color=\"primary\">check_box</mat-icon>\r\n            </button>\r\n          } @else {\r\n            <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\r\n              <mat-icon>indeterminate_check_box</mat-icon>\r\n            </button>\r\n          }\r\n          \r\n          <p class=\"label\">\r\n            {{col.displayName || (col.key | spaceCase) }}\r\n          </p>\r\n\r\n        </div>\r\n      </button>\r\n      }\r\n\r\n    </div>\r\n  </mat-menu>\r\n}", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.label{color:#6495ed;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GenColDisplayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-col-displayer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         AsyncPipe, MatTooltipModule, MatIconModule, MatButtonModule, MatMenuModule, StopPropagationDirective,
                         DragDropModule, SpaceCasePipe
-                    ], template: "@if(columns$ | async; as displayCols){\r\n  <span matTooltip=\"Show/hide columns\">\r\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    </button>\r\n  </span>\r\n  <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\r\n\r\n    <button mat-menu-item>\r\n      <span matTooltip=\"Close\">\r\n        <button class=\"filter-button\" mat-icon-button>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <button mat-menu-item stop-propagation>\r\n      <span matTooltip=\"Show all columns\">\r\n        <button mat-icon-button (click)=\"reset(displayCols)\">\r\n          <mat-icon color=\"primary\">done_all</mat-icon>\r\n        </button>\r\n      </span>\r\n\r\n      <span matTooltip=\"Hide all columns\">\r\n        <button mat-icon-button (click)=\"unset(displayCols)\">\r\n          <mat-icon color=\"primary\">cancel</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation [cdkDropListLockAxis]=\"'y'\">\r\n      @for (col of displayCols; track col.key) {\r\n        <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\">\r\n        <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\">\r\n          @if(col.isVisible){\r\n            <button mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\">\r\n              <mat-icon color=\"primary\">check_box</mat-icon>\r\n            </button>\r\n          } @else {\r\n            <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\r\n              <mat-icon>indeterminate_check_box</mat-icon>\r\n            </button>\r\n          }\r\n          \r\n          <p class=\"label\">\r\n            {{col.displayName || (col.key | spaceCase) }}\r\n          </p>\r\n\r\n        </div>\r\n      </button>\r\n      }\r\n\r\n    </div>\r\n  </mat-menu>\r\n}", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.label{color:#6495ed;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"] }]
-        }], ctorParameters: () => [] });
+                    ], template: "@if($columns(); as displayCols){\r\n  <span matTooltip=\"Show/hide columns\">\r\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n    </button>\r\n  </span>\r\n  <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\r\n\r\n    <button mat-menu-item>\r\n      <span matTooltip=\"Close\">\r\n        <button class=\"filter-button\" mat-icon-button>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <button mat-menu-item stop-propagation>\r\n      <span matTooltip=\"Show all columns\">\r\n        <button mat-icon-button (click)=\"reset(displayCols)\">\r\n          <mat-icon color=\"primary\">done_all</mat-icon>\r\n        </button>\r\n      </span>\r\n\r\n      <span matTooltip=\"Hide all columns\">\r\n        <button mat-icon-button (click)=\"unset(displayCols)\">\r\n          <mat-icon color=\"primary\">cancel</mat-icon>\r\n        </button>\r\n      </span>\r\n    </button>\r\n\r\n    <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation [cdkDropListLockAxis]=\"'y'\">\r\n      @for (col of displayCols; track col.key) {\r\n        <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\">\r\n        <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\">\r\n          @if(col.isVisible){\r\n            <button mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\">\r\n              <mat-icon color=\"primary\">check_box</mat-icon>\r\n            </button>\r\n          } @else {\r\n            <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\r\n              <mat-icon>indeterminate_check_box</mat-icon>\r\n            </button>\r\n          }\r\n          \r\n          <p class=\"label\">\r\n            {{col.displayName || (col.key | spaceCase) }}\r\n          </p>\r\n\r\n        </div>\r\n      </button>\r\n      }\r\n\r\n    </div>\r\n  </mat-menu>\r\n}", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.label{color:#6495ed;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"] }]
+        }] });
 
 class WrapperFilterStore extends ComponentStore {
     constructor() {
@@ -3488,8 +3472,6 @@ function calculateTableDefinedWidth(metaData, tableSettingsMinWidth) {
 }
 const calculateFlexWidth = (metaData, userDefinedWidth, tableSettingsMinWidth) => {
     const definedWidth = calculateWidths(metaData, userDefinedWidth);
-    if (definedWidth)
-        console.log(metaData.key, definedWidth);
     if (definedWidth)
         return ({ flex: `0 0 ${definedWidth}`, maxWidth: 'none' });
     const style = { flex: `${1}` };
@@ -3724,7 +3706,6 @@ class GenericTableComponent {
     myColumns = signal({});
     $showHeader = computed(() => !this.state.tableSettings().hideColumnHeader);
     offset$ = this.dataStore.select(s => s.virtualScrollOffset);
-    offsetIndex = 0;
     dataView;
     constructor() {
         this.setUpSelections();
@@ -3796,15 +3777,21 @@ class GenericTableComponent {
                 this.selection.deselect(...removed);
             }
         });
-        if (this.state.tableSettings().usePaginator || this.state.tableSettings().useVirtualScroll) {
-            this.state.on(combineLatest([this.state.state$, this.dataStore.state$]), ([state, data]) => {
-                this.offsetIndex = data.virtualEnds.start;
-                if (this.state.tableSettings().usePaginator) {
-                    this.offsetIndex += (state.pageSize * state.currentPage);
-                }
-            });
-        }
     }
+    $usePaginator = computed(() => this.state.tableSettings().usePaginator);
+    $useVirtualScroll = computed(() => this.state.$viewType().includes('virtual'));
+    $offsetIndex = computed(() => {
+        const virtualStart = this.dataStore.selectSignal(d => d.virtualEnds.start)();
+        const pageSize = this.state.$pageSize();
+        const currentPage = this.state.$currentPage();
+        if (this.$useVirtualScroll()) {
+            return virtualStart;
+        }
+        if (this.$usePaginator()) {
+            return pageSize * currentPage;
+        }
+        return 0;
+    });
     isGroupHeader(_, row) {
         return row.isGroupHeader;
     }
@@ -3847,14 +3834,11 @@ class GenericTableComponent {
         this.state.on(this.selection.changed, c => this.selection$.emit(c));
     }
     $selectableData = computed(() => {
-        if (this.state.$viewType() === 'paginator') {
-            return this.state.props().dataSource.data;
+        if (this.state.$viewType() === 'virtual paginator' || this.state.$viewType() === 'paginator') {
+            const previousPageRecords = this.state.$currentPage() * this.state.$pageSize();
+            return this.$data().slice(previousPageRecords, previousPageRecords + this.state.$pageSize());
         }
-        else if (this.state.$viewType() === 'virtual paginator') {
-            const previousPageRecords = this.state.state().currentPage * this.state.state().pageSize;
-            return this.$data().slice(previousPageRecords, previousPageRecords + this.state.state().pageSize);
-        }
-        else if (this.state.$viewType() === 'all') {
+        else if (this.state.$viewType() === 'all' || this.state.$viewType() === 'virtual all') {
             return this.$data();
         }
         return [];
@@ -3924,14 +3908,14 @@ class GenericTableComponent {
     });
     $stickyFooter = computed(() => this.state.props().stickyFooter || this.state.$isVirtual());
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: false, isRequired: false, transformFunction: null }, $displayData: { classPropertyName: "$displayData", publicName: "displayData", isSignal: true, isRequired: true, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: false, isRequired: false, transformFunction: null }, columnBuilders: { classPropertyName: "columnBuilders", publicName: "columnBuilders", isSignal: false, isRequired: false, transformFunction: null }, $columnInfos: { classPropertyName: "$columnInfos", publicName: "columnInfos", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selection$: "selection$" }, viewQueries: [{ propertyName: "$headerRow", first: true, predicate: MatHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "$footerRow", first: true, predicate: MatFooterRowDef, descendants: true, isSignal: true }, { propertyName: "$table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-table\r\n  cdkDropList\r\n  cdkDropListLockAxis='x'\r\n  cdkDropListOrientation=\"horizontal\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n  class=\"table-drag-list\"\r\n  [class]=\"($footerRowStyle())\"\r\n  #table\r\n  [dataSource]=\"state.props().dataSource!\"\r\n  [trackBy]=\"trackByFunction\"\r\n  [style]=\"tableWidth | async \"\r\n>\r\n\r\n  <!-- select column -->\r\n  <ng-container matColumnDef=\"select\">\r\n\r\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"!!(masterToggleChecked$ | async)\"\r\n                    [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n      <mat-checkbox\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"\r\n        [checked]=\"selection.isSelected(row)\"/>\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n\r\n  <!-- index column -->\r\n  <ng-container matColumnDef=\"index\">\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\r\n      {{ 1 + i + offsetIndex }}\r\n    </mat-cell>\r\n    <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @let expanded = (state.getIsExpanded | func : row.key : row.groupName );\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\">\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\r\n          @if (!expanded()) {\r\n            <mat-icon>chevron_right</mat-icon>\r\n          } @else {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{ getTransform | func : row.key :  row.groupHeaderDisplay }} ({{ row.length }})\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n           *matRowDef=\"let row; columns: $keys(); let i = index\"/>\r\n  <mat-row [style.height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           [style.min-height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\r\n</mat-table>\r\n\r\n<mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\r\n  *matHeaderRowDef=\"$keys(); sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"/>\r\n<mat-footer-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n  *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \"\r\n  [style.bottom.px]=\"$stickyFooter() ? (offset$ | async) : undefined\"/>", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$5.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$5.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$5.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$5.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: false, isRequired: false, transformFunction: null }, $displayData: { classPropertyName: "$displayData", publicName: "displayData", isSignal: true, isRequired: true, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: false, isRequired: false, transformFunction: null }, columnBuilders: { classPropertyName: "columnBuilders", publicName: "columnBuilders", isSignal: false, isRequired: false, transformFunction: null }, $columnInfos: { classPropertyName: "$columnInfos", publicName: "columnInfos", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selection$: "selection$" }, viewQueries: [{ propertyName: "$headerRow", first: true, predicate: MatHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "$footerRow", first: true, predicate: MatFooterRowDef, descendants: true, isSignal: true }, { propertyName: "$table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-table\r\n  cdkDropList\r\n  cdkDropListLockAxis='x'\r\n  cdkDropListOrientation=\"horizontal\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n  class=\"table-drag-list\"\r\n  [class]=\"($footerRowStyle())\"\r\n  #table\r\n  [dataSource]=\"state.props().dataSource!\"\r\n  [trackBy]=\"trackByFunction\"\r\n  [style]=\"tableWidth | async \"\r\n>\r\n\r\n  <!-- select column -->\r\n  <ng-container matColumnDef=\"select\">\r\n\r\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"!!(masterToggleChecked$ | async)\"\r\n                    [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n      <mat-checkbox\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"\r\n        [checked]=\"selection.isSelected(row)\"/>\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n\r\n  <!-- index column -->\r\n  <ng-container matColumnDef=\"index\">\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\r\n      {{ 1 + i + $offsetIndex() }}\r\n    </mat-cell>\r\n    <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @let expanded = (state.getIsExpanded | func : row.key : row.groupName );\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\">\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\r\n          @if (!expanded()) {\r\n            <mat-icon>chevron_right</mat-icon>\r\n          } @else {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{ getTransform | func : row.key :  row.groupHeaderDisplay }} ({{ row.length }})\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n           *matRowDef=\"let row; columns: $keys(); let i = index\"/>\r\n  <mat-row [style.height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           [style.min-height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\r\n</mat-table>\r\n\r\n<mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\r\n  *matHeaderRowDef=\"$keys(); sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"/>\r\n<mat-footer-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n  *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \"\r\n  [style.bottom.px]=\"$stickyFooter() ? (offset$ | async) : undefined\"/>", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}mat-table{overflow-x:auto}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$5.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$5.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$5.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$5.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GenericTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
                         MatTooltipModule, AsyncPipe, FunctionPipe,
-                    ], template: "<mat-table\r\n  cdkDropList\r\n  cdkDropListLockAxis='x'\r\n  cdkDropListOrientation=\"horizontal\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n  class=\"table-drag-list\"\r\n  [class]=\"($footerRowStyle())\"\r\n  #table\r\n  [dataSource]=\"state.props().dataSource!\"\r\n  [trackBy]=\"trackByFunction\"\r\n  [style]=\"tableWidth | async \"\r\n>\r\n\r\n  <!-- select column -->\r\n  <ng-container matColumnDef=\"select\">\r\n\r\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"!!(masterToggleChecked$ | async)\"\r\n                    [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n      <mat-checkbox\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"\r\n        [checked]=\"selection.isSelected(row)\"/>\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n\r\n  <!-- index column -->\r\n  <ng-container matColumnDef=\"index\">\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\r\n      {{ 1 + i + offsetIndex }}\r\n    </mat-cell>\r\n    <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @let expanded = (state.getIsExpanded | func : row.key : row.groupName );\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\">\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\r\n          @if (!expanded()) {\r\n            <mat-icon>chevron_right</mat-icon>\r\n          } @else {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{ getTransform | func : row.key :  row.groupHeaderDisplay }} ({{ row.length }})\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n           *matRowDef=\"let row; columns: $keys(); let i = index\"/>\r\n  <mat-row [style.height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           [style.min-height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\r\n</mat-table>\r\n\r\n<mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\r\n  *matHeaderRowDef=\"$keys(); sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"/>\r\n<mat-footer-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n  *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \"\r\n  [style.bottom.px]=\"$stickyFooter() ? (offset$ | async) : undefined\"/>", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}\n"] }]
+                    ], template: "<mat-table\r\n  cdkDropList\r\n  cdkDropListLockAxis='x'\r\n  cdkDropListOrientation=\"horizontal\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n  class=\"table-drag-list\"\r\n  [class]=\"($footerRowStyle())\"\r\n  #table\r\n  [dataSource]=\"state.props().dataSource!\"\r\n  [trackBy]=\"trackByFunction\"\r\n  [style]=\"tableWidth | async \"\r\n>\r\n\r\n  <!-- select column -->\r\n  <ng-container matColumnDef=\"select\">\r\n\r\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                    [checked]=\"!!(masterToggleChecked$ | async)\"\r\n                    [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n      <mat-checkbox\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"\r\n        [checked]=\"selection.isSelected(row)\"/>\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n\r\n  <!-- index column -->\r\n  <ng-container matColumnDef=\"index\">\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\r\n      {{ 1 + i + $offsetIndex() }}\r\n    </mat-cell>\r\n    <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @let expanded = (state.getIsExpanded | func : row.key : row.groupName );\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\">\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\r\n          @if (!expanded()) {\r\n            <mat-icon>chevron_right</mat-icon>\r\n          } @else {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{ getTransform | func : row.key :  row.groupHeaderDisplay }} ({{ row.length }})\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n           *matRowDef=\"let row; columns: $keys(); let i = index\"/>\r\n  <mat-row [style.height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           [style.min-height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\r\n</mat-table>\r\n\r\n<mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\r\n  *matHeaderRowDef=\"$keys(); sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"/>\r\n<mat-footer-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n  *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \"\r\n  [style.bottom.px]=\"$stickyFooter() ? (offset$ | async) : undefined\"/>", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}mat-table{overflow-x:auto}\n"] }]
         }], ctorParameters: () => [], propDecorators: { trackBy: [{
                 type: Input
             }], rows: [{
@@ -3962,8 +3946,10 @@ class ExportToCsvService {
     config = inject(TableBuilderConfigToken);
     datePipe = inject(DatePipe);
     exportToCsv = (data) => {
-        const exportableFields$ = this.state.state$.pipe(map(mapExportableFields));
-        combineLatest([data, exportableFields$]).pipe(first$1(), map(([data, fields]) => this.csvData(data, fields))).subscribe(csv => downloadData(csv, 'export.csv', 'text/csv'));
+        const hiddenKeys = this.state.selectSignal(s => s.hiddenKeys)();
+        const meta = this.state.$metaDataArray().filter(md => !md.noExport && !hiddenKeys.includes(md.key));
+        const csv = this.csvData(data, meta);
+        downloadData(csv, 'export.csv', 'text/csv');
     };
     csvData = (data, metaData) => {
         const res = data.map(row => metaData.map(meta => this.metaToField(meta, row)).join(','));
@@ -4020,38 +4006,12 @@ class ExportToCsvService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ExportToCsvService, decorators: [{
             type: Injectable
         }] });
-const removeFromMetaData = (state, keysToRemove) => orderStateMetaData(state)
-    .filter(meta => !keysToRemove.includes(meta.key));
-const nonExportableFields = (state) => Object.values(state.metaData)
-    .filter(md => md.noExport)
-    .map(md => md.key);
-const mapExportableFields = (state) => {
-    const fieldsToRemove = nonExportableFields(state)
-        .concat(state.hiddenKeys);
-    return removeFromMetaData(state, fieldsToRemove);
-};
 
 const ArrayDefaults = {
     limit: 3,
     arrayStyle: ArrayStyle.CommaDelimited
 };
 
-function sortData(data, sorted) {
-    const ordered = orderBy(data, sorted.map(r => r.active), sorted.map(r => r.direction));
-    return ordered;
-}
-function filterData(data, filters, resetAll = false) {
-    for (let index = 0; index < data.length; index++) {
-        const element = data[index];
-        const hide = !filters.every(filter => filter(element));
-        if (hide || resetAll) {
-            element[tbNoShowSymbol] = hide;
-        }
-    }
-    return data;
-}
-const tbNoShowSymbol = Symbol('tb_no_show');
-
 function createLinkCreatorDict(metaDatas) {
     return metaDatas.reduce((acc, md) => {
         if (md.fieldType === FieldType.Link) {
@@ -4365,32 +4325,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
 class PaginatorComponent {
     state = inject(TableStore);
     data = inject(DataStore);
-    paginator;
-    currentPageData$;
-    $collapseFooter = computed(() => this.state.selectSignal(state => state.persistedTableSettings.collapseFooter)() || this.$showAll());
-    data$;
-    tableElRef;
-    ngOnInit() {
-        this.ourPageEvent = true;
-        this.state.on(metaDataPageSizeChange(this.state), setPaginatorPageSize(this.paginator));
-        this.state.on(this.paginator.page, (pageEvent) => {
-            this.state.updateState({ currentPage: pageEvent.pageIndex });
+    $paginator = viewChild(MatPaginator);
+    $tableElRef = input.required({ alias: 'tableElRef' });
+    $dataLength = this.data.selectSignal(d => d.dataLen);
+    pageEvent$ = toObservable(this.$paginator).pipe(notNull(), switchMap(p => p.page));
+    $pageEvent = toSignal(this.pageEvent$);
+    $pageIndexChangeEvent = computed(() => this.$pageEvent()?.pageIndex);
+    $pageSizeChangeEvent = computed(() => this.$pageEvent()?.pageSize);
+    $currentPageData = computed(() => {
+        const pageEvent = this.$pageEvent();
+        if (!pageEvent)
+            return;
+        const pageDetails = mapPaginationEventToCurrentPageDetails(pageEvent);
+        const dataLength = this.$dataLength();
+        return ({ ...pageDetails, total: dataLength });
+    });
+    onPageIndexEffect = effect(() => {
+        const index = this.$pageIndexChangeEvent();
+        untracked(() => this.state.updateState({ currentPage: index }));
+    });
+    onPageSizeEffect = effect(() => {
+        const size = this.$pageSizeChangeEvent();
+        if (!size)
+            return;
+        untracked(() => this.state.setPageSize(size));
+    });
+    onMetaPageSizeEffect = effect(() => {
+        const paginator = this.$paginator();
+        if (!paginator)
+            return;
+        const metaPageSize = this.state.$pageSize();
+        untracked(() => paginator._changePageSize(metaPageSize));
+    });
+    onDataLengthEffect = effect(() => {
+        const paginator = this.$paginator();
+        const dataLength = this.$dataLength();
+        untracked(() => {
+            if (paginator) {
+                paginator.length = dataLength;
+            }
         });
-        this.state.setPageSize(onPaginatorPageSizeChange(this.paginator));
-        this.state.on(this.data.select(s => s.dataLen), (len) => this.paginator.length = len);
-    }
-    ngAfterViewInit() {
-        this.currentPageData$ = merge(this.paginator.page.pipe(map(mapPaginationEventToCurrentPageDetails)), this.data$.pipe(distinctUntilKeyChanged("length"), delayToAllowForProperUpdate, map(updateCurrentPageDetailsOnDataLengthChange(this.paginator))));
-    }
-    paginatorChange() {
-        if (!this.ourPageEvent) {
-            setTimeout(() => this.tableElRef?.nativeElement?.scrollIntoView(), 0);
-        }
-        else {
-            this.ourPageEvent = false;
-        }
-    }
-    ourPageEvent = false;
+    });
+    $collapseFooter = computed(() => this.state.selectSignal(state => state.persistedTableSettings.collapseFooter)() || this.$showAll());
     $showAllOption = this.state.selectSignal(s => s.notPersistedTableSettings?.includeAllInPaginatorOptions);
     $showAll = this.state.selectSignal(s => s.showAll);
     updatePaginator = this.state.updater(state => ({ ...state, showAll: !state.showAll }));
@@ -4398,56 +4374,41 @@ class PaginatorComponent {
         this.updatePaginator();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: PaginatorComponent, isStandalone: true, selector: "tb-paginator", inputs: { data$: "data$", tableElRef: "tableElRef" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: PaginatorComponent, isStandalone: true, selector: "tb-paginator", inputs: { $tableElRef: { classPropertyName: "$tableElRef", publicName: "tableElRef", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "$paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: `
   <div class="paginator-row">
-    @if(currentPageData$ | async; as pageData){
+    @if($currentPageData(); as pageData){
       <div [class]="{ 'hide' : ! $collapseFooter(), 'page-amounts':true}">
-        @if(!$showAll()){{{pageData.currentStart}} - {{pageData.currentEnd}} of }{{pageData.total}}
+        @if(!$showAll()){ {{pageData.currentStart}} - {{pageData.currentEnd}} of }{{pageData.total}}
       </div>
     }
-    <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
+    <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons
       [class]="{ 'hide' : $collapseFooter() }">
     </mat-paginator>
     @if ($showAllOption()) {<button mat-button (click)="updatePaginator()"><span [style.text-decoration]="$showAll() ? 'line-through' : ''" >All</span></button>}
   </div>
-  `, isInline: true, styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}mat-table{overflow-x:auto}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-paginator', standalone: true, imports: [AsyncPipe, MatPaginatorModule, NgClass, MatButtonModule], template: `
+            args: [{ selector: 'tb-paginator', standalone: true, imports: [MatPaginatorModule, NgClass, MatButtonModule], template: `
   <div class="paginator-row">
-    @if(currentPageData$ | async; as pageData){
+    @if($currentPageData(); as pageData){
       <div [class]="{ 'hide' : ! $collapseFooter(), 'page-amounts':true}">
-        @if(!$showAll()){{{pageData.currentStart}} - {{pageData.currentEnd}} of }{{pageData.total}}
+        @if(!$showAll()){ {{pageData.currentStart}} - {{pageData.currentEnd}} of }{{pageData.total}}
       </div>
     }
-    <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
+    <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons
       [class]="{ 'hide' : $collapseFooter() }">
     </mat-paginator>
     @if ($showAllOption()) {<button mat-button (click)="updatePaginator()"><span [style.text-decoration]="$showAll() ? 'line-through' : ''" >All</span></button>}
   </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"] }]
-        }], propDecorators: { paginator: [{
-                type: ViewChild,
-                args: [MatPaginator, { static: true }]
-            }], data$: [{
-                type: Input
-            }], tableElRef: [{
-                type: Input,
-                args: [{ required: true }]
-            }] } });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}mat-table{overflow-x:auto}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"] }]
+        }] });
 const mapPaginationEventToCurrentPageDetails = (pageData) => ({
     currentStart: (pageData.pageIndex * pageData.pageSize) + 1,
     currentEnd: Math.min(pageData.length, ((pageData.pageIndex + 1) * pageData.pageSize)),
     total: pageData.length
 });
-const updateCurrentPageDetailsOnDataLengthChange = (paginator) => () => ({ currentStart: (paginator.pageIndex * paginator.pageSize) + 1,
-    currentEnd: Math.min(paginator.length, ((paginator.pageIndex + 1) * paginator.pageSize)),
-    total: paginator.length });
-const delayToAllowForProperUpdate = delay$1(0, asyncScheduler);
-const metaDataPageSizeChange = (state) => state.state$.pipe(map(state => state.userDefined.pageSize || state.pageSize), distinctUntilChanged());
-const setPaginatorPageSize = (paginator) => (pageSize) => paginator._changePageSize(pageSize);
-const onPaginatorPageSizeChange = (paginator) => paginator.page.pipe(map(e => e.pageSize), distinctUntilChanged());
 
 class TableVirtualScrollStrategy {
     itemHeight;
@@ -4512,47 +4473,69 @@ class VirtualScrollContainer {
     viewport = viewChild(CdkVirtualScrollViewport);
     defaultOptions = new VirtualScrollOptions();
     scrollStrategy = new TableVirtualScrollStrategy(this.computedRowHeight(), this.computedHeaderHeight());
-    dataLength$ = combineLatest([this.state.state$, this.dataStore.state$]).pipe(map$1(([s, d]) => ({
-        paginated: s.notPersistedTableSettings.usePaginator && !s.showAll,
-        pageSize: s.userDefined?.pageSize || s.pageSize,
-        pageNumber: s.currentPage,
-        dataLen: d.dataLen
-    })), distinctUntilChanged$1((a, b) => a.dataLen === b.dataLen &&
-        a.pageSize === b.pageSize &&
-        a.pageNumber === b.pageNumber &&
-        a.paginated === b.paginated), map$1(({ dataLen, pageNumber, pageSize, paginated }) => {
+    $usePaginator = this.state.selectSignal(s => s.notPersistedTableSettings.usePaginator);
+    $pageSize = this.state.$pageSize;
+    $currentPage = this.state.$currentPage;
+    $showAll = this.state.selectSignal(s => s.showAll);
+    $stateDataLength = this.dataStore.selectSignal(s => s.dataLen);
+    $dataLength = computed(() => {
+        const paginated = this.$usePaginator() && !this.$showAll();
+        const pageSize = this.$pageSize();
+        const pageNumber = this.$currentPage();
+        const dataLen = this.$stateDataLength();
         if (paginated)
             return Math.min(dataLen - (pageNumber * pageSize), pageSize);
         return dataLen;
-    }), distinctUntilChanged$1());
-    subscriber = subscriber(this.dataLength$, (dataLength) => {
-        this.scrollStrategy.setDataLength(dataLength);
-        if (this.viewport()) {
-            this.setSize(this.viewport().elementRef);
-        }
     });
-    _ = effect(() => {
+    constructor() {
+        addEventListener('resize', this.resizeHandler);
+    }
+    setViewportEffect = effect(() => {
         const viewport = this.viewport();
         untracked(() => {
             if (!!viewport) {
-                addEventListener('resize', this.resizeHandler);
-                this.subscriber.on(viewport.renderedRangeStream, (range) => {
-                    this.dataStore.patchState({
-                        virtualEnds: {
-                            start: range.start,
-                            end: range.end + 25,
-                        }
-                    });
-                });
-                var offset$ = viewport.scrolledIndexChange.pipe(map$1(() => viewport.getOffsetToRenderedContentStart() ?? 0), distinctUntilChanged$1(), defaultShareReplay());
-                this.subscriber.on(offset$, (offset) => {
-                    this.dataStore.patchState({ virtualScrollOffset: offset });
-                });
                 this.setSize(this.viewport().elementRef);
             }
             ;
         });
     });
+    subscriber = subscriber();
+    onRenderedRangeEffect = effect(() => {
+        const renderedRange = this.$renderedRange();
+        if (!renderedRange)
+            return;
+        untracked(() => {
+            this.dataStore.patchState({
+                virtualEnds: {
+                    start: renderedRange.start,
+                    end: renderedRange.end + 25,
+                }
+            });
+            this.setSize(this.viewport().elementRef);
+        });
+    });
+    onDataLengthEffect = effect(() => {
+        const dataLength = this.$dataLength();
+        untracked(() => {
+            this.scrollStrategy.setDataLength(dataLength);
+        });
+    });
+    onOffsetEffect = effect(() => {
+        const offset = this.$offset();
+        untracked(() => {
+            this.dataStore.patchState({ virtualScrollOffset: offset });
+        });
+    });
+    viewPort$ = toObservable(this.viewport).pipe(notNull());
+    $scrolledIndexChange = toSignal(this.viewPort$.pipe(switchMap$1(v => v.scrolledIndexChange)));
+    $renderedRange = toSignal(this.viewPort$.pipe(switchMap$1(v => v.renderedRangeStream)));
+    $offset = computed(() => {
+        const viewport = this.viewport();
+        const scrolledIndexChange = this.$scrolledIndexChange();
+        if (!scrolledIndexChange || !viewport)
+            return 0;
+        return viewport.getOffsetToRenderedContentStart() ?? 0;
+    });
     ngOnDestroy() {
         removeEventListener('resize', this.resizeHandler);
     }
@@ -4622,7 +4605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                         },
                     ],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class ProfilesMenuComponent {
     stateService = inject(TableBuilderStateStore);
@@ -4831,6 +4814,22 @@ const getGroupHeaders = (data, filterFunc, arr = []) => {
     return arr;
 };
 
+function sortData(data, sorted) {
+    const ordered = orderBy(data, sorted.map(r => r.active), sorted.map(r => r.direction));
+    return ordered;
+}
+function filterData(data, filters, resetAll = false) {
+    for (let index = 0; index < data.length; index++) {
+        const element = data[index];
+        const hide = !filters.every(filter => filter(element));
+        if (hide || resetAll) {
+            element[tbNoShowSymbol] = hide;
+        }
+    }
+    return data;
+}
+const tbNoShowSymbol = Symbol('tb_no_show');
+
 const sortAndFilterData = (data, sortState, filterState) => combineLatest([
     data.pipe(timestamp()),
     sortState.pipe(timestamp()),
@@ -4975,40 +4974,32 @@ class TableBuilderDataSource extends MatTableDataSource {
     constructor(dataSrc, state, data) {
         super([]);
         this.dataSrc = dataSrc;
-        const viewType$ = state.viewType$.pipe(distinctUntilChanged$1(), defaultShareReplay());
-        const distinctSizingData = combineLatest([state.state$, data.state$]).pipe(map$1(([{ currentPage, pageSize }, { virtualEnds }]) => ({ currentPage, pageSize, virtualEnd: virtualEnds?.end, virtualStart: virtualEnds?.start })), distinctUntilChanged$1((d1, d2) => d1.currentPage === d2.currentPage
-            && d1.pageSize === d2.pageSize
-            && d1.virtualEnd === d2.virtualEnd
-            && d1.virtualStart === d2.virtualStart));
-        const _dataLength = this.dataSrc.pipe(map$1((data) => data.length), distinctUntilChanged$1());
-        const firstDataLength = _dataLength.pipe(first());
-        const subsequentDataLength = _dataLength.pipe(skip(1), delay(0));
-        const dataLength = merge(firstDataLength, subsequentDataLength);
-        const dataSize$ = combineLatest([viewType$, distinctSizingData, dataLength]).pipe(map$1(([viewType, { currentPage, pageSize, virtualEnd, virtualStart }, length]) => {
+        const $currentPage = state.$currentPage;
+        const $pageSize = state.$pageSize;
+        const $virtualEnds = data.selectSignal(d => d.virtualEnds);
+        const $dataLength = computed(() => dataSrc().length);
+        const $dataSize = computed(() => {
+            const viewType = state.$viewType();
+            const dataLength = $dataLength();
+            const currentPage = $currentPage();
+            const pageSize = $pageSize();
+            const virtualEnds = $virtualEnds();
             const previousPageRecords = currentPage * pageSize;
             if (viewType === 'virtual paginator') {
-                return ({ start: virtualStart + previousPageRecords, end: Math.min(virtualEnd, pageSize) + previousPageRecords });
+                return ({ start: virtualEnds.start + previousPageRecords, end: Math.min(virtualEnds.end, pageSize) + previousPageRecords });
             }
             if (viewType === 'paginator') {
                 return ({ start: previousPageRecords, end: previousPageRecords + pageSize });
             }
             if (viewType === 'all') {
-                return ({ start: 0, end: length });
+                return ({ start: 0, end: dataLength });
             }
-            return ({ start: virtualStart, end: virtualEnd });
-        }))
-            .pipe(distinctUntilChanged$1((a, b) => a.start === b.start && a.end === b.end), defaultShareReplay());
-        this.dataToShow$ = combineLatest([this.dataSrc, dataSize$])
-            .pipe(map$1(([data, size]) => data.slice(size.start, size.end)))
-            .pipe(defaultShareReplay());
+            return ({ start: virtualEnds.start, end: virtualEnds.end });
+        });
+        const $dataToShow = computed(() => dataSrc().slice($dataSize().start, $dataSize().end));
+        effect(() => this.data = $dataToShow());
     }
-    dataToShow$;
     connect() {
-        if (!this.subscription) {
-            this.subscription = this.dataToShow$.subscribe((data) => {
-                this.data = data;
-            });
-        }
         return super.connect();
     }
     disconnect() {
@@ -5022,7 +5013,7 @@ class TableBuilderDataSource extends MatTableDataSource {
 
 class TableContainerComponent {
     props = { ...defaultProps };
-    dataSubject = new ReplaySubject(1);
+    data = new BehaviorSubject([]);
     state = inject(TableStore);
     dataStore = inject(DataStore);
     config = inject(TableBuilderConfigToken);
@@ -5032,7 +5023,7 @@ class TableContainerComponent {
     injector = inject(Injector);
     filterDirectives = contentChildren(TableFilterDirective, { descendants: true });
     customFilterDirectives = contentChildren(TableCustomFilterDirective, { descendants: true });
-    allFilterDirectives = computed(() => {
+    $allFilterDirectives = computed(() => {
         if (this.wrapper) {
             return [...this.filterDirectives(), ...this.customFilterDirectives(), ...this.wrapper.$registrations()];
         }
@@ -5040,15 +5031,17 @@ class TableContainerComponent {
             return [...this.filterDirectives(), ...this.customFilterDirectives()];
         }
     });
-    tableState = toSignal(this.state.state$.pipe(filter(stateIs(InitializationState.LoadedFromStore))));
+    $isInitializationState = (state) => computed(() => this.state.selectSignal(s => s.initializationState === state)());
     allFilterDirectivesEffect = effect(() => {
-        const state = this.tableState();
+        const loaded = this.$isInitializationState(InitializationState.LoadedFromStore)();
+        const stateFilters = this.state.$filters();
+        const filterDirectives = this.$allFilterDirectives();
         untracked(() => {
-            if (state) {
-                this.allFilterDirectives().filter(f => !f.used).forEach(f => {
+            if (loaded) {
+                filterDirectives.filter(f => !f.used).forEach(f => {
                     f.used = true;
                     if (f.savable) {
-                        var filter = state.filters[f.filterId];
+                        var filter = stateFilters[f.filterId];
                         if (isFilterInfo(filter)) {
                             const filterDirective = f;
                             filterDirective.fieldType = filter.fieldType;
@@ -5100,27 +5093,27 @@ class TableContainerComponent {
     trackBy;
     inputFilters;
     selection$ = new EventEmitter();
-    data = this.dataSubject.pipe(switchAll(), startWith([]), defaultShareReplay());
+    $data = toSignal(this.data, { initialValue: [] });
     onStateReset = new EventEmitter();
     onSaveState = new EventEmitter();
     state$ = this.state.getSavableState().pipe(map(state => cloneDeep(state)), defaultShareReplay());
     clearSelections() {
         this.genericTable?.selection.clear(true);
     }
-    displayDataSubject = new ReplaySubject(1);
-    displayData = this.displayDataSubject.pipe(switchAll(), defaultShareReplay());
+    displayData = new ReplaySubject(1);
     $displayData = toSignal(this.displayData, { initialValue: [] });
-    collapseFooter$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseFooter));
+    $collapseFooter = this.state.$collapseFooter;
+    $collapseHeader = this.state.$collapseHeader;
     ngOnDestroy() {
         if (this.tableId) {
             this.stateService.saveTableStateToLocal({ tableId: this.tableId, tableState: this.state.getSavableStateSignal() });
         }
     }
     firstPage() {
-        this.paginatorComponent?.paginator?.firstPage();
+        this.paginatorComponent?.$paginator()?.firstPage();
     }
     lastPage() {
-        this.paginatorComponent?.paginator?.lastPage();
+        this.paginatorComponent?.$paginator()?.lastPage();
     }
     resetState() {
         this.customFilterDirectives().forEach(cf => cf.reset());
@@ -5128,22 +5121,22 @@ class TableContainerComponent {
         this.state.resetState();
         this.onStateReset.next(null);
     }
-    initializeState() {
-        this.state.setTableSettings(this.tableBuilder.settings);
-        this.state.runOnceWhen(stateIs(InitializationState.MetaDataLoaded), () => {
-            if (this.tableId) {
-                const persistedState$ = toObservable(this.stateService.$selectLocalTableStateForView(this.tableId), { injector: this.injector }).pipe(tap(persistedState => {
-                    if (!persistedState) {
-                        this.state.setInitializationState(InitializationState.LoadedFromStore);
+    initializeStateEffect = effect(() => {
+        const metaLoaded = this.$isInitializationState(InitializationState.MetaDataLoaded)();
+        untracked(() => {
+            if (metaLoaded) {
+                this.state.setTableSettings(this.tableBuilder.settings);
+                if (this.tableId) {
+                    const persistedState = this.stateService.$selectLocalTableStateForView(this.tableId)();
+                    if (persistedState) {
+                        this.state.updateStateFromPersistedState(persistedState);
+                        return;
                     }
-                }), notNull());
-                this.state.updateStateFromPersistedState(persistedState$.pipe(notNull()));
-            }
-            else {
+                }
                 this.state.setInitializationState(InitializationState.LoadedFromStore);
             }
         });
-    }
+    });
     customFilters$ = new BehaviorSubject([]);
     initializeData() {
         const predicateFilters$ = combineLatest([this.inputFilters?.pipe(startWith([])) ?? of([]), this.customFilters$])
@@ -5156,29 +5149,35 @@ class TableContainerComponent {
         const sortsState$ = this.state.sort$.pipe(scan$1(updateSortState, initialSortState));
         const sortedAndFilteredData$ = sortAndFilterData(this.tableBuilder.getData$(), sortsState$, filters$);
         const flatGrouped$ = combineLatest([sortedAndFilteredData$.pipe(timestamp$1()), this.state.groupByKeys$.pipe(timestamp$1()), this.state.expandedGroups$.pipe(timestamp$1())]).pipe(scan$1(updateGroupByState, initialGroupByState), map(({ displayData }) => displayData), defaultShareReplay());
-        this.displayDataSubject.next(flatGrouped$);
-        this.dataSubject.next(sortedAndFilteredData$);
-        this.state.on(this.displayData, (data) => {
+        this.state.on(sortedAndFilteredData$, (data) => {
+            this.data.next(data);
             this.dataStore.patchState({ dataLen: data.length });
         });
+        this.state.on(flatGrouped$, (data) => {
+            this.displayData.next(data);
+        });
     }
     ngOnInit() {
         const customCells$ = toObservable(this.$customCells, { injector: this.injector });
         this.state.setLinkMaps(this.tableBuilder.metaData$.pipe(map(createLinkCreatorDict)));
-        const c = customCells$.pipe(switchMap(c => c.length ? combineLatest(c.map(c => c.$metaData)) : of([])));
-        this.state.setMetaData(combineLatest([this.tableBuilder.metaData$, c]).pipe(map(([mds, customCells]) => {
+        const customCellMeta = customCells$.pipe(switchMap(c => c.length ? combineLatest(c.map(c => c.$metaData)) : of([])));
+        const metaForState = combineLatest([this.tableBuilder.metaData$, customCellMeta]).pipe(map(([mds, customCells]) => {
             mds = mds.map(this.mapArrayFieldsMetaDatas);
             return [
                 ...mds,
                 ...customCells.map(md => this.mergeMetaData(md, mds.find(item => item.key === md.key)))
             ];
-        })));
-        const ds = new TableBuilderDataSource(this.displayData, this.state, this.dataStore);
-        this.state.updateState({ props: {
-                dataSource: ds,
-                ...this.props
-            } });
-        this.initializeState();
+        }));
+        this.state.setMetaData(metaForState);
+        runInInjectionContext(this.injector, () => {
+            const ds = new TableBuilderDataSource(this.$displayData, this.state, this.dataStore);
+            this.state.updateState({
+                props: {
+                    dataSource: ds,
+                    ...this.props
+                }
+            });
+        });
         this.initializeData();
     }
     mergeMetaData(metaData1, metaData2) {
@@ -5200,8 +5199,7 @@ class TableContainerComponent {
         return metaData1;
     }
     exportToCsv() {
-        const sorted = this.data.pipe(withLatestFrom(this.state.sort$), map(([data, sorted]) => sortData(data, sorted)));
-        this.exportToCsvService.exportToCsv(sorted);
+        this.exportToCsvService.exportToCsv(this.$data());
     }
     expandAllGroups = () => {
         const groupHeaders = getAllGroupHeaderNames(this.$displayData());
@@ -5223,9 +5221,8 @@ class TableContainerComponent {
         }
         return meta;
     };
-    collapseHeader$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseHeader));
     addFilterDirectives = (state) => {
-        const customFilters$ = toObservable(this.allFilterDirectives, { injector: this.injector }).pipe(mergeMap(customerFilters => customerFilters
+        const customFilters$ = toObservable(this.$allFilterDirectives, { injector: this.injector }).pipe(mergeMap(customerFilters => customerFilters
             .filter(filter => !filter.savable)
             .map(filter => filter.filter$)), mergeAll(), scan$1((a, b) => {
             if (b.active) {
@@ -5242,12 +5239,14 @@ class TableContainerComponent {
     };
     $useVirtual = this.state.$isVirtual;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { tableBuilder: "tableBuilder", tableId: "tableId", indexColumn: "indexColumn", selectionColumn: "selectionColumn", isSticky: "isSticky", stickyFooter: "stickyFooter", pageSize: "pageSize", groupHeaderTemplate: "groupHeaderTemplate", groupHeaderHeight: "groupHeaderHeight", trackBy: "trackBy", inputFilters: "inputFilters" }, outputs: { selection$: "selection$", data: "data", onStateReset: "onStateReset", onSaveState: "onSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], queries: [{ propertyName: "filterDirectives", predicate: TableFilterDirective, descendants: true, isSignal: true }, { propertyName: "customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true, isSignal: true }, { propertyName: "$customCells", predicate: CustomCellDirective, isSignal: true }, { propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "customRows", predicate: MatRowDef }], viewQueries: [{ propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }, { propertyName: "genericTable", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n  <div class=\"header-wrapper\">\r\n    <div class=\"title\">\r\n      @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if((state.groupByKeys$ | async)?.length){\r\n        <group-by-list />\r\n      }\r\n    </div>\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader) {\r\n        @if (!(collapseHeader$ | async)) {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\r\n        @else {\r\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"flex-column\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\r\n        <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n  <div class=\"table-wrapper\">\r\n    @if($useVirtual())\r\n    {\r\n      <tb-virtual-scroll-container>\r\n        <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData]=\"$displayData()\"\r\n          (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"trackBy\" />\r\n      </tb-virtual-scroll-container>\r\n    }\r\n    @else\r\n    {\r\n      <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData]=\"$displayData()\"\r\n        (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"trackBy\" />\r\n    }\r\n\r\n  </div>\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator [data$]=\"data\" [tableElRef]=\"tableElRef\" />\r\n\r\n      <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n\r\n  <ng-template #headerMenu>\r\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n    @if (!!tableId) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>}\r\n  </ng-template>\r\n\r\n  <ng-template #headerMenuExtra>\r\n    <button mat-menu-item (click)=\"resetState()\">\r\n      <mat-icon color=\"primary\">autorenew</mat-icon>\r\n      <span>Reset table</span>\r\n    </button>\r\n    @if (!tableSettings.hideExport) {\r\n      <button mat-menu-item (click)=\"exportToCsv()\">\r\n        <mat-icon color=\"primary\">file_download</mat-icon>\r\n        <span>Export Table</span>\r\n      </button>\r\n    }\r\n    @if (tableId) {\r\n      <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\r\n        <mat-icon color=\"primary\">people</mat-icon>\r\n        <span>Profiles</span>\r\n      </button>\r\n      <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>\r\n    }\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [".header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.table-wrapper{overflow-x:auto}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "pipe", type: i1$8.AsyncPipe, name: "async" }, { kind: "directive", type: i1$8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["data$", "tableElRef"] }, { kind: "directive", type: i3$3.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["trackBy", "displayData", "data", "rows", "columnBuilders", "columnInfos"], outputs: ["selection$"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["$tableId"], outputs: ["onSaveState"] }, { kind: "ngmodule", type: i3$1.MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i4$2.MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i2.MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i4$1.MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { tableBuilder: "tableBuilder", tableId: "tableId", indexColumn: "indexColumn", selectionColumn: "selectionColumn", isSticky: "isSticky", stickyFooter: "stickyFooter", pageSize: "pageSize", groupHeaderTemplate: "groupHeaderTemplate", groupHeaderHeight: "groupHeaderHeight", trackBy: "trackBy", inputFilters: "inputFilters" }, outputs: { data: "data", selection$: "selection$", onStateReset: "onStateReset", onSaveState: "onSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], queries: [{ propertyName: "filterDirectives", predicate: TableFilterDirective, descendants: true, isSignal: true }, { propertyName: "customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true, isSignal: true }, { propertyName: "$customCells", predicate: CustomCellDirective, isSignal: true }, { propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "customRows", predicate: MatRowDef }], viewQueries: [{ propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }, { propertyName: "genericTable", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n  <div class=\"header-wrapper\">\r\n    <div class=\"title\">\r\n      @if ((!$collapseHeader()) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if((state.groupByKeys$ | async)?.length){\r\n        <group-by-list />\r\n      }\r\n    </div>\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader) {\r\n        @if (!$collapseHeader()) {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\r\n        @else {\r\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"flex-column\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\r\n        <mat-icon [matTooltip]=\"$collapseHeader() ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapseHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n  <div class=\"table-wrapper\">\r\n    @if($useVirtual())\r\n    {\r\n      <tb-virtual-scroll-container>\r\n        <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData]=\"$displayData()\"\r\n          (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"trackBy\" />\r\n      </tb-virtual-scroll-container>\r\n    }\r\n    @else\r\n    {\r\n      <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData]=\"$displayData()\"\r\n        (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"trackBy\" />\r\n    }\r\n\r\n  </div>\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator [tableElRef]=\"tableElRef\" />\r\n\r\n      <mat-icon [matTooltip]=\"$collapseFooter() ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapseFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n\r\n  <ng-template #headerMenu>\r\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n    @if (!!tableId) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>}\r\n  </ng-template>\r\n\r\n  <ng-template #headerMenuExtra>\r\n    <button mat-menu-item (click)=\"resetState()\">\r\n      <mat-icon color=\"primary\">autorenew</mat-icon>\r\n      <span>Reset table</span>\r\n    </button>\r\n    @if (!tableSettings.hideExport) {\r\n      <button mat-menu-item (click)=\"exportToCsv()\">\r\n        <mat-icon color=\"primary\">file_download</mat-icon>\r\n        <span>Export Table</span>\r\n      </button>\r\n    }\r\n    @if (tableId) {\r\n      <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\r\n        <mat-icon color=\"primary\">people</mat-icon>\r\n        <span>Profiles</span>\r\n      </button>\r\n      <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>\r\n    }\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [".header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "pipe", type: i1$8.AsyncPipe, name: "async" }, { kind: "directive", type: i1$8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["tableElRef"] }, { kind: "directive", type: i3$3.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["trackBy", "displayData", "data", "rows", "columnBuilders", "columnInfos"], outputs: ["selection$"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["$tableId"], outputs: ["onSaveState"] }, { kind: "ngmodule", type: i3$1.MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i4$2.MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i2.MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i4$1.MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TableContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], standalone: true, imports: containerImports, template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n  <div class=\"header-wrapper\">\r\n    <div class=\"title\">\r\n      @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if((state.groupByKeys$ | async)?.length){\r\n        <group-by-list />\r\n      }\r\n    </div>\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader) {\r\n        @if (!(collapseHeader$ | async)) {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\r\n        @else {\r\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"flex-column\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\r\n        <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n  <div class=\"table-wrapper\">\r\n    @if($useVirtual())\r\n    {\r\n      <tb-virtual-scroll-container>\r\n        <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData]=\"$displayData()\"\r\n          (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"trackBy\" />\r\n      </tb-virtual-scroll-container>\r\n    }\r\n    @else\r\n    {\r\n      <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData]=\"$displayData()\"\r\n        (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"trackBy\" />\r\n    }\r\n\r\n  </div>\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator [data$]=\"data\" [tableElRef]=\"tableElRef\" />\r\n\r\n      <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n\r\n  <ng-template #headerMenu>\r\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n    @if (!!tableId) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>}\r\n  </ng-template>\r\n\r\n  <ng-template #headerMenuExtra>\r\n    <button mat-menu-item (click)=\"resetState()\">\r\n      <mat-icon color=\"primary\">autorenew</mat-icon>\r\n      <span>Reset table</span>\r\n    </button>\r\n    @if (!tableSettings.hideExport) {\r\n      <button mat-menu-item (click)=\"exportToCsv()\">\r\n        <mat-icon color=\"primary\">file_download</mat-icon>\r\n        <span>Export Table</span>\r\n      </button>\r\n    }\r\n    @if (tableId) {\r\n      <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\r\n        <mat-icon color=\"primary\">people</mat-icon>\r\n        <span>Profiles</span>\r\n      </button>\r\n      <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>\r\n    }\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [".header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.table-wrapper{overflow-x:auto}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"] }]
-        }], propDecorators: { paginatorComponent: [{
+            args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], standalone: true, imports: containerImports, template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n  <div class=\"header-wrapper\">\r\n    <div class=\"title\">\r\n      @if ((!$collapseHeader()) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n        <ng-content select=\".tb-header-title\"/>\r\n      }\r\n      @if((state.groupByKeys$ | async)?.length){\r\n        <group-by-list />\r\n      }\r\n    </div>\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader) {\r\n        @if (!$collapseHeader()) {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\r\n        @else {\r\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"flex-column\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n          </mat-menu>\r\n        }\r\n        <mat-icon [matTooltip]=\"$collapseHeader() ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapseHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n  <div class=\"table-wrapper\">\r\n    @if($useVirtual())\r\n    {\r\n      <tb-virtual-scroll-container>\r\n        <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData]=\"$displayData()\"\r\n          (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"trackBy\" />\r\n      </tb-virtual-scroll-container>\r\n    }\r\n    @else\r\n    {\r\n      <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData]=\"$displayData()\"\r\n        (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"trackBy\" />\r\n    }\r\n\r\n  </div>\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator [tableElRef]=\"tableElRef\" />\r\n\r\n      <mat-icon [matTooltip]=\"$collapseFooter() ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapseFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n\r\n  <ng-template #headerMenu>\r\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n    @if (!!tableId) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>}\r\n  </ng-template>\r\n\r\n  <ng-template #headerMenuExtra>\r\n    <button mat-menu-item (click)=\"resetState()\">\r\n      <mat-icon color=\"primary\">autorenew</mat-icon>\r\n      <span>Reset table</span>\r\n    </button>\r\n    @if (!tableSettings.hideExport) {\r\n      <button mat-menu-item (click)=\"exportToCsv()\">\r\n        <mat-icon color=\"primary\">file_download</mat-icon>\r\n        <span>Export Table</span>\r\n      </button>\r\n    }\r\n    @if (tableId) {\r\n      <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\r\n        <mat-icon color=\"primary\">people</mat-icon>\r\n        <span>Profiles</span>\r\n      </button>\r\n      <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>\r\n    }\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [".header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"] }]
+        }], propDecorators: { data: [{
+                type: Output
+            }], paginatorComponent: [{
                 type: ViewChild,
                 args: [PaginatorComponent]
             }], genericTable: [{
@@ -5284,8 +5283,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                 type: Input
             }], selection$: [{
                 type: Output
-            }], data: [{
-                type: Output
             }], onStateReset: [{
                 type: Output
             }], onSaveState: [{
@@ -5447,7 +5444,7 @@ class TableBuilder {
                 cleaned[initIndexSymbol] = i * ((ii % 2) + 1);
                 return cleaned;
             });
-        }))));
+        }))), defaultShareReplay());
     }
     createMetaData(obj) {
         return Object.keys(obj ?? {})