@one-paragon/angular-utilities 0.1.20 → 0.1.21

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

@@ -0,0 +1,113 @@
+<ng-content select="[before]" >
+</ng-content>
+
+<ng-container multiSort [matSortDisabled]="disableSort">
+  <ng-container *ngrxLet="state.tableSettings$ as tableSettings">
+
+
+    <div class="header-wrapper">
+      <div class="title">
+        <ng-content select=".tb-header-title"
+          *ngIf="(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed">
+
+        </ng-content>
+        <group-by-list></group-by-list>
+      </div>
+      <div class="flx-row-end">
+        <lib-filter-list></lib-filter-list>
+        <ng-container *ngIf="!tableSettings.hideHeader">
+          <ng-container *ngIf="!(collapseHeader$ | async); else allMenu">
+            <ng-container *ngTemplateOutlet="headerMenu"></ng-container>
+            <button mat-icon-button color='primary' [matMenuTriggerFor]="mainMenu"
+              [ngClass]="{'flat-menu':(collapseHeader$ | async)}">
+              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>
+            </button>
+            <mat-menu #mainMenu='matMenu'>
+              <ng-container *ngTemplateOutlet="headerMenuExtra"></ng-container>
+            </mat-menu>
+          </ng-container>
+          <ng-template #allMenu>
+            <button mat-icon-button color='primary' [matMenuTriggerFor]="mainMenu"
+              [ngClass]="{'flat-menu':(collapseHeader$ | async)}">
+              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>
+            </button>
+            <mat-menu #mainMenu='matMenu'>
+              <div class="flex-column">
+                <ng-container *ngTemplateOutlet="headerMenu"></ng-container>
+              </div>
+              <ng-container *ngTemplateOutlet="headerMenuExtra"></ng-container>
+            </mat-menu>
+          </ng-template>
+          <mat-icon [matTooltip]="(collapseHeader$ | async) ? 'expand' : 'collapse'" class="collapse-icon header"
+            (click)="state.toggleCollapseHeader()">
+            {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}
+          </mat-icon>
+        </ng-container>
+      </div>
+    </div>
+
+    <div style="clear: both;">
+      <tb-generic-table [rows]='customRows' [data$]="data" [IndexColumn]='IndexColumn'
+        [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'
+        [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]="disableSort" [groupHeaderTemplate]="groupHeaderTemplate">
+      </tb-generic-table>
+    </div>
+
+
+
+    <ng-template #headerMenu>
+      <ng-container>
+        <tb-filter-displayer *ngIf="!tableSettings.hideFilter">
+        </tb-filter-displayer>
+        <tb-col-displayer *ngIf="!tableSettings.hideColumnSettings"></tb-col-displayer>
+        <tb-sort-menu *ngIf="!tableSettings.hideSort"></tb-sort-menu>
+      </ng-container>
+    </ng-template>
+    <ng-template #headerMenuExtra>
+      <button mat-menu-item (click)="resetState()">
+        <mat-icon color="primary">autorenew</mat-icon>
+        <span>Reset table</span>
+      </button>
+      <button mat-menu-item (click)="exportToCsv()" *ngIf="!tableSettings.hideExport">
+        <mat-icon color="primary">file_download</mat-icon>
+        <span>Export Table</span>
+      </button>
+      <ng-container *ngIf="currentStateKey$ | async as currentKey">
+        <button mat-menu-item *ngIf="tableId" (click)="saveState()">
+          <mat-icon color="primary">save</mat-icon>
+          <span>Save to {{currentKey}}</span>
+        </button>
+        <button *ngIf='tableId' mat-menu-item [matMenuTriggerFor]="savedNames">
+          <span>Choose Profile</span>
+        </button>
+      </ng-container>
+
+      <mat-menu #savedNames='matMenu' panelClass='wide-menu'>
+        <button mat-menu-item clickEmitter  #add='clickEmitter'>
+          <mat-icon>add</mat-icon>
+          <span>New</span>
+        </button>
+        <ng-container *ngFor='let key of stateKeys$ | async'>
+          <button mat-menu-item (click)='setProfileState(key)'>
+            <div style='display: flex; align-items: center; justify-content: space-between;'>
+              <span style='display:flex;'>{{key}}</span>
+              <span style='display:flex;'>
+                <span style="width: 120px;"></span>
+                <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>
+              </span>
+            </div>
+          </button>
+        </ng-container>
+      </mat-menu>
+      <ng-container *opDialog='add'>
+        <mat-form-field>
+          <input style='width:90%' matInput #addedKey />
+        </mat-form-field>
+        <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'
+          [disabled]="!addedKey.value">Add</button>
+      </ng-container>
+    </ng-template>
+
+  </ng-container>
+
+</ng-container>

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

@@ -0,0 +1,157 @@
+import { BehaviorSubject, of } from 'rxjs';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { MaterialModule } from '../../material.module';
+import { SpaceCasePipe, PhoneNumberPipe,  UtilitiesModule } 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,
+        MaterialModule,
+        CommonModule,
+        FormsModule,
+        LetModule,
+        UtilitiesModule,
+      ]
+    })
+    .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,344 @@
+import {
+  Component,
+  Input,
+  EventEmitter,
+  Output,
+  ContentChildren,
+  QueryList,
+  ChangeDetectionStrategy,
+  Inject,
+  Predicate,
+  Optional,
+  TemplateRef,
+} from '@angular/core';
+import { BehaviorSubject, Observable, from, ReplaySubject, Subscription } from 'rxjs';
+import { ArrayAdditional, FieldType, MetaData } from '../../interfaces/report-def';
+import { first, last, map, switchMap, tap, withLatestFrom, mergeAll, scan } 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 { DataFilter } from '../../classes/data-filter';
+import { combineArrays, mapArray, notNull } from '../../../rxjs/rxjs-operators';
+import { ExportToCsvService } from '../../services/export-to-csv.service';
+import { ArrayDefaults } from '../../classes/DefaultSettings';
+import { TableBuilderConfig, TableBuilderConfigToken } from '../../classes/TableBuilderConfig';
+import * as selectors from '../../ngrx/selectors';
+import { select, Store } from '@ngrx/store';
+import { deleteLocalProfilesState, setLocalProfile, setLocalProfilesState } from '../../ngrx/actions';
+import { Group, InitializationState, PersistedTableState } from '../../classes/TableState';
+import { sortData } from '../../functions/sort-data-function';
+import { WrapperFilterStore } from '../table-container-filter/table-wrapper-filter-store';
+import { cloneDeep, groupBy } from 'lodash';
+import { ColumnInfo } from '../../interfaces/ColumnInfo';
+import { defaultShareReplay } from '../../../rxjs';
+import { flattenDeep } from 'lodash';
+import { createFilterFunc, isCustomFilter, isFilterInfo } from '../../classes/filter-info';
+import { Dictionary } from '../../interfaces/dictionary';
+import { TableWrapperDirective } from '../../directives/table-wrapper.directive';
+import { createLinkCreator } from '../../services/link-creator.service';
+
+@Component({
+  selector: 'tb-table-container',
+  templateUrl: './table-container.html',
+  styleUrls: ['./table-container.css','../../styles/collapser.styles.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [TableStore,ExportToCsvService,WrapperFilterStore]
+}) export class TableContainerComponent<T = any> {
+
+  @ContentChildren(TableCustomFilterDirective, {descendants: true}) customFilters!: QueryList<TableCustomFilterDirective>;
+  @ContentChildren(TableFilterDirective, {descendants: true}) filters!: QueryList<TableFilterDirective>;
+
+  @Input() tableId!: string;
+  @Input() tableBuilder!: TableBuilder;
+  @Input() IndexColumn = false;
+  @Input() SelectionColumn = false;
+  @Input() trackBy!: string;
+  @Input() isSticky = true;
+  @Input() set pageSize(value: number) {
+    this.state.setPageSize(value);
+  }
+  @Input() inputFilters?: Observable<Array<Predicate<T>>>;
+  @Input() groupHeaderTemplate!: TemplateRef<any>;
+  @Output() selection$ = new EventEmitter();
+  dataSubject = new ReplaySubject<Observable<T[]>>(1);
+  @Output() data = this.dataSubject.pipe(
+    switchMap( d => d),
+    defaultShareReplay(),
+  );
+
+  @ContentChildren(MatRowDef) customRows!: QueryList<MatRowDef<any>>;
+
+  @ContentChildren(CustomCellDirective) customCells!: QueryList<CustomCellDirective>;
+  @Output() OnStateReset = new EventEmitter();
+  @Output() OnSaveState = new EventEmitter();
+  @Output() state$ : Observable<PersistedTableState>;
+
+  myColumns$!: Observable<ColumnInfo[]>;
+
+  stateKeys$?: Observable<string[] | null>;
+  currentStateKey$?: Observable<string>;
+
+  disableSort!: boolean;
+
+  constructor(
+    public state: TableStore,
+    public exportToCsvService: ExportToCsvService<T>,
+    @Inject(TableBuilderConfigToken) private config: TableBuilderConfig,
+    private store: Store<any>,
+    @Optional() private wrapper: TableWrapperDirective,
+  ) {
+     this.state.on( this.state.getSavableState().pipe(last()), finalState => {
+      if(this.tableId) {
+        this.store.dispatch(setLocalProfile({key:this.tableId,value: finalState}));
+      }
+    });
+    this.state$ = this.state.getSavableState().pipe(
+      map(state => cloneDeep(state)),
+      defaultShareReplay(),
+    );
+  }
+
+  resetState() {
+    this.customFilters.forEach( cf => cf.reset());
+    this.filters.forEach( cf => cf.reset() );
+    this.state.resetState();
+    this.OnStateReset.next(null)
+  }
+
+  initializeState() {
+    this.state.setTableSettings(this.tableBuilder.settings);
+    this.state.runOnceWhen(stateIs(InitializationState.MetaDataLoaded), state => {
+      if(this.tableId) {
+        const persistedState$ = this.store.pipe(
+          select(selectors.selectLocalProfileState<any>(this.tableId) ),
+          tap( persistedState => {
+            if(!persistedState) {
+              this.state.setIntializationState(InitializationState.LoadedFromStore);
+            }
+          }),
+          notNull(),
+        );
+        this.state.updateStateFromPersistedState(persistedState$);
+
+      } else {
+        this.state.setIntializationState(InitializationState.LoadedFromStore);
+      }
+    });
+  }
+  customFilters$ = new BehaviorSubject<Predicate<any>[]>([]);
+  initializeData() {
+
+
+    var allFilters = this.inputFilters ? combineArrays([
+      this.customFilters$,
+      this.inputFilters
+    ]) : this.customFilters$;
+
+    const filters$ = this.state.filters$.pipe(map( filters => Object.values(filters) ))
+
+    const data = new DataFilter(allFilters)
+      .appendFilters(filters$)
+      .filterData(this.tableBuilder.getData$()).pipe(
+        switchMap(data => this.state.groupByKeys$.pipe(
+          map(groupBy => this.getData(data, groupBy)),
+        ).pipe(
+          switchMap(data => this.state.groups$.pipe(
+            map(groups => this.setDisplay(data, groups))
+          ))
+        ))
+      );
+
+    this.dataSubject.next(data);
+  }
+
+  ngOnInit() {
+    this.initializeState();
+    this.initializeData();
+
+    if(this.tableId) {
+      this.stateKeys$ = this.store.select(selectors.selectLocalProfileKeys(this.tableId));
+      this.currentStateKey$ = this.store.select(selectors.selectLocalProfileCurrentKey(this.tableId));
+    }
+  }
+
+  exportToCsv(): void {
+    const sorted = this.data.pipe(
+      withLatestFrom(this.state.sorted$),
+      map(([data, sorted]) => sortData(data, sorted))
+    );
+    this.exportToCsvService.exportToCsv(sorted);
+  }
+
+  saveState() {
+    this.state.getSavableState().pipe(
+      first()
+    ).subscribe( tableState => {
+      this.OnSaveState.next(null);
+      this.store.dispatch(setLocalProfile({ key: this.tableId, value:tableState, persist: true} ));
+    });
+  }
+
+  setProfileState(val: string) {
+    this.store.dispatch(setLocalProfilesState({key:this.tableId, current: val}));
+  }
+
+  deleteProfileState(stateKey: string) {
+    this.store.dispatch(deleteLocalProfilesState({key:this.tableId, stateKey}));
+  }
+
+
+  ngAfterContentInit() {
+    this.InitializeColumns();
+
+    this.state.runOnceWhen(stateIs(InitializationState.LoadedFromStore), state => {
+
+      var allFilters = [...this.filters, ...this.customFilters];
+      if(this.wrapper) {
+        allFilters = [...allFilters, ...this.wrapper.customFilters, ...this.wrapper.filters, ...this.wrapper.registerations];
+      }
+
+      var customFilters: (TableCustomFilterDirective|TableFilterDirective )[] = [];
+
+      allFilters.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$);
+        } else {
+          customFilters.push(f);
+        }
+      });
+
+      const filters$ =  from( customFilters.map( cf => cf.filter$  )).pipe(
+        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(filters$, (f) => {
+        this.customFilters$.next(f);
+      });
+      this.state.updateState({initializationState: InitializationState.Ready});
+    });
+
+  }
+
+  InitializeColumns() {
+    const customCellMap = new Map(this.customCells.map(cc => [cc.customCell,cc]));
+    this.state.setMetaData(this.tableBuilder.metaData$!.pipe(
+      map((mds) => {
+        mds = mds.map(this.mapMetaDatas);
+        return [
+          ...mds,
+          ...this.customCells.map( cc => cc.getMetaData(mds.find( item => item.key === cc.customCell )) )
+        ]
+      })
+    ));
+    this.state.setLinkMaps(this.tableBuilder.metaData$!.pipe(
+      map((mds) => {
+        return mds.reduce((acc, md) => {
+          if(md.fieldType === FieldType.Link){ acc[md.key]= createLinkCreator(md)}
+          return acc;
+        },{})
+      })
+    ))
+
+    this.myColumns$ = this.state.metaDataArray$.pipe(
+      mapArray( metaData => ({metaData, customCell: customCellMap.get(metaData.key)!}))
+    );
+  }
+  mapMetaDatas = (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));
+
+  getData(data: any[], groupByKeys: string[]): any[] {
+    if (!groupByKeys.length) {
+      this.disableSort = false;
+      return data;
+    }
+    this.disableSort = true;
+    return this.tbGroupBy(data, groupByKeys);
+  }
+
+  tbGroupBy = (data: any[], groupByKeys: string[], parentGroupName?: any): any[] => {
+    let res = {};
+    res = groupBy(data, groupByKeys[0]);
+    const remainingGroupByKeys = groupByKeys.slice(1);
+    if (remainingGroupByKeys.length) {
+      Object.keys(res).forEach(key => res[key] = this.tbGroupBy(res[key], remainingGroupByKeys, key))
+    }
+    return flattenDeep(Object.keys(res).map(groupName => {
+      const uniqName = parentGroupName ? `${parentGroupName}-${groupName}` : `${groupName}`;
+      return [
+        {
+          isGroupHeader: true,
+          groupHeaderName: `${groupName} (${res[groupName]?.filter(row => !row.isGroupHeader)?.length})`,
+          data: res[groupName],
+          groupName: uniqName,
+          padding: 0
+        },
+        (res[groupName] as any[])?.map(d => ({ ...d, parentGroupName: d.parentGroupName || uniqName }))
+      ];
+    })).map(this.addIndentation);
+  }
+
+  addIndentation = (d: any) => {
+    if (d.isGroupHeader) {
+      if (d.padding) {
+        d.padding += 20;
+      } else {
+        d.padding = 1;
+      }
+    }
+    return d;
+  }
+
+  setDisplay = (data: any[], groups: Group[]): any[] => data
+    .map(d => ({
+      ...d,
+      shouldDisplay: !d.parentGroupName || this.shouldDisplay(groups.find(g => g.groupName == d.parentGroupName), groups),
+      isExpanded: groups.find(g => g.groupName == d.groupName)?.isExpanded
+    }))
+    .filter(d => d.shouldDisplay);
+
+
+  shouldDisplay = (currentGroup?: Group, groups?: Group[]): boolean => {
+    if (!currentGroup?.isExpanded) {
+      return false;
+    }
+
+    const parentGroup = groups?.find(g => g.groupName == currentGroup.parentGroupName);
+
+    if (parentGroup) {
+      return this.shouldDisplay(parentGroup, groups);
+    }
+
+    return true;
+  }
+}

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

