@one-paragon/angular-utilities 2.1.3 → 2.1.5

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

@@ -0,0 +1,403 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Predicate,
+  inject,
+  TemplateRef,
+  Injector,
+  contentChildren,
+  computed,
+  effect,
+  untracked,
+  input,
+  viewChild,
+  output,
+  ElementRef,
+  linkedSignal,
+  DestroyRef,
+} from '@angular/core';
+import { Timestamp } from 'rxjs';
+import { CustomCellMeta } from '../../interfaces/report-def';
+import { TableBuilder } from '../../classes/table-builder';
+import { MatRowDef } from '@angular/material/table';
+import { CustomCellDirective, MultiSortDirective, TableCustomFilterDirective, TableFilterDirective } from '../../directives';
+import { TableStore } from '../../classes/table-store';
+import { ExportToCsvService } from '../../services/export-to-csv.service';
+import { GroupedData, InitializationState, NoneGroupHeader } from '../../classes/TableState';
+import { WrapperFilterStore } from '../table-container-filter/table-wrapper-filter-store';
+import { createFilterFunc, CustomFilter, FilterInfo, isCustomFilter, needsFilterCreation } from '../../classes/filter-info';
+import { TableWrapperDirective } from '../../directives/table-wrapper.directive';
+import { createLinkCreatorDict } from '../../services/link-creator.service';
+import { TableBuilderStateStore } from '../../ngrx/tableBuilderStateStore';
+import { FilterInfoDict, FilterInfoState, FilterPredicateState, patchDirectiveFromState, updateFilterInfoState, updateFilterPredicateState, updateFilterState } from './table-container.helpers/filter-state.helpers';
+import { initialSortState, SortState, updateSortState } from './table-container.helpers/sort-state.helpers';
+import { getAllGroupHeaderNames, GroupByState, 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 } 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 { MatMenu, MatMenuModule } from '@angular/material/menu';
+import { NgTemplateOutlet } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { GenColDisplayerComponent } from '../gen-col-displayer/gen-col-displayer.component';
+import { GroupByListComponent } from '../group-by-list/group-by-list.component';
+import { ProfilesMenuComponent } from '../profiles-menu/profiles-menu.component';
+import { SortMenuComponent } from '../sort-menu/sort-menu.component';
+import { FilterChipsComponent } from '../table-container-filter/filter-list/filter-list.component';
+import { GenFilterDisplayerComponent } from '../table-container-filter/gen-filter-displayer/gen-filter-displayer.component';
+import { TableHeaderMenuComponent } from '../table-header-menu/table-header-menu.component';
+import { VirtualScrollContainer } from './virtual-scroll-container';
+import { Sort } from '@angular/material/sort';
+
+@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: [ 
+      NgTemplateOutlet, 
+      PaginatorComponent,
+    
+      MultiSortDirective, GroupByListComponent, FilterChipsComponent, GenFilterDisplayerComponent, GenColDisplayerComponent,
+      SortMenuComponent, GenericTableComponent, ProfilesMenuComponent, TableHeaderMenuComponent,
+    
+      MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule, VirtualScrollContainer
+    ]
+}) export class TableContainerComponent<T = any> {
+  public state = inject(TableStore);
+  private dataStore = inject(DataStore);
+  public wrapper = inject(TableWrapperDirective, { optional: true });
+  public stateService = inject(TableBuilderStateStore);
+  public injector = inject(Injector);
+  public elementRef = inject(ElementRef);
+  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);
+  $menu = viewChild.required(MatMenu);
+  menuInjector = Injector.create({
+    providers: [{provide: MatMenu, useFactory: () => this.$menu()}],
+    parent: this.injector
+  })
+
+  $tableBuilder = input.required<TableBuilder<T>>({ alias: 'tableBuilder' });
+  $tableIdInput = input<string | undefined>(undefined, { alias: 'tableId'});
+  $trackByInput = input<string | undefined>(undefined, { alias: 'trackBy' });
+  $inputFilters = input<(Predicate<T> | CustomFilter<T> | FilterInfo<any, T>)[]>([], { alias: 'inputFilters' });
+  $filterInfoInputs = computed(() =>
+    this.$inputFilters().filter(i => !isFunction(i)) as (FilterInfo | CustomFilter)[]);
+
+  $indexColumnInput = input<boolean>(false, { alias: 'indexColumn' });
+  $selectionColumnInput = input<boolean>(false, { alias: 'selectionColumn' });
+  $stickyHeaderInput = input<boolean>(true, { alias: 'stickyHeader' });
+  $stickyFooterInput = 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' });
+
+
+  selection$ = output<SelectionChange<T>>({ alias: 'selection' });
+  onStateReset$ = output<null>({ alias: 'onStateReset' });
+  onSaveState$ = output<null>({ alias: 'onSaveState' });
+  state$ = outputFromObservable(toObservable(this.state.$savableState), { alias: 'state' });
+  $data = computed(() => this.$sortedAndFilteredData()?.value || []);
+  data$ = outputFromObservable(toObservable(this.$data), { alias: 'data' });
+
+  private $displayData = computed(() => this.$tableBuilder() && this.$filteredSortedAndGrouped()?.displayData);
+  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 || 0);
+
+
+  $tableBuilderSettings = computed(() => this.$tableBuilder().$settings());
+  $trackBy = computed(() => this.$trackByInput() || this.$tableBuilderSettings()?.tableSettings?.trackBy);
+  $tableId = computed(() => this.$tableIdInput() || this.$tableBuilderSettings()?.tableSettings?.tableId);
+  $includeSelectionColumn = computed(() => this.$selectionColumnInput() || !!this.$tableBuilderSettings()?.tableSettings?.includeSelectionColumn);
+  $includeIndexColumn = computed(() => this.$indexColumnInput() || !!this.$tableBuilderSettings()?.tableSettings?.includeIndexColumn);
+  $stickyHeader = computed(() => {
+    const settings = this.$tableBuilderSettings()?.columnHeaderSettings?.stickyHeaderRow;
+    if(settings != null){
+      return settings;
+    }
+    return this.$stickyHeaderInput();
+  });
+  $stickyFooter = computed(() => this.$stickyFooterInput() || !!this.$tableBuilderSettings()?.columnFooterSettings?.stickyFooterRow)
+
+  $props = computed((): TableProps => {
+    const indexColumn = this.$includeIndexColumn();
+    const selectionColumn = this.$includeSelectionColumn();
+    const stickHeader = this.$stickyHeader();
+    const stickyFooter = this.$stickyFooter();
+    const groupHeaderTemplate = this.$groupHeaderTemplate();
+    const groupHeaderHeight = this.$groupHeaderHeight();
+    return ({ indexColumn, selectionColumn, isSticky: stickHeader, stickyFooter, groupHeaderTemplate, groupHeaderHeight })
+  });
+
+  #initTableBuilder = effect(() => {
+    const tb = this.$tableBuilder();
+    untracked(() => {
+      if(tb){ 
+        tb?.prep(this.injector);
+        tb.container.set(this);
+      }
+    })
+  });
+  #initializeTableSettingsFromTableBuilderAndPersistedStateEffect = effect(() => {
+    const metaLoaded = this.$isInitializationState(InitializationState.MetaDataLoaded)();
+    if(!metaLoaded) return;
+    const persistedState = this.$persistedState();
+    const tbSettings = this.$tableBuilderSettings()!;
+    untracked(() => {
+      this.state.setTableSettings(tbSettings);
+      if(persistedState){
+        persistedState.persistedTableSettings = new PersistedTableSettings(persistedState.persistedTableSettings);
+        this.state.updateStateFromPersistedState(persistedState);
+      }
+      this.state.setInitializationState(InitializationState.Ready);
+    });
+  });
+  #setPageSizeFromInputEffect = effect(() => {
+    const pageSize = this.$pageSize();
+    const userDefinedPageSize = this.state.$userDefinedPageSize();
+    if(pageSize && !userDefinedPageSize) {
+      untracked(() => this.state.setPageSize(pageSize));
+    }
+  });
+  #patchedFilters: string[] = [];
+  #patchSavableFilterDirectivesFromPersistedStateEffect = effect(() => {
+    const loaded = this.$isInitializationState(InitializationState.TableSettingsLoaded)();
+    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.TableSettingsLoaded)();
+    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));
+    });
+  });
+  #setFilteredDataLengthEffect = effect(() => {
+    const tableBuilder = this.$tableBuilder();
+    const data = this.$sortedAndFilteredData();
+    if(!tableBuilder || !data) return;
+    untracked(() => {
+      this.dataStore.patchState({sortedFilteredDataLength: data.value.length});
+    })
+  });
+
+  #setDataSourceDataEffect = effect(() => {
+    const tableBuilder = this.$tableBuilder();
+    const flat = this.$filteredSortedAndGrouped();
+    if(!tableBuilder || !flat) return;
+    untracked(() => {
+      const data = flat.displayData;
+      this.dataSource.setData(data);
+      this.dataStore.patchState({sortedFilteredGroupedDataLength: data.length});
+    })
+  });
+
+  #destroyRef = inject(DestroyRef).onDestroy(() => {
+    const tableId = this.$tableId();
+    if(tableId) {
+      this.stateService.saveTableStateToLocal({ tableId, tableState: this.state.$savableState() });
+    }
+  });
+
+  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 $tableBuilderMetaData = computed(() => this.$tableBuilder()?.$metaData());
+  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 $preds = computed(() => {
+    const predicateInputFilters = this.$inputFilters().filter(isFunction);
+    const notSavableFilterDirectives = this.$allFilterDirectives()
+      .filter(d => !d.savable)
+      .map(d => d.$filter())
+      .filter(d => !!d && needsFilterCreation(d))
+      .map(d => createFilterFunc(d!));
+    return [...predicateInputFilters, ...notSavableFilterDirectives]
+  })
+  private $predicateFiltersState = linkedSignal<Predicate<any>[], { value: FilterPredicateState<T>, timestamp: number } >({
+    source: this.$preds,
+    computation: (curr, previous) => {
+      if(!previous?.value) return ({ value: updateFilterPredicateState({allFilters: [] as Predicate<T>[]}, curr), timestamp: new Date().getTime() })
+      return ({ value: updateFilterPredicateState(previous.value.value, curr), timestamp: new Date().getTime()})
+    }
+  });
+  private $savableFiltersState = linkedSignal<FilterInfoDict, { value: FilterInfoState<T>, timestamp: number } >({
+    source: this.state.$filters,
+    computation: (curr, previous) => {
+      if(!previous?.value) return ({ value: updateFilterInfoState({ allFilters: {} }, curr), timestamp: new Date().getTime() })
+      return ({ value: updateFilterInfoState(previous.value.value, curr), timestamp: new Date().getTime()})
+    }
+  });
+  private $allFilterStatesTimeStamped = computed(() => {
+    if(!this.$isInitializationState(InitializationState.Ready)()) return undefined;
+    return ({ value: updateFilterState(this.$savableFiltersState(), this.$predicateFiltersState()), timestamp: new Date().getTime() })
+  });
+  private $sortStateTimeStamped = linkedSignal<Sort[] | false, { value: SortState, timestamp: number } | undefined>({
+    source: computed(() => this.$isInitializationState(InitializationState.Ready)() && this.state.$getSorts()),
+    computation: (curr, prev) => {
+      if(!curr) return undefined;
+      if(!prev?.value) return ({ value: updateSortState(initialSortState, curr), timestamp: new Date().getTime()});
+      return ({ value: updateSortState(prev.value.value, curr), timestamp: new Date().getTime()});
+    }
+  });
+  private $allData = computed(() => (this.$tableBuilder()?.$initialized() && this.$tableBuilder()?.$data()) || [])
+  private $allDataTimeStamped = computed(() => {
+    const data = this.$allData();
+    if(!data) return undefined;
+    return ({
+      value: data,
+      timestamp: new Date().getTime()
+    })
+  });
+  private $allTimeStamped = computed(() => {
+    const data = this.$allDataTimeStamped();
+    const sort = this.$sortStateTimeStamped();
+    const filter = this.$allFilterStatesTimeStamped();
+    if(!data?.value || !sort?.value || !filter?.value) return undefined;
+    return ({
+      data,
+      sort,
+      filter
+      });
+  });
+  private $sortedAndFilteredData = linkedSignal<{data: Timestamp<T[]>, filter: Timestamp<FilterPredicateState<T>>, sort: Timestamp<SortState>} | undefined, Timestamp<T[]> | undefined>({
+    source: this.$allTimeStamped,
+    computation: (values, prev) => {
+      const init = this.$isInitializationState(InitializationState.Ready);
+      if(!values || !init) return undefined;
+      const { data, filter, sort} = values;
+      const val = prev?.value?.value || data.value;
+      const filteredData = sortAndFilterData(data, filter, sort, !prev?.value, val);
+      return ({ value: filteredData, timestamp: new Date().getTime() });
+    }
+  });
+  $timestampedGroups = computed(() => ({ value: this.state.$groupByKeys(), timestamp: new Date().getTime() }));
+  $timestampedExpanded = computed(() => ({ value: this.state.$expandGroups(), timestamp: new Date().getTime() }));
+  private $dataAndGroupsTimestamped = computed(() => {
+    const data = this.$sortedAndFilteredData() as Timestamp<(T & NoneGroupHeader)[]>;
+    const groups = this.$timestampedGroups();
+    const expanded = this.$timestampedExpanded();
+    if(!data) return undefined;
+    return ({
+      data,
+      groups,
+      expanded
+    })});
+
+  protected $filteredSortedAndGrouped = linkedSignal<{ data: Timestamp<(T & NoneGroupHeader)[]>, groups: Timestamp<string[]>, expanded: Timestamp<GroupedData[]>} | undefined, GroupByState | undefined>({
+    source: this.$dataAndGroupsTimestamped,
+    computation: (curr, prev) => {
+      if(!curr) return undefined;
+      const val = prev?.value?.groupedData || [];
+      return updateGroupByState(val, curr, !prev?.value);
+    }
+  });
+
+  private $isInitializationState = (state: InitializationState) => computed(() =>
+    this.state.selectSignal(s => s.initializationState >= state)()) ;
+
+  static headerId = 'tb-header-wrapper';
+  headerId = TableContainerComponent.headerId;
+}
+
+function isFunction<T>(a: any):a is Predicate<T> {
+  return typeof a === 'function';
+}

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,216 @@
+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 } from '../../../rxjs';
+import { TableStore } from '../../classes/table-store';
+import { TableVirtualScrollStrategy } from '../scroll-strategy';
+import { parseTbSizeToPixels, 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';
+import { TableContainerComponent } from './table-container';
+import { InitializationState } from '../../classes/TableState';
+
+@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.required(CdkVirtualScrollViewport);
+  private genericTable = contentChild(GenericTableComponent);
+  private tableContainer = inject(TableContainerComponent);
+
+  defaultOptions = new VirtualScrollOptions();
+
+
+  $usePaginator = this.state.selectSignal(s => s.notPersistedTableSettings.usePaginator);
+  $pageSize = this.state.$pageSize;
+  $currentPage = this.state.$currentPage;
+  $showAll = this.state.$showAll;
+  $stateDataLength = this.dataStore.selectSignal(s => s.sortedFilteredGroupedDataLength);
+  viewPort$ = toObservable(this.viewport).pipe(notNull());
+  $scrolledIndexChange = toSignal(this.viewPort$.pipe(switchMap(v => v.scrolledIndexChange)));
+  $renderedRange = toSignal(this.viewPort$.pipe(switchMap(v => v.renderedRangeStream)));
+  $virtualScrollOptions = computed(() =>
+    { 
+      if(this.state.$initializationState() >= InitializationState.Ready)
+      return this.state.$tableSettings().virtualSettings!;
+      else return undefined;
+    }
+  );
+  $optionsSet = computed(() => !!this.$virtualScrollOptions());
+  $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();
+    const options = this.$optionsSet();
+    untracked(() => {
+      if(!!viewport && !!options){
+        this.setSize(this.viewport()!.elementRef, 'initial');
+      };
+    })
+  })
+
+
+  #onRenderedRangeEffect = effect(() => {
+    const renderedRange = this.$renderedRange();
+    const viewport = this.viewport();
+    if(!renderedRange) return;
+    untracked(() => {
+      this.dataStore.patchState({
+        virtualEnds: {
+          start: renderedRange.start,
+          end: renderedRange.end,
+        }});
+        if(!viewport) return;
+      this.setSize(viewport.elementRef, 'rendered range');
+    })
+  });
+
+  ngOnDestroy(): void {
+    removeEventListener('resize', this.resizeHandler);
+  }
+
+  setSize(el: ElementRef<HTMLElement>, trigger: SetSizeTrigger) {
+    const virtualScrollOptions = this.$virtualScrollOptions();
+    if(!virtualScrollOptions) return;
+    if(virtualScrollOptions.dynamicHeight){
+      this.calcDynamic(el);
+      return;
+    }
+    const rowHeight = this.computedRowHeight();
+    let amountOfVisibleItems = virtualScrollOptions?.amountOfVisibleItems || this.defaultOptions.amountOfVisibleItems;
+    amountOfVisibleItems = Math.min(amountOfVisibleItems, this.$dataLength());
+    let height = (rowHeight * amountOfVisibleItems);
+
+    const footerHeight = this.computedFooterHeight();
+    const headerHeight = this.computedHeaderHeight();
+    height += (footerHeight + headerHeight);
+
+    const maxViewPortHeightPx = parseTbSizeToPixels(virtualScrollOptions.maxViewPortHeight) || 0;
+
+    if(virtualScrollOptions?.maxViewPortHeight && maxViewPortHeightPx) height = maxViewPortHeightPx;
+
+    this.setHeight(height, el);
+  }
+
+  calcDynamic(el: ElementRef<HTMLElement>){
+    const virtualScrollOptions = this.$virtualScrollOptions();
+    if(!virtualScrollOptions) return;
+
+    const t = this.tableContainer.elementRef.nativeElement.querySelector(`#${TableContainerComponent.headerId}`);
+    const rect = t?.getBoundingClientRect();
+    const windowHeight = window.innerHeight;
+    const distanceFromBottom = windowHeight - rect!.bottom;
+
+    const rowHeight = this.computedRowHeight();
+
+    const footerHeight = this.computedFooterHeight();
+
+    const headerHeight = this.computedHeaderHeight();
+
+    const buffer = this.computedBuffer();
+
+    const horizontalScrollPadding = el.nativeElement.scrollWidth > el.nativeElement.clientWidth ? 17 : 0;
+
+    const maxViewPortHeightPx = parseTbSizeToPixels(virtualScrollOptions.maxViewPortHeight) || 0;
+
+    let tableSize = distanceFromBottom;
+    if(virtualScrollOptions?.maxViewPortHeight && maxViewPortHeightPx < tableSize){
+      tableSize = maxViewPortHeightPx;
+    }
+
+    const available = (distanceFromBottom - footerHeight)
+      - headerHeight
+      - (this.$usePaginator() ? 20 : 0)
+      - buffer
+      - horizontalScrollPadding;
+
+    const amountOfRowsThatWillFit = Math.floor(available / rowHeight);
+
+    const minAmountOfRows = virtualScrollOptions?.amountOfVisibleItems || this.defaultOptions.amountOfVisibleItems;
+
+    const amountOfVisibleItems = Math.min(Math.max(amountOfRowsThatWillFit, minAmountOfRows), this.$dataLength());
+
+    let height = (rowHeight * amountOfVisibleItems);
+
+    height += (footerHeight + headerHeight + horizontalScrollPadding);
+    this.setHeight(height, el);
+  }
+
+  setHeight(height: number, el: ElementRef<HTMLElement>){
+    const vsViewport = el.nativeElement;
+    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.$virtualScrollOptions()?.dynamicHeight) {
+      this.setSize(this.viewport()!.elementRef, 'resize');
+    }
+  };
+
+  computedRowHeight = computed(() =>{
+    const virtualScrollOptions = this.state.$tableSettings().virtualSettings! as VirtualScrollOptions;
+    const rowHeight = this.state.$userDefinedRowHeight() || virtualScrollOptions?.rowHeight || this.state.$tableSettings().rowHeight || this.defaultOptions.rowHeight;
+    return parseTbSizeToPixels(rowHeight) || 0;
+  })
+
+  computedHeaderHeight = computed(() =>{
+    if(this.state.$tableSettings().hideHeader) return 0;
+    const virtualScrollOptions = this.state.$tableSettings().virtualSettings! as VirtualScrollOptions;
+    const headerHeight = this.state.$userDefinedHeaderHeight() || virtualScrollOptions?.headerHeight|| this.state.$tableSettings().headerHeight || this.defaultOptions.headerHeight;
+    return parseTbSizeToPixels(headerHeight) || 0;
+  });
+
+  computedFooterHeight = computed(() => {
+    return parseFloat(this.genericTable()?.$footerHeight()?.replace('px', '') || '0');
+  });
+
+  computedBuffer = computed(() => {
+    const virtualScrollOptions = this.state.$tableSettings().virtualSettings! as VirtualScrollOptions;
+    if(!virtualScrollOptions.dynamicalHeightBuffer) return 0
+    return parseTbSizeToPixels(virtualScrollOptions.dynamicalHeightBuffer) || 0;
+  })
+
+  scrollStrategy = new TableVirtualScrollStrategy(
+    this,
+    this.dataStore
+    );
+}
+
+type SetSizeTrigger = 'initial' | 'rendered range' | 'resize';

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

@@ -0,0 +1,34 @@
+<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>