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

package/src/table-builder/classes/table-builder-general-settings.ts

@@ -0,0 +1,141 @@
+import { Injector } from "@angular/core";
+import { merge } from "lodash";
+
+export class GeneralTableSettings implements TableBuilderSettings {
+  headerSettings = new TableWrapperHeaderSettings();
+  footerSettings = new TableWrapperFooterSettings();
+  columnHeaderSettings = new TableColumnHeaderSettings();
+  tableSettings = new TableSettings();
+  injector? : Injector;
+}
+
+export interface TableBuilderSettings {
+  headerSettings? : Partial<TableWrapperHeaderSettings>;
+  footerSettings? : Partial<TableWrapperFooterSettings>;
+  columnHeaderSettings? : Partial<TableColumnHeaderSettings>;
+  tableSettings? : Partial<TableSettings>;
+  injector? : Injector;
+}
+
+export class TableWrapperHeaderSettings {
+  hideExport = false
+  hideFilter = false
+  hideColumnSettings = false
+  hideHeader = false
+  hideSort = false
+  collapse = false
+  showTitleWhenCollapsed = true;
+  headerHeight: string | number | undefined = undefined;
+}
+
+export class TableWrapperFooterSettings {
+  collapse = false
+}
+
+export class TableColumnHeaderSettings {
+  noFilters = false;
+  noHeader = false;
+}
+
+export class TableSettings {
+  usePaginator = true;
+  useVirtualScroll: true | Partial<VirtualScrollOptions> | undefined = undefined;
+  includeAllInPaginatorOptions = false;
+  rowHeight: string | number | undefined = undefined;
+  groupHeaderHeight?: number = undefined;
+  minColumnWidth: number | undefined;
+}
+
+export class PersistedTableSettings {
+  constructor(tableSettings?: NonFunctionProperties<PersistedTableSettings>){
+    if (tableSettings){
+      this.collapseHeader = tableSettings.collapseHeader;
+      this.collapseFooter = tableSettings.collapseFooter;
+    }
+  }
+
+  merge(tableSettings?: TableBuilderSettings){
+    const newPts = new PersistedTableSettings(this);
+    if(tableSettings){
+      newPts.collapseHeader = tableSettings.headerSettings?.collapse ?? newPts.collapseHeader;
+      newPts.collapseFooter = tableSettings.footerSettings?.collapse ?? newPts.collapseFooter;
+    }
+    return newPts;
+  }
+
+  collapseHeader = false;
+  collapseFooter = false;
+}
+
+export class NotPersistedTableSettings {
+  merge(tableSettings?: TableBuilderSettings){
+    const newNpts = merge(this, new NotPersistedTableSettings());
+    if(tableSettings){
+      newNpts.hideExport = tableSettings.headerSettings?.hideExport ?? newNpts.hideExport;
+      newNpts.hideColumnSettings = tableSettings.headerSettings?.hideColumnSettings ?? newNpts.hideColumnSettings;
+      newNpts.hideFilter = tableSettings.headerSettings?.hideFilter ?? newNpts.hideFilter;
+      newNpts.hideSort = tableSettings.headerSettings?.hideSort ?? newNpts.hideSort;
+      newNpts.showTitleWhenHeaderCollapsed = tableSettings.headerSettings?.showTitleWhenCollapsed ?? newNpts.showTitleWhenHeaderCollapsed;
+      newNpts.hideHeader = tableSettings.headerSettings?.hideHeader ?? newNpts.hideHeader;
+      newNpts.hideColumnHeaderFilters = tableSettings.columnHeaderSettings?.noFilters ?? newNpts.hideColumnHeaderFilters;
+      newNpts.hideColumnHeader = tableSettings.columnHeaderSettings?.noHeader ?? newNpts.hideColumnHeader;
+      newNpts.usePaginator = tableSettings.tableSettings?.usePaginator ?? newNpts.usePaginator;
+      newNpts.useVirtualScroll = tableSettings.tableSettings?.useVirtualScroll ?? newNpts.useVirtualScroll;
+      newNpts.includeAllInPaginatorOptions = tableSettings.tableSettings?.includeAllInPaginatorOptions ?? newNpts.includeAllInPaginatorOptions;
+      newNpts.rowHeight = tableSettings.tableSettings?.rowHeight ?? newNpts.rowHeight;
+      newNpts.headerHeight = tableSettings.headerSettings?.headerHeight ?? newNpts.headerHeight;
+      newNpts.groupHeaderHeight = tableSettings.tableSettings?.groupHeaderHeight ?? newNpts.groupHeaderHeight;
+      newNpts.minColumnWidth = tableSettings.tableSettings?.minColumnWidth ?? newNpts.minColumnWidth;
+      if(tableSettings.tableSettings?.useVirtualScroll){
+        const currVirt = tableSettings.tableSettings.useVirtualScroll === true ? new VirtualScrollOptions() : tableSettings.tableSettings.useVirtualScroll;
+        if(!currVirt.headerHeight || tableSettings.tableSettings.useVirtualScroll === true){
+          currVirt.headerHeight = (typeof tableSettings.headerSettings?.headerHeight === 'number' ? tableSettings.headerSettings?.headerHeight : DefaultVirtualScrollOptions.headerHeight);
+        }
+        if(!currVirt.rowHeight || tableSettings.tableSettings.useVirtualScroll === true){
+          currVirt.rowHeight = (typeof tableSettings.tableSettings?.rowHeight === 'number' ? tableSettings.tableSettings?.rowHeight : DefaultVirtualScrollOptions.rowHeight);
+        }
+        this.useVirtualScroll = { ...new VirtualScrollOptions(), ...currVirt }
+      }
+    }
+    return newNpts;
+  }
+  hideExport = false
+  hideFilter = false
+  hideColumnSettings = false
+  hideSort = false
+  showTitleWhenHeaderCollapsed = true;
+  hideHeader = false
+  hideColumnHeaderFilters = false;
+  hideColumnHeader = false;
+  usePaginator = true;
+  useVirtualScroll: true | Partial<VirtualScrollOptions> | undefined = undefined;
+  includeAllInPaginatorOptions = false;
+  groupHeaderHeight?: number = undefined;
+  rowHeight?: string | number | undefined;
+  headerHeight?: string | number = undefined;
+  minColumnWidth?: number | undefined;
+}
+
+export class VirtualScrollOptions {
+  virtualAsDefault = true;
+  rowHeight = 48;
+  enforceRowHeight = true;
+  headerHeight = 56;
+  enforceHeaderHeight = true;
+  amountOfVisibleItems = 10;
+  /**
+   * This will win over `amountOfVisibleItems`
+   */
+  maxViewPortHeight: number | undefined = undefined;
+}
+
+export const DefaultVirtualScrollOptions = {
+  rowHeight : 48,
+  headerHeight : 56,
+};
+
+type NonFunctionPropertyNames<T> = {
+  [K in keyof T]: T[K] extends Function ? never : K
+}[keyof T];
+
+export type NonFunctionProperties<T> = Pick<T, NonFunctionPropertyNames<T>>;

