@one-paragon/angular-utilities 2.2.4 → 2.2.6

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

@@ -0,0 +1,122 @@
+import { groupBy } from "lodash";
+import { Timestamp } from "rxjs";
+import { DataGroup, Group, GroupedData, GroupGroup, NoneGroupHeader } from "../../../classes/TableState";
+import { initIndexSymbol } from "./sort-state.helpers";
+import { Dictionary } from "@ngrx/entity";
+import { getFactory } from "../../../functions/sort-data-function";
+
+const supportsGroupBy = typeof Object.groupBy === 'function'
+
+function getGroupedData<T extends NoneGroupHeader>(data: T[], groupByKeys: string[]) {
+  return tbGroupBy(data, groupByKeys);
+}
+
+const tbGroupBy = <T extends NoneGroupHeader = any>(data: T[], groupByKeys: string[], level = 1, parentGroupName?: string) => {
+  const currentKey = groupByKeys[0];
+  const groupedDataArr = groupData(currentKey, data, level, parentGroupName);
+
+  const remainingGroupByKeys = groupByKeys.slice(1);
+  const hasChildrenGroups = !!remainingGroupByKeys.length;
+
+  if(hasChildrenGroups) {
+    //group the children by iterating over each group and grouping it by the next keys
+    const groupOfGroups = groupedDataArr.map((group: DataGroup<T>) => {
+      const children = group.children;
+      const groupGroup = {
+        groupName: group.groupName,
+        groupHeaderDisplay: group.groupHeaderDisplay,
+        uniqueName: group.uniqueName,
+        key: currentKey,
+        hasTheData: false,
+        isGroupHeader: true,
+        padding: group.padding,
+        level: group.level,
+        length: group.length,
+        groups: tbGroupBy(children as T[], remainingGroupByKeys, level + 1, group.groupName),
+        [initIndexSymbol]: group[initIndexSymbol],
+      } as GroupGroup<T>;
+      return groupGroup;
+    });
+    return groupOfGroups;
+  }
+
+  return groupedDataArr;
+}
+
+function groupData<T extends NoneGroupHeader = any>(groupByKey: string, groupData: T[], level = 1, parentGroupName?: string){
+  const getter = getFactory(groupByKey);
+  const groupedDataDict: Record<string, (T)[]> = supportsGroupBy ? Object.groupBy(groupData, d => getter(d) ?? 'BLANK') as Record<string, T[]> : groupBy(groupData, groupByKey);
+  const groupedDataArr = Object.entries(groupedDataDict).map(([name, groupData]) => {
+    const uniqueName = parentGroupName ? `${parentGroupName}-${name}` : `${name}`;
+
+    return ({
+      isGroupHeader: true,
+      groupHeaderDisplay: name,
+      hasTheData: true,
+      children: groupData,
+      groupName: `tb_group_${uniqueName}`,
+      padding: 1 + (20 * (level - 1)),
+      key: groupByKey,
+      length: groupData.length,
+      uniqueName,
+      level,
+      [initIndexSymbol]: uniqueName,
+    } as DataGroup<T>)
+  });
+  return groupedDataArr;
+}
+
+export function updateGroupByState<T extends NoneGroupHeader = any>(groupedData: any[], { data, groups, expanded }: { data: Timestamp<T[]>, groups: Timestamp<string[]>, expanded: Timestamp<GroupedData[]>}, firstRun: boolean){
+  if(
+    firstRun
+    || dataUpdated(data, groups, expanded)
+    || groupsUpdated(groups, expanded)
+  ){
+    groupedData = groups.value.length ? getGroupedData(data.value, groups.value) : data.value;
+  }
+  const newDisplayData = expanded.value.length === 0
+    ? groupedData
+    : groupedData.map(group => mapGroupHeader(group, expanded.value.flatMap(g => g.expandedHeaders))).flat();
+  return ({ displayData: newDisplayData, groupedData }) as GroupByState;
+}
+
+export function mapGroupHeader(obj: DataGroup | GroupGroup, expandedHeaders: string[] | true): any[]{
+  const showChildren = expandedHeaders === true || expandedHeaders.includes(obj.groupName);
+  const children = !showChildren ? [] :
+    obj.hasTheData ? obj.children
+      : obj.groups.map(a => mapGroupHeader(a, expandedHeaders))
+  return [obj, ...children].flat() as any[]
+}
+
+function dataUpdated(data: Timestamp<any[]>, groups: Timestamp<string[]>, expandedGroups: Timestamp<GroupedData[]>){
+  return data.timestamp > groups.timestamp && data.timestamp > expandedGroups.timestamp;
+}
+
+function groupsUpdated(groups: Timestamp<string[]>, expandedGroups: Timestamp<GroupedData[]>){
+  return groups.timestamp >= expandedGroups.timestamp;
+}
+
+export interface GroupByState { displayData: any[], groupedData: DataGroup[]}
+
+export const initialGroupByState = { displayData: [], groupedData: [] }
+
+export const getAllGroupHeaderNames = (data: any[]) => {
+  const groups = getGroupHeaders(data, (d:any) => d.isGroupHeader);
+  const a = supportsGroupBy ? Object.groupBy(groups, group => group.key) as Dictionary<Group[]> : groupBy(groups, 'key');
+  return Object.entries(a).reduce((names, [key, groups]) => {
+    names[key] = groups!.map(g => ({ groupName: g.groupName, key: g.key }));
+    return names;
+  }, {})
+}
+
+export const getAllGroupHeaderNamesByKeys = (data: any[], keys: string[]) => {
+  const groups = getGroupHeaders(data, (d:any) => d.isGroupHeader && keys.includes(d.key));
+  return supportsGroupBy ? Object.groupBy(groups, group => group.key) as Dictionary<Group[]> : groupBy(groups, 'key');
+}
+
+const getGroupHeaders = (data: any[], filterFunc: (d:any) => boolean, arr:Group[] = []) => {
+  const headers: Group[] = data.filter(filterFunc);
+  arr.push(...headers);
+  headers.forEach(h => {if(h.hasTheData === false && !!h.groups.length) getGroupHeaders(h.groups, filterFunc, arr)});
+  return arr;
+}

