@one-paragon/angular-utilities 1.2.10 → 1.2.12

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

@@ -0,0 +1,356 @@
+import {
+  Component,
+  Input,
+  EventEmitter,
+  Output,
+  ContentChildren,
+  QueryList,
+  ChangeDetectionStrategy,
+  Predicate,
+  ViewChild,
+  inject,
+  TemplateRef,
+  ContentChild,
+  ElementRef,
+  OnInit,
+  OnDestroy,
+  Injector,
+  contentChildren,
+  computed,
+  effect,
+  untracked,
+} from '@angular/core';
+import { BehaviorSubject, Observable, ReplaySubject, combineLatest, of } from 'rxjs';
+import { ArrayAdditional, FieldType, MetaData } from '../../interfaces/report-def';
+import { map, tap, withLatestFrom, mergeAll, scan, switchAll, startWith, timestamp, mergeMap, filter, switchMap } from 'rxjs/operators';
+import { TableBuilder } from '../../classes/table-builder';
+import { MatRowDef } from '@angular/material/table';
+import { CustomCellDirective, TableCustomFilterDirective, TableFilterDirective } from '../../directives';
+import { stateIs, TableStore } from '../../classes/table-store';
+import { notNull } from '../../../rxjs/rxjs-operators';
+import { ExportToCsvService } from '../../services/export-to-csv.service';
+import { ArrayDefaults } from '../../classes/DefaultSettings';
+import { TableBuilderConfigToken } from '../../classes/TableBuilderConfig';
+import { InitializationState, TableState } from '../../classes/TableState';
+import { sortData } from '../../functions/sort-data-function';
+import { WrapperFilterStore } from '../table-container-filter/table-wrapper-filter-store';
+import { cloneDeep } from 'lodash';
+import { defaultShareReplay } from '../../../rxjs';
+import { createFilterFunc, isCustomFilter, isFilterInfo } from '../../classes/filter-info';
+import { Dictionary } from '../../interfaces/dictionary';
+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 { 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, defaultProps } from './tableProps';
+import { PaginatorComponent } from '../generic-table/paginator.component';
+import { TableBuilderDataSource } from '../../classes/TableBuilderDataSource';
+import { GenericTableComponent } from '../generic-table/generic-table.component';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { DataStore } from '../../classes/data-store';
+
+
+@Component({
+    selector: 'tb-table-container',
+    templateUrl: './table-container.html',
+    styleUrls: ['./table-container.css', '../../styles/collapser.styles.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore],
+    standalone: true,
+    imports: containerImports
+}) export class TableContainerComponent<T = any> implements OnInit, OnDestroy {
+  props: TableProps = { ...defaultProps };
+  dataSubject = new ReplaySubject<Observable<T[]>>(1);
+
+  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);
+
+  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: TableFilterDirective = f as TableFilterDirective;
+              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$ as any));
+          }
+        });
+      }
+    })
+  });
+
+  @ViewChild(PaginatorComponent)  paginatorComponent?: PaginatorComponent;
+  @ViewChild(GenericTableComponent)  genericTable?: GenericTableComponent;
+  @ContentChildren(MatRowDef) customRows!: QueryList<MatRowDef<any>>;
+  $customCells = contentChildren(CustomCellDirective);
+  $myColumns = computed(() => {
+    return this.state.$metaDataArray().map( metaData => ({metaData, customCell: this.$customCells().find(cc => cc.customCell === metaData.key)}))
+  })
+  @ContentChild('table', {read: ElementRef}) tableElRef!: ElementRef;
+
+  @Input({ required: true }) tableBuilder!: TableBuilder;
+  @Input() tableId!: string;
+  @Input() set indexColumn(val: boolean) {
+    this.props.indexColumn = val;
+  }
+  @Input() set selectionColumn(val: boolean) {
+    this.props.selectionColumn = val;
+  }
+  @Input() set isSticky(val: boolean) {
+    this.props.isSticky = val;
+  }
+  @Input() set stickyFooter(val: boolean) {
+    this.props.stickyFooter = val;
+  }
+  @Input() set pageSize(value: number) {
+    this.state.setPageSize(value);
+  }
+  @Input() set groupHeaderTemplate( template: TemplateRef<any>) {
+    this.props.groupHeaderTemplate = template;
+  }
+  @Input() set groupHeaderHeight(value: number) {
+    this.props.groupHeaderHeight = value;
+  }
+  @Input() trackBy!: string;
+  @Input() inputFilters?: Observable<Array<Predicate<T>>>;
+
+  @Output() selection$ = new EventEmitter();
+  @Output() data = this.dataSubject.pipe(
+    switchAll(),
+    startWith([] as T[]),
+    defaultShareReplay(),
+  );
+  @Output() onStateReset = new EventEmitter();
+  @Output() onSaveState = new EventEmitter();
+  @Output() state$ = this.state.getSavableState().pipe(
+    map(state => cloneDeep(state)),
+    defaultShareReplay(),
+  );
+
+  clearSelections(){
+    this.genericTable?.selection.clear(true);
+  }
+  displayDataSubject = new ReplaySubject<Observable<T[]>>(1);
+  displayData = this.displayDataSubject.pipe(
+    switchAll(),
+    defaultShareReplay(),
+  );
+  $displayData = toSignal(this.displayData, { initialValue: [] });
+
+
+
+  collapseFooter$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseFooter));
+
+
+
+
+  ngOnDestroy(){
+    if(this.tableId) {
+      this.stateService.saveTableStateToLocal({ tableId:this.tableId, tableState: this.state.getSavableStateSignal() });
+    }
+  }
+
+  firstPage(): void {
+   this.paginatorComponent?.paginator?.firstPage();
+  }
+
+  lastPage(): void {
+   this.paginatorComponent?.paginator?.lastPage();
+  }
+
+  resetState() {
+    this.customFilterDirectives().forEach( cf => cf.reset());
+    this.filterDirectives().forEach( cf => cf.reset() );
+    this.state.resetState();
+    this.onStateReset.next(null)
+  }
+
+  initializeState() {
+    this.state.setTableSettings(this.tableBuilder.settings);
+    this.state.runOnceWhen(
+      stateIs(InitializationState.MetaDataLoaded),
+      () => {
+        if(this.tableId) {
+          const persistedState$ = toObservable(this.stateService.$selectLocalTableStateForView(this.tableId), {injector: this.injector}).pipe(
+            tap( persistedState => {
+              if(!persistedState) {
+                this.state.setInitializationState(InitializationState.LoadedFromStore);
+              }
+            }),
+            notNull(),
+          );
+          this.state.updateStateFromPersistedState(persistedState$.pipe(notNull()));
+        } else {
+          this.state.setInitializationState(InitializationState.LoadedFromStore);
+        }
+    });
+  }
+  customFilters$ = new BehaviorSubject<Predicate<T>[]>([]);
+  initializeData() {
+
+    const predicateFilters$ = combineLatest([this.inputFilters?.pipe(startWith([])) ?? of([] as Predicate<T>[]), this.customFilters$])
+      .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.displayDataSubject.next(flatGrouped$);
+    this.dataSubject.next(sortedAndFilteredData$);
+
+    this.state.on(this.displayData, (data) => {
+      this.dataStore.patchState({dataLen: data.length})
+    });
+  }
+  ngOnInit() {
+    const customCells$ = toObservable(this.$customCells, { injector: this.injector });
+    this.state.setLinkMaps(this.tableBuilder.metaData$!.pipe(
+      map(createLinkCreatorDict)
+    ));
+    const c = customCells$.pipe(switchMap(c => c.length ? combineLatest(c.map(c => c.$metaData)) : of([] as MetaData[])));
+    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<T>(
+      this.displayData,
+      this.state,
+      this.dataStore
+    );
+    this.state.updateState({props: {
+      dataSource: ds,
+      ...this.props
+    }})
+    this.initializeState();
+    this.initializeData();
+  }
+
+  mergeMetaData(metaData1: MetaData, metaData2?: MetaData) {
+    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(): void {
+    const sorted = this.data.pipe(
+      withLatestFrom(this.state.sort$),
+      map(([data, sorted]) => sortData(data, sorted))
+    );
+    this.exportToCsvService.exportToCsv(sorted);
+  }
+
+  expandAllGroups = () => {
+    const groupHeaders = getAllGroupHeaderNames(this.$displayData());
+    this.state.expandAllOfGroup({ groupHeadersByKey: groupHeaders });
+  }
+
+  collapseAllGroups = () => this.state.collapseAll();
+
+  ngAfterContentInit() {
+    this.state.runOnceWhen(
+      stateIs(InitializationState.LoadedFromStore),
+      state => {
+        this.addFilterDirectives(state);
+        this.state.updateState({ initializationState: InitializationState.Ready });
+      });
+  }
+
+
+  mapArrayFieldsMetaDatas = (meta : MetaData<T>) => {
+    if(meta.fieldType === FieldType.Array){
+      const additional = {...meta.additional} as ArrayAdditional;
+      additional.arrayStyle = additional?.arrayStyle ?? ArrayDefaults.arrayStyle;
+      additional.limit = additional.limit ?? this.config.arrayInfo?.limit ?? ArrayDefaults.limit;
+      return {...meta,additional}
+    }
+    return meta;
+  }
+
+  collapseHeader$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseHeader));
+
+  addFilterDirectives = (state: TableState) => {
+    const customFilters$ =  toObservable(this.allFilterDirectives, {injector: this.injector}).pipe(
+      mergeMap( customerFilters => customerFilters
+        .filter( filter => !filter.savable )
+        .map(filter => filter.filter$ )
+      ),
+      mergeAll(),
+      scan( (a,b)=> {
+          if(b.active) {
+            a[b.filterId] = isCustomFilter(b) ? b.predicate : createFilterFunc(b);
+          } else {
+            delete a[b.filterId] ;
+          }
+      return a;
+      }, {} as Dictionary<Predicate<any>>),
+      map( f => Object.values(f))
+    );
+
+    this.state.on(customFilters$, (f) => {
+      this.customFilters$.next(f);
+    });
+  }
+
+  $useVirtual = this.state.$isVirtual;
+}

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