package/src/table-builder/classes/table-builder.ts

@@ -0,0 +1,95 @@
+import { isObservable, Observable, of } from 'rxjs';
+import { MetaData, FieldType, ReportDef } from '../interfaces/report-def';
+import { first, map, switchMap } from 'rxjs/operators';
+import { GeneralTableSettings, TableBuilderSettings } from './table-builder-general-settings';
+import { defaultShareReplay, notNull } from '../../rxjs';
+import { initIndexSymbol } from '../components/table-container/table-container.helpers/sort-state.helpers';
+import { createDataCleaners } from '../components/table-container/table-container.helpers/data-state.helpers';
+import { isSignal, Signal } from '@angular/core';
+import { toObservable } from '@angular/core/rxjs-interop';
+
+export class TableBuilder<T = any> {
+
+  metaData$: Observable<MetaData<T>[]>;
+  data$: Observable<T[]>;
+  settings$ : Observable<TableBuilderSettings>;
+
+  constructor(
+    data: TableBuilderArgs<T[]>, 
+    metaData?: TableBuilderArgs<MetaData<T,any>[]>,
+    settings: TableBuilderArgs<TableBuilderSettings> = new GeneralTableSettings()
+  ) {
+    this.settings$ = this.coerceSettingsToObservable(settings)
+      .pipe(defaultShareReplay());
+
+    this.data$ = this.coerceToObservable(data, this.settings$)
+      .pipe(notNull(), defaultShareReplay());
+
+    this.metaData$ = metaData ?
+      this.coerceToObservable(metaData, this.settings$).pipe(defaultShareReplay()) 
+      :
+      this.data$.pipe(first(), map( d=> this.createMetaData(d[0]) ), defaultShareReplay());
+  }
+
+  getData$(): Observable<any[]> {
+    return this.metaData$.pipe(
+      map(md => createDataCleaners(md)),
+      switchMap( cleaner => this.data$.pipe(
+        map((datas, ii) => {
+          return datas.map((data, i) => {
+            const cleaned = cleaner(data);
+            cleaned[initIndexSymbol] = i * ((ii % 2) + 1)
+            return cleaned;
+          })
+        } ),
+      )),
+      defaultShareReplay()
+    );
+  }
+
+  createMetaData(obj: any): MetaData [] {
+    return Object.keys(obj ?? {})
+    .map( key => ({
+      key,
+      fieldType: FieldType.Unknown,
+      order: -1
+    }));
+  }
+
+  coerceToObservable<T>(arg: TableBuilderArgs<T>, settings: Observable<TableBuilderSettings>){
+    if(isObservable(arg)){
+      return arg;
+    } else if(isSignal(arg)){
+      return settings.pipe(switchMap(s => {
+        this.assertInjector(s);
+        return toObservable(arg, { injector: s.injector })
+      }))
+    } else {
+      return of(arg);
+    }
+  }
+
+  coerceSettingsToObservable(settings: TableBuilderArgs<TableBuilderSettings>){
+    if(isObservable(settings)){
+      return settings;
+    } else if(isSignal(settings)){
+      this.assertInjector(settings());
+      return toObservable(settings, { injector: settings().injector });
+    } else {
+      return of(settings);
+    }
+  }
+
+  assertInjector(s: TableBuilderSettings){
+    if(!s.injector){
+      throw new Error('Injector must be provided when passing a signal to table builder');
+    }
+  }
+}
+
+export const CreateTableBuilder = (reportDef$: Observable<ReportDef> ): TableBuilder => {
+  reportDef$ = reportDef$.pipe(defaultShareReplay());
+  return new TableBuilder(reportDef$.pipe(map( r => r.data) ), reportDef$.pipe( map ( r => r.metaData) ));
+};
+
+type TableBuilderArgs<T> = T | Observable<T> | Signal<T>; 