package/src/table-builder/components/table-container/table-container.helpers/meta-data.helpers.ts

@@ -0,0 +1,16 @@
+import { CustomCellMeta, MetaData } from "../../../interfaces/report-def";
+
+export function mergeCustomCellMetaData(metaData1: CustomCellMeta, metaData2?: MetaData) {
+  if(!metaData2){
+    metaData1.noExport = true;
+    return metaData1 as MetaData
+  }
+  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.noExport;
+
+  return ({ ...metaData2, ...metaData1 }) as MetaData;
+}

package/src/table-builder/components/table-container/table-container.helpers/sort-state.helpers.ts

@@ -0,0 +1,47 @@
+import { Sort } from "@angular/material/sort";
+import { SortDirection } from "../../../interfaces/report-def";
+import { difference } from "lodash";
+
+// If we are only sorting due to a change in the Sorts[] we can 'optimize'. If the sort array was first by column a asc then by column b desc then by column c asc,
+// and now it is first by column d asc then by column a desc then by column b desc then by column c asc, we dont need to rerun the tail, i.e. for culumn b and c.
+// So we need to calculate the matching tail of the sort array. Then sortsToRun will be the non-matching head.
+// But if any sorts were removed the only way to 'unsort' is to start by the original data and run all the existing sorts again, so 'sorts to run' will be all
+// the sorts.
+// We always pass allSorts to the container because if the table data changes all the sorts will need to be run.
+export function updateSortState(previousSorts: SortState, currentSorts: TableBuilderSort[]): SortState{
+  currentSorts = addInitSort(currentSorts);
+  if(sortsRemoved(previousSorts.allSorts, currentSorts)){
+    return ({ sortsToRun: currentSorts, allSorts: currentSorts });
+  }
+  const sameTailLength = getSameTailLength(previousSorts.allSorts, currentSorts);
+  const sortsToRun = currentSorts.slice(0, currentSorts.length - sameTailLength);
+  return ({ sortsToRun, allSorts: currentSorts });
+}
+
+export interface SortState { sortsToRun: TableBuilderSort[], allSorts: TableBuilderSort[]}
+
+function addInitSort(sorts: TableBuilderSort[]){
+  return [...sorts, { active: initIndexSymbol as unknown as string, direction: 'asc' as SortDirection }];
+}
+
+function sortsRemoved(previousSorts: TableBuilderSort[], currentSorts: TableBuilderSort[]): boolean{
+  const previousSortedColumns = previousSorts.map(s => s.active);
+  const currentSortedColumns = currentSorts.map(s => s.active);
+  const sortsRemoved = !!difference(previousSortedColumns, currentSortedColumns).length;
+  return sortsRemoved;
+}
+
+
+function getSameTailLength(previousSorts: TableBuilderSort[], currentSorts: TableBuilderSort[]){
+  previousSorts = [...previousSorts].reverse();
+  currentSorts = [...currentSorts].reverse();
+  let indexOfChange = currentSorts.findIndex((s, i) => s.active !== previousSorts[i]?.active || s.direction !== previousSorts[i]?.direction);
+  if(indexOfChange === -1) return indexOfChange = currentSorts.length;
+  return indexOfChange;
+}
+
+export const initIndexSymbol = Symbol('tb_init_index');
+
+export const initialSortState: SortState = { sortsToRun: [], allSorts: [] };
+
+export type TableBuilderSort = Sort & { nulls?: 'first' | 'last', sortBy?: (t) => any }

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

@@ -0,0 +1,47 @@
+.tb-header-wrapper{
+  display: flex;
+  flex-direction: row;
+  width:100%;
+}
+
+
+.flx-row-end{
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  margin-left: auto;
+}
+
+.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: white;
+  bottom: 0px;
+  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;
+}

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.component';
+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,35 @@
+<div class="d-w">
+
+  @if ($currentFilters().length)
+  {
+    <button class="cancel-button" mat-icon-button matTooltip="Close all Filters Cards" (click)="clearAll()">
+      <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>

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

@@ -0,0 +1,44 @@
+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 { 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,
+  imports: [
+    MatButtonModule, MatTooltipModule, MatIconModule, FilterComponent,
+    MatChipsModule, 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,40 @@
+.filter {
+    margin: 15px;
+    display: inline-block;
+}
+.filter-button {
+    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 {
+    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,11 @@
+<button color="primary" 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 mat-menu-item (click)="addFilter(md)">
+      <span class="filter-labels">{{md.displayName || (md.key | spaceCase)}}</span>
+    </button>
+  }
+</mat-menu>