@@ -0,0 +1,20 @@
+import { TemplateRef } from '@angular/core';
+import { TableBuilderDataSource } from '../../classes/TableBuilderDataSource';
+
+export interface TableProps {
+  indexColumn: boolean;
+  selectionColumn: boolean;
+  isSticky: boolean;
+  stickyFooter:boolean;
+  groupHeaderTemplate?: TemplateRef<any>;
+  dataSource?: TableBuilderDataSource<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,145 @@
+import { ChangeDetectionStrategy, Component, ElementRef, OnDestroy, effect, forwardRef, untracked, viewChild, inject } from '@angular/core';
+import {
+  CdkVirtualScrollViewport,
+  ScrollingModule,
+  VIRTUAL_SCROLL_STRATEGY,
+} from '@angular/cdk/scrolling';
+import { combineLatest, distinctUntilChanged, map } from 'rxjs';
+import { defaultShareReplay, 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';
+
+@Component({
+  selector: 'tb-virtual-scroll-container',
+  template: `
+    <cdk-virtual-scroll-viewport>
+      <ng-content/>
+    </cdk-virtual-scroll-viewport>
+    `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  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);
+
+  defaultOptions = new VirtualScrollOptions();
+  scrollStrategy = new TableVirtualScrollStrategy(
+    this.computedRowHeight(),
+    this.computedHeaderHeight()
+    );
+
+
+  dataLength$ = combineLatest([this.state.state$, this.dataStore.state$]).pipe(
+    map(([s, d]) => ({
+      paginated: s.notPersistedTableSettings.usePaginator && !s.showAll,
+      pageSize: s.userDefined?.pageSize || s.pageSize,
+      pageNumber: s.currentPage,
+      dataLen: d.dataLen
+    })),
+    distinctUntilChanged((a, b) =>
+      a.dataLen === b.dataLen &&
+      a.pageSize === b.pageSize &&
+      a.pageNumber === b.pageNumber &&
+      a.paginated === b.paginated),
+    map(({dataLen, pageNumber, pageSize, paginated}) => {
+      if(paginated) return Math.min(dataLen - (pageNumber * pageSize), pageSize);
+      return dataLen;
+    }),
+    distinctUntilChanged()
+  );
+
+
+  subscriber = subscriber(this.dataLength$, (dataLength) => {
+    this.scrollStrategy.setDataLength(dataLength);
+
+    if(this.viewport()){
+      this.setSize(this.viewport()!.elementRef);
+    }
+  });
+
+
+  _ = effect(() => {
+    const viewport = this.viewport();
+    untracked(() => {
+      if(!!viewport){
+        addEventListener('resize', this.resizeHandler);
+        this.subscriber.on(viewport.renderedRangeStream, (range) => {
+          this.dataStore.patchState({
+            virtualEnds: {
+              start: range.start,
+              end: range.end + 25,
+            }
+          });
+        });
+        var offset$ = viewport.scrolledIndexChange.pipe(
+          map(() => viewport.getOffsetToRenderedContentStart() ?? 0),
+          distinctUntilChanged(),
+          defaultShareReplay()
+        );
+    
+        this.subscriber.on(offset$, (offset) => {
+          this.dataStore.patchState({ virtualScrollOffset: offset });
+        });
+        this.setSize(this.viewport()!.elementRef);
+      };
+    })
+
+  })
+
+
+  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;
+    let height = (rowHeight * amountOfVisibleItems);
+    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" *ngrxLet="currentFilters$ as currentFilters" >
+
+  @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 | async  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType  | async }}
+        <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>

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

@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { TableStore } from '../../../classes/table-store';
+import { FilterInfo, isFilterInfo } from '../../../classes/filter-info';
+import { WrapperFilterStore } from '../table-wrapper-filter-store';
+import { LetDirective } from '@ngrx/component';
+import { AsyncPipe } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatIconModule } from '@angular/material/icon';
+import { FilterComponent } from '../../filter/filter.component';
+import { MatChipsModule } from '@angular/material/chips';
+import { KeyDisplayPipe } from '../../../pipes/key-display';
+import { FormatFilterTypePipe } from '../../../pipes/format-filter-type.pipe';
+import { FormatFilterValuePipe } from '../../../pipes/format-filter-value.pipe';
+
+@Component({
+  selector: 'lib-filter-list',
+  templateUrl: './filter-list.component.html',
+  styleUrls: ['../gen-filter-displayer/gen-filter-displayer.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    LetDirective, MatButtonModule, MatTooltipModule, MatIconModule, FilterComponent,
+    MatChipsModule, AsyncPipe, KeyDisplayPipe, FormatFilterTypePipe, FormatFilterValuePipe
+  ]
+})
+export class FilterChipsComponent {
+
+  tableState = inject(TableStore);
+  filterStore = inject(WrapperFilterStore);
+
+  $filters = computed(() => Object.values(this.tableState.$filters()).filter(f => isFilterInfo(f) && !f._isExternallyManaged) as FilterInfo[])
+  deleteByIndex(index: number) {
+    this.filterStore.deleteByIndex(index);
+  }
+
+  addFilter(filter:FilterInfo<any>){
+    this.filterStore.addFilter(filter);
+  }
+
+  clearAll() {
+      this.filterStore.clearAll();
+  }
+
+  currentFilters$ = this.filterStore.currentFilters$;
+}

package/src/table-builder/components/table-container-filter/gen-filter-displayer/gen-filter-displayer.component.css

@@ -0,0 +1,42 @@
+.filter {
+    margin: 15px;
+    display: inline-block;
+}
+.filter-button {
+    color: cornflowerblue;
+    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: cornflowerblue;
+    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;
+}

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

@@ -0,0 +1,10 @@
+<button stop-propagation class="filter-button" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="Add Filter">
+  <mat-icon class="filter-icon" color="primary">filter_list</mat-icon>
+</button>
+<mat-menu #menu="matMenu">
+  @for (md of $filterCols(); track md.key) {
+    <button (click)="addFilter(md)" mat-menu-item>
+      <span class="filter-labels">{{md.displayName || (md.key | spaceCase)}}</span>
+    </button>
+  }
+</mat-menu>