@one-paragon/angular-utilities 2.0.0-beta.2 → 2.0.0-beta.4

package/src/table-builder/components/table-container/table-container.spec.ts

@@ -0,0 +1,154 @@
+import { BehaviorSubject, of } from 'rxjs';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { SpaceCasePipe, PhoneNumberPipe } from '../../../utilities';
+import { FilterComponent } from '../filter/filter.component';
+import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FieldType } from '../../interfaces/report-def';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { DateFilterComponent } from '../date-filter/date-filter.component';
+import { TableContainerComponent } from './table-container';
+import { GenFilterDisplayerComponent } from '../table-container-filter/gen-filter-displayer/gen-filter-displayer.component';
+import { GenericTableComponent } from '../generic-table/generic-table.component';
+import { GenColDisplayerComponent } from '../gen-col-displayer/gen-col-displayer.component';
+import { ColumnTotalPipe } from '../../pipes/column-total.pipe';
+import { TableBuilder } from '../../classes/table-builder';
+import { MultiSortDirective } from '../../directives/multi-sort.directive';
+import { TableBuilderConfigToken } from '../../classes/TableBuilderConfig';
+import { provideMockStore } from '@ngrx/store/testing';
+import { PaginatorComponent } from '../generic-table/paginator.component';
+import {  LetModule, PushModule } from '@ngrx/component';
+import { HarnessLoader, parallel } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import {MatTableHarness} from '@angular/material/table/testing';
+import { TransformCreator } from '../../services/transform-creator';
+
+const data = [
+  {
+    name: 'Joe',
+    age: 10,
+    balance: 25
+  },
+  {
+    name: 'Jane',
+    age: 20,
+    balance: 35
+  }
+];
+const metaData =  [
+  {
+    key: 'name',
+    fieldType: FieldType.String,
+    additional: {},
+    order : 1
+  },
+  {
+    key: 'age',
+    fieldType: FieldType.Number,
+    additional: {},
+    order : 2
+  },
+  {
+    key: 'balance',
+    fieldType: FieldType.Number,
+    additional: {},
+    order : 3
+  }
+];
+
+const initialState = {fullTableState: {
+  'test-id': {
+    metaData,
+    hiddenKeys: [],
+    pageSize: 10,
+    initialized : true ,
+    filters: [],
+  }
+},
+globalStorageState : {
+  localProfiles: {}
+}};
+describe('table container', () => {
+  let fixture: ComponentFixture<TableContainerComponent>;
+  let component: TableContainerComponent;
+  let loader: HarnessLoader;
+
+  beforeEach(() => {
+
+    TestBed.configureTestingModule({
+      declarations: [
+        TableContainerComponent,
+        FilterComponent,
+        GenFilterDisplayerComponent,
+        GenericTableComponent,
+        PaginatorComponent,
+        GenColDisplayerComponent,
+        SpaceCasePipe,
+        CurrencyPipe,
+        ColumnTotalPipe,
+        DateFilterComponent,
+        MultiSortDirective,
+      ],
+      providers: [
+       { provide : TableBuilderConfigToken , useValue: {defaultTableState: { }}},
+       provideMockStore({ initialState }),
+       DatePipe,
+       TransformCreator,
+       CurrencyPipe,
+       PhoneNumberPipe,
+      ],
+      imports: [
+        NoopAnimationsModule,
+        CommonModule,
+        FormsModule,
+        LetModule,
+      ]
+    })
+    .compileComponents();
+    fixture = TestBed.createComponent(TableContainerComponent);
+    component = fixture.componentInstance;
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  it('can create component', () => {
+    component.tableId = 'test-id';
+    component.tableBuilder = new TableBuilder(of(data));
+    fixture.detectChanges();
+    expect(component).toBeDefined();
+  });
+
+  it('can add metadata dynamicaly after the table has already been rendered', async () => {
+    const md = new BehaviorSubject(metaData);
+    component.tableId = 'test-id';
+    component.tableBuilder = new TableBuilder(of(data), md);
+
+    fixture.detectChanges();
+    expect(component).toBeDefined();
+
+    const tables = await loader.getAllHarnesses(MatTableHarness);
+    expect(tables.length).toBe(1);
+    const table = tables[0];
+
+    let rows = await table.getRows();
+
+    let cells = (await parallel(() => rows.map(row => row.getCells()))).map(row => row.length);
+
+    expect(cells).toEqual([3, 3]);
+
+    md.next([...metaData, {
+        key: 'dynamic',
+        fieldType: FieldType.String,
+        order : 4,
+        additional: {},
+    }]);
+
+    fixture.detectChanges();
+
+    rows = await table.getRows();
+
+    cells = (await parallel(() => rows.map(row => row.getCells()))).map(row => row.length);
+
+    expect(cells).toEqual([4, 4]);
+
+  });
+});

package/src/table-builder/components/table-container/table-container.ts

@@ -0,0 +1,307 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Predicate,
+  inject,
+  TemplateRef,
+  OnDestroy,
+  Injector,
+  contentChildren,
+  computed,
+  effect,
+  untracked,
+  input,
+  viewChild,
+  output,
+  signal,
+  model,
+} from '@angular/core';
+import { BehaviorSubject, Observable, combineLatest } from 'rxjs';
+import { CustomCellMeta } from '../../interfaces/report-def';
+import { map, scan, startWith, timestamp, switchMap } from 'rxjs/operators';
+import { TableBuilder } from '../../classes/table-builder';
+import { MatRowDef } from '@angular/material/table';
+import { CustomCellDirective, TableCustomFilterDirective, TableFilterDirective } from '../../directives';
+import { TableStore } from '../../classes/table-store';
+import { ExportToCsvService } from '../../services/export-to-csv.service';
+import { TableBuilderConfigToken } from '../../classes/TableBuilderConfig';
+import { InitializationState } from '../../classes/TableState';
+import { WrapperFilterStore } from '../table-container-filter/table-wrapper-filter-store';
+import { defaultShareReplay, filterArray, notNull } from '../../../rxjs';
+import { createFilterFuncs, CustomFilter, FilterInfo, isCustomFilter, isFilterInfo } from '../../classes/filter-info';
+import { TableWrapperDirective } from '../../directives/table-wrapper.directive';
+import { createLinkCreatorDict } from '../../services/link-creator.service';
+import { TableBuilderStateStore } from '../../ngrx/tableBuilderStateStore';
+import { containerImports } from './table-container-imports';
+import { patchDirectiveFromState, updateFilterInfoState, updateFilterPredicateState, updateFilterState } from './table-container.helpers/filter-state.helpers';
+import { initialSortState, updateSortState } from './table-container.helpers/sort-state.helpers';
+import { getAllGroupHeaderNames, initialGroupByState, updateGroupByState } from './table-container.helpers/groupBy.helpers';
+import { sortAndFilterData } from './table-container.helpers/data-state.helpers';
+import { TableProps } from './tableProps';
+import { PaginatorComponent } from '../generic-table/paginator.component';
+import { TableBuilderDataSource } from '../../classes/TableBuilderDataSource';
+import { GenericTableComponent } from '../generic-table/generic-table.component';
+import { outputFromObservable, toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { DataStore } from '../../classes/data-store';
+import { PersistedTableSettings } from '../../classes/table-builder-general-settings';
+import { mergeCustomCellMetaData } from './table-container.helpers/meta-data.helpers';
+import { SelectionChange } from '@angular/cdk/collections';
+import { isFunction } from 'lodash';
+
+
+@Component({
+    selector: 'tb-table-container',
+    templateUrl: './table-container.html',
+    styleUrls: ['./table-container.scss', '../../styles/collapser.styles.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore],
+        imports: containerImports
+}) export class TableContainerComponent<T = any> implements OnDestroy {
+  public state = inject(TableStore);
+  private dataStore = inject(DataStore);
+  public config = inject(TableBuilderConfigToken);
+  public exportToCsvService = inject(ExportToCsvService<T>);
+  public wrapper = inject(TableWrapperDirective, { optional: true });
+  public stateService = inject(TableBuilderStateStore);
+  public injector = inject(Injector);
+  protected dataSource = new TableBuilderDataSource<T>(
+    this.state,
+    this.dataStore
+  );
+
+  $filterDirectives = contentChildren(TableFilterDirective, {descendants: true});
+  $customFilterDirectives = contentChildren(TableCustomFilterDirective, {descendants: true});
+  $paginatorComponent = viewChild(PaginatorComponent);
+  $genericTable = viewChild(GenericTableComponent);
+  _$customRows = contentChildren(MatRowDef<any>);
+  $customRows = computed(() => [...this._$customRows()]);
+  $customCells = contentChildren(CustomCellDirective);
+
+
+  $tableBuilder = input.required<TableBuilder>({ alias: 'tableBuilder' });
+  $tableId = input<string | undefined>(undefined, { alias: 'tableId'});
+  $trackBy = input<string | undefined>(undefined, { alias: 'trackBy' });
+  $inputFilters = model<(Predicate<T> | CustomFilter | FilterInfo)[]>([], { alias: 'inputFilters' });
+  predicateInputFilters$ = toObservable(computed(() =>  this.$inputFilters().filter(isFunction)));
+  $filterInfoInputs = computed(() => this.$inputFilters().filter(i => !isFunction(i)) as (FilterInfo | CustomFilter)[]);
+
+  $indexColumn = input<boolean>(false, { alias: 'indexColumn' });
+  $selectionColumn = input<boolean>(false, { alias: 'selectionColumn' });
+  $isSticky = input<boolean>(true, { alias: 'isSticky' });
+  $stickyFooter = input<boolean>(false, { alias: 'stickyFooter' });
+  $groupHeaderTemplate = input<TemplateRef<any> | undefined>(undefined, { alias: 'groupHeaderTemplate' });
+  $groupHeaderHeight = input<number | undefined>(undefined, { alias: 'groupHeaderHeight' });
+  $pageSize = input<number | undefined>(undefined, { alias: 'pageSize' });
+
+  $props = computed((): TableProps => {
+    const indexColumn = this.$indexColumn();
+    const selectionColumn = this.$selectionColumn();
+    const isSticky = this.$isSticky();
+    const stickyFooter = this.$stickyFooter();
+    const groupHeaderTemplate = this.$groupHeaderTemplate();
+    const groupHeaderHeight = this.$groupHeaderHeight();
+    return ({ indexColumn, selectionColumn, isSticky, stickyFooter, groupHeaderTemplate, groupHeaderHeight })
+  })
+
+
+  selection$ = output<SelectionChange<any>>({ alias: 'selection' });
+  onStateReset$ = output<null>({ alias: 'onStateReset' });
+  onSaveState$ = output<null>({ alias: 'onSaveState' });
+  _state$ = toObservable(this.state.getSavableStateSignal);
+   state$ = outputFromObservable(this._state$, { alias: 'state' });
+  _data$ = new BehaviorSubject<T[]>([]);
+  data$ = outputFromObservable(this._data$, { alias: 'data' });
+  $data = toSignal(this._data$, { initialValue: [] });
+
+
+  public clearSelections(){
+    this.$genericTable()?.$selection().clear(true);
+  }
+  public firstPage(): void {
+    this.$paginatorComponent()?.$paginator()?.firstPage();
+  }
+  public lastPage(): void {
+    this.$paginatorComponent()?.$paginator()?.lastPage();
+  }
+  public expandAllGroups = () => {
+    const groupHeaders = getAllGroupHeaderNames(this.$displayData());
+    this.state.expandAllOfGroup({ groupHeadersByKey: groupHeaders });
+  }
+  public collapseAllGroups = () => this.state.collapseAll();
+
+
+  protected $myColumns = computed(() => {
+    return this.state.$metaDataArray().map( metaData => ({
+      metaData,
+      customCell: this.$customCells().filter(cc => cc.$inited()).find(cc => cc.$customCell() === metaData.key)
+    }))
+  });
+  protected $useVirtual = this.state.$isVirtual;
+  protected $collapsedFooter = this.state.$footerCollapsed;
+  protected $collapsedHeader = this.state.$headerCollapsed;
+  protected $displayDataLength = computed(() => this.$displayData().length);
+  protected resetState() {
+    this.$customFilterDirectives().forEach( cf => cf.reset());
+    this.$filterDirectives().forEach( cf => cf.reset() );
+    this.state.resetState();
+    this.onStateReset$.emit(null)
+  }
+  protected exportToCsv(): void {
+    this.exportToCsvService.exportToCsv(this.$data());
+  }
+
+
+  #initializeTableSettingsFromTableBuilderAndPersistedStateEffect = effect(() => {
+    const metaLoaded = this.$isInitializationState(InitializationState.MetaDataLoaded)();
+    if(!metaLoaded) return;
+    const persistedState = this.$persistedState();
+    untracked(() => {
+      this.state.setTableSettings(this.$tableBuilder().settings$);
+      if(persistedState){
+        persistedState.persistedTableSettings = new PersistedTableSettings(persistedState.persistedTableSettings);
+        this.state.updateStateFromPersistedState(persistedState);
+      }
+      this.state.setInitializationState(InitializationState.Ready);
+    });
+  });
+  #setPageSizeFromInputEffect = effect(() => {
+    const pageSize = this.$pageSize();
+    if(pageSize) {
+      untracked(() => this.state.setPageSize(pageSize));
+    }
+  });
+  #patchedFilters: string[] = [];
+  #patchSavableFilterDirectivesFromPersistedStateEffect = effect(() => {
+    const loaded = this.$isInitializationState(InitializationState.LoadedFromStore)();
+    const filterDirectives = this.$allFilterDirectives();
+    if(!loaded || !filterDirectives.length) return;
+    const stateFilters = this.state.$filters();
+
+    untracked(() => {
+      filterDirectives.filter(f => f.savable && !this.#patchedFilters.includes(f.filterId)).forEach( f => {
+        this.#patchedFilters.push(f.filterId);
+        const filter = stateFilters[f.filterId];
+
+        patchDirectiveFromState(f, filter);
+        this.state.addFilter(f.filter$ as any);
+      });
+    })
+  });
+  #patchSavableFilterInputsFromPersistedStateEffect = effect(() => {
+    const loaded = this.$isInitializationState(InitializationState.LoadedFromStore)();
+    const inputFilters = this.$filterInfoInputs();
+    if(!loaded || !inputFilters.length) return;
+
+    untracked(() => {
+      const stateFilters = this.state.$filters();
+      inputFilters.filter(f => f.filterId).forEach( f => {
+        const patched  = this.#patchedFilters.includes(f.filterId);
+        const stateFilter = stateFilters[f.filterId];
+
+        if(patched || !stateFilter) {
+          this.state.addFilter(f);
+        } else if(isCustomFilter(f)){
+          (stateFilter as CustomFilter).predicate = f.predicate;
+          this.state.addFilter(stateFilter);
+        }
+        this.#patchedFilters.push(f.filterId);
+      });
+    })
+  });
+  #addPropsToStoreFromInputsEffect = effect(() => {
+    const props = this.$props();
+    untracked(() => this.state.setProps(props));
+  });
+  #addMetaDataToStoreEffect = effect(() => {
+    const allMetaDatas = this.$allMetaDatas();
+    if(!allMetaDatas) return;
+    untracked(() => {
+      this.state.setMetaData(allMetaDatas);
+      this.state.setLinkMaps(createLinkCreatorDict(allMetaDatas));
+    });
+  });
+  #initializeDataEffect = effect(() => {
+    const tableBuilder = this.$tableBuilder();
+    if(!tableBuilder) return;
+    untracked(() => {
+      this.initializeData();
+    })
+  });
+
+
+  private $persistedState = computed(() => {
+    const tableId = this.$tableId();
+    if(tableId) {
+      return this.stateService.$selectLocalTableStateForView(tableId)();
+    }
+    return undefined
+  });
+  private $allFilterDirectives = computed( () =>  {
+    if(this.wrapper) {
+      return [...this.$filterDirectives(), ...this.$customFilterDirectives(), ...this.wrapper.$registrations()];
+    }
+    return [...this.$filterDirectives(), ...this.$customFilterDirectives()];
+  });
+  private allNotSavableFilterDirectivesFilters$ = toObservable(this.$allFilterDirectives).pipe(
+    filterArray(d => !d.savable),
+    switchMap( d => {
+      const a = d.map(d => d.filter$) as Observable<CustomFilter | FilterInfo>[];
+      return combineLatest(a).pipe(startWith([] as (FilterInfo | CustomFilter)[]))
+    }),
+    map(createFilterFuncs)
+  );
+  private tableBuilderMetaData$ = toObservable(this.$tableBuilder).pipe(notNull(), switchMap(tb => tb.metaData$));
+  private $tableBuilderMetaData = toSignal(this.tableBuilderMetaData$)
+  private $allMetaDatas = computed(() => {
+    const tableBuilderMetaData = this.$tableBuilderMetaData();
+    if(!tableBuilderMetaData) return;
+    const customCellMetaDatas = this.$customCells().filter(cc => cc.$inited()).map(cc => cc.$metaData()).filter(d => !!d) as CustomCellMeta[];
+    const mappedCustomCellMetaDatas = customCellMetaDatas.map( md => mergeCustomCellMetaData(md!, tableBuilderMetaData.find( item => item.key === md.key ) ));
+
+    return [...tableBuilderMetaData, ...mappedCustomCellMetaDatas];
+  });
+  private $displayData = signal<T[]>([]);
+
+
+  ngOnDestroy(){
+    const tableId = this.$tableId();
+    if(tableId) {
+      this.stateService.saveTableStateToLocal({ tableId, tableState: this.state.getSavableStateSignal() });
+    }
+  }
+  private initializeData() {
+
+    const predicateFilters$ = combineLatest([this.predicateInputFilters$.pipe(), this.allNotSavableFilterDirectivesFilters$])
+      .pipe(map(([a, b]) => [...a, ...b]));
+    const filters$ = combineLatest([
+      this.state.filters$.pipe(scan(updateFilterInfoState, { allFilters: {} }), timestamp()),
+      predicateFilters$.pipe(scan(updateFilterPredicateState, {allFilters: [] as Predicate<T>[]}), timestamp())
+    ])
+    .pipe(
+      map(([filterInfo, pred]) => updateFilterState(filterInfo, pred))
+    );
+
+    const sortsState$ = this.state.sort$.pipe(scan(updateSortState, initialSortState));
+
+    const sortedAndFilteredData$ = sortAndFilterData(this.$tableBuilder().getData$(), sortsState$, filters$);
+
+    const flatGrouped$ = combineLatest([sortedAndFilteredData$.pipe(timestamp()), this.state.groupByKeys$.pipe(timestamp()), this.state.expandedGroups$.pipe(timestamp())]).pipe(
+      scan(updateGroupByState, initialGroupByState),
+      map(({displayData}) => displayData),
+      defaultShareReplay(),
+    );
+
+    this.state.on(sortedAndFilteredData$, (data) => {
+      this._data$.next(data);
+      this.dataStore.patchState({dataLen: data.length});
+    });
+
+    this.state.on(flatGrouped$, (data) => {
+      this.dataSource.setData(data);
+      this.$displayData.set(data);
+    });
+  }
+
+  private $isInitializationState = (state: InitializationState) => computed(() =>
+    this.state.selectSignal(s => s.initializationState >= state)()) ;
+}

