@one-paragon/angular-utilities 2.8.3 → 2.8.4

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

@@ -0,0 +1,540 @@
+import { FieldType, MetaData } from '../interfaces/meta-data';
+import { Observable } from 'rxjs';
+import { defaultTableState, 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, tap } from 'rxjs/operators'
+import { moveItemInArray } from '@angular/cdk/drag-drop';
+import { NonFunctionProperties, NotPersistedTableSettings, parseTbSizeToPixels, PersistedTableSettings, TableBuilderSettings } 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';
+import { TableBuilderSort } from '../components/table-container/table-container.helpers/sort-state.helpers';
+import { merge } from 'lodash';
+import { GroupedData } from '../types/group-types';
+
+@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.notPersistedTableSettings.paginatorSettings!.pageSize = config.defaultTableSettings?.pageSize;
+    }
+    const pageSize = settingsFromConfig.notPersistedTableSettings.paginatorSettings!.pageSize || defaultTableState.pageSize;
+    const showAll = settingsFromConfig.notPersistedTableSettings.paginatorSettings!.defaultAll || defaultTableState.showAll;
+    super( { ...defaultTableState, ...settingsFromConfig, pageSize, showAll });
+  }
+
+  $initializationState = this.selectSignal(state => state.initializationState);
+  $savableState = computed(() => {
+    const state = this.state();
+    return mapSaveableState(state);
+  });
+
+  //#region meta order and hidden
+  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 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 } })
+  })
+  $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));
+  //#endregion meta order and hidden
+
+  //#region widths
+  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 setTableWidth = this.updater((state, widthInPixels:number) =>
+    ({ ...state, userDefined: { ...state.userDefined, table: { width: widthInPixels } } }));
+  $getUserDefinedWidths = this.selectSignal(state => state.userDefined.widths);
+  $tableSettingsMinWidth = this.selectSignal(state => parseTbSizeToPixels(state.notPersistedTableSettings.minColumnWidth));
+  $getUserDefinedWidth = (key:string) => this.selectSignal(this.$getUserDefinedWidths, widths => widths[key]);
+  $getUserDefinedTableWidth = this.selectSignal(state => state.userDefined.table.width);
+  getUserDefinedTableWidth$ = this.select(state => state.userDefined.table.width);
+  //#endregion widths
+
+  //#region filter
+  readonly addFilter = this.updater( (state, filter: FilterInfo | CustomFilter ) => {
+    return this.addFiltersToState(state, [filter]);
+  });
+
+  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();
+        }
+        const metaData = state.metaData[filter.key];
+        filter.filterBy = metaData.filterLogic?.filterBy === 'use map' ? metaData.map : metaData.filterLogic?.filterBy
+        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 }
+    };
+  }
+  $filters = this.selectSignal(state => state.filters);
+  $filtersArray = computed(() => Object.values(this.state().filters) || []);
+  filters$ = this.select(state => state.filters );
+  $getFilter = (filterId: string) : Signal<FilterInfo | CustomFilter | undefined> => {
+    return this.selectSignal(this.$filters, filters => filters[filterId] );
+  }
+  //#endregion filter
+
+  //#region sort
+  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,
+    };
+  });
+  $preSort = computed(() => createPreSort(this.$metaData()));
+  _$selectSorted = this.selectSignal(state => state.sorted, {
+    equal: sortsAreSame
+  });
+  $selectSorted = computed<TableBuilderSort[]>(() => {
+    const metaDict = this.$metaData();
+    return this._$selectSorted().map(s => {
+      const meta = metaDict[s.active];
+      const sortLogic = meta.sortLogic;
+      const sortBy = sortLogic?.sortBy === 'use map' ? meta.map : sortLogic?.sortBy;
+      return ({ ...s, ...sortLogic, sortBy })
+    })
+  })
+  selectSorted$ = this.select(state => state.sorted).pipe(distinctUntilChanged(sortsAreSame));
+  $getSorts = this.selectSignal(() => this.$initializationState() !== InitializationState.Ready ? [] : this.$selectSorted());
+  sort$ = toObservable(this.$getSorts);
+  //#endregion sort
+
+  //#region groupBy
+  readonly addGroupByKey = this.updater((state, metaDataKey: string) => ({
+    ...state,
+    groupBy: [...state.groupBy, { key: metaDataKey, expandedHeaders: [], sort: '' }]
+  }));
+
+  readonly removeGroupByKey = this.updater((state, groupByKey: string) => {
+    const groupBy = state.groupBy.filter(key => groupByKey !== key.key);
+    return ({
+      ...state,
+      groupBy,
+      userDefined: { ...state.userDefined, noGroups: groupBy.length === 0 }
+    })});
+
+  readonly updateExpandedGroups = this.updater((state, data: { key: string, groupUniqueName: string, isExpanded: boolean }) => {
+    const gbk = replaceInArrayWithClone(state.groupBy, k => k.key === data.key, gk => {
+      if(data.isExpanded) {
+        if(gk.expandedHeaders === 'all' || gk.expandedHeaders.includes(data.groupUniqueName)) return;
+        gk.expandedHeaders = [...gk.expandedHeaders, data.groupUniqueName];
+      } else {
+        //we need to make sure it will not = all at this point. See generic table setExpanded
+        if(gk.expandedHeaders !== 'all') {
+          gk.expandedHeaders = gk.expandedHeaders.filter(g => g !== data.groupUniqueName);
+        }
+      }
+    });
+    return ({
+      ...state,
+      groupBy: gbk
+    })}
+  );
+  readonly expandOfGroup = this.updater((state, data: { groupKey: string, uniqueNameOfHeadersToExpand: string[] }[]) => {
+    const newGroupedData = state.groupBy.map(gb => ({
+      key: gb.key,
+      expandedHeaders: data.find(g => g.groupKey === gb.key)?.uniqueNameOfHeadersToExpand ?? gb.expandedHeaders,
+      sort: gb.sort,
+    } as GroupedData));
+    return ({ ...state, groupBy: newGroupedData });
+  });
+  readonly collapseAll = this.updater((state) => ({
+    ...state,
+    groupBy: state.groupBy.map(gb => ({ key: gb.key, expandedHeaders: [], sort: gb.sort }))
+  }));
+  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,
+      sort: gb.sort,
+    }))
+  }));
+
+  updateGroupBySort = this.updater((state, data: { key: string, sort: SortDirection }) => {
+    const newGroupedData = replaceInArrayWithClone(state.groupBy, gb => gb.key === data.key, gb => {
+      gb.sort = data.sort;
+    });
+    return ({ ...state, groupBy: newGroupedData });
+  });
+
+  getGroupBySortDirection = (key: string) => computed(() => {
+    const groupBy = this.state().groupBy.find(gb => gb.key === key);
+    return groupBy ? groupBy.sort : '';
+  });
+
+  cycleGroupBySortDirection = this.updater((state, key: string) => {
+    const currentGroupBy = state.groupBy.find(gb => gb.key === key);
+    console.log(currentGroupBy);
+    if(!currentGroupBy) return state;
+
+    let nextSort: SortDirection;
+    switch (currentGroupBy.sort) {
+      case '':
+      case undefined:
+        nextSort = 'desc';
+        break;
+      case 'desc':
+        nextSort = 'asc';
+        break;
+      case 'asc':
+        nextSort = '';
+        break;
+    }
+
+    const newGroupedData = replaceInArrayWithClone(state.groupBy, gb => gb.key === key, gb => {
+      gb.sort = nextSort;
+    });
+    return ({ ...state, groupBy: newGroupedData });
+  });
+  #$groupBy = this.selectSignal(state => state.groupBy);
+  $groupByData = this.selectSignal(
+    this.#$groupBy,
+    this.$metaDataArray,
+    (gb, mds) => gb.filter(bg => mds.some(md => md.key === bg.key)),
+
+    {
+      equal: (prev: GroupedData[], curr: GroupedData[]) =>
+        prev.length === curr.length && curr.every((k, i) => prev[i].key === k.key)
+    }
+  );
+  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)));
+  $userDefinedNoGroups = this.selectSignal(state => state.userDefined.noGroups);
+  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));
+  }));
+  $expandGroups = this.selectSignal(state => state.groupBy, { equal: (a, b) => {
+    const aa = a.flatMap(g => g.expandedHeaders === 'all' ? ['all'] : g.expandedHeaders);
+    const bb = b.flatMap(g => g.expandedHeaders === 'all' ? ['all'] : g.expandedHeaders);
+    return aa.length === bb.length && aa.every((k) => bb.includes(k));
+  } });
+  $getIsExpanded = (columnKey: string, groupUniqueName: string) => {
+    return this.selectSignal(state => !!state.groupBy.filter(g => g.key === columnKey && (g.expandedHeaders.includes(groupUniqueName) || g.expandedHeaders === 'all')).length);
+  };
+  $expandedPropForKeyIsAll = (columnKey: string) =>
+    this.selectSignal(state => state.groupBy.find(g => g.key === columnKey)?.expandedHeaders === 'all');
+  $sortedGroupsUpdates = this.selectSignal(state => state.groupBy,
+    { equal: (a, b) =>
+      sortsAreSame(a.map(g => ({ active: g.key, direction: g.sort })), b.map(g => ({ active: g.key, direction: g.sort }))) }
+  );
+  //#endregion groupBy
+
+  //#region page paginator and show all
+  readonly setCurrentPage = this.updater((state, currentPage: number) => ({ ...state, currentPage }))
+  readonly setPageSize = this.updater((state, pageSize: number) =>
+    ({ ...state, pageSize }));
+  readonly setUserDefinedPageSize = this.updater((state, pageSize: number) =>
+    ({ ...state, userDefined: { ...state.userDefined, pageSize } }));
+  readonly setUserDefinedShowAll = this.updater((state, showAll: boolean) =>
+    ({ ...state, showAll, userDefined: { ...state.userDefined, showAll } }));
+  $isVirtual = this.selectSignal(state =>
+    state.notPersistedTableSettings.useVirtualScroll
+    || state.showAll
+    || state.userDefined?.showAll
+  );
+  $showAll = this.selectSignal(s => s.userDefined?.showAll ?? s.showAll);
+  $viewType = this.selectSignal<ViewType>(state => {
+    const usePaginator = state.notPersistedTableSettings.usePaginator;
+    const showAll = state.showAll || state.userDefined?.showAll;
+    const useVirtualScroll = state.notPersistedTableSettings.useVirtualScroll;
+    if(showAll || (useVirtualScroll && !usePaginator)){
+      return 'virtual all';
+    } else if(useVirtualScroll && usePaginator) {
+      return 'virtual paginator';
+    } else if(usePaginator) {
+      return 'paginator';
+    } else {
+      return 'all';
+    }
+  });
+  $userDefinedPageSize = this.selectSignal(state => (state.userDefined.pageSize));
+  $currentPage = this.selectSignal(state => state.currentPage);
+  $pageSize = this.selectSignal(s => s.userDefined?.pageSize || s.pageSize!);
+  //#endregion page paginator and show all
+
+  //#region table settings and props
+
+  //#region footer
+  addFooter = this.updater((state, key: string) => {
+    const meta = this.$metaData()[key];
+    if(!meta) return state;
+    if(meta.fieldType === FieldType.Currency || meta.fieldType === FieldType.Number){
+      meta.additional = { ...meta.additional ?? {}, footer: { type: 'sum' } }
+    }
+    return { ...state, metaData: { ...state.metaData, [key]: { ...meta } } }
+  })
+  //#end region footer
+
+  $tableSettings = this.selectSignal(state => {
+    const ts : NonFunctionProperties<PersistedTableSettings & NotPersistedTableSettings> =
+      { ...state.persistedTableSettings, ...state.notPersistedTableSettings };
+    return ts;
+  });
+  $notPersistedTableSettings = this.selectSignal(state => state.notPersistedTableSettings)
+  tableSettings$ = toObservable(this.$tableSettings);
+  $props = this.selectSignal(s => s.props);
+  //#endregion table settings and props
+  readonly setUserDefinedRowHeight = this.updater((state, rowHeight: number) => {
+    return ({ ...state, userDefined: { ...state.userDefined, rowHeight } });
+  });
+  readonly setUserDefinedHeaderHeight = this.updater((state, headerHeight: number) => {
+    return ({ ...state, userDefined: { ...state.userDefined, headerHeight } });
+  });
+  $userDefinedRowHeight = this.selectSignal(state => (state.userDefined.rowHeight));
+  $userDefinedHeaderHeight = this.selectSignal(state => (state.userDefined.headerHeight));
+  $footerCollapsed = this.selectSignal(state => state.persistedTableSettings.collapseFooter);
+  $headerCollapsed = this.selectSignal(state => state.persistedTableSettings.collapseHeader);
+
+  $getLinkInfo = (md:MetaData) => this.selectSignal(state => state.linkMaps[md.key]);
+
+  readonly resetState = this.updater((state) => {
+    const sorted = this.$preSort();
+    return ({ ...state, hiddenKeys: [], sorted, filters: {}, groupBy: [], userDefined: { widths: {}, order: {}, table: {} } });
+  });
+
+  readonly resetPart = this.updater((state, part: typeof resetable[number]) => {
+    const newState = { ...state };
+    switch (part){
+      case 'Sorting':
+        newState.sorted = this.$preSort();
+        return newState;
+      case 'Filters':
+        newState.filters = {};
+        return newState;
+      case 'Group By':
+        newState.groupBy = [];
+        newState.userDefined.noGroups = false;
+        return newState;
+      case 'Hidden Columns':
+        newState.hiddenKeys = [];
+        return newState;
+      case 'Column Widths':
+        newState.userDefined.widths = {};
+        newState.userDefined.table = {};
+        return newState;
+      case 'Column Order':
+        newState.userDefined.order = {};
+        return newState;
+      case 'Page Size':
+        delete newState.userDefined.pageSize;
+        return newState;
+      case 'Show All':
+        delete newState.userDefined.showAll;
+        return newState;
+      case 'Row Height':
+        delete newState.userDefined.rowHeight;
+        return newState;
+      case 'Header Height':
+        delete newState.userDefined.headerHeight;
+        return newState;
+    }
+  })
+
+  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.TableSettingsLoaded : 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;
+    const groupBy = incomingTableState.groupBy?.length ? incomingTableState.groupBy : incomingTableState.userDefined?.noGroups ? [] : state.groupBy;
+    return { ...state, ...incomingTableState, metaData, sorted, groupBy };
+  };
+
+  readonly setTableSettings = this.updater((state, settings: TableBuilderSettings) => {
+    const s: TableState = {
+      ...state,
+      persistedTableSettings: state.persistedTableSettings.merge(settings),
+      notPersistedTableSettings: state.notPersistedTableSettings.merge(settings),
+      initializationState: InitializationState.TableSettingsLoaded
+    };
+    s.pageSize = settings.tableSettings?.paginatorSettings?.pageSize ?? s.pageSize;
+    s.showAll = settings.tableSettings?.paginatorSettings?.defaultAll ?? s.showAll;
+    s.groupBy = (settings.tableSettings?.groupBySettings || []).map(g => ({
+      expandedHeaders: g.expanded ? 'all' : [],
+      key: g.key,
+      sort: '' as SortDirection
+    } as GroupedData));
+    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 setProps = this.updater((state, props: TableProps) => {
+    return ({ ...state, props });
+  });
+
+
+  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, options?: { collapseFooter: boolean } | void) => {
+    const tableSettings = { ...state.persistedTableSettings };
+    tableSettings.collapseFooter = options?.collapseFooter ?? !tableSettings.collapseFooter;
+    return ({ ...state, persistedTableSettings: new PersistedTableSettings(tableSettings) });
+  });
+
+  readonly setLinkMaps = this.updater((state, maps: any) => {
+    return ({ ...state, linkMaps: maps });
+  });
+
+  updateRowProps = this.updater((state, updates: Pick<NotPersistedTableSettings, 'rowClasses' | 'rowClick' | 'rowStyles'>) => {
+    const notPersistedTableSettings = merge(new NotPersistedTableSettings(), (state.notPersistedTableSettings));
+    if(updates.rowClasses)
+      notPersistedTableSettings.rowClasses = updates.rowClasses;
+    if(updates.rowClick)
+      notPersistedTableSettings.rowClick = updates.rowClick;
+    if(updates.rowStyles)
+      notPersistedTableSettings.rowStyles = updates.rowStyles;
+    return ({ ...state, notPersistedTableSettings });
+  });
+
+  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';
+export const resetable = [
+  'Sorting',
+  'Filters',
+  'Group By',
+  'Hidden Columns',
+  'Column Widths',
+  'Column Order',
+  'Row Height',
+  'Header Height',
+  'Page Size',
+  'Show All',
+] as const

