@one-paragon/angular-utilities 1.2.9 → 1.2.10-beta-1

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

@@ -1,15 +1,16 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, inject, Injector, TemplateRef, ViewContainerRef, NgModule, Injectable, assertInInjectionContext, DestroyRef, Pipe, Renderer2, ElementRef, booleanAttribute, InjectionToken, makeEnvironmentProviders, computed, HostListener, Component, ChangeDetectionStrategy, EventEmitter, isSignal, untracked, Output, ContentChildren, ChangeDetectorRef, input, output, signal, ViewChild, EnvironmentInjector, createComponent, viewChild, effect, forwardRef, ContentChild, APP_INITIALIZER } from '@angular/core';
-import { shareReplay, switchAll, map, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap, takeUntil, last, distinctUntilChanged, first as first$1, distinctUntilKeyChanged, delay as delay$1, observeOn, scan as scan$1, timestamp as timestamp$1, withLatestFrom, mergeAll as mergeAll$1 } 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, contentChild, 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 * 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 as concatMap$1, merge as merge$1, delay, fromEvent, tap as tap$1, BehaviorSubject, takeUntil as takeUntil$1, switchMap as switchMap$1, scan, asyncScheduler, animationFrameScheduler, distinctUntilChanged as distinctUntilChanged$1, timestamp, mergeAll, from } 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 { ComponentStore } from '@ngrx/component-store';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
 import * as i1$8 from '@angular/common';
 import { DatePipe, CurrencyPipe, AsyncPipe, KeyValuePipe, NgTemplateOutlet, NgClass, DecimalPipe, CommonModule } from '@angular/common';
 import * as i3$2 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { v4 } from 'uuid';
-import { merge, get, sumBy, difference, orderBy, intersection, groupBy, set, cloneDeep } from 'lodash';
+import { merge as merge$1, get, sumBy, difference, orderBy, intersection, groupBy, set, cloneDeep } from 'lodash';
 import { CdkColumnDef } from '@angular/cdk/table';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
 import * as i10 from '@angular/material/radio';
@@ -23,7 +24,6 @@ import * as i9 from '@angular/material/core';
 import { MatOption, MatNativeDateModule } from '@angular/material/core';
 import * as i5 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule, CDK_DROP_LIST, CdkDropList, transferArrayItem } from '@angular/cdk/drag-drop';
-import { toObservable, toSignal } from '@angular/core/rxjs-interop';
 import * as i1$4 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i1$1 from '@angular/material/input';
@@ -49,7 +49,7 @@ import { LetDirective } from '@ngrx/component';
 import * as i4$3 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i1$5 from '@angular/material/table';
-import { MatTable, MatColumnDef, MatTableModule, MatTableDataSource, MatRowDef } from '@angular/material/table';
+import { MatTable, MatColumnDef, MatTableModule, MatHeaderRowDef, MatFooterRowDef, MatTableDataSource, MatRowDef } from '@angular/material/table';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as i1$6 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
@@ -362,14 +362,168 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                 }]
         }] });
 
+const onceWhen = (predicate) => (src) => {
+    return src.pipe(filter$1(predicate), first());
+};
+const mapArray = (mapFunc) => (source) => source.pipe(map$1(src => src.map(mapFunc)));
+const filterArray = (filterFunc) => (source) => source.pipe(map$1(src => src.filter(filterFunc)));
+const onWait = startWithIfEmpty;
+function startWithIfEmpty(val, wait = 0) {
+    return (source) => {
+        return new Observable(subscriber => {
+            let emitted = false;
+            setTimeout(() => {
+                if (!emitted) {
+                    subscriber.next(val);
+                }
+            }, wait);
+            const sub = source.subscribe({
+                next(x) { emitted = true; subscriber.next(x); },
+                error(err) { emitted = true; subscriber.error(err); },
+                complete() { emitted = true; subscriber.complete(); }
+            });
+            return () => sub.unsubscribe();
+        });
+    };
+}
+const combineArrays = (sources) => {
+    return combineLatest(sources.map(src => src.pipe(startWithIfEmpty([])))).pipe(map$1(res => res.flat()));
+};
+function switchOff(switchSource, defaultState = true) {
+    return (source) => {
+        return new Observable(subsciber => {
+            let isOn = defaultState;
+            const subscription = new Subscription();
+            subscription.add(switchSource.subscribe(on => isOn = on));
+            subscription.add(source.subscribe({
+                next(value) {
+                    if (isOn) {
+                        subsciber.next(value);
+                    }
+                },
+                error: error => subsciber.error(error),
+                complete: () => subsciber.complete()
+            }));
+            return subscription;
+        });
+    };
+}
+function skipOneWhen(skipper) {
+    return (source) => {
+        return new Observable(subsriber => {
+            const subscription = new Subscription();
+            let skipNext = false;
+            subscription.add(skipper.subscribe(_ => skipNext = true));
+            subscription.add(source.subscribe({
+                next(value) {
+                    if (skipNext) {
+                        skipNext = false;
+                    }
+                    else {
+                        subsriber.next(value);
+                    }
+                },
+                error: error => subsriber.error(error),
+                complete: () => subsriber.complete()
+            }));
+            return subscription;
+        });
+    };
+}
+function previousAndCurrent(startingValue) {
+    return (source) => {
+        return source.pipe(startWith$1(startingValue), pairwise());
+    };
+}
+function notNull() {
+    return (source) => {
+        return source.pipe(filter$1((o) => o != null));
+    };
+}
+function delayOn(predicate, delayTime) {
+    return (src) => {
+        return src.pipe(concatMap(r => {
+            if (predicate(r)) {
+                return merge(of({ r }), of(null).pipe(delay(delayTime))).pipe(notNull(), map$1(d => d.r));
+            }
+            else {
+                return of(r);
+            }
+        }));
+    };
+}
+
+class Subjectifier extends Observable {
+    _subj = new Subject();
+    merged;
+    constructor(_source) {
+        super((obs) => {
+            const s = merge(_source, this._subj).subscribe(obs);
+            return s;
+        });
+        this.merged = merge(_source, this._subj);
+    }
+    next = this._subj.next.bind(this._subj);
+    newSubj = (...operations) => new Subjectifier(this.merged.pipe(...operations));
+}
+
+class Subscriber {
+    subscriptions = [];
+    handle = (subscription) => {
+        this.subscriptions.push(subscription);
+    };
+    on = (obs, action) => {
+        this.handle(obs.subscribe(action));
+    };
+    ngOnDestroy() {
+        this.subscriptions.forEach(subscription => {
+            subscription.unsubscribe();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Subscriber, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: Subscriber, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Subscriber, decorators: [{
+            type: Directive
+        }] });
+function subscriber(obsOrSubOrInjector, actionOrInjector, injector) {
+    const destroyRef = getDestroyRef$1(obsOrSubOrInjector, actionOrInjector, injector);
+    const subscriber = new Subscriber();
+    if (obsOrSubOrInjector instanceof Subscription) {
+        subscriber.handle(obsOrSubOrInjector);
+    }
+    else if (obsOrSubOrInjector instanceof Observable) {
+        subscriber.handle(obsOrSubOrInjector.subscribe(actionOrInjector));
+    }
+    destroyRef.onDestroy(() => subscriber?.ngOnDestroy());
+    return subscriber;
+}
+function getDestroyRef$1(obsOrSubOrInjector, actionOrInjector, injector) {
+    const providedInjector = obsOrSubOrInjector instanceof Injector ? obsOrSubOrInjector
+        : actionOrInjector instanceof Injector ? actionOrInjector
+            : injector;
+    if (!providedInjector) {
+        try {
+            assertInInjectionContext(subscriber);
+        }
+        catch (error) {
+            throw new Error('createRequestor() must be used in an Injection Context or you must provide an injector to createRequestor()');
+        }
+    }
+    const destroyRef = providedInjector?.get(DestroyRef) || inject(DestroyRef);
+    return destroyRef;
+}
+
 class HttpRequestStateStore extends ComponentStore {
     options;
     project;
     req;
+    injector;
     constructor(req, options, project) {
         super({ requestParams: null, response: notStarted });
         this.project = project;
         this.options = options;
+        this.injector = options?.injector;
         this.req = req;
         this.request = (this.options?.strategy === HttpRequestStrategy.singleUse) ? this.singleUseRequest : this.flattenedRequest;
         if (options?.autoRequestWith) {
@@ -383,7 +537,7 @@ class HttpRequestStateStore extends ComponentStore {
         if (this.options?.strategy === HttpRequestStrategy.concurrent)
             return mergeMap((params) => this.createRequest(...params));
         if (this.options?.strategy === HttpRequestStrategy.sequential)
-            return concatMap((params) => this.createRequest(...params));
+            return concatMap$1((params) => this.createRequest(...params));
         return switchMap((params) => (params[0] instanceof CancellationToken) ?
             of({ requestParams: params[0], response: { status: HttpRequestStatus.cancelled } }) : this.createRequest(...params));
     };
@@ -449,6 +603,13 @@ class HttpRequestStateStore extends ComponentStore {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
+    requestWith = (params) => {
+        if (isSignal(params)) {
+            params = toObservable(params, { injector: this.injector }).pipe(notNull());
+        }
+        params.pipe(takeUntil(this.destroy$)).subscribe((p) => this.request(...p));
+        return this;
+    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: HttpRequestStateStore, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: HttpRequestStateStore, usesInheritance: true, ngImport: i0 });
 }
@@ -457,6 +618,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
         }], ctorParameters: () => [{ type: undefined }, { type: undefined }, { type: undefined }] });
 class CancellationToken {
 }