package/src/table-builder/components/table-container/tableProps.ts

@@ -0,0 +1,18 @@
+import { TemplateRef } from '@angular/core';
+
+export interface TableProps {
+  indexColumn: boolean;
+  selectionColumn: boolean;
+  isSticky: boolean;
+  stickyFooter:boolean;
+  groupHeaderTemplate?: TemplateRef<any>;
+  groupHeaderHeight?: number;
+}
+
+export const defaultProps: TableProps = {
+  indexColumn: false,
+  selectionColumn: false,
+  isSticky: true,
+  stickyFooter: false,
+  groupHeaderHeight: undefined,
+}

package/src/table-builder/components/table-container/virtual-scroll-container.ts

@@ -0,0 +1,155 @@
+import { ChangeDetectionStrategy, Component, ElementRef, OnDestroy, effect, forwardRef, untracked, viewChild, inject, computed, contentChild } from '@angular/core';
+import {
+  CdkVirtualScrollViewport,
+  ScrollingModule,
+  VIRTUAL_SCROLL_STRATEGY,
+} from '@angular/cdk/scrolling';
+import { switchMap } from 'rxjs';
+import { notNull, subscriber } from '../../../rxjs';
+import { TableStore } from '../../classes/table-store';
+import { TableVirtualScrollStrategy } from '../scroll-strategy';
+import { VirtualScrollOptions } from '../../classes/table-builder-general-settings';
+import { DataStore } from '../../classes/data-store';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { GenericTableComponent } from '../generic-table/generic-table.component';
+
+@Component({
+  selector: 'tb-virtual-scroll-container',
+  template: `
+    <cdk-virtual-scroll-viewport>
+      <ng-content/>
+    </cdk-virtual-scroll-viewport>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [ScrollingModule],
+  viewProviders: [
+    {
+      provide: VIRTUAL_SCROLL_STRATEGY,
+      useFactory: (c: VirtualScrollContainer) => c.scrollStrategy,
+      deps: [forwardRef(() => VirtualScrollContainer)],
+    },
+  ],
+})
+export class VirtualScrollContainer implements  OnDestroy {
+  private state = inject(TableStore);
+  private dataStore = inject(DataStore);
+
+  viewport = viewChild(CdkVirtualScrollViewport);
+  private genericTable = contentChild(GenericTableComponent);
+
+  defaultOptions = new VirtualScrollOptions();
+  scrollStrategy = new TableVirtualScrollStrategy(
+    this.computedRowHeight(),
+    this.computedHeaderHeight()
+    );
+
+  $usePaginator = this.state.selectSignal(s => s.notPersistedTableSettings.usePaginator);
+  $pageSize = this.state.$pageSize;
+  $currentPage = this.state.$currentPage;
+  $showAll = this.state.selectSignal(s => s.showAll);
+  $stateDataLength = this.dataStore.selectSignal(s => s.dataLen);
+  $dataLength  = computed(() => {
+    const paginated = this.$usePaginator() && !this.$showAll();
+    const pageSize = this.$pageSize();
+    const pageNumber = this.$currentPage();
+    const dataLen = this.$stateDataLength();
+    if(paginated) return Math.min(dataLen - (pageNumber * pageSize), pageSize);
+    return dataLen;
+  });
+  constructor() {
+    addEventListener('resize', this.resizeHandler);
+  }
+  setViewportEffect = effect(() => {
+    const viewport = this.viewport();
+    untracked(() => {
+      if(!!viewport){
+        this.setSize(this.viewport()!.elementRef);
+      };
+    })
+  })
+
+  subscriber = subscriber();
+
+  onRenderedRangeEffect = effect(() => {
+    const renderedRange = this.$renderedRange();
+    if(!renderedRange) return;
+    untracked(() => {
+      this.dataStore.patchState({
+        virtualEnds: {
+          start: renderedRange.start,
+          end: renderedRange.end + 25,
+        }});
+      this.setSize(this.viewport()!.elementRef);
+    })
+  })
+
+  onDataLengthEffect = effect(() => {
+    const dataLength = this.$dataLength();
+    untracked(() => {
+      this.scrollStrategy.setDataLength(dataLength);
+    })
+  })
+
+  onOffsetEffect = effect(() => {
+    const offset = this.$offset();
+    untracked(() => {
+      this.dataStore.patchState({ virtualScrollOffset: offset });
+    })
+  })
+  viewPort$ = toObservable(this.viewport).pipe(notNull());
+  $scrolledIndexChange = toSignal(this.viewPort$.pipe(switchMap(v => v.scrolledIndexChange)));
+  $renderedRange = toSignal(this.viewPort$.pipe(switchMap(v => v.renderedRangeStream)));
+
+  $offset = computed(() => {
+    const viewport = this.viewport();
+    const scrolledIndexChange = this.$scrolledIndexChange();
+    if(!scrolledIndexChange || !viewport) return 0;
+    return viewport.getOffsetToRenderedContentStart() ?? 0;
+  })
+
+  ngOnDestroy(): void {
+    removeEventListener('resize', this.resizeHandler);
+  }
+
+  setSize(el: ElementRef<HTMLElement>) {
+    const vsViewport = el.nativeElement;
+    const virtualScrollOptions = this.state.$tableSettings().useVirtualScroll! as VirtualScrollOptions;
+    const rowHeight = this.computedRowHeight();
+    let amountOfVisibleItems = virtualScrollOptions?.amountOfVisibleItems || this.defaultOptions.amountOfVisibleItems;
+    virtualScrollOptions?.amountOfVisibleItems || this.defaultOptions.amountOfVisibleItems;
+    amountOfVisibleItems = Math.min(amountOfVisibleItems, this.$dataLength());
+    let height = (rowHeight * amountOfVisibleItems);
+
+    height += parseFloat(this.genericTable()?.$footerHeight()?.replace('px', '') || '0');
+    if(!this.state.$tableSettings().hideHeader){
+      const headerHeight = this.computedHeaderHeight();
+      height += headerHeight;
+    }
+    if(virtualScrollOptions?.maxViewPortHeight && virtualScrollOptions.maxViewPortHeight < height) height = virtualScrollOptions.maxViewPortHeight;
+    vsViewport.setAttribute(
+      'style',
+      `height: ${height}px !important;`,
+    );
+    this.viewport()?.checkViewportSize();
+    const virtualScrollOffset = this.viewport()?.getOffsetToRenderedContentStart() ?? 0
+    this.dataStore.patchState({ virtualScrollOffset });
+  }
+
+  resizeHandler = () => {
+    if (this.viewport()) {
+      this.setSize(this.viewport()!.elementRef);
+    }
+  };
+
+  computedRowHeight(){
+    const virtualScrollOptions = this.state.$tableSettings().useVirtualScroll! as VirtualScrollOptions;
+    const rowHeight = virtualScrollOptions?.rowHeight|| (typeof this.state.$tableSettings().rowHeight === 'number' && this.state.$tableSettings().rowHeight as number) || this.defaultOptions.rowHeight;
+    return rowHeight;
+  }
+
+  computedHeaderHeight(){
+    const virtualScrollOptions = this.state.$tableSettings().useVirtualScroll! as VirtualScrollOptions;
+    const headerHeight = virtualScrollOptions?.headerHeight|| (typeof  this.state.$tableSettings().headerHeight === 'number' && this.state.$tableSettings().headerHeight as number) || this.defaultOptions.headerHeight;
+    return headerHeight;
+  }
+}

package/src/table-builder/components/table-container-filter/filter-list/filter-list.component.html

@@ -0,0 +1,31 @@
+<div class="d-w">
+
+  @if ($currentFilters().length) {
+    <button class="cancel-button" mat-icon-button (click)="clearAll()" matTooltip="Close all Filters Cards">
+      <mat-icon class="cancel-button" color="primary">close</mat-icon>
+    </button>
+    <div class="float">
+      @for (filter of $currentFilters(); track filter.key) {
+        <div class="filter">
+          <tb-filter [filter]="filter" (close)="deleteByIndex($index)" />
+        </div>
+      }
+    </div>
+  }
+
+  <mat-chip-set>
+    @for (filter of $filters(); track filter.key) {
+      <mat-chip (dblclick)="addFilter(filter)"  (removed)="tableState.removeFilter(filter.filterId!)">
+        {{ (filter.key | keyDisplay)()  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ (filter.filterValue | formatFilterValue: filter.key : filter.filterType)() }}
+        <mat-icon matChipRemove>cancel</mat-icon>
+      </mat-chip>
+    }
+    @if ($filters().length > 1) {
+      <mat-chip  (removed)="tableState.clearFilters()">
+        Clear All
+        <mat-icon matChipRemove>cancel</mat-icon>
+      </mat-chip>
+    }
+  </mat-chip-set>
+
+</div>