package/src/table-builder/components/array-column.component.ts

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, input, computed } from '@angular/core';
+
+@Component({
+  selector: 'tb-comma-array-column',
+  template: `
+  @for(val of displayArray(); track $index){
+          {{val + (!$last ? ',' : '')}}
+        }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ArrayCommaColumnComponent {
+
+  value = input.required<(string | number)[]>();
+  additional = input(3);
+  displayArray = computed(() => (this.value() || []).slice(0, this.additional()))
+}
+
+
+@Component({
+  selector: 'tb-new-line-array-column',
+  template: `
+  @for(val of displayArray(); track $index){
+          {{val}}
+          @if(!$last){ <br/> }
+        }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ArrayNewLineColumnComponent {
+  value = input.required<(string | number)[]>();
+  additional = input(3);
+  displayArray = computed(() => (this.value() || []).slice(0, this.additional()));
+}

package/src/table-builder/components/column-builder/column-builder.component.html

@@ -0,0 +1,109 @@
+@let metaData = $metaData();
+@let customCell = $customCell();
+@let customHeader = $customHeader();
+@let styles = $styles()!;
+
+@if(metaData)
+{
+  <ng-container [matColumnDef]="metaData.key">
+
+    <!-- header -->
+    <ng-template #myHeader matHeaderCellDef>
+      <mat-header-cell class="column-head" cdkDrag resizeColumn [style]='styles?.header' [key]="metaData.key"
+        [class]='metaData.additional?.columnPartClasses?.header'>
+        <div class="header-container" cdkDragHandle>
+          @let headerTemplate = customHeader?.template();
+          @if(!headerTemplate && !customCell?.columnDef?.headerCell)
+          {
+              @if((metaData.fieldType !== FieldType.NotMapped || !!metaData.sortLogic?.sortBy) && !metaData.noSort)
+              {
+                <div mat-sort-header style="width: 100%">
+                  {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}
+                </div>
+              }
+              @else if(metaData.fieldType === FieldType.NotMapped || metaData.noSort)
+              {
+                <div style="width: 100%">
+                  {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}
+                </div>
+              }
+              @if($showFilters())
+              {
+                <tb-header-menu #menu [metaData]='metaData' />
+              }
+          }
+          @else if(!customCell?.columnDef?.headerCell)
+          {
+            @if((metaData.fieldType !== FieldType.NotMapped || !!metaData.sortLogic?.sortBy) && !metaData.noSort)
+            {
+              <div mat-sort-header style="width: 100%">
+                <ng-container
+                  *ngTemplateOutlet="headerTemplate; context: { $implicit: metaData, metaData: metaData, styles:  styles?.header } " />
+              </div>
+            }
+            @else if(metaData.fieldType === FieldType.NotMapped || metaData.noSort)
+            {
+              <ng-container
+                *ngTemplateOutlet="headerTemplate; context: { $implicit: metaData, metaData: metaData, styles:  styles?.header } " />
+            }
+            @if($showFilters())
+            {
+              <tb-header-menu #menu [metaData]='metaData' />
+            }
+          }
+          @else
+          {
+            <ng-container
+              *ngTemplateOutlet="customCell!.columnDef!.headerCell.template; context: {metaData: metaData, styles:  styles?.header} " />
+          }
+        </div>
+      </mat-header-cell>
+    </ng-template>
+  
+    <!-- body -->
+    <ng-container *matCellDef="let element;">
+      <ng-container *ngTemplateOutlet="$outerTemplate()!; context: { metaData: metaData, element: element , styles: styles?.body, $implicit: element }"/>
+    </ng-container>
+    <ng-template #body let-element='element' >
+      <mat-cell  [matTooltip]="metaData.toolTip ? (getTooltip | func : element) : ''" 
+        [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body'
+        (click)='cellClicked(element, metaData.key, $event)' >
+        <ng-container *ngTemplateOutlet="$innerTemplate()!;
+          context: {
+            value: ($transform()! | func : element),
+            element: element,
+            additional: $additional(),
+            innerStyles: styles.innerBody,
+            $implicit: element
+            }; Injector: injector" />
+      </mat-cell>
+    </ng-template>
+  
+    <!-- footer -->
+    <ng-template matFooterCellDef>
+      @if(customCell?.columnDef?.footerCell)
+      {
+        <ng-container
+        *ngTemplateOutlet="customCell!.columnDef!.footerCell.template;
+        context: {metaData: metaData, data: $data, styles : styles.footer }"/>
+      }
+      @else
+      {
+        @let data = $data();
+        <mat-footer-cell  [style]='styles.footer' [class]='metaData.additional?.columnPartClasses?.footer'>
+          @if(!!data?.length && metaData.additional?.footer)
+          {
+            <span class="bold">
+              @switch (metaData.fieldType)
+              {
+                @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }
+                @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }
+              }
+            </span>
+          }
+  
+        </mat-footer-cell>
+      }
+    </ng-template>
+  </ng-container>
+}