+function wrapInArr(sigOrObs) {
+    return isSignal(sigOrObs) ?
+        computed(() => [sigOrObs()])
+        : sigOrObs.pipe(map(a => [a]));
+}
 
 class HttpRequestStateFactory {
     constructor() { }
@@ -482,7 +648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
         }], ctorParameters: () => [] });
 function createRequestor(req, optionsOrProject, options) {
     const ops = isFunction(optionsOrProject) ? options : optionsOrProject;
-    const destroyRef = getDestroyRef$1(ops);
+    const destroyRef = getDestroyRef(ops);
     const requestStore = typeof (optionsOrProject) === 'function' ?
         new HttpRequestStateStore(req, options, optionsOrProject)
         : new HttpRequestStateStore(req, optionsOrProject);
@@ -492,7 +658,7 @@ function createRequestor(req, optionsOrProject, options) {
 function isFunction(value) {
     return typeof value === 'function';
 }
-function getDestroyRef$1(options) {
+function getDestroyRef(options) {
     const providedInjector = options?.injector;
     if (!providedInjector) {
         try {
@@ -585,12 +751,18 @@ function metaDataArrToDict(arr, transform) {
 class GeneralTableSettings {
     constructor(settings) {
         if (settings) {
-            merge(this.headerSettings, settings.headerSettings);
-            merge(this.footerSettings, settings.footerSettings);
-            merge(this.columnHeaderSettings, settings.columnHeaderSettings);
-            merge(this.tableSettings, settings.tableSettings);
+            merge$1(this.headerSettings, settings.headerSettings);
+            merge$1(this.footerSettings, settings.footerSettings);
+            merge$1(this.columnHeaderSettings, settings.columnHeaderSettings);
+            merge$1(this.tableSettings, settings.tableSettings);
             if (settings.tableSettings?.useVirtualScroll) {
                 const currVirt = settings.tableSettings.useVirtualScroll === true ? new VirtualScrollOptions() : settings.tableSettings.useVirtualScroll;
+                if (!currVirt.headerHeight || settings.tableSettings.useVirtualScroll === true) {
+                    currVirt.headerHeight = (typeof settings.headerSettings?.headerHeight === 'number' ? settings.headerSettings?.headerHeight : DefaultVirtualScrollOptions.headerHeight);
+                }
+                if (!currVirt.rowHeight || settings.tableSettings.useVirtualScroll === true) {
+                    currVirt.rowHeight = (typeof settings.tableSettings?.rowHeight === 'number' ? settings.tableSettings?.rowHeight : DefaultVirtualScrollOptions.rowHeight);
+                }
                 this.tableSettings.useVirtualScroll = { ...new VirtualScrollOptions(), ...currVirt };
             }
         }
@@ -624,6 +796,7 @@ class TableSettings {
     useVirtualScroll = null;
     includeAllInPaginatorOptions = false;
     rowHeight = undefined;
+    groupHeaderHeight = undefined;
 }
 class PersistedTableSettings {
     constructor(tableSettings) {
@@ -651,6 +824,7 @@ class NotPersistedTableSettings {
             this.includeAllInPaginatorOptions = tableSettings.tableSettings.includeAllInPaginatorOptions;
             this.rowHeight = tableSettings.tableSettings.rowHeight;
             this.headerHeight = tableSettings.headerSettings.headerHeight;
+            this.groupHeaderHeight = tableSettings.tableSettings.groupHeaderHeight;
         }
     }
     hideExport = true;
@@ -664,6 +838,7 @@ class NotPersistedTableSettings {
     usePaginator = true;
     useVirtualScroll = null;
     includeAllInPaginatorOptions = false;
+    groupHeaderHeight = undefined;
     rowHeight;
     headerHeight = undefined;
 }
@@ -679,6 +854,10 @@ class VirtualScrollOptions {
      */
     maxViewPortHeight = undefined;
 }
+const DefaultVirtualScrollOptions = {
+    rowHeight: 48,
+    headerHeight: 56,
+};
 
 class KeysToDelete {
     initializationState = null;
@@ -717,13 +896,15 @@ const defaultTableState = {
     groupBy: [],
     minColumnWidth: undefined,
     currentPage: 0,
+    props: {},
+    showAll: false,
+};
+const defaultDataState = {
     virtualScrollOffset: 0,
     dataLen: 0,
     virtualEnds: {
         start: 0, end: 20
     },
-    props: {},
-    showAll: false,
 };
 
 // here is how to use it
@@ -749,23 +930,21 @@ class CustomCellDirective {
         if (this.templateRef !== null)
             this.TemplateRef = this.templateRef;
     }
-    ngAfterContentInit() {
-        if (this.TemplateRef === null && this.templateRef !== null) {
-            this.TemplateRef = this.templateRef;
-        }
+    ngOnInit() {
+        this.$metaData.next(this.getMetaData());
     }
-    getMetaData(metaData) {
+    $metaData = new ReplaySubject();
+    getMetaData = () => {
         return {
             key: this.customCell,
-            displayName: this.displayName ?? metaData?.displayName,
-            preSort: this.preSort ?? metaData?.preSort,
-            fieldType: metaData?.fieldType ?? (this.customCellNotMapped ? FieldType.NotMapped : FieldType.Unknown),
-            order: this.customCellOrder ?? metaData?.order,
-            width: this.customCellWidth ?? metaData?.width,
+            displayName: this.displayName,
+            preSort: this.preSort,
+            fieldType: this.customCellNotMapped ? FieldType.NotMapped : FieldType.Unknown,
+            order: this.customCellOrder,
+            width: this.customCellWidth,
             customCell: true,
-            noExport: !metaData,
         };
-    }
+    };
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
@@ -796,158 +975,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                 type: Input
             }] } });
 
-const onceWhen = (predicate) => (src) => {
-    return src.pipe(filter$1(predicate), first());
-};
-const mapArray = (mapFunc) => (source) => source.pipe(map$1(src => src.map(mapFunc)));
-const filterArray = (filterFunc) => (source) => source.pipe(map$1(src => src.filter(filterFunc)));
-const onWait = startWithIfEmpty;
-function startWithIfEmpty(val, wait = 0) {
-    return (source) => {
-        return new Observable(subscriber => {
-            let emitted = false;
-            setTimeout(() => {
-                if (!emitted) {
-                    subscriber.next(val);
-                }
-            }, wait);
-            const sub = source.subscribe({
-                next(x) { emitted = true; subscriber.next(x); },
-                error(err) { emitted = true; subscriber.error(err); },
-                complete() { emitted = true; subscriber.complete(); }
-            });
-            return () => sub.unsubscribe();
-        });
-    };
-}
-const combineArrays = (sources) => {
-    return combineLatest(sources.map(src => src.pipe(startWithIfEmpty([])))).pipe(map$1(res => res.flat()));
-};
-function switchOff(switchSource, defaultState = true) {
-    return (source) => {
-        return new Observable(subsciber => {
-            let isOn = defaultState;
-            const subscription = new Subscription();
-            subscription.add(switchSource.subscribe(on => isOn = on));
-            subscription.add(source.subscribe({
-                next(value) {
-                    if (isOn) {
-                        subsciber.next(value);
-                    }
-                },
-                error: error => subsciber.error(error),
-                complete: () => subsciber.complete()
-            }));
-            return subscription;
-        });
-    };
-}
-function skipOneWhen(skipper) {
-    return (source) => {
-        return new Observable(subsriber => {
-            const subscription = new Subscription();
-            let skipNext = false;
-            subscription.add(skipper.subscribe(_ => skipNext = true));
-            subscription.add(source.subscribe({
-                next(value) {
-                    if (skipNext) {
-                        skipNext = false;
-                    }
-                    else {
-                        subsriber.next(value);
-                    }
-                },
-                error: error => subsriber.error(error),
-                complete: () => subsriber.complete()
-            }));
-            return subscription;
-        });
-    };
-}
-function previousAndCurrent(startingValue) {
-    return (source) => {
-        return source.pipe(startWith$1(startingValue), pairwise());
-    };
-}
-function notNull() {
-    return (source) => {
-        return source.pipe(filter$1((o) => o != null));
-    };
-}
-function delayOn(predicate, delayTime) {
-    return (src) => {
-        return src.pipe(concatMap$1(r => {
-            if (predicate(r)) {
-                return merge$1(of({ r }), of(null).pipe(delay(delayTime))).pipe(notNull(), map$1(d => d.r));
-            }
-            else {
-                return of(r);
-            }
-        }));
-    };
-}
-
-class Subjectifier extends Observable {
-    _subj = new Subject();
-    merged;
-    constructor(_source) {
-        super((obs) => {
-            const s = merge$1(_source, this._subj).subscribe(obs);
-            return s;
-        });
-        this.merged = merge$1(_source, this._subj);
-    }
-    next = this._subj.next.bind(this._subj);
-    newSubj = (...operations) => new Subjectifier(this.merged.pipe(...operations));
-}
-
-class Subscriber {
-    subscriptions = [];
-    handle = (subscription) => {
-        this.subscriptions.push(subscription);
-    };
-    on = (obs, action) => {
-        this.handle(obs.subscribe(action));
-    };
-    ngOnDestroy() {
-        this.subscriptions.forEach(subscription => {
-            subscription.unsubscribe();
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Subscriber, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: Subscriber, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Subscriber, decorators: [{
-            type: Directive
-        }] });
-function subscriber(obsOrSubOrInjector, actionOrInjector, injector) {
-    const destroyRef = getDestroyRef(obsOrSubOrInjector, actionOrInjector, injector);
-    const subscriber = new Subscriber();
-    if (obsOrSubOrInjector instanceof Subscription) {
-        subscriber.handle(obsOrSubOrInjector);
-    }
-    else if (obsOrSubOrInjector instanceof Observable) {
-        subscriber.handle(obsOrSubOrInjector.subscribe(actionOrInjector));
-    }
-    destroyRef.onDestroy(() => subscriber?.ngOnDestroy());
-    return subscriber;
-}
-function getDestroyRef(obsOrSubOrInjector, actionOrInjector, injector) {
-    const providedInjector = obsOrSubOrInjector instanceof Injector ? obsOrSubOrInjector
-        : actionOrInjector instanceof Injector ? actionOrInjector
-            : injector;
-    if (!providedInjector) {
-        try {
-            assertInInjectionContext(subscriber);
-        }
-        catch (error) {
-            throw new Error('createRequestor() must be used in an Injection Context or you must provide an injector to createRequestor()');
-        }
-    }
-    const destroyRef = providedInjector?.get(DestroyRef) || inject(DestroyRef);
-    return destroyRef;
-}
-
 class ResizeColumnDirective {
     renderer = inject(Renderer2);
     el = inject(ElementRef);
@@ -1030,9 +1057,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             }] } });
 
 class TableWrapperDirective {
-    registrations = [];
+    $registrations = signal([]);
     register(filter) {
-        this.registrations.push(filter);
+        this.$registrations.update(registrations => [...registrations, filter]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TableWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: TableWrapperDirective, isStandalone: true, selector: "[tbWrapper]", ngImport: i0 });
@@ -1729,22 +1756,18 @@ class TableStore extends ComponentStore {
         this.effect(() => srcObservable.pipe(tap(func)));
         return this;
     };
-    onLast(callback) {
-        this.on(this.state$.pipe(last()), callback);
-    }
     metaData$ = this.select(state => state.metaData);
-    metaDataArray = this.selectSignal(this.state, orderMetaData);
-    metaDataArray$ = this.select(this.state$, orderMetaData);
+    $metaData = this.selectSignal(state => state.metaData);
+    $userDefinedOrder = this.selectSignal(state => state.userDefined.order);
+    $hiddenKeys = this.selectSignal(state => state.hiddenKeys);
+    $metaDataArray = this.selectSignal(this.$metaData, this.$userDefinedOrder, orderMetaData);
     getMetaData$ = (key) => {
         return this.select(state => state.metaData[key]).pipe(tap(meta => { if (!meta)
             console.warn(`Meta data with key ${key} not found`); }), notNull());
     };
-    getUserDefinedWidth$ = (key) => this.select(state => state.userDefined.widths[key]);
-    getUserDefinedWidth = (key) => this.selectSignal(state => state.userDefined.widths[key]);
-    getUserDefinedWidths$ = this.select(state => state.userDefined.widths);
-    getUserDefinedWidths = this.selectSignal(state => state.userDefined.widths);
+    $getUserDefinedWidth = (key) => this.selectSignal(state => state.userDefined.widths[key]);
+    $getUserDefinedWidths = this.selectSignal(state => state.userDefined.widths);
     tableSettingsMinWidth = this.selectSignal(state => state.minColumnWidth);
-    displayedColumns$ = this.select(orderedVisibleColumns);
     resetState = this.updater((state) => {
         const sorted = this.createPreSort(state.metaData);
         return ({ ...state, hiddenKeys: [], sorted, filters: {}, groupBy: [], userDefined: { widths: {}, order: {}, table: {} } });
@@ -1769,7 +1792,7 @@ class TableStore extends ComponentStore {
     });
     setUserDefinedOrder = this.updater((state, moved) => {
         const { newOrder, oldOrder } = moved;
-        const mdsArr = orderedVisibleMetaData(state);
+        const mdsArr = orderedStateVisibleMetaData(state);
         moveItemInArray(mdsArr, oldOrder, newOrder);
         const userDefinedOrder = mdsArr.reduce((aggregate, current, index) => {
             aggregate[current.key] = index;
@@ -1777,6 +1800,7 @@ class TableStore extends ComponentStore {
         }, {});
         return ({ ...state, userDefined: { ...state.userDefined, order: userDefinedOrder } });
     });
+    $filters = this.selectSignal(state => state.filters);
     filters$ = this.select(state => state.filters);
     getFilter$ = (filterId) => {
         return this.select(state => state.filters[filterId]);
@@ -1826,7 +1850,7 @@ class TableStore extends ComponentStore {
     createPreSort = (metaDatas) => {
         return Object.values(metaDatas).filter((metaData) => !!metaData.preSort)
             .sort(({ preSort: ps1 }, { preSort: ps2 }) => (ps1.precedence || Number.MAX_VALUE) - (ps2.precedence || Number.MAX_VALUE))
-            .map(({ key, preSort }) => ({ active: key, direction: preSort.direction }));
+            .map(({ key, preSort: { direction } }) => ({ active: key, direction }));
     };
     setSort = this.updater((state, { key, direction }) => {
         const sortArray = state.sorted.filter(s => s.active !== key);
@@ -1853,17 +1877,8 @@ class TableStore extends ComponentStore {
     setPageSize = this.updater((state, pageSize) => ({ ...state, pageSize, userDefined: { ...state.userDefined, pageSize } }));
     getPageSize = this.select(state => state.userDefined.pageSize || state.pageSize);
     updateState = this.updater(this.updateStateFunc);
-    cleanPersistedState(state, pState) {
-        const metas = Object.values(state.metaData);
-        const filters = Object.values(pState.filters).filter(fltr => isCustomFilter(fltr) || metas.some(m => m.key === fltr.key)).reduce((obj, filter) => {
-            obj[filter.filterId] = pState.filters[filter.filterId];
-            return obj;
-        }, {});
-        const sorted = pState.sorted.filter(s => metas.some(m => m.key === s.active));
-        return ({ ...pState, filters, sorted });
-    }
     updateStateFromPersistedState = this.updater((state, persistedState) => {
-        const incomingTableState = this.cleanPersistedState(state, persistedState);
+        const incomingTableState = cleanPersistedState(state, persistedState);
         const newState = this.updateStateFunc(state, incomingTableState);
         newState.initializationState = state.initializationState === InitializationState.MetaDataLoaded ? InitializationState.LoadedFromStore : state.initializationState;
         return newState;
@@ -1906,7 +1921,7 @@ class TableStore extends ComponentStore {
         this.runOnceWhen(stateIs(InitializationState.Ready), func);
     }
     setMetaData = this.updater((state, md) => {
-        const metaData = (Array.isArray(md) ? [...md] : [md])
+        const metaData = md
             .reduce((prev, curr) => {
             if (prev[curr.key]) {
                 prev[curr.key] = this.mergeMeta(prev[curr.key], curr);
@@ -2011,43 +2026,80 @@ class TableStore extends ComponentStore {
     $isVirtual = this.selectSignal(state => state.notPersistedTableSettings.useVirtualScroll === true || state.notPersistedTableSettings.useVirtualScroll?.virtualAsDefault || state.showAll);
     $viewType = this.selectSignal(state => {
         const usePaginator = state.notPersistedTableSettings.usePaginator;
-        return (state.showAll || (this.$isVirtual() && !usePaginator)) ? 'all' : this.$isVirtual() ? 'virtual paginator' : 'paginator';
+        if (state.showAll || (this.$isVirtual() && !usePaginator)) {
+            return 'virtual all';
+        }
+        else if (this.$isVirtual() && usePaginator) {
+            return 'virtual paginator';
+        }
+        else if (usePaginator) {
+            return 'paginator';
+        }
+        else {
+            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) });
     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) => orderedVisibleMetaData(state).map(md => md.key);
-const orderedVisibleMetaData = (state) => {
-    const ordered = orderMetaData(state);
+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 orderedCodeVisibleMetaData = (state) => orderMetaData(state).filter(md => md.fieldType !== FieldType.Hidden);
-const orderMetaData = (state) => {
-    const userOrderArr = Object.entries(state.userDefined.order);
+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);
+};
+const orderMetaData = (metaData, userDefined) => {
+    const userOrderArr = Object.entries(userDefined);
     return userOrderArr.length ?
-        Object.values(state.metaData).sort((a, b) => {
-            const orderA = state.userDefined.order[a.key];
-            const orderB = state.userDefined.order[b.key];
-            if (orderA == null && orderB == null) {
-                return 0;
-            }
-            if (orderA == null) {
-                return 1;
-            }
-            if (orderB == null) {
-                return -1;
-            }
-            return state.userDefined.order[a.key] - state.userDefined.order[b.key];
+        Object.values(metaData).sort((a, b) => {
+            const orderA = userDefined[a.key];
+            const orderB = userDefined[b.key];
+            return order(orderA, orderB);
         })
         :
-            Object.values(state.metaData).sort((a, b) => a.order - b.order);
+            Object.values(metaData).sort((a, b) => {
+                const orderA = a.order;
+                const orderB = b.order;
+                return order(orderA, orderB);
+            });
 };
+function order(orderA, orderB) {
+    if (orderA == null && orderB == null) {
+        return 0;
+    }
+    if (orderA == null) {
+        return 1;
+    }
+    if (orderB == null) {
+        return -1;
+    }
+    return orderA - orderB;
+}
+function cleanPersistedState(state, pState) {
+    const metas = Object.values(state.metaData);
+    const filters = Object.values(pState.filters).filter(fltr => isCustomFilter(fltr) || metas.some(m => m.key === fltr.key)).reduce((obj, filter) => {
+        obj[filter.filterId] = pState.filters[filter.filterId];
+        return obj;
+    }, {});
+    const sorted = pState.sorted.filter(s => metas.some(m => m.key === s.active));
+    return ({ ...pState, filters, sorted });
+}
 
 class MultiSortDirective extends MatSort {
     state = inject(TableStore);
@@ -2422,7 +2474,7 @@ class MatSlideToggleGroupDirective {
         return startValue;
     }
     getObs() {
-        var toggleChanges = merge$1(...this._toggles.map(toggle => toggle.change));
+        var toggleChanges = merge(...this._toggles.map(toggle => toggle.change));
         const startValue = this.getInitValue();
         return toggleChanges.pipe(scan((prev, cur) => {
             const toggleName = cur.source.name;
@@ -2908,24 +2960,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
 class GenFilterDisplayerComponent {
     tableState = inject(TableStore);
     filterStore = inject(WrapperFilterStore);
-    constructor() {
-        const tableState = this.tableState;
-        this.filterCols$ = tableState.metaDataArray$.pipe(map(md => Object.values(md).filter(m => m.fieldType !== FieldType.Hidden && m.fieldType !== FieldType.NotMapped && !m.noFilter)));
-    }
-    filterCols$;
+    $filterCols = computed(() => {
+        const mds = this.tableState.$metaDataArray();
+        return mds.filter(m => m.fieldType !== FieldType.Hidden && m.fieldType !== FieldType.NotMapped && !m.noFilter);
+    });
     addFilter(metaData) {
         this.filterStore.addFilter({ key: metaData.key, fieldType: metaData.fieldType });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GenFilterDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: GenFilterDisplayerComponent, isStandalone: true, selector: "tb-filter-displayer", ngImport: i0, template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\n  <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\">\n  @for (md of filterCols$ | async; track md.key) {\n    <button (click)=\"addFilter(md)\" mat-menu-item>\n      <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\n    </button>\n  }\n</mat-menu>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ 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: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: GenFilterDisplayerComponent, isStandalone: true, selector: "tb-filter-displayer", ngImport: i0, template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\n  <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\">\n  @for (md of $filterCols(); track md.key) {\n    <button (click)=\"addFilter(md)\" mat-menu-item>\n      <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\n    </button>\n  }\n</mat-menu>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ 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: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GenFilterDisplayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-filter-displayer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         MatButtonModule, MatMenuModule, MatTooltipModule, StopPropagationDirective, MatIconModule,
                         AsyncPipe, SpaceCasePipe
-                    ], template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\n  <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\">\n  @for (md of filterCols$ | async; track md.key) {\n    <button (click)=\"addFilter(md)\" mat-menu-item>\n      <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\n    </button>\n  }\n</mat-menu>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
-        }], ctorParameters: () => [] });
+                    ], template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\n  <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\">\n  @for (md of $filterCols(); track md.key) {\n    <button (click)=\"addFilter(md)\" mat-menu-item>\n      <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\n    </button>\n  }\n</mat-menu>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
+        }] });
 
 class KeyDisplayPipe {
     tableState = inject(TableStore);
@@ -2992,7 +3043,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
 class FilterChipsComponent {
     tableState = inject(TableStore);
     filterStore = inject(WrapperFilterStore);
-    filters$ = this.tableState.filters$.pipe(map(filters => Object.values(filters).filter(f => isFilterInfo(f) && !f._isExternallyManaged)));
+    $filters = computed(() => Object.values(this.tableState.$filters()).filter(f => isFilterInfo(f) && !f._isExternallyManaged));
     deleteByIndex(index) {
         this.filterStore.deleteByIndex(index);
     }
@@ -3004,14 +3055,14 @@ class FilterChipsComponent {
     }
     currentFilters$ = this.filterStore.currentFilters$;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: FilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: FilterChipsComponent, isStandalone: true, selector: "lib-filter-list", ngImport: i0, template: "<div class=\"d-w\" *ngrxLet=\"currentFilters$ as currentFilters\" >\n\n  @if (currentFilters.length) {\n    <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all Filters Cards\">\n      <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n    </button>\n    <div class=\"float\">\n      @for (filter of currentFilters; track filter.key) {\n        <div class=\"filter\">\n          <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\n        </div>\n      }\n    </div>\n  }\n\n  <mat-chip-set *ngrxLet=\"filters$ as filters\">\n    @for (filter of filters; track filter.key) {\n      <mat-chip (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\n        {{ filter.key | keyDisplay | async  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType  | async }}\n        <mat-icon matChipRemove>cancel</mat-icon>\n      </mat-chip>\n    }\n    @if (filters.length > 1) {\n      <mat-chip  (removed)=\"tableState.clearFilters()\">\n        Clear All\n        <mat-icon matChipRemove>cancel</mat-icon>\n      </mat-chip>\n    }\n  </mat-chip-set>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: FilterChipsComponent, isStandalone: true, selector: "lib-filter-list", ngImport: i0, template: "<div class=\"d-w\" *ngrxLet=\"currentFilters$ as currentFilters\" >\n\n  @if (currentFilters.length) {\n    <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all Filters Cards\">\n      <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n    </button>\n    <div class=\"float\">\n      @for (filter of currentFilters; track filter.key) {\n        <div class=\"filter\">\n          <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\n        </div>\n      }\n    </div>\n  }\n\n  <mat-chip-set>\n    @for (filter of $filters(); track filter.key) {\n      <mat-chip (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\n        {{ filter.key | keyDisplay | async  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType  | async }}\n        <mat-icon matChipRemove>cancel</mat-icon>\n      </mat-chip>\n    }\n    @if ($filters().length > 1) {\n      <mat-chip  (removed)=\"tableState.clearFilters()\">\n        Clear All\n        <mat-icon matChipRemove>cancel</mat-icon>\n      </mat-chip>\n    }\n  </mat-chip-set>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: FilterChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         LetDirective, MatButtonModule, MatTooltipModule, MatIconModule, FilterComponent,
                         MatChipsModule, AsyncPipe, KeyDisplayPipe, FormatFilterTypePipe, FormatFilterValuePipe
-                    ], template: "<div class=\"d-w\" *ngrxLet=\"currentFilters$ as currentFilters\" >\n\n  @if (currentFilters.length) {\n    <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all Filters Cards\">\n      <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n    </button>\n    <div class=\"float\">\n      @for (filter of currentFilters; track filter.key) {\n        <div class=\"filter\">\n          <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\n        </div>\n      }\n    </div>\n  }\n\n  <mat-chip-set *ngrxLet=\"filters$ as filters\">\n    @for (filter of filters; track filter.key) {\n      <mat-chip (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\n        {{ filter.key | keyDisplay | async  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType  | async }}\n        <mat-icon matChipRemove>cancel</mat-icon>\n      </mat-chip>\n    }\n    @if (filters.length > 1) {\n      <mat-chip  (removed)=\"tableState.clearFilters()\">\n        Clear All\n        <mat-icon matChipRemove>cancel</mat-icon>\n      </mat-chip>\n    }\n  </mat-chip-set>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
+                    ], template: "<div class=\"d-w\" *ngrxLet=\"currentFilters$ as currentFilters\" >\n\n  @if (currentFilters.length) {\n    <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all Filters Cards\">\n      <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n    </button>\n    <div class=\"float\">\n      @for (filter of currentFilters; track filter.key) {\n        <div class=\"filter\">\n          <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\n        </div>\n      }\n    </div>\n  }\n\n  <mat-chip-set>\n    @for (filter of $filters(); track filter.key) {\n      <mat-chip (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\n        {{ filter.key | keyDisplay | async  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType  | async }}\n        <mat-icon matChipRemove>cancel</mat-icon>\n      </mat-chip>\n    }\n    @if ($filters().length > 1) {\n      <mat-chip  (removed)=\"tableState.clearFilters()\">\n        Clear All\n        <mat-icon matChipRemove>cancel</mat-icon>\n      </mat-chip>\n    }\n  </mat-chip-set>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
         }] });
 
 function isPipe(o) {
@@ -3507,7 +3558,7 @@ class ColumnBuilderComponent {
     }
     classes;
     styles = computed(() => {
-        return columnStyles(this.metaData, this.state.getUserDefinedWidth(this.metaData.key)(), this.state.tableSettingsMinWidth());
+        return columnStyles(this.metaData, this.state.$getUserDefinedWidth(this.metaData.key)(), this.state.tableSettingsMinWidth());
     });
     ngOnInit() {
         this.initialSetUp();
@@ -3609,10 +3660,25 @@ function getSameTailLength(previousSorts, currentSorts) {
 const initIndexSymbol = Symbol('tb_init_index');
 const initialSortState = { sortsToRun: [], allSorts: [] };
 
+class DataStore extends ComponentStore {
+    constructor() {
+        super({ ...defaultDataState });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DataStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DataStore });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DataStore, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
 class GenericTableComponent {
     state = inject(TableStore);
+    dataStore = inject(DataStore);
     viewContainer = inject(ViewContainerRef);
     transformCreator = inject(TransformCreator);
+    $headerRow = viewChild(MatHeaderRowDef);
+    $footerRow = viewChild(MatFooterRowDef);
+    $table = viewChild(MatTable);
     drop(event) {
         this.state.setUserDefinedOrder({ newOrder: event.currentIndex, oldOrder: event.previousIndex });
     }
@@ -3625,55 +3691,103 @@ class GenericTableComponent {
         this.setUpSelections(trackBy);
     }
     get trackBy() { return this._trackBy; }
-    displayData$;
+    $displayData = input.required({ alias: 'displayData' });
+    $displayDataLength = computed(() => this.$displayData()?.length || 0);
+    $hasFooterMeta = computed(() => this.state.$metaDataArray().some(md => !!md.additional?.footer));
     $data = input.required({ alias: 'data' });
     data$ = toObservable(this.$data);
     rows;
     columnBuilders;
-    columnInfos;
-    table;
+    $columnInfos = input.required({ alias: 'columnInfos' });
+    $hasCustomFooter = computed(() => this.$columnInfos()?.some(ci => !!ci.customCell?.columnDef?.footerCell));
     dropList;
+    $footerRowStyle = computed(() => {
+        const hasData = !!this.$displayDataLength();
+        const metaFooter = this.$hasFooterMeta();
+        const customFooter = this.$hasCustomFooter();
+        const hasSelectionColumn = this.state.props().selectionColumn;
+        return customFooter || (hasData && (metaFooter || hasSelectionColumn)) ? 'regular-footer' : hasData ? 'no-footer' : 'small-footer';
+    });
+    $showFooterRow = computed(() => this.$footerRowStyle() !== 'no-footer');
     currentColumns;
-    keys = [];
     _injector = inject(Injector);
     injector = Injector.create({
         providers: [
-            { provide: MatTable, useFactory: () => this.table },
+            { provide: MatTable, useFactory: () => this.$table() },
             { provide: CdkDropList, useFactory: () => this.dropList },
         ],
         parent: this._injector
     });
     rowDefArr = [];
-    columns = [];
-    myColumns = {};
-    showHeader$;
-    offset$ = this.state.select(s => s.virtualScrollOffset);
+    $hasSelectColumn = computed(() => this.state.selectSignal(state => state.props.selectionColumn)());
+    $hasIndexColumn = computed(() => this.state.selectSignal(state => state.props.indexColumn)());
+    myColumns = signal({});
+    $showHeader = computed(() => !this.state.tableSettings().hideColumnHeader);
+    offset$ = this.dataStore.select(s => s.virtualScrollOffset);
     offsetIndex = 0;
     dataView;
     constructor() {
         this.setUpSelections();
+        effect(() => {
+            const columnInfos = this.$columnInfos() || [];
+            untracked(() => {
+                Object.entries(this.myColumns()).forEach(([key, value]) => {
+                    const columnInfo = columnInfos.find(ci => ci.metaData.key === key);
+                    if (!columnInfo || columnInfo.customCell !== value.customCell) {
+                        delete this.myColumns()[key];
+                        this.$table()?.removeColumnDef(value.columnDef);
+                    }
+                });
+                columnInfos.forEach(ci => this.addMetaData(ci));
+            });
+        });
+        effect(() => {
+            const headerRow = this.$headerRow();
+            const showHeader = this.$showHeader();
+            const table = this.$table();
+            untracked(() => {
+                if (headerRow && showHeader && table)
+                    table.addHeaderRowDef(headerRow);
+                else if (headerRow && table)
+                    table.removeHeaderRowDef(headerRow);
+            });
+        });
+        effect(() => {
+            const footerRow = this.$footerRow();
+            const showFooter = this.$showFooterRow();
+            const table = this.$table();
+            untracked(() => {
+                if (footerRow && showFooter && table)
+                    table.addFooterRowDef(footerRow);
+                else if (footerRow && table)
+                    table.removeFooterRowDef(footerRow);
+            });
+        });
     }
     defaultTrackBy = (index, item) => item[initIndexSymbol];
     trackByFunction = this.defaultTrackBy;
     ngOnChanges(changes) {
-        if (changes.rows && this.rows && this.myColumns.length) {
+        if (changes.rows && this.rows && this.myColumns().length) {
             this.initializeRowDefs([...this.rows]);
         }
     }
-    ngOnInit() {
-        if (this.state.props().selectionColumn) {
-            this.columns.push('select');
+    $keys = computed(() => {
+        const displayed = this.state.$orderedVisibleColumns();
+        const built = this.myColumns();
+        const keys = displayed.filter(d => !!built[d]);
+        if (this.$hasSelectColumn()) {
+            keys.unshift('select');
         }
-        if (this.state.props().indexColumn) {
-            this.columns.push('index');
+        if (this.$hasIndexColumn()) {
+            keys.unshift('index');
         }
-        this.state.on(this.columnInfos, columns => {
-            columns.forEach(ci => this.addMetaData(ci));
-        });
+        return keys;
+    });
+    keys$ = toObservable(this.$keys);
+    ngOnInit() {
         this.initializeRowDefs([...this.rows]);
-        this.state.on(this.state.displayedColumns$, keys => {
-            this.keys = [...this.columns, ...keys];
-            this.rowDefArr?.forEach(row => row.columns = this.keys);
+        this.state.on(this.keys$, keys => {
+            this.rowDefArr?.forEach(row => row.columns = keys);
         });
         this.state.on(this.selectableData$, (data) => {
             if (this.selection.selected.length) {
@@ -3682,18 +3796,9 @@ class GenericTableComponent {
                 this.selection.deselect(...removed);
             }
         });
-        this.showHeader$ = this.state.tableSettings$.pipe(map(settings => !(settings.hideColumnHeader)));
-        this.showFooterRow$ = combineLatest([
-            this.displayData$.pipe(map(d => !!d.length), distinctUntilChanged()),
-            this.state.metaDataArray$.pipe(map(metaData => metaData.some(md => !!md.additional?.footer)), distinctUntilChanged()),
-            this.columnInfos.pipe(map(columnInfos => columnInfos.some(ci => !!ci.customCell?.columnDef?.footerCell)), distinctUntilChanged()),
-        ]).pipe(map(([hasData, hasFooterDef, hasCustomFooter]) => {
-            const hasSelectionColumn = this.state.props().selectionColumn;
-            return hasCustomFooter || (hasData && (hasFooterDef || hasSelectionColumn)) ? 'regular-footer' : hasData ? 'no-footer' : 'small-footer';
-        }));
         if (this.state.tableSettings().usePaginator || this.state.tableSettings().useVirtualScroll) {
-            this.state.on(this.state.state$, (state) => {
-                this.offsetIndex = state.virtualEnds.start;
+            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);
                 }
@@ -3707,7 +3812,7 @@ class GenericTableComponent {
         this.state.updateExpandedGroups({ key, isExpanded, groupKey });
     }
     addMetaData(column) {
-        const columnBuilder = this.myColumns[column.metaData.key];
+        const columnBuilder = this.myColumns()[column.metaData.key];
         if (columnBuilder) {
             columnBuilder.metaData = column.metaData;
         }
@@ -3719,17 +3824,18 @@ class GenericTableComponent {
             component.instance.customCell = column.customCell;
             component.instance.metaData = column.metaData;
             component.instance.data$ = this.data$;
-            this.myColumns[column.metaData.key] = component.instance;
+            this.myColumns.update(mc => ({ ...mc, [column.metaData.key]: component.instance }));
         }
     }
     initializeRowDefs = (defs) => {
-        this.rowDefArr.forEach(r => this.table.removeRowDef(r));
+        const table = this.$table();
+        if (!table)
+            return;
+        this.rowDefArr.forEach(r => table.removeRowDef(r));
         this.rowDefArr = defs;
         defs.forEach(r => {
-            r.columns = this.columns.concat(Object.values(this.myColumns).filter(c => c.metaData.fieldType !== FieldType.Hidden).map(c => c.metaData.key));
-            if (this.table) {
-                this.table.addRowDef(r);
-            }
+            r.columns = this.$keys().concat(Object.values(this.myColumns()).filter(c => c.metaData.fieldType !== FieldType.Hidden).map(c => c.metaData.key));
+            table.addRowDef(r);
         });
     };
     selection;
@@ -3780,7 +3886,6 @@ class GenericTableComponent {
             return (previousUserDefinedWidth ?? 0) >= 0 && currentUserDefinedWidth == null;
         }
     }));
-    showFooterRow$;
     getTransform = (key, val) => {
         if (val == undefined || val === 'null')
             return '';
@@ -3793,7 +3898,8 @@ class GenericTableComponent {
     };
     $rowHeight = this.state.selectSignal(s => {
         if (this.state.$isVirtual() && s.notPersistedTableSettings.useVirtualScroll?.enforceRowHeight) {
-            return s.notPersistedTableSettings.useVirtualScroll.rowHeight + 'px';
+            const height = s.notPersistedTableSettings.useVirtualScroll.rowHeight;
+            return height + 'px';
         }
         if (typeof s.notPersistedTableSettings.rowHeight === 'number') {
             return s.notPersistedTableSettings.rowHeight + 'px';
@@ -3802,36 +3908,36 @@ class GenericTableComponent {
     });
     $headerHeight = this.state.selectSignal(s => {
         if (this.state.$isVirtual() && s.notPersistedTableSettings.useVirtualScroll?.enforceHeaderHeight) {
-            return s.notPersistedTableSettings.useVirtualScroll.headerHeight + 'px';
+            const height = s.notPersistedTableSettings.useVirtualScroll.headerHeight;
+            return height + 'px';
         }
         if (typeof s.notPersistedTableSettings.headerHeight === 'number') {
             return s.notPersistedTableSettings.headerHeight + 'px';
         }
         return s.notPersistedTableSettings.headerHeight;
     });
+    $groupHeaderHeight = this.state.selectSignal(s => {
+        if (s.notPersistedTableSettings.groupHeaderHeight) {
+            return s.notPersistedTableSettings.groupHeaderHeight + 'px';
+        }
+        return this.$rowHeight();
+    });
     $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: false, isRequired: false, 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: false, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection$" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-table\n  cdkDropList\n  cdkDropListLockAxis='x'\n  cdkDropListOrientation=\"horizontal\"\n  (cdkDropListDropped)=\"drop($event)\"\n  class=\"table-drag-list\"\n  [class]=\"(showFooterRow$ | async)\"\n  #table\n  [dataSource]=\"state.props().dataSource!\"\n  [trackBy]=\"trackByFunction\"\n  [style]=\"tableWidth | async \"\n>\n\n  <!-- select column -->\n  <ng-container matColumnDef=\"select\">\n\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n                    [checked]=\"!!(masterToggleChecked$ | async)\"\n                    [indeterminate]=\"masterToggleIndeterminate$ | async\">\n      </mat-checkbox>\n    </mat-header-cell>\n\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\n      <mat-checkbox\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"$event ? selection.toggle(row) : null\"\n        [checked]=\"selection.isSelected(row)\"/>\n    </mat-cell>\n\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\n      {{ selection.selected.length }}\n    </mat-footer-cell>\n  </ng-container>\n\n\n  <!-- index column -->\n  <ng-container matColumnDef=\"index\">\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\n      {{ 1 + i + offsetIndex }}\n    </mat-cell>\n    <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\n  </ng-container>\n\n  <!-- Grouping -->\n  <ng-container matColumnDef=\"groupHeader\">\n    <mat-cell *matCellDef=\"let row\">\n      @let expanded = (state.getIsExpanded | func : row.key : row.groupName );\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\">\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\n          @if (!expanded()) {\n            <mat-icon>chevron_right</mat-icon>\n          } @else {\n            <mat-icon>expand_more</mat-icon>\n          }\n        </button>\n        {{ getTransform | func : row.key :  row.groupHeaderDisplay }} ({{ row.length }})\n      </div>\n      <div style=\"flex-grow: 1\">\n        <ng-container *ngTemplateOutlet=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\n      </div>\n    </mat-cell>\n  </ng-container>\n\n  @if (showHeader$ | async) {\n    <mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\n                    *matHeaderRowDef=\"keys; sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"/>\n  }\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n           *matRowDef=\"let row; columns: keys; let i = index\"/>\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n           *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\n  <mat-footer-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n                  *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []; sticky: $stickyFooter() \"\n                  [style.bottom.px]=\"$stickyFooter() ? (offset$ | async) : undefined\"/>\n\n</mat-table>\n", 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}.no-footer mat-footer-row{display:none}\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\n  cdkDropList\n  cdkDropListLockAxis='x'\n  cdkDropListOrientation=\"horizontal\"\n  (cdkDropListDropped)=\"drop($event)\"\n  class=\"table-drag-list\"\n  [class]=\"($footerRowStyle())\"\n  #table\n  [dataSource]=\"state.props().dataSource!\"\n  [trackBy]=\"trackByFunction\"\n  [style]=\"tableWidth | async \"\n>\n\n  <!-- select column -->\n  <ng-container matColumnDef=\"select\">\n\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n                    [checked]=\"!!(masterToggleChecked$ | async)\"\n                    [indeterminate]=\"masterToggleIndeterminate$ | async\">\n      </mat-checkbox>\n    </mat-header-cell>\n\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\n      <mat-checkbox\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"$event ? selection.toggle(row) : null\"\n        [checked]=\"selection.isSelected(row)\"/>\n    </mat-cell>\n\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\n      {{ selection.selected.length }}\n    </mat-footer-cell>\n  </ng-container>\n\n\n  <!-- index column -->\n  <ng-container matColumnDef=\"index\">\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\n      {{ 1 + i + offsetIndex }}\n    </mat-cell>\n    <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\n  </ng-container>\n\n  <!-- Grouping -->\n  <ng-container matColumnDef=\"groupHeader\">\n    <mat-cell *matCellDef=\"let row\">\n      @let expanded = (state.getIsExpanded | func : row.key : row.groupName );\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\">\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\n          @if (!expanded()) {\n            <mat-icon>chevron_right</mat-icon>\n          } @else {\n            <mat-icon>expand_more</mat-icon>\n          }\n        </button>\n        {{ getTransform | func : row.key :  row.groupHeaderDisplay }} ({{ row.length }})\n      </div>\n      <div style=\"flex-grow: 1\">\n        <ng-container *ngTemplateOutlet=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\n      </div>\n    </mat-cell>\n  </ng-container>\n\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n           *matRowDef=\"let row; columns: $keys(); let i = index\"/>\n  <mat-row [style.height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\n           [style.min-height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\n           *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\n</mat-table>\n\n<mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\n  *matHeaderRowDef=\"$keys(); sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"/>\n<mat-footer-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n  *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \"\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 });
 }
 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\n  cdkDropList\n  cdkDropListLockAxis='x'\n  cdkDropListOrientation=\"horizontal\"\n  (cdkDropListDropped)=\"drop($event)\"\n  class=\"table-drag-list\"\n  [class]=\"(showFooterRow$ | async)\"\n  #table\n  [dataSource]=\"state.props().dataSource!\"\n  [trackBy]=\"trackByFunction\"\n  [style]=\"tableWidth | async \"\n>\n\n  <!-- select column -->\n  <ng-container matColumnDef=\"select\">\n\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n                    [checked]=\"!!(masterToggleChecked$ | async)\"\n                    [indeterminate]=\"masterToggleIndeterminate$ | async\">\n      </mat-checkbox>\n    </mat-header-cell>\n\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\n      <mat-checkbox\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"$event ? selection.toggle(row) : null\"\n        [checked]=\"selection.isSelected(row)\"/>\n    </mat-cell>\n\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\n      {{ selection.selected.length }}\n    </mat-footer-cell>\n  </ng-container>\n\n\n  <!-- index column -->\n  <ng-container matColumnDef=\"index\">\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\n      {{ 1 + i + offsetIndex }}\n    </mat-cell>\n    <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\n  </ng-container>\n\n  <!-- Grouping -->\n  <ng-container matColumnDef=\"groupHeader\">\n    <mat-cell *matCellDef=\"let row\">\n      @let expanded = (state.getIsExpanded | func : row.key : row.groupName );\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\">\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\n          @if (!expanded()) {\n            <mat-icon>chevron_right</mat-icon>\n          } @else {\n            <mat-icon>expand_more</mat-icon>\n          }\n        </button>\n        {{ getTransform | func : row.key :  row.groupHeaderDisplay }} ({{ row.length }})\n      </div>\n      <div style=\"flex-grow: 1\">\n        <ng-container *ngTemplateOutlet=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\n      </div>\n    </mat-cell>\n  </ng-container>\n\n  @if (showHeader$ | async) {\n    <mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\n                    *matHeaderRowDef=\"keys; sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"/>\n  }\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n           *matRowDef=\"let row; columns: keys; let i = index\"/>\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n           *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\n  <mat-footer-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n                  *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []; sticky: $stickyFooter() \"\n                  [style.bottom.px]=\"$stickyFooter() ? (offset$ | async) : undefined\"/>\n\n</mat-table>\n", 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}.no-footer mat-footer-row{display:none}\n"] }]
+                    ], template: "<mat-table\n  cdkDropList\n  cdkDropListLockAxis='x'\n  cdkDropListOrientation=\"horizontal\"\n  (cdkDropListDropped)=\"drop($event)\"\n  class=\"table-drag-list\"\n  [class]=\"($footerRowStyle())\"\n  #table\n  [dataSource]=\"state.props().dataSource!\"\n  [trackBy]=\"trackByFunction\"\n  [style]=\"tableWidth | async \"\n>\n\n  <!-- select column -->\n  <ng-container matColumnDef=\"select\">\n\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n                    [checked]=\"!!(masterToggleChecked$ | async)\"\n                    [indeterminate]=\"masterToggleIndeterminate$ | async\">\n      </mat-checkbox>\n    </mat-header-cell>\n\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\n      <mat-checkbox\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"$event ? selection.toggle(row) : null\"\n        [checked]=\"selection.isSelected(row)\"/>\n    </mat-cell>\n\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\n      {{ selection.selected.length }}\n    </mat-footer-cell>\n  </ng-container>\n\n\n  <!-- index column -->\n  <ng-container matColumnDef=\"index\">\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\n      {{ 1 + i + offsetIndex }}\n    </mat-cell>\n    <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\n  </ng-container>\n\n  <!-- Grouping -->\n  <ng-container matColumnDef=\"groupHeader\">\n    <mat-cell *matCellDef=\"let row\">\n      @let expanded = (state.getIsExpanded | func : row.key : row.groupName );\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\">\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\n          @if (!expanded()) {\n            <mat-icon>chevron_right</mat-icon>\n          } @else {\n            <mat-icon>expand_more</mat-icon>\n          }\n        </button>\n        {{ getTransform | func : row.key :  row.groupHeaderDisplay }} ({{ row.length }})\n      </div>\n      <div style=\"flex-grow: 1\">\n        <ng-container *ngTemplateOutlet=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\n      </div>\n    </mat-cell>\n  </ng-container>\n\n  <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n           *matRowDef=\"let row; columns: $keys(); let i = index\"/>\n  <mat-row [style.height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\n           [style.min-height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\n           *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\n</mat-table>\n\n<mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\n  *matHeaderRowDef=\"$keys(); sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"/>\n<mat-footer-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n  *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \"\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"] }]
         }], ctorParameters: () => [], propDecorators: { trackBy: [{
                 type: Input
-            }], displayData$: [{
-                type: Input
             }], rows: [{
                 type: Input
             }], columnBuilders: [{
                 type: Input
-            }], columnInfos: [{
-                type: Input
-            }], table: [{
-                type: ViewChild,
-                args: [MatTable, { static: true }]
             }], dropList: [{
                 type: ViewChild,
                 args: [CdkDropList, { static: true }]
@@ -3914,7 +4020,7 @@ class ExportToCsvService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ExportToCsvService, decorators: [{
             type: Injectable
         }] });
-const removeFromMetaData = (state, keysToRemove) => orderMetaData(state)
+const removeFromMetaData = (state, keysToRemove) => orderStateMetaData(state)
     .filter(meta => !keysToRemove.includes(meta.key));
 const nonExportableFields = (state) => Object.values(state.metaData)
     .filter(md => md.noExport)
@@ -4173,11 +4279,12 @@ class SortMenuComponentStore extends ComponentStore {
         sorted.splice(index, 1, sort);
         return ({ ...state, sorted });
     });
+    metaDataArr$ = toObservable(this.tableState.$metaDataArray);
     reset = () => {
         const sorted = this.tableState.sort$.pipe(mergeMap(sort => this.tableState.metaData$.pipe(notNull(), map(meta => sort.map(s => {
             return { ...s, displayName: meta[s.active]?.displayName };
         })))));
-        const notSorted = this.tableState.metaDataArray$.pipe(mergeMap(metas => this.tableState.sort$.pipe(map(s => metas
+        const notSorted = this.metaDataArr$.pipe(mergeMap(metas => this.tableState.sort$.pipe(map(s => metas
             .filter(meta => !s.some(s => s.active === meta.key) && meta.fieldType !== FieldType.NotMapped && !meta.noSort)
             .map(meta => ({ active: meta.key, displayName: meta.displayName }))))));
         this.set(combineLatest([
@@ -4257,6 +4364,7 @@ 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());
@@ -4269,10 +4377,10 @@ class PaginatorComponent {
             this.state.updateState({ currentPage: pageEvent.pageIndex });
         });
         this.state.setPageSize(onPaginatorPageSizeChange(this.paginator));
-        this.state.on(this.state.select(s => s.dataLen), (len) => this.paginator.length = len);
+        this.state.on(this.data.select(s => s.dataLen), (len) => this.paginator.length = len);
     }
     ngAfterViewInit() {
-        this.currentPageData$ = merge$1(this.paginator.page.pipe(map(mapPaginationEventToCurrentPageDetails)), this.data$.pipe(distinctUntilKeyChanged("length"), delayToAllowForProperUpdate, map(updateCurrentPageDetailsOnDataLengthChange(this.paginator))));
+        this.currentPageData$ = merge(this.paginator.page.pipe(map(mapPaginationEventToCurrentPageDetails)), this.data$.pipe(distinctUntilKeyChanged("length"), delayToAllowForProperUpdate, map(updateCurrentPageDetailsOnDataLengthChange(this.paginator))));
     }
     paginatorChange() {
         if (!this.ourPageEvent) {
@@ -4302,7 +4410,7 @@ class PaginatorComponent {
     </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}.no-footer mat-footer-row{display:none}\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}\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
@@ -4318,7 +4426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
     </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}.no-footer mat-footer-row{display:none}\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"] }]
+  `, 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 }]
@@ -4400,14 +4508,18 @@ class TableVirtualScrollStrategy {
 
 class VirtualScrollContainer {
     state = inject(TableStore);
+    dataStore = inject(DataStore);
+    genericTable = contentChild(GenericTableComponent);
+    sub;
+    footerStyle = 'regular-footer';
     viewport = viewChild(CdkVirtualScrollViewport);
     defaultOptions = new VirtualScrollOptions();
     scrollStrategy = new TableVirtualScrollStrategy(this.computedRowHeight(), this.computedHeaderHeight());
-    dataLength$ = this.state.state$.pipe(map$1(s => ({
+    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: s.dataLen
+        dataLen: d.dataLen
     })), distinctUntilChanged$1((a, b) => a.dataLen === b.dataLen &&
         a.pageSize === b.pageSize &&
         a.pageNumber === b.pageNumber &&
@@ -4428,7 +4540,7 @@ class VirtualScrollContainer {
             if (!!viewport) {
                 addEventListener('resize', this.resizeHandler);
                 this.subscriber.on(viewport.renderedRangeStream, (range) => {
-                    this.state.updateState({
+                    this.dataStore.patchState({
                         virtualEnds: {
                             start: range.start,
                             end: range.end + 25,
@@ -4437,15 +4549,22 @@ class VirtualScrollContainer {
                 });
                 var offset$ = viewport.scrolledIndexChange.pipe(map$1(() => viewport.getOffsetToRenderedContentStart() ?? 0), distinctUntilChanged$1(), defaultShareReplay());
                 this.subscriber.on(offset$, (offset) => {
-                    this.state.updateState({ virtualScrollOffset: offset });
+                    this.dataStore.patchState({ virtualScrollOffset: offset });
                 });
                 this.setSize(this.viewport().elementRef);
             }
             ;
         });
     });
+    ngAfterViewInit() {
+        const footerRowStyle$ = this.genericTable()?.$footerRowStyle();
+        if (footerRowStyle$) {
+            this.footerStyle = footerRowStyle$;
+        }
+    }
     ngOnDestroy() {
         removeEventListener('resize', this.resizeHandler);
+        this.sub?.unsubscribe();
     }
     setSize(el) {
         const vsViewport = el.nativeElement;
@@ -4453,7 +4572,20 @@ class VirtualScrollContainer {
         const rowHeight = this.computedRowHeight();
         let amountOfVisibleItems = virtualScrollOptions?.amountOfVisibleItems || this.defaultOptions.amountOfVisibleItems;
         virtualScrollOptions?.amountOfVisibleItems || this.defaultOptions.amountOfVisibleItems;
-        let height = (rowHeight * amountOfVisibleItems);
+        let height = 0;
+        var sub = this.dataLength$.subscribe(dataLength => {
+            if (dataLength < amountOfVisibleItems) {
+                height = +(this.computedRowHeight() * dataLength);
+            }
+            else {
+                height = (rowHeight * amountOfVisibleItems);
+            }
+        });
+        if (this.footerStyle !== 'no-footer') {
+            height += rowHeight;
+            console.log(height);
+            console.log('regular-footer');
+        }
         if (!this.state.tableSettings().hideHeader) {
             const headerHeight = this.computedHeaderHeight();
             height += headerHeight;
@@ -4463,7 +4595,7 @@ class VirtualScrollContainer {
         vsViewport.setAttribute('style', `height: ${height}px !important;`);
         this.viewport()?.checkViewportSize();
         const virtualScrollOffset = this.viewport()?.getOffsetToRenderedContentStart() ?? 0;
-        this.state.updateState({ virtualScrollOffset });
+        this.dataStore.patchState({ virtualScrollOffset });
     }
     resizeHandler = () => {
         if (this.viewport()) {
@@ -4481,7 +4613,7 @@ class VirtualScrollContainer {
         return headerHeight;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: VirtualScrollContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.2", type: VirtualScrollContainer, isStandalone: true, selector: "tb-virtual-scroll-container", viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.2", type: VirtualScrollContainer, isStandalone: true, selector: "tb-virtual-scroll-container", queries: [{ propertyName: "genericTable", first: true, predicate: GenericTableComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: `
     <cdk-virtual-scroll-viewport>
       <ng-content/>
     </cdk-virtual-scroll-viewport>
@@ -4857,18 +4989,25 @@ const defaultProps = {
     selectionColumn: false,
     isSticky: true,
     stickyFooter: false,
+    groupHeaderHeight: undefined,
 };
 
 class TableBuilderDataSource extends MatTableDataSource {
     dataSrc;
     subscription;
-    #viewableData$ = new Subject();
-    viewableData$ = this.#viewableData$.pipe(mergeAll());
-    constructor(dataSrc, state) {
+    constructor(dataSrc, state, data) {
         super([]);
         this.dataSrc = dataSrc;
-        this.#viewType$ = state.viewType$.pipe(distinctUntilChanged$1(), defaultShareReplay());
-        this.#dataSize$ = this.#viewType$.pipe(switchMap$1(viewType => state.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), map$1(({ currentPage, pageSize, virtualEnd, virtualStart }) => {
+        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 previousPageRecords = currentPage * pageSize;
             if (viewType === 'virtual paginator') {
                 return ({ start: virtualStart + previousPageRecords, end: Math.min(virtualEnd, pageSize) + previousPageRecords });
@@ -4876,15 +5015,16 @@ class TableBuilderDataSource extends MatTableDataSource {
             if (viewType === 'paginator') {
                 return ({ start: previousPageRecords, end: previousPageRecords + pageSize });
             }
+            if (viewType === 'all') {
+                return ({ start: 0, end: length });
+            }
             return ({ start: virtualStart, end: virtualEnd });
-        }))))
+        }))
             .pipe(distinctUntilChanged$1((a, b) => a.start === b.start && a.end === b.end), defaultShareReplay());
-        this.dataToShow$ = combineLatest([this.dataSrc, this.#dataSize$])
+        this.dataToShow$ = combineLatest([this.dataSrc, dataSize$])
             .pipe(map$1(([data, size]) => data.slice(size.start, size.end)))
             .pipe(defaultShareReplay());
     }
-    #viewType$;
-    #dataSize$;
     dataToShow$;
     connect() {
         if (!this.subscription) {
@@ -4892,7 +5032,6 @@ class TableBuilderDataSource extends MatTableDataSource {
                 this.data = data;
             });
         }
-        this.#viewableData$.next(this.dataToShow$);
         return super.connect();
     }
     disconnect() {
@@ -4908,17 +5047,55 @@ class TableContainerComponent {
     props = { ...defaultProps };
     dataSubject = new ReplaySubject(1);
     state = inject(TableStore);
+    dataStore = inject(DataStore);
     config = inject(TableBuilderConfigToken);
     exportToCsvService = inject((ExportToCsvService));
     wrapper = inject(TableWrapperDirective, { optional: true });
     stateService = inject(TableBuilderStateStore);
     injector = inject(Injector);
+    filterDirectives = contentChildren(TableFilterDirective, { descendants: true });
+    customFilterDirectives = contentChildren(TableCustomFilterDirective, { descendants: true });
+    allFilterDirectives = computed(() => {
+        if (this.wrapper) {
+            return [...this.filterDirectives(), ...this.customFilterDirectives(), ...this.wrapper.$registrations()];
+        }
+        {
+            return [...this.filterDirectives(), ...this.customFilterDirectives()];
+        }
+    });
+    tableState = toSignal(this.state.state$.pipe(filter(stateIs(InitializationState.LoadedFromStore))));
+    allFilterDirectivesEffect = effect(() => {
+        const state = this.tableState();
+        untracked(() => {
+            if (state) {
+                this.allFilterDirectives().filter(f => !f.used).forEach(f => {
+                    f.used = true;
+                    if (f.savable) {
+                        var filter = state.filters[f.filterId];
+                        if (isFilterInfo(filter)) {
+                            const filterDirective = f;
+                            filterDirective.fieldType = filter.fieldType;
+                            filterDirective.filterType = filter.filterType;
+                            filterDirective.setFilterValue(filter.filterValue);
+                            filterDirective.key = filter.key;
+                            filterDirective.update();
+                        }
+                        if (isCustomFilter(filter)) {
+                            f.active = filter.active ?? false;
+                        }
+                        this.state.addFilter(f.filter$);
+                    }
+                });
+            }
+        });
+    });
     paginatorComponent;
     genericTable;
-    customFilterDirectives;
-    filterDirectives;
     customRows;
-    customCells;
+    $customCells = contentChildren(CustomCellDirective);
+    $myColumns = computed(() => {
+        return this.state.$metaDataArray().map(metaData => ({ metaData, customCell: this.$customCells().find(cc => cc.customCell === metaData.key) }));
+    });
     tableElRef;
     tableBuilder;
     tableId;
@@ -4940,6 +5117,9 @@ class TableContainerComponent {
     set groupHeaderTemplate(template) {
         this.props.groupHeaderTemplate = template;
     }
+    set groupHeaderHeight(value) {
+        this.props.groupHeaderHeight = value;
+    }
     trackBy;
     inputFilters;
     selection$ = new EventEmitter();
@@ -4954,7 +5134,6 @@ class TableContainerComponent {
     displayData = this.displayDataSubject.pipe(switchAll(), defaultShareReplay());
     $displayData = toSignal(this.displayData, { initialValue: [] });
     collapseFooter$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseFooter));
-    myColumns$;
     ngOnDestroy() {
         if (this.tableId) {
             this.stateService.saveTableStateToLocal({ tableId: this.tableId, tableState: this.state.getSavableStateSignal() });
@@ -4967,8 +5146,8 @@ class TableContainerComponent {
         this.paginatorComponent?.paginator?.lastPage();
     }
     resetState() {
-        this.customFilterDirectives.forEach(cf => cf.reset());
-        this.filterDirectives.forEach(cf => cf.reset());
+        this.customFilterDirectives().forEach(cf => cf.reset());
+        this.filterDirectives().forEach(cf => cf.reset());
         this.state.resetState();
         this.onStateReset.next(null);
     }
@@ -5003,11 +5182,21 @@ class TableContainerComponent {
         this.displayDataSubject.next(flatGrouped$);
         this.dataSubject.next(sortedAndFilteredData$);
         this.state.on(this.displayData, (data) => {
-            this.state.updateState({ dataLen: data.length });
+            this.dataStore.patchState({ dataLen: data.length });
         });
     }
     ngOnInit() {
-        const ds = new TableBuilderDataSource(this.displayData, this.state);
+        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]) => {
+            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
@@ -5015,6 +5204,24 @@ class TableContainerComponent {
         this.initializeState();
         this.initializeData();
     }
+    mergeMetaData(metaData1, metaData2) {
+        if (!metaData2) {
+            metaData1.noExport = true;
+            return metaData1;
+        }
+        if (!metaData1.displayName)
+            metaData1.displayName = metaData2.displayName;
+        if (!metaData1.preSort)
+            metaData1.preSort = metaData2.preSort;
+        if (!metaData1.order)
+            metaData1.order = metaData2.order;
+        if (!metaData1.width)
+            metaData1.width = metaData2.width;
+        if (metaData2.fieldType)
+            metaData1.fieldType = metaData2.fieldType;
+        metaData1.noExport = !metaData2;
+        return metaData1;
+    }
     exportToCsv() {
         const sorted = this.data.pipe(withLatestFrom(this.state.sort$), map(([data, sorted]) => sortData(data, sorted)));
         this.exportToCsvService.exportToCsv(sorted);
@@ -5025,25 +5232,12 @@ class TableContainerComponent {
     };
     collapseAllGroups = () => this.state.collapseAll();
     ngAfterContentInit() {
-        this.initializeColumns();
         this.state.runOnceWhen(stateIs(InitializationState.LoadedFromStore), state => {
             this.addFilterDirectives(state);
             this.state.updateState({ initializationState: InitializationState.Ready });
         });
     }
-    initializeColumns() {
-        const customCellMap = new Map(this.customCells.map(cc => [cc.customCell, cc]));
-        this.state.setMetaData(this.tableBuilder.metaData$.pipe(map((mds) => {
-            mds = mds.map(this.mapMetaDatas);
-            return [
-                ...mds,
-                ...this.customCells.map(cc => cc.getMetaData(mds.find(item => item.key === cc.customCell)))
-            ];
-        })));
-        this.state.setLinkMaps(this.tableBuilder.metaData$.pipe(map(createLinkCreatorDict)));
-        this.myColumns$ = this.state.metaDataArray$.pipe(mapArray(metaData => ({ metaData, customCell: customCellMap.get(metaData.key) })), defaultShareReplay());
-    }
-    mapMetaDatas = (meta) => {
+    mapArrayFieldsMetaDatas = (meta) => {
         if (meta.fieldType === FieldType.Array) {
             const additional = { ...meta.additional };
             additional.arrayStyle = additional?.arrayStyle ?? ArrayDefaults.arrayStyle;
@@ -5054,33 +5248,9 @@ class TableContainerComponent {
     };
     collapseHeader$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseHeader));
     addFilterDirectives = (state) => {
-        let allFilterDirectives = [...this.filterDirectives, ...this.customFilterDirectives];
-        if (this.wrapper) {
-            allFilterDirectives = [...allFilterDirectives, ...this.wrapper.registrations];
-        }
-        const customFilters = [];
-        allFilterDirectives.filter(f => !f.used).forEach(f => {
-            f.used = true;
-            if (f.savable) {
-                var filter = state.filters[f.filterId];
-                if (isFilterInfo(filter)) {
-                    const filterDirective = f;
-                    filterDirective.fieldType = filter.fieldType;
-                    filterDirective.filterType = filter.filterType;
-                    filterDirective.setFilterValue(filter.filterValue);
-                    filterDirective.key = filter.key;
-                    filterDirective.update();
-                }
-                if (isCustomFilter(filter)) {
-                    f.active = filter.active ?? false;
-                }
-                this.state.addFilter(f.filter$);
-            }
-            else {
-                customFilters.push(f);
-            }
-        });
-        const customFilters$ = from(customFilters.map(cf => cf.filter$)).pipe(mergeAll$1(), scan$1((a, b) => {
+        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) {
                 a[b.filterId] = isCustomFilter(b) ? b.predicate : createFilterFunc(b);
             }
@@ -5095,29 +5265,20 @@ 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", trackBy: "trackBy", inputFilters: "inputFilters" }, outputs: { selection$: "selection$", data: "data", onStateReset: "onStateReset", onSaveState: "onSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filterDirectives", predicate: TableFilterDirective, descendants: true }, { propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], viewQueries: [{ propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }, { propertyName: "genericTable", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" />\n\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\n  <div class=\"header-wrapper\">\n    <div class=\"title\">\n      @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\n        <ng-content select=\".tb-header-title\"/>\n      }\n      @if((state.groupByKeys$ | async)?.length){\n        <group-by-list />\n      }\n    </div>\n    <div class=\"flx-row-end\">\n      <lib-filter-list />\n      @if (!tableSettings.hideHeader) {\n        @if (!(collapseHeader$ | async)) {\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\n            <mat-icon>more_vert</mat-icon>\n          </button>\n          <mat-menu #mainMenu='matMenu'>\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\n          </mat-menu>\n        }\n        @else {\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\n          <mat-menu #mainMenu='matMenu'>\n            <div class=\"flex-column\">\n              <ng-container *ngTemplateOutlet=\"headerMenu\"/>\n            </div>\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\n          </mat-menu>\n        }\n        <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n          (click)=\"state.toggleCollapseHeader()\">\n          {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n        </mat-icon>\n      }\n\n    </div>\n  </div>\n  <div class=\"table-wrapper\">\n    @if($useVirtual())\n    {\n      <tb-virtual-scroll-container>\n        <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData$]=\"displayData\"\n          (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\" />\n      </tb-virtual-scroll-container>\n    }\n    @else\n    {\n      <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData$]=\"displayData\"\n        (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\" />\n    }\n\n  </div>\n  @if(tableSettings.usePaginator)\n  {\n    <div class=\"paginator\">\n      <tb-paginator #tbPaginator [data$]=\"data\" [tableElRef]=\"tableElRef\" />\n\n      <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\n        (click)=\"state.toggleCollapseFooter()\">\n        {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n      </mat-icon>\n    </div>\n  }\n\n  <ng-template #headerMenu>\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\n    @if (!!tableId) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>}\n  </ng-template>\n\n  <ng-template #headerMenuExtra>\n    <button mat-menu-item (click)=\"resetState()\">\n      <mat-icon color=\"primary\">autorenew</mat-icon>\n      <span>Reset table</span>\n    </button>\n    @if (!tableSettings.hideExport) {\n      <button mat-menu-item (click)=\"exportToCsv()\">\n        <mat-icon color=\"primary\">file_download</mat-icon>\n        <span>Export Table</span>\n      </button>\n    }\n    @if (tableId) {\n      <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\n        <mat-icon color=\"primary\">people</mat-icon>\n        <span>Profiles</span>\n      </button>\n      <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>\n    }\n  </ng-template>\n</ng-container>\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: { 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]\" />\n\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\n  <div class=\"header-wrapper\">\n    <div class=\"title\">\n      @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\n        <ng-content select=\".tb-header-title\"/>\n      }\n      @if((state.groupByKeys$ | async)?.length){\n        <group-by-list />\n      }\n    </div>\n    <div class=\"flx-row-end\">\n      <lib-filter-list />\n      @if (!tableSettings.hideHeader) {\n        @if (!(collapseHeader$ | async)) {\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\n            <mat-icon>more_vert</mat-icon>\n          </button>\n          <mat-menu #mainMenu='matMenu'>\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\n          </mat-menu>\n        }\n        @else {\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\n          <mat-menu #mainMenu='matMenu'>\n            <div class=\"flex-column\">\n              <ng-container *ngTemplateOutlet=\"headerMenu\"/>\n            </div>\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\n          </mat-menu>\n        }\n        <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n          (click)=\"state.toggleCollapseHeader()\">\n          {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n        </mat-icon>\n      }\n\n    </div>\n  </div>\n  <div class=\"table-wrapper\">\n    @if($useVirtual())\n    {\n      <tb-virtual-scroll-container>\n        <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData]=\"$displayData()\"\n          (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"trackBy\" />\n      </tb-virtual-scroll-container>\n    }\n    @else\n    {\n      <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData]=\"$displayData()\"\n        (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"trackBy\" />\n    }\n\n  </div>\n  @if(tableSettings.usePaginator)\n  {\n    <div class=\"paginator\">\n      <tb-paginator #tbPaginator [data$]=\"data\" [tableElRef]=\"tableElRef\" />\n\n      <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\n        (click)=\"state.toggleCollapseFooter()\">\n        {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n      </mat-icon>\n    </div>\n  }\n\n  <ng-template #headerMenu>\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\n    @if (!!tableId) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>}\n  </ng-template>\n\n  <ng-template #headerMenuExtra>\n    <button mat-menu-item (click)=\"resetState()\">\n      <mat-icon color=\"primary\">autorenew</mat-icon>\n      <span>Reset table</span>\n    </button>\n    @if (!tableSettings.hideExport) {\n      <button mat-menu-item (click)=\"exportToCsv()\">\n        <mat-icon color=\"primary\">file_download</mat-icon>\n        <span>Export Table</span>\n      </button>\n    }\n    @if (tableId) {\n      <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\n        <mat-icon color=\"primary\">people</mat-icon>\n        <span>Profiles</span>\n      </button>\n      <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>\n    }\n  </ng-template>\n</ng-container>\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 });
 }
 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], standalone: true, imports: containerImports, template: "<ng-content select=\"[before]\" />\n\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\n  <div class=\"header-wrapper\">\n    <div class=\"title\">\n      @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\n        <ng-content select=\".tb-header-title\"/>\n      }\n      @if((state.groupByKeys$ | async)?.length){\n        <group-by-list />\n      }\n    </div>\n    <div class=\"flx-row-end\">\n      <lib-filter-list />\n      @if (!tableSettings.hideHeader) {\n        @if (!(collapseHeader$ | async)) {\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\n            <mat-icon>more_vert</mat-icon>\n          </button>\n          <mat-menu #mainMenu='matMenu'>\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\n          </mat-menu>\n        }\n        @else {\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\n          <mat-menu #mainMenu='matMenu'>\n            <div class=\"flex-column\">\n              <ng-container *ngTemplateOutlet=\"headerMenu\"/>\n            </div>\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\n          </mat-menu>\n        }\n        <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n          (click)=\"state.toggleCollapseHeader()\">\n          {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n        </mat-icon>\n      }\n\n    </div>\n  </div>\n  <div class=\"table-wrapper\">\n    @if($useVirtual())\n    {\n      <tb-virtual-scroll-container>\n        <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData$]=\"displayData\"\n          (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\" />\n      </tb-virtual-scroll-container>\n    }\n    @else\n    {\n      <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData$]=\"displayData\"\n        (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\" />\n    }\n\n  </div>\n  @if(tableSettings.usePaginator)\n  {\n    <div class=\"paginator\">\n      <tb-paginator #tbPaginator [data$]=\"data\" [tableElRef]=\"tableElRef\" />\n\n      <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\n        (click)=\"state.toggleCollapseFooter()\">\n        {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n      </mat-icon>\n    </div>\n  }\n\n  <ng-template #headerMenu>\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\n    @if (!!tableId) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>}\n  </ng-template>\n\n  <ng-template #headerMenuExtra>\n    <button mat-menu-item (click)=\"resetState()\">\n      <mat-icon color=\"primary\">autorenew</mat-icon>\n      <span>Reset table</span>\n    </button>\n    @if (!tableSettings.hideExport) {\n      <button mat-menu-item (click)=\"exportToCsv()\">\n        <mat-icon color=\"primary\">file_download</mat-icon>\n        <span>Export Table</span>\n      </button>\n    }\n    @if (tableId) {\n      <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\n        <mat-icon color=\"primary\">people</mat-icon>\n        <span>Profiles</span>\n      </button>\n      <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>\n    }\n  </ng-template>\n</ng-container>\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"] }]
+            args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], standalone: true, imports: containerImports, template: "<ng-content select=\"[before]\" />\n\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\n  <div class=\"header-wrapper\">\n    <div class=\"title\">\n      @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\n        <ng-content select=\".tb-header-title\"/>\n      }\n      @if((state.groupByKeys$ | async)?.length){\n        <group-by-list />\n      }\n    </div>\n    <div class=\"flx-row-end\">\n      <lib-filter-list />\n      @if (!tableSettings.hideHeader) {\n        @if (!(collapseHeader$ | async)) {\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\n            <mat-icon>more_vert</mat-icon>\n          </button>\n          <mat-menu #mainMenu='matMenu'>\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\n          </mat-menu>\n        }\n        @else {\n          <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\n          <mat-menu #mainMenu='matMenu'>\n            <div class=\"flex-column\">\n              <ng-container *ngTemplateOutlet=\"headerMenu\"/>\n            </div>\n            <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\n          </mat-menu>\n        }\n        <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n          (click)=\"state.toggleCollapseHeader()\">\n          {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n        </mat-icon>\n      }\n\n    </div>\n  </div>\n  <div class=\"table-wrapper\">\n    @if($useVirtual())\n    {\n      <tb-virtual-scroll-container>\n        <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData]=\"$displayData()\"\n          (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"trackBy\" />\n      </tb-virtual-scroll-container>\n    }\n    @else\n    {\n      <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData]=\"$displayData()\"\n        (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"trackBy\" />\n    }\n\n  </div>\n  @if(tableSettings.usePaginator)\n  {\n    <div class=\"paginator\">\n      <tb-paginator #tbPaginator [data$]=\"data\" [tableElRef]=\"tableElRef\" />\n\n      <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\n        (click)=\"state.toggleCollapseFooter()\">\n        {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n      </mat-icon>\n    </div>\n  }\n\n  <ng-template #headerMenu>\n    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\n    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\n    @if (!tableSettings.hideSort) {<tb-sort-menu/>}\n    @if (!!tableId) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>}\n  </ng-template>\n\n  <ng-template #headerMenuExtra>\n    <button mat-menu-item (click)=\"resetState()\">\n      <mat-icon color=\"primary\">autorenew</mat-icon>\n      <span>Reset table</span>\n    </button>\n    @if (!tableSettings.hideExport) {\n      <button mat-menu-item (click)=\"exportToCsv()\">\n        <mat-icon color=\"primary\">file_download</mat-icon>\n        <span>Export Table</span>\n      </button>\n    }\n    @if (tableId) {\n      <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\n        <mat-icon color=\"primary\">people</mat-icon>\n        <span>Profiles</span>\n      </button>\n      <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>\n    }\n  </ng-template>\n</ng-container>\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: [{
                 type: ViewChild,
                 args: [PaginatorComponent]
             }], genericTable: [{
                 type: ViewChild,
                 args: [GenericTableComponent]
-            }], customFilterDirectives: [{
-                type: ContentChildren,
-                args: [TableCustomFilterDirective, { descendants: true }]
-            }], filterDirectives: [{
-                type: ContentChildren,
-                args: [TableFilterDirective, { descendants: true }]
             }], customRows: [{
                 type: ContentChildren,
                 args: [MatRowDef]
-            }], customCells: [{
-                type: ContentChildren,
-                args: [CustomCellDirective]
             }], tableElRef: [{
                 type: ContentChild,
                 args: ['table', { read: ElementRef }]
@@ -5138,6 +5299,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                 type: Input
             }], groupHeaderTemplate: [{
                 type: Input
+            }], groupHeaderHeight: [{
+                type: Input
             }], trackBy: [{
                 type: Input
             }], inputFilters: [{
@@ -5294,7 +5457,7 @@ class TableBuilder {
         this.settings = this.coerceSettingsToObservable(settings)
             .pipe(map(sett => new GeneralTableSettings(sett)), defaultShareReplay());
         this.data$ = this.coerceToObservable(data, this.settings)
-            .pipe(defaultShareReplay());
+            .pipe(notNull(), defaultShareReplay());
         this.metaData$ = metaData ?
             this.coerceToObservable(metaData, this.settings).pipe(defaultShareReplay())
             :
@@ -5529,5 +5692,5 @@ function provideActionableSelector() {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionStateSpinnerComponent, ActionStateUiModule, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, CancellationToken, ClickEmitterDirective, ClickSubjectDirective, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, GroupByListComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NgrxExtModule, NotPersistedTableSettings, PaginatorComponent, PersistedTableSettings, PhoneNumberPipe, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, Subjectifier, Subscriber, TableBuilder, TableBuilderConfigToken, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableSettings, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, VirtualScrollOptions, actionStatusReducer, chainRequest, clearActionableSelectorRequestCache, combineArrays, createActionableSelector, createFailure, createRequestor, createSuccess, defaultFilter, defaultShareReplay, delayOn, filterArray, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialState, isDifferent, isErrorState, isSuccessOrErrorState, isSuccessState, mapArray, mapError, metaDataArrToDict, notNull, notStarted, onWait, onceWhen, previousAndCurrent, provideActionableSelector, provideTableBuilder, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setUpStoreFactory, skipOneWhen, spaceCase, startWithIfEmpty, statusAdapter, statusIsSuccessOrInProgress, subscriber, switchOff, tapError, tapSuccess };
+export { ActionStateSpinnerComponent, ActionStateUiModule, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, CancellationToken, ClickEmitterDirective, ClickSubjectDirective, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DefaultVirtualScrollOptions, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterTypes, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, GroupByListComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NgrxExtModule, NotPersistedTableSettings, PaginatorComponent, PersistedTableSettings, PhoneNumberPipe, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, Subjectifier, Subscriber, TableBuilder, TableBuilderConfigToken, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableSettings, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, VirtualScrollOptions, actionStatusReducer, chainRequest, clearActionableSelectorRequestCache, combineArrays, createActionableSelector, createFailure, createRequestor, createSuccess, defaultFilter, defaultShareReplay, delayOn, filterArray, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialState, isDifferent, isErrorState, isSuccessOrErrorState, isSuccessState, mapArray, mapError, metaDataArrToDict, notNull, notStarted, onWait, onceWhen, previousAndCurrent, provideActionableSelector, provideTableBuilder, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setUpStoreFactory, skipOneWhen, spaceCase, startWithIfEmpty, statusAdapter, statusIsSuccessOrInProgress, subscriber, switchOff, tapError, tapSuccess, wrapInArr };
 //# sourceMappingURL=one-paragon-angular-utilities.mjs.map