package/src/table-builder/classes/table-store.helpers.ts

@@ -0,0 +1,102 @@
+import { Sort } from "@angular/material/sort";
+import { Dictionary } from "../interfaces/dictionary";
+import { FieldType, MetaData, SortDef } from "../interfaces/report-def";
+import { isCustomFilter } from "./filter-info";
+import { keysToDelete, PersistedTableState, TableState } from "./TableState";
+
+export const orderedStateVisibleMetaData = (state: TableState) => {
+  const ordered = orderStateMetaData(state);
+  const orderedVisible = ordered
+    .filter(metaData => !state.hiddenKeys.includes(metaData.key) && state.metaData[metaData.key].fieldType !== FieldType.Hidden);
+  return orderedVisible;
+}
+
+export const orderedCodeVisibleMetaData = (state: TableState) =>
+  orderStateMetaData(state).filter(md => md.fieldType !== FieldType.Hidden);
+
+export const orderStateMetaData = (state:TableState) => {
+  return orderMetaData(state.metaData, state.userDefined.order);
+}
+
+export const orderMetaData = (metaData: Dictionary<MetaData>, userDefined: Dictionary<number>) => {
+  const userOrderArr = Object.entries(userDefined);
+  return userOrderArr.length ?
+   Object.values(metaData).sort((a,b)=> {
+    const orderA = userDefined[a.key];
+    const orderB = userDefined[b.key];
+    return order(orderA, orderB);
+  })
+   :
+   Object.values(metaData).sort((a,b)=> {
+    const orderA = a.order;
+    const orderB = b.order;
+    return order(orderA, orderB);
+  })
+}
+
+export function order(orderA: number | undefined, orderB: number | undefined){
+  if(orderA == null && orderB == null) {
+    return 0;
+  }
+  if(orderA == null) {
+    return 1;
+  }
+  if(orderB == null) {
+    return -1;
+  }
+  return orderA - orderB;
+}
+
+export function cleanPersistedState(state: TableState, pState: PersistedTableState) {
+  const metas = Object.values(state.metaData);
+  const filters = Object.values(pState.filters).filter(fltr => isCustomFilter(fltr) || metas.some(m => m.key === fltr.key)).reduce((obj: any, filter) => {
+    obj[filter.filterId!] = pState.filters[filter.filterId!];
+    return obj;
+  }, {});
+  const sorted = pState.sorted.filter(s => metas.some(m => m.key === s.active));
+  return ({ ...pState, filters, sorted })
+}
+
+export const mapSaveableState = (s: PersistedTableState) => {
+  const savableState = {...s} as Partial<TableState>;
+  keysToDelete.forEach(key => delete savableState[key]);
+  return savableState as PersistedTableState;
+}
+
+export const createPreSort = (metaDatas: Dictionary<MetaData>): Sort[] => {
+  return Object.values(metaDatas).filter(( metaData ) : metaData is MetaData & {preSort: SortDef} => !!metaData.preSort)
+    .sort(({  preSort: ps1  }, { preSort: ps2 } ) => (ps1.precedence || Number.MAX_VALUE) - ( ps2.precedence || Number.MAX_VALUE))
+    .map(( {key, preSort: { direction }} ) => ({ active: key, direction }))
+}
+
+export const mergeMeta = (orig: MetaData, merge: MetaData): MetaData => {
+  return {
+      key: orig.key,
+      displayName: merge.displayName ?? orig.displayName,
+      fieldType: merge.fieldType || orig.fieldType,
+      additional: {...orig.additional, ...merge.additional},
+      order: merge.order ?? orig.order,
+      preSort: merge.preSort ?? orig.preSort,
+      width: merge.width ?? orig.width,
+      noExport: merge.noExport || orig.noExport,
+      noFilter: merge.noFilter || orig.noFilter,
+      customCell: merge.customCell ?? orig.customCell,
+      transform: merge.transform ?? orig.transform,
+      map: merge.map ?? orig.map,
+      click: merge.click ?? orig.click,
+      classes: merge.classes ?? orig.classes,
+      noSort: merge.noSort ?? orig.noSort,
+      template: merge.template ?? orig.template,
+      toolTip: merge.toolTip ?? orig.toolTip,
+      useIcon: merge.useIcon ?? orig.useIcon,
+  };
+}
+
+export const initializeOrder = (state:TableState,mds: Dictionary<MetaData>) : Dictionary<number> => {
+  const viewableMetaDataArr = Object.values(mds).filter(a => a.fieldType !== FieldType.Hidden);
+  let userDefinedOrder = state.userDefined.order;
+  if(viewableMetaDataArr.some(meta => userDefinedOrder[meta.key] == null)){
+    return {}
+  }
+  return userDefinedOrder;
+}