@@ -0,0 +1,26 @@
+<div style="display: flex; flex-direction: row;justify-content: flex-end;" *ngrxLet="currentFilters$ as currentFilters" >
+
+  <button class="cancel-button" *ngIf="currentFilters.length" mat-icon-button (click)="clearAll()"
+    matTooltip="Close all Filters Cards">
+    <mat-icon class="cancel-button" color="primary">close</mat-icon>
+  </button>
+
+
+  <div *ngIf="currentFilters.length" class="float">
+    <div class="filter" *ngFor="let filter of (currentFilters$ | async); index as i;">
+      <tb-filter [filter]="filter" (close)="deleteByIndex(i)" > </tb-filter>
+    </div>
+  </div>
+
+  <mat-chip-set *ngrxLet="filters$ as filters">
+    <mat-chip *ngFor="let filter of filters" (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>
+    <mat-chip *ngIf="filters.length >= 2" (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,38 @@
+import { Component } from '@angular/core';
+import { TableStore } from '../../../classes/table-store';
+import { CustomFilter, FilterInfo, isFilterInfo } from '../../../classes/filter-info';
+import { map } from 'rxjs/operators';
+import { WrapperFilterStore } from '../table-wrapper-filter-store';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'lib-filter-list',
+  templateUrl: './filter-list.component.html',
+  styleUrls: ['../gen-filter-displayer/gen-filter-displayer.component.css']
+})
+export class FilterChipsComponent {
+
+  constructor( public tableState: TableStore, private filterStore : WrapperFilterStore) {
+  }
+
+    filters$: Observable<FilterInfo<any>[]> = this.tableState.filters$.pipe(
+      map( filters => Object.values(filters)
+                        .filter(isFilterInfo)
+                        .filter( f => !f._isExternalyManaged)
+      )
+    );
+
+    deleteByIndex(index: number) {
+      this.filterStore.deleteByIndex(index);
+    }
+
+    addFilter(filter:FilterInfo<any>){
+      this.filterStore.addFilter(filter);
+    }
+
+    clearAll() {
+        this.filterStore.clearAll();
+    }
+
+    currentFilters$ = this.filterStore.currentFilters$;
+}