package/src/table-builder/classes/table-store.ts

@@ -0,0 +1,355 @@
+import { FieldType, MetaData } from '../interfaces/report-def';
+import { Observable } from 'rxjs';
+import { defaultTableState, GroupedData, InitializationState, PersistedTableState, TableState } from './TableState';
+import { Injectable, Signal, computed, inject } from '@angular/core';
+import { TableBuilderConfigToken } from './TableBuilderConfig';
+import { CustomFilter, FilterInfo, isCustomFilter, isFilterInfo } from './filter-info';
+import { Sort, SortDirection }  from '@angular/material/sort' ;
+import { ComponentStore } from '@ngrx/component-store'  ;
+import { Dictionary } from '../interfaces/dictionary';
+import { distinctUntilChanged, filter, switchMap, tap } from 'rxjs/operators'
+import { moveItemInArray } from '@angular/cdk/drag-drop';
+import { NonFunctionProperties, NotPersistedTableSettings, PersistedTableSettings, TableBuilderSettings, VirtualScrollOptions } from './table-builder-general-settings';
+import { replaceInArrayWithClone } from '../../utilities/array-helpers';
+import { sortsAreSame } from '../directives';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { TableProps } from '../components/table-container/tableProps';
+import { cleanPersistedState, createPreSort, initializeOrder, mapSaveableState, mergeMeta, orderedStateVisibleMetaData, orderMetaData } from './table-store.helpers';
+
+@Injectable()
+export class TableStore extends ComponentStore<TableState> {
+  constructor() {
+    const config = inject(TableBuilderConfigToken);
+    const settingsFromConfig: Pick<TableState, 'notPersistedTableSettings' | 'persistedTableSettings'> =
+      {
+        persistedTableSettings: new PersistedTableSettings().merge(config.defaultTableSettings),
+        notPersistedTableSettings: new NotPersistedTableSettings().merge(config.defaultTableSettings),
+      };
+    if(config.defaultTableSettings?.pageSize){
+      settingsFromConfig['pageSize'] = config.defaultTableSettings?.pageSize;
+    }
+    super( { ...defaultTableState, ...settingsFromConfig });
+  }
+
+  getSavableStateSignal = computed(() => {
+    const state = this.state();
+    return mapSaveableState(state);
+  });
+  $userDefinedOrder = this.selectSignal( state => state.userDefined.order);
+  metaData$ = this.select( state => state.metaData);
+  $metaData = this.selectSignal( state => state.metaData);
+  $metaDataArray = this.selectSignal(
+    this.$metaData,
+    this.$userDefinedOrder,
+    orderMetaData
+  );
+  $orderedCodeVisibleMetaDatas = this.selectSignal(
+    this.$metaDataArray, (mds) => mds.filter(m => m.fieldType !== FieldType.Hidden),
+    {equal: (a: MetaData[],b) => b.length === a.length && b.every((s,i) => a[i].key === s.key)}
+  )
+  $getMetaData = (key: string) => computed(() => {
+    const metaData = this.state().metaData[key];
+    if(!metaData)console.warn(`Meta data with key ${key} not found`);
+    return metaData;
+  });
+
+  $hiddenKeys = this.selectSignal( state => state.hiddenKeys);
+
+  $orderedVisibleColumns = this.selectSignal(this.$orderedCodeVisibleMetaDatas, this.$hiddenKeys,
+    (cs, hiddenKeys) => cs.filter(m => !hiddenKeys.includes(m.key)).map(m => m.key));
+
+  $getUserDefinedWidths = this.selectSignal(state => state.userDefined.widths);
+  $tableSettingsMinWidth = this.selectSignal(state => state.notPersistedTableSettings.minColumnWidth);
+  $getUserDefinedWidth = (key:string) => this.selectSignal(this.$getUserDefinedWidths, widths => widths[key]);
+
+  $filters = this.selectSignal(state => state.filters);
+  filters$ = this.select(state => state.filters );
+  $getFilter = (filterId: string) : Signal<FilterInfo | CustomFilter | undefined> => {
+    return this.selectSignal(this.$filters, filters => filters[filterId] );
+  }
+
+  $selectSorted = this.selectSignal(state => state.sorted, {
+    equal: sortsAreSame
+  });
+  selectSorted$ = this.select(state => state.sorted).pipe(distinctUntilChanged(sortsAreSame));
+  sort$ = this.select(state => state.initializationState).pipe(filter(i => i === InitializationState.Ready))
+    .pipe(switchMap(() => this.selectSorted$));
+
+  $getUserDefinedTableWidth = this.selectSignal(state => state.userDefined.table.width);
+  getUserDefinedTableWidth$ = this.select(state => state.userDefined.table.width);
+
+  $getPageSize = this.selectSignal(state => state.userDefined.pageSize || state.pageSize);
+
+  $footerCollapsed = this.selectSignal(state => state.persistedTableSettings.collapseFooter);
+  $headerCollapsed = this.selectSignal(state => state.persistedTableSettings.collapseHeader);
+
+  $groupBy = this.selectSignal(state => state.groupBy);
+  $groupByKeys = this.selectSignal(this.$groupBy,  gb => gb.map(gbk => gbk.key), {
+    equal: (prev: string[], curr: string[]) => prev.length === curr.length && curr.every((k,i) => prev[i] === k)
+  })
+  groupByKeys$ = this.select(state => state.groupBy.map(gbk => gbk.key))
+    .pipe(distinctUntilChanged<string[]>((prev, curr) => prev.length === curr.length && curr.every((k,i) => prev[i] === k)));
+
+  expandedGroups$ = this.select(state => state.groupBy).pipe(distinctUntilChanged((a, b) => {
+    const aa = a.flatMap(g => g.expandedHeaders);
+    const bb = b.flatMap(g => g.expandedHeaders);
+    return aa.length === bb.length && aa.every((k) => bb.includes(k));
+  }));
+  $getIsExpanded = (columnKey: string, groupHeaderKey: string) => {
+    return this.selectSignal(state => !!state.groupBy.filter(g => g.key === columnKey && g.expandedHeaders.includes(groupHeaderKey)).length);
+  };
+
+  $currentPage = this.selectSignal(state => state.currentPage);
+  $pageSize = this.selectSignal(s => s.userDefined?.pageSize || s.pageSize);
+
+  $tableSettings = this.selectSignal(state => {
+    const ts : NonFunctionProperties<PersistedTableSettings & NotPersistedTableSettings> =
+      {...state.persistedTableSettings, ...state.notPersistedTableSettings};
+    return ts;
+  });
+  tableSettings$ = toObservable(this.$tableSettings);
+
+  $props = this.selectSignal(s => s.props);
+
+  $getLinkInfo = (md:MetaData) => this.selectSignal(state => state.linkMaps[md.key]);
+
+  $isVirtual = this.selectSignal(state => state.notPersistedTableSettings.useVirtualScroll === true || (state.notPersistedTableSettings.useVirtualScroll as VirtualScrollOptions)?.virtualAsDefault || state.showAll);
+  $viewType = this.selectSignal<ViewType>(state => {
+    const usePaginator = state.notPersistedTableSettings.usePaginator;
+    if(state.showAll || (this.$isVirtual() && !usePaginator)){
+      return 'virtual all';
+    } else if(this.$isVirtual() && usePaginator) {
+      return 'virtual paginator';
+    } else if(usePaginator) {
+      return 'paginator';
+    } else {
+      return 'all';
+    }
+  });
+
+  readonly resetState = this.updater((state) => {
+    const sorted = createPreSort(state.metaData);
+    return ({...state, hiddenKeys: [], sorted, filters: {} , groupBy: [],  userDefined: { widths: {}, order: {}, table: {} } });
+  });
+
+  readonly updateStateFromPersistedState = this.updater( ( state: TableState, persistedState: PersistedTableState) : TableState => {
+    const incomingTableState: Partial<TableState> = cleanPersistedState(state,persistedState);
+    const newState =  this.updateStateFunc(state, incomingTableState);
+    newState.initializationState = state.initializationState === InitializationState.MetaDataLoaded ? InitializationState.LoadedFromStore : state.initializationState;
+    return newState;
+  });
+  private updateStateFunc = (state: TableState, incomingTableState: Partial<TableState>) : TableState => {
+    const metaData = state.metaData;
+    const sorted = incomingTableState.sorted?.length ? incomingTableState.sorted
+      : state.initializationState === InitializationState.Created ? createPreSort(metaData) : state.sorted;
+    return {...state, ...incomingTableState, metaData , sorted};
+  };
+  
+  readonly setTableSettings = this.updater((state, settings: TableBuilderSettings)=>{
+    const s:TableState = {
+      ...state,
+      persistedTableSettings : state.persistedTableSettings.merge(settings),
+      notPersistedTableSettings : state.notPersistedTableSettings.merge(settings)
+    };
+    return s;
+  });
+
+  readonly setMetaData = this.updater((state, md: MetaData[]) => {
+    const metaData = md
+      .reduce((prev: Dictionary<MetaData>,curr) => {
+        if(prev[curr.key]) {
+          prev[curr.key] = mergeMeta(prev[curr.key],curr);
+        } else {
+          prev[curr.key] = curr;
+        }
+        return prev;
+      } ,{});
+
+    const sortedInitialized = state.sorted.length > 0;
+    const sorted = sortedInitialized ? state.sorted : createPreSort(metaData);
+
+    const order = initializeOrder(state, metaData);
+    const initializationState = state.initializationState == InitializationState.Created ?  InitializationState.MetaDataLoaded : state.initializationState;
+    return { ...state, initializationState, metaData, sorted, userDefined: { ...state.userDefined, order: order} };
+  });
+
+  readonly showColumn = this.updater((state, key: string) => ({
+    ...state,
+    hiddenKeys: state.hiddenKeys.filter( k => k !== key),
+  }));
+  readonly hideColumn = this.updater((state, key: string) => ({
+    ...state,
+    hiddenKeys: [...state.hiddenKeys.filter( k => k !== key), key],
+  }));
+  readonly setHiddenColumns = this.updater((state, displayCols: {key: string, visible: boolean}[]) => {
+    return ({...state, hiddenKeys: displayCols.filter(d => !d.visible).map(d => d.key)})
+  });
+
+  readonly setUserDefinedWidth = this.updater((state,colWidths:{key: string, widthInPixel:number}[]) => {
+    const userDefinedWidths = {...state.userDefined.widths};
+    colWidths.forEach(cw => {
+      userDefinedWidths[cw.key] = cw.widthInPixel;
+    });
+    return {...state, userDefined: {...state.userDefined, widths:userDefinedWidths}};
+  });
+
+  readonly setUserDefinedOrder = this.updater((state,moved: { newOrder: number, oldOrder: number })=>{
+    const { newOrder, oldOrder } = moved;
+    const mdsArr = orderedStateVisibleMetaData(state);
+    moveItemInArray(mdsArr, oldOrder, newOrder);
+
+    const userDefinedOrder = mdsArr.reduce((aggregate: any,current,index) => {
+      aggregate[current.key] = index;
+      return aggregate
+    },{});
+    return({ ...state, userDefined: { ...state.userDefined, order: userDefinedOrder } })
+  })
+
+  readonly addFilter = this.updater( (state, filter: FilterInfo | CustomFilter ) => {
+    return this.addFiltersToState(state, [filter]);
+  });
+
+  // readonly patchPredicate = this.updater((state, {filterId, predicate}: {filterId: string, predicate: (data: any) => boolean}) => {
+  //   const filtersCopy = { ...state.filters };
+  //   const filter = filtersCopy[filterId] as CustomFilter;
+  //   filter.predicate = predicate;
+  //   return ({...state, filters: filtersCopy });
+  // });
+
+  readonly addFilters = this.updater((state,filters:(FilterInfo | CustomFilter )[])=>{
+    return this.addFiltersToState(state, filters);
+  });
+  readonly removeFilter = this.updater( (state, filterId: string) => {
+    const filtersCopy = { ...state.filters };
+    delete filtersCopy[filterId];
+    return ({...state, filters: filtersCopy });
+  });
+
+  readonly removeFilters = this.updater( (state, filterIds: string[]) => {
+    const filtersCopy = { ...state.filters };
+    filterIds.forEach(id => { delete filtersCopy[id] })
+    return ({...state, filters: filtersCopy });
+  });
+  readonly clearFilters = this.updater((state)=>
+    ({...state,filters:{}}));
+  private addFiltersToState = (state:TableState, filters:(FilterInfo | CustomFilter)[]) : TableState => {
+
+    var customFilters = filters.filter(isCustomFilter);
+
+    var filterInfos = filters.filter(isFilterInfo);
+
+    const filtersObj = filterInfos
+      .filter(fltr => Object.keys(state.metaData).some(key => key === fltr.key) || console.warn(`Meta data with key ${fltr.key} not found`))
+      .reduce((filtersObj: {[k: string]: any},filter)=>{
+        if (!filter.filterId) {
+          filter.filterId = crypto.randomUUID();
+        }
+        filtersObj[filter.filterId] = filter;
+        return filtersObj;
+      },{});
+
+    customFilters.forEach( fltr => {
+      if(!fltr.filterId) {
+        fltr.filterId = crypto.randomUUID();
+      }
+      filtersObj[fltr.filterId] = fltr;
+    })
+    return {
+      ...state,
+      filters : {...state.filters, ...filtersObj }
+    };
+  }
+
+  readonly setSort = this.updater<{key: string, direction?: SortDirection}>((state, {key, direction} ) => {
+    const sortArray = state.sorted.filter( s => s.active !== key );
+    if(direction) {
+      sortArray.unshift({active: key, direction});
+    }
+    return {
+      ...state,
+      sorted: sortArray,
+    };
+  });
+  readonly setAllSort = this.updater((state,sortArray:Sort[])=>{
+    return {
+      ...state,
+      sorted: sortArray,
+    };
+  });
+
+  readonly setCurrentPage = this.updater((state, currentPage: number) => ({ ...state, currentPage }))
+  readonly setPageSize = this.updater( (state, pageSize: number)=>
+    ({ ...state, pageSize, userDefined: { ...state.userDefined, pageSize } }));
+  
+  readonly setProps = this.updater((state, props: TableProps) => {
+    return ({ ...state, props });
+  });
+
+  readonly setTableWidth = this.updater((state, widthInPixels:number) =>
+    ({...state, userDefined: { ...state.userDefined, table: { width: widthInPixels } } }));
+
+  readonly setInitializationState = this.updater( (state, initializationState:  InitializationState) => {
+    return {...state, initializationState};
+  });
+
+  readonly toggleCollapseHeader = this.updater((state)=>{
+    const tableSettings = {...state.persistedTableSettings};
+    tableSettings.collapseHeader = !tableSettings.collapseHeader;
+    return ({...state, persistedTableSettings: new PersistedTableSettings(tableSettings)});
+  })
+  readonly toggleCollapseFooter = this.updater((state)=>{
+    const tableSettings = {...state.persistedTableSettings};
+    tableSettings.collapseFooter = !tableSettings.collapseFooter;
+    return ({...state,persistedTableSettings: new PersistedTableSettings(tableSettings)});
+  });
+
+  readonly addGroupByKey = this.updater((state, metaDataKey: string) => ({
+    ...state,
+    groupBy: [...state.groupBy, { key: metaDataKey, expandedHeaders: [] }]
+  }));
+  readonly removeGroupByKey = this.updater((state, groupByKey: string) => ({
+    ...state,
+    groupBy: state.groupBy.filter(key => groupByKey !== key.key)
+  }));
+  readonly updateExpandedGroups = this.updater((state, data: {key: string, groupKey: string, isExpanded: boolean}) => {
+    const gbk = replaceInArrayWithClone(state.groupBy, k => k.key === data.key, gk => {
+      gk.expandedHeaders = data.isExpanded ? [...gk.expandedHeaders, data.groupKey] : gk.expandedHeaders.filter(g => g !== data.groupKey);
+    });
+    return ({
+      ...state,
+      groupBy: gbk
+    })}
+  );
+  readonly expandAllOfGroup = this.updater((state, data: { groupHeadersByKey: Dictionary<{ groupName: string }[]> }) => {
+    const newGroupedData = state.groupBy.map(gb => ({
+      key: gb.key,
+      expandedHeaders: data.groupHeadersByKey[gb.key]?.map(g => g.groupName) ?? gb.expandedHeaders
+    } as GroupedData));
+    return ({ ...state, groupBy: newGroupedData });
+  });
+  readonly collapseAll = this.updater((state) => ({
+    ...state,
+    groupBy: state.groupBy.map(gb => ({ key: gb.key, expandedHeaders: [] }))
+  }));
+  readonly collapseAllOfKey = this.updater((state, data: { keys: string[] }) => ({
+    ...state,
+    groupBy: state.groupBy.map(gb => ({
+      key: gb.key,
+      expandedHeaders: data.keys.includes(gb.key) ? [] : gb.expandedHeaders
+    }))
+  }));
+
+  readonly setLinkMaps = this.updater((state, maps: any)=>{
+    return ({ ...state, linkMaps: maps });
+  });
+
+  on = <V>(srcObservable: Observable<V>, func: (obj: V) => void) => {
+    this.effect(() => srcObservable.pipe(
+      tap(func)
+    ));
+    return this;
+  };
+}
+
+
+export type ViewType = 'virtual paginator' | 'paginator' | 'virtual all' | 'all';