@one-paragon/angular-utilities 2.2.4 → 2.2.6

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

@@ -0,0 +1,403 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Predicate,
+  inject,
+  TemplateRef,
+  Injector,
+  contentChildren,
+  computed,
+  effect,
+  untracked,
+  input,
+  viewChild,
+  output,
+  ElementRef,
+  linkedSignal,
+  DestroyRef,
+} from '@angular/core';
+import { Timestamp } from 'rxjs';
+import { CustomCellMeta } from '../../interfaces/report-def';
+import { TableBuilder } from '../../classes/table-builder';
+import { MatRowDef } from '@angular/material/table';
+import { CustomCellDirective, MultiSortDirective, TableCustomFilterDirective, TableFilterDirective } from '../../directives';
+import { TableStore } from '../../classes/table-store';
+import { ExportToCsvService } from '../../services/export-to-csv.service';
+import { GroupedData, InitializationState, NoneGroupHeader } from '../../classes/TableState';
+import { WrapperFilterStore } from '../table-container-filter/table-wrapper-filter-store';
+import { createFilterFunc, CustomFilter, FilterInfo, isCustomFilter, needsFilterCreation } from '../../classes/filter-info';
+import { TableWrapperDirective } from '../../directives/table-wrapper.directive';
+import { createLinkCreatorDict } from '../../services/link-creator.service';
+import { TableBuilderStateStore } from '../../ngrx/tableBuilderStateStore';
+import { FilterInfoDict, FilterInfoState, FilterPredicateState, patchDirectiveFromState, updateFilterInfoState, updateFilterPredicateState, updateFilterState } from './table-container.helpers/filter-state.helpers';
+import { initialSortState, SortState, updateSortState } from './table-container.helpers/sort-state.helpers';
+import { getAllGroupHeaderNames, GroupByState, updateGroupByState } from './table-container.helpers/groupBy.helpers';
+import { sortAndFilterData } from './table-container.helpers/data-state.helpers';
+import { TableProps } from './tableProps';
+import { PaginatorComponent } from '../generic-table/paginator.component';
+import { TableBuilderDataSource } from '../../classes/TableBuilderDataSource';
+import { GenericTableComponent } from '../generic-table/generic-table.component';
+import { outputFromObservable, toObservable } from '@angular/core/rxjs-interop';
+import { DataStore } from '../../classes/data-store';
+import { PersistedTableSettings } from '../../classes/table-builder-general-settings';
+import { mergeCustomCellMetaData } from './table-container.helpers/meta-data.helpers';
+import { SelectionChange } from '@angular/cdk/collections';
+import { MatMenu, MatMenuModule } from '@angular/material/menu';
+import { NgTemplateOutlet } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { GenColDisplayerComponent } from '../gen-col-displayer/gen-col-displayer.component';
+import { GroupByListComponent } from '../group-by-list/group-by-list.component';
+import { ProfilesMenuComponent } from '../profiles-menu/profiles-menu.component';
+import { SortMenuComponent } from '../sort-menu/sort-menu.component';
+import { FilterChipsComponent } from '../table-container-filter/filter-list/filter-list.component';
+import { GenFilterDisplayerComponent } from '../table-container-filter/gen-filter-displayer/gen-filter-displayer.component';
+import { TableHeaderMenuComponent } from '../table-header-menu/table-header-menu.component';
+import { VirtualScrollContainer } from './virtual-scroll-container';
+import { Sort } from '@angular/material/sort';
+
+@Component({
+  selector: 'tb-table-container',
+  templateUrl: './table-container.component.html',
+  styleUrls: ['./table-container.scss', '../../styles/collapser.styles.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore],
+  imports: [
+    NgTemplateOutlet,
+    PaginatorComponent,
+
+    MultiSortDirective, GroupByListComponent, FilterChipsComponent, GenFilterDisplayerComponent, GenColDisplayerComponent,
+    SortMenuComponent, GenericTableComponent, ProfilesMenuComponent, TableHeaderMenuComponent,
+
+    MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule, VirtualScrollContainer
+  ]
+}) export class TableContainerComponent<T = any> {
+  public state = inject(TableStore);
+  private dataStore = inject(DataStore);
+  public wrapper = inject(TableWrapperDirective, { optional: true });
+  public stateService = inject(TableBuilderStateStore);
+  public injector = inject(Injector);
+  public elementRef = inject(ElementRef);
+  protected dataSource = new TableBuilderDataSource<T>(
+    this.state,
+    this.dataStore
+  );
+
+  $filterDirectives = contentChildren(TableFilterDirective, { descendants: true });
+  $customFilterDirectives = contentChildren(TableCustomFilterDirective, { descendants: true });
+  $paginatorComponent = viewChild(PaginatorComponent);
+  $genericTable = viewChild(GenericTableComponent);
+  _$customRows = contentChildren(MatRowDef<any>);
+  $customRows = computed(() => [...this._$customRows()]);
+  $customCells = contentChildren(CustomCellDirective);
+  $menu = viewChild.required(MatMenu);
+  menuInjector = Injector.create({
+    providers: [{ provide: MatMenu, useFactory: () => this.$menu() }],
+    parent: this.injector
+  })
+
+  $tableBuilder = input.required<TableBuilder<T>>({ alias: 'tableBuilder' });
+  $tableIdInput = input<string | undefined>(undefined, { alias: 'tableId' });
+  $trackByInput = input<string | undefined>(undefined, { alias: 'trackBy' });
+  $inputFilters = input<(Predicate<T> | CustomFilter<T> | FilterInfo<any, T>)[]>([], { alias: 'inputFilters' });
+  $filterInfoInputs = computed(() =>
+    this.$inputFilters().filter(i => !isFunction(i)) as (FilterInfo | CustomFilter)[]);
+
+  $indexColumnInput = input<boolean>(false, { alias: 'indexColumn' });
+  $selectionColumnInput = input<boolean>(false, { alias: 'selectionColumn' });
+  $stickyHeaderInput = input<boolean>(true, { alias: 'stickyHeader' });
+  $stickyFooterInput = input<boolean>(false, { alias: 'stickyFooter' });
+  $groupHeaderTemplate = input<TemplateRef<any> | undefined>(undefined, { alias: 'groupHeaderTemplate' });
+  $groupHeaderHeight = input<number | undefined>(undefined, { alias: 'groupHeaderHeight' });
+  $pageSize = input<number | undefined>(undefined, { alias: 'pageSize' });
+
+
+  selection$ = output<SelectionChange<T>>({ alias: 'selection' });
+  onStateReset$ = output<null>({ alias: 'onStateReset' });
+  onSaveState$ = output<null>({ alias: 'onSaveState' });
+  state$ = outputFromObservable(toObservable(this.state.$savableState), { alias: 'state' });
+  $data = computed(() => this.$sortedAndFilteredData()?.value || []);
+  data$ = outputFromObservable(toObservable(this.$data), { alias: 'data' });
+
+  private $displayData = computed(() => this.$tableBuilder() && this.$filteredSortedAndGrouped()?.displayData);
+  public clearSelections(){
+    this.$genericTable()?.$selection().clear(true);
+  }
+  public firstPage(): void {
+    this.$paginatorComponent()?.$paginator()?.firstPage();
+  }
+  public lastPage(): void {
+    this.$paginatorComponent()?.$paginator()?.lastPage();
+  }
+  public expandAllGroups = () => {
+    const groupHeaders = getAllGroupHeaderNames(this.$displayData()!);
+    this.state.expandAllOfGroup({ groupHeadersByKey: groupHeaders });
+  }
+  public collapseAllGroups = () => this.state.collapseAll();
+
+
+  protected $myColumns = computed(() => {
+    return this.state.$metaDataArray().map( metaData => ({
+      metaData,
+      customCell: this.$customCells().filter(cc => cc.$inited()).find(cc => cc.$customCell() === metaData.key)
+    }))
+  });
+  protected $useVirtual = this.state.$isVirtual;
+  protected $collapsedFooter = this.state.$footerCollapsed;
+  protected $collapsedHeader = this.state.$headerCollapsed;
+  protected $displayDataLength = computed(() => this.$displayData()?.length || 0);
+
+
+  $tableBuilderSettings = computed(() => this.$tableBuilder().$settings());
+  $trackBy = computed(() => this.$trackByInput() || this.$tableBuilderSettings()?.tableSettings?.trackBy);
+  $tableId = computed(() => this.$tableIdInput() || this.$tableBuilderSettings()?.tableSettings?.tableId);
+  $includeSelectionColumn = computed(() => this.$selectionColumnInput() || !!this.$tableBuilderSettings()?.tableSettings?.includeSelectionColumn);
+  $includeIndexColumn = computed(() => this.$indexColumnInput() || !!this.$tableBuilderSettings()?.tableSettings?.includeIndexColumn);
+  $stickyHeader = computed(() => {
+    const settings = this.$tableBuilderSettings()?.columnHeaderSettings?.stickyHeaderRow;
+    if(settings != null){
+      return settings;
+    }
+    return this.$stickyHeaderInput();
+  });
+  $stickyFooter = computed(() => this.$stickyFooterInput() || !!this.$tableBuilderSettings()?.columnFooterSettings?.stickyFooterRow)
+
+  $props = computed((): TableProps => {
+    const indexColumn = this.$includeIndexColumn();
+    const selectionColumn = this.$includeSelectionColumn();
+    const stickHeader = this.$stickyHeader();
+    const stickyFooter = this.$stickyFooter();
+    const groupHeaderTemplate = this.$groupHeaderTemplate();
+    const groupHeaderHeight = this.$groupHeaderHeight();
+    return ({ indexColumn, selectionColumn, isSticky: stickHeader, stickyFooter, groupHeaderTemplate, groupHeaderHeight })
+  });
+
+  #initTableBuilder = effect(() => {
+    const tb = this.$tableBuilder();
+    untracked(() => {
+      if(tb){
+        tb?.prep(this.injector);
+        tb.container.set(this);
+      }
+    })
+  });
+  #initializeTableSettingsFromTableBuilderAndPersistedStateEffect = effect(() => {
+    const metaLoaded = this.$isInitializationState(InitializationState.MetaDataLoaded)();
+    if(!metaLoaded) return;
+    const persistedState = this.$persistedState();
+    const tbSettings = this.$tableBuilderSettings()!;
+    untracked(() => {
+      this.state.setTableSettings(tbSettings);
+      if(persistedState){
+        persistedState.persistedTableSettings = new PersistedTableSettings(persistedState.persistedTableSettings);
+        this.state.updateStateFromPersistedState(persistedState);
+      }
+      this.state.setInitializationState(InitializationState.Ready);
+    });
+  });
+  #setPageSizeFromInputEffect = effect(() => {
+    const pageSize = this.$pageSize();
+    const userDefinedPageSize = this.state.$userDefinedPageSize();
+    if(pageSize && !userDefinedPageSize) {
+      untracked(() => this.state.setPageSize(pageSize));
+    }
+  });
+  #patchedFilters: string[] = [];
+  #patchSavableFilterDirectivesFromPersistedStateEffect = effect(() => {
+    const loaded = this.$isInitializationState(InitializationState.TableSettingsLoaded)();
+    const filterDirectives = this.$allFilterDirectives();
+    if(!loaded || !filterDirectives.length) return;
+    const stateFilters = this.state.$filters();
+
+    untracked(() => {
+      filterDirectives.filter(f => f.savable && !this.#patchedFilters.includes(f.filterId)).forEach( f => {
+        this.#patchedFilters.push(f.filterId);
+        const filter = stateFilters[f.filterId];
+
+        patchDirectiveFromState(f, filter);
+        this.state.addFilter(f.filter$ as any);
+      });
+    })
+  });
+  #patchSavableFilterInputsFromPersistedStateEffect = effect(() => {
+    const loaded = this.$isInitializationState(InitializationState.TableSettingsLoaded)();
+    const inputFilters = this.$filterInfoInputs();
+    if(!loaded || !inputFilters.length) return;
+
+    untracked(() => {
+      const stateFilters = this.state.$filters();
+      inputFilters.filter(f => f.filterId).forEach( f => {
+        const patched = this.#patchedFilters.includes(f.filterId);
+        const stateFilter = stateFilters[f.filterId];
+
+        if(patched || !stateFilter) {
+          this.state.addFilter(f);
+        } else if(isCustomFilter(f)){
+          (stateFilter as CustomFilter).predicate = f.predicate;
+          this.state.addFilter(stateFilter);
+        }
+        this.#patchedFilters.push(f.filterId);
+      });
+    })
+  });
+  #addPropsToStoreFromInputsEffect = effect(() => {
+    const props = this.$props();
+    untracked(() => this.state.setProps(props));
+  });
+  #addMetaDataToStoreEffect = effect(() => {
+    const allMetaDatas = this.$allMetaDatas();
+    if(!allMetaDatas) return;
+    untracked(() => {
+      this.state.setMetaData(allMetaDatas);
+      this.state.setLinkMaps(createLinkCreatorDict(allMetaDatas));
+    });
+  });
+  #setFilteredDataLengthEffect = effect(() => {
+    const tableBuilder = this.$tableBuilder();
+    const data = this.$sortedAndFilteredData();
+    if(!tableBuilder || !data) return;
+    untracked(() => {
+      this.dataStore.patchState({ sortedFilteredDataLength: data.value.length });
+    })
+  });
+
+  #setDataSourceDataEffect = effect(() => {
+    const tableBuilder = this.$tableBuilder();
+    const flat = this.$filteredSortedAndGrouped();
+    if(!tableBuilder || !flat) return;
+    untracked(() => {
+      const data = flat.displayData;
+      this.dataSource.setData(data);
+      this.dataStore.patchState({ sortedFilteredGroupedDataLength: data.length });
+    })
+  });
+
+  #destroyRef = inject(DestroyRef).onDestroy(() => {
+    const tableId = this.$tableId();
+    if(tableId) {
+      this.stateService.saveTableStateToLocal({ tableId, tableState: this.state.$savableState() });
+    }
+  });
+
+  private $persistedState = computed(() => {
+    const tableId = this.$tableId();
+    if(tableId) {
+      return this.stateService.$selectLocalTableStateForView(tableId)();
+    }
+    return undefined
+  });
+  private $allFilterDirectives = computed( () => {
+    if(this.wrapper) {
+      return [...this.$filterDirectives(), ...this.$customFilterDirectives(), ...this.wrapper.$registrations()];
+    }
+    return [...this.$filterDirectives(), ...this.$customFilterDirectives()];
+  });
+  private $tableBuilderMetaData = computed(() => this.$tableBuilder()?.$metaData());
+  private $allMetaDatas = computed(() => {
+    const tableBuilderMetaData = this.$tableBuilderMetaData();
+    if(!tableBuilderMetaData) return;
+    const customCellMetaDatas = this.$customCells().filter(cc => cc.$inited()).map(cc => cc.$metaData()).filter(d => !!d) as CustomCellMeta[];
+    const mappedCustomCellMetaDatas = customCellMetaDatas.map( md => mergeCustomCellMetaData(md!, tableBuilderMetaData.find( item => item.key === md.key ) ));
+
+    return [...tableBuilderMetaData, ...mappedCustomCellMetaDatas];
+  });
+
+  private $preds = computed(() => {
+    const predicateInputFilters = this.$inputFilters().filter(isFunction);
+    const notSavableFilterDirectives = this.$allFilterDirectives()
+      .filter(d => !d.savable)
+      .map(d => d.$filter())
+      .filter(d => !!d && needsFilterCreation(d))
+      .map(d => createFilterFunc(d!));
+    return [...predicateInputFilters, ...notSavableFilterDirectives]
+  })
+  private $predicateFiltersState = linkedSignal<Predicate<any>[], { value: FilterPredicateState<T>, timestamp: number } >({
+    source: this.$preds,
+    computation: (curr, previous) => {
+      if(!previous?.value) return ({ value: updateFilterPredicateState({ allFilters: [] as Predicate<T>[] }, curr), timestamp: new Date().getTime() })
+      return ({ value: updateFilterPredicateState(previous.value.value, curr), timestamp: new Date().getTime() })
+    }
+  });
+  private $savableFiltersState = linkedSignal<FilterInfoDict, { value: FilterInfoState<T>, timestamp: number } >({
+    source: this.state.$filters,
+    computation: (curr, previous) => {
+      if(!previous?.value) return ({ value: updateFilterInfoState({ allFilters: {} }, curr), timestamp: new Date().getTime() })
+      return ({ value: updateFilterInfoState(previous.value.value, curr), timestamp: new Date().getTime() })
+    }
+  });
+  private $allFilterStatesTimeStamped = computed(() => {
+    if(!this.$isInitializationState(InitializationState.Ready)()) return undefined;
+    return ({ value: updateFilterState(this.$savableFiltersState(), this.$predicateFiltersState()), timestamp: new Date().getTime() })
+  });
+  private $sortStateTimeStamped = linkedSignal<Sort[] | false, { value: SortState, timestamp: number } | undefined>({
+    source: computed(() => this.$isInitializationState(InitializationState.Ready)() && this.state.$getSorts()),
+    computation: (curr, prev) => {
+      if(!curr) return undefined;
+      if(!prev?.value) return ({ value: updateSortState(initialSortState, curr), timestamp: new Date().getTime() });
+      return ({ value: updateSortState(prev.value.value, curr), timestamp: new Date().getTime() });
+    }
+  });
+  private $allData = computed(() => (this.$tableBuilder()?.$initialized() && this.$tableBuilder()?.$data()) || [])
+  private $allDataTimeStamped = computed(() => {
+    const data = this.$allData();
+    if(!data) return undefined;
+    return ({
+      value: data,
+      timestamp: new Date().getTime()
+    })
+  });
+  private $allTimeStamped = computed(() => {
+    const data = this.$allDataTimeStamped();
+    const sort = this.$sortStateTimeStamped();
+    const filter = this.$allFilterStatesTimeStamped();
+    if(!data?.value || !sort?.value || !filter?.value) return undefined;
+    return ({
+      data,
+      sort,
+      filter
+    });
+  });
+  private $sortedAndFilteredData = linkedSignal<{data: Timestamp<T[]>, filter: Timestamp<FilterPredicateState<T>>, sort: Timestamp<SortState>} | undefined, Timestamp<T[]> | undefined>({
+    source: this.$allTimeStamped,
+    computation: (values, prev) => {
+      const init = this.$isInitializationState(InitializationState.Ready);
+      if(!values || !init) return undefined;
+      const { data, filter, sort } = values;
+      const val = prev?.value?.value || data.value;
+      const filteredData = sortAndFilterData(data, filter, sort, !prev?.value, val);
+      return ({ value: filteredData, timestamp: new Date().getTime() });
+    }
+  });
+  $timestampedGroups = computed(() => ({ value: this.state.$groupByKeys(), timestamp: new Date().getTime() }));
+  $timestampedExpanded = computed(() => ({ value: this.state.$expandGroups(), timestamp: new Date().getTime() }));
+  private $dataAndGroupsTimestamped = computed(() => {
+    const data = this.$sortedAndFilteredData() as Timestamp<(T & NoneGroupHeader)[]>;
+    const groups = this.$timestampedGroups();
+    const expanded = this.$timestampedExpanded();
+    if(!data) return undefined;
+    return ({
+      data,
+      groups,
+      expanded
+    })});
+
+  protected $filteredSortedAndGrouped = linkedSignal<{ data: Timestamp<(T & NoneGroupHeader)[]>, groups: Timestamp<string[]>, expanded: Timestamp<GroupedData[]>} | undefined, GroupByState | undefined>({
+    source: this.$dataAndGroupsTimestamped,
+    computation: (curr, prev) => {
+      if(!curr) return undefined;
+      const val = prev?.value?.groupedData || [];
+      return updateGroupByState(val, curr, !prev?.value);
+    }
+  });
+
+  private $isInitializationState = (state: InitializationState) => computed(() =>
+    this.state.selectSignal(s => s.initializationState >= state)()) ;
+
+  static headerId = 'tb-header-wrapper';
+  headerId = TableContainerComponent.headerId;
+}
+
+function isFunction<T>(a: any):a is Predicate<T> {
+  return typeof a === 'function';
+}

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

@@ -0,0 +1,113 @@
+import { Observable, Timestamp, combineLatest, map, scan, tap, timestamp } from "rxjs";
+import { SortState } from "./sort-state.helpers";
+import { FilterPredicateState } from "./filter-state.helpers";
+import { filterData, getFactory, sortData, tbNoShowSymbol } from "../../../functions/sort-data-function";
+import { defaultShareReplay } from "../../../../rxjs/defaultShareReplay";
+import { FieldType, MetaData } from "../../../interfaces/report-def";
+import { set } from "lodash";
+
+export const _sortAndFilterData = <T>(data: Observable<T[]>, sortState: Observable<SortState>, filterState: Observable<FilterPredicateState<T>>) => combineLatest([
+  data.pipe(timestamp()),
+  sortState.pipe(timestamp()),
+  filterState.pipe(timestamp())
+]).pipe(
+  scan((mappedData, [data, sort, f], index) => {
+    return mapDataSortsAndFilters( data, f, sort, index === 0, mappedData);
+  }, [] as T[])
+).pipe(
+  map((resultData) => resultData.filter(item => !item[tbNoShowSymbol])),
+  defaultShareReplay()
+);
+
+const mapDataSortsAndFilters = <T>(allData: Timestamp<T[]>, filters: Timestamp<FilterPredicateState<T>>, sort: Timestamp<SortState>, firstRun: boolean, filteredAndSortedData: T[]) => {
+  const fresh = firstRun || (allData.timestamp > sort.timestamp && allData.timestamp > filters.timestamp);
+  const sortChanged = !fresh && sort.timestamp > filters.timestamp;
+  const filterRemoved = !fresh && !sortChanged && !filters.value.onlyAddedFilters;
+  const runAllOnAllData = fresh || filterRemoved;
+  const resetFilters = !fresh && filterRemoved;
+
+  if(runAllOnAllData){
+    const filteredData = filterData(sortData(allData.value, sort.value.allSorts ), filters.value.allFilters, resetFilters);
+    return filteredData;
+  }
+  if(sortChanged){
+    return (sortData(filteredAndSortedData, sort.value.sortsToRun));
+  }
+  return (filterData(filteredAndSortedData, filters.value.onlyAddedFilters || filters.value.allFilters, resetFilters));
+}
+
+export const sortAndFilterData = <T>(data: Timestamp<T[]>, filters: Timestamp<FilterPredicateState<T>>, sort: Timestamp<SortState>, firstRun: boolean, resultData: T[]) => {
+  const markedAndSortedData = mapDataSortsAndFilters( data, filters, sort, firstRun, resultData);
+  const filteredData = markedAndSortedData.filter(item => !item[tbNoShowSymbol]);
+  return filteredData;
+}
+export const createDataCleaners = <T>(metadatas: MetaData<T>[], mutate = false) => {
+  const transforms = createCleaners(metadatas);
+  return (data: T) => {
+    if(!mutate){
+      data = { ...data }
+    }
+    for(const transform of transforms){
+      transform(data);
+    }
+    return data;
+  }
+}
+
+const createCleaners = <T>(metadatas: MetaData<T> []) => {
+  return metadatas.reduce((transforms, metaData) => {
+    const getter = getFactory(metaData.key);
+    const setter = metaData.key.includes('.') ? (t, val) => set(t, metaData.key, val) : (t, val) => t[metaData.key as unknown as keyof T] = val
+    switch ( metaData.fieldType ) {
+      case FieldType.Currency:
+      case FieldType.Number: {
+        const transform = (t:T) => {
+          const val = getter(t);
+          const num = Number( val );
+          setter(t, isNaN(num) || val == null ? null : num)
+        };
+        transforms.push(transform);
+        break;
+      }
+      case FieldType.Date: {
+        const transform = (t:T) => {
+          const val = getter(t);
+          const date = Date.parse(val);
+          let mappedDate: Date;
+          if(isNaN(date)){
+            mappedDate = null as any;
+          } else {
+            mappedDate = new Date(date);
+            mappedDate.setHours(0, 0, 0, 0);
+          }
+          setter(t, mappedDate);
+        };
+        transforms.push(transform);
+        break;
+      }
+
+      case FieldType.DateTime: {
+        const transform = (t:T) => {
+          const val = getter(t);
+          const date = Date.parse(val);
+          let mappedDate: Date;
+          if(isNaN(date)){
+            mappedDate = null as any;
+          } else {
+            mappedDate = new Date(date);
+            if(!metaData.additional?.dateTimeOptions?.includeMilliseconds){
+              if(metaData.additional?.dateTimeOptions?.includeSeconds){
+                mappedDate.setMilliseconds(0);
+              } else {
+                mappedDate.setSeconds(0, 0);
+              }
+            }
+          }
+          setter(t, mappedDate);
+        };
+        transforms.push(transform);
+      }
+    }
+    return transforms;
+  }, [] as ((t:T) => void)[])
+}

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

@@ -0,0 +1,125 @@
+import { Timestamp } from "rxjs";
+import { CustomFilter, FilterInfo, createFilterFunc, isCustomFilter, isFilterInfo, needsFilterCreation } from "../../../classes/filter-info";
+import { Dictionary } from "../../../interfaces/dictionary";
+import { Predicate } from "@angular/core";
+import { difference, intersection } from "lodash";
+import { TableCustomFilterDirective, TableFilterDirective } from "../../../directives";
+
+//The idea of this is that if filters were only added, and none were removed or changed, then we only need to tag more rows to not be shown. We don't need to remove any 'dont show' tags.
+// So if filters were only added this method will return the added filters, if filters were removed or changed this method will return undefined.
+export const updateFilterInfoState = <T>(previousState: FilterInfoState<T>, filterInfos: FilterInfoDict) => {
+  filterInfos = filterNonActiveOrNotReadyFilters(filterInfos);
+  const currentState: FilterInfoState<T> = {
+    allFilters: filterInfos,
+    onlyAddedFilters: filterInfoOnlyAdded(previousState.allFilters, filterInfos)
+  }
+  return currentState;
+}
+
+export const mapFilterInfoStateToPredicateState = <T>(s: FilterInfoState<T>): FilterPredicateState<T> => {
+  const mappedAddOnly: {[key in keyof T]: Predicate<T>} =
+    s.onlyAddedFilters
+      ?
+      Object.entries(s.onlyAddedFilters).filter(([, v]) => needsFilterCreation(v)).reduce((obj, [key, value]) => {
+        obj[key] = createFilterFunc(value);
+        return obj;
+      }, {} as {[key in keyof T]: Predicate<T>})
+      : {} as {[key in keyof T]: Predicate<T>};
+  const mappedAll = Object.entries(s.allFilters).filter(([, v]) => needsFilterCreation(v))
+    .filter(([, v]) => !isCustomFilter(v) || !!v.predicate)
+    .map(([key, value]) => {
+      return mappedAddOnly[key] || createFilterFunc(value);
+    });
+  return ({
+    allFilters: mappedAll,
+    onlyAddedFilters: s.onlyAddedFilters ? Object.values(mappedAddOnly) : undefined
+  })
+}
+
+export const updateFilterPredicateState = <T>(previousState: FilterPredicateState<T>, filters: Predicate<any>[]) => {
+  const currentState: FilterPredicateState<T> = {
+    allFilters: filters,
+    onlyAddedFilters: predicatesOnlyAdded(previousState.allFilters, filters)
+  }
+  return currentState;
+}
+
+export const updateFilterState = <T>(filterInfos: Timestamp<FilterInfoState<T>>, predicates: Timestamp<FilterPredicateState<T>>): FilterPredicateState<T> => {
+  const infos = mapFilterInfoStateToPredicateState(filterInfos.value);
+  const filtersState: FilterPredicateState<T> = {
+    allFilters: [...infos.allFilters, ...predicates.value.allFilters]
+  }
+  if(filterInfos.timestamp > predicates.timestamp && !!filterInfos.value.onlyAddedFilters){
+    filtersState.onlyAddedFilters = infos.onlyAddedFilters;
+  } else {
+    filtersState.onlyAddedFilters = predicates.value.onlyAddedFilters
+  }
+  return filtersState
+}
+
+
+const filterNonActiveOrNotReadyFilters = (filtersDict : FilterInfoDict) => Object.entries(filtersDict).reduce((obj, [key, value]) => {
+  if(value.active !== false && (!isCustomFilter(value) || !!value.predicate)){
+    obj[key] = value
+  }
+  return obj;
+}, {} as Dictionary<FilterInfo | CustomFilter>);
+
+
+function filterInfoOnlyAdded(previousFilterInfos: FilterInfoDict, currentFilterInfos: FilterInfoDict): FilterInfoDict | undefined{
+  const previousKeys = Object.keys(previousFilterInfos);
+  const currentKeys = Object.keys(currentFilterInfos);
+  const keysInBoth = intersection(previousKeys, currentKeys);
+  const someRemoved = previousKeys.length > keysInBoth.length;
+  if(someRemoved || !previousKeys.length){
+    return undefined;
+  }
+  if(filtersInfosUpdated(previousFilterInfos, currentFilterInfos)){
+    return undefined;
+  }
+  const addedFilters = difference(currentKeys, keysInBoth).reduce((dict, key) => {
+    dict[key] = currentFilterInfos[key];
+    return dict;
+  }, {} as FilterInfoDict);
+  return addedFilters;
+}
+
+function predicatesOnlyAdded(previousPredicates: Predicate<any>[], currentPredicates: Predicate<any>[]){
+  if(!previousPredicates.length){
+    return undefined;
+  }
+  const predicateFiltersRemoved = difference(previousPredicates, currentPredicates).length;
+  if(predicateFiltersRemoved){
+    return undefined;
+  }
+  return difference(currentPredicates, previousPredicates);
+}
+
+function filtersInfosUpdated(previousFilterInfos: FilterInfoDict<any>, currentFilterInfos: FilterInfoDict<any>){
+  return !Object.entries(previousFilterInfos).every(([key, val]) => {
+    return currentFilterInfos[key].filterType === val.filterType && currentFilterInfos[key].filterValue === val.filterValue
+  })
+}
+
+export function patchDirectiveFromState(directive: (TableCustomFilterDirective | TableFilterDirective), stateFilter: FilterInfo | CustomFilter){
+  if(isFilterInfo(stateFilter)) {
+    const filterDirective: TableFilterDirective = directive as TableFilterDirective;
+    filterDirective.setFilterValue(stateFilter.filterValue);
+    filterDirective.update();
+  }
+  if(isCustomFilter(stateFilter)) {
+    directive.active = stateFilter.active ?? false;
+  }
+}
+
+export interface FilterInfoState<T> {
+  allFilters: FilterInfoDict<T>,
+  onlyAddedFilters?: FilterInfoDict<T> | undefined,
+}
+
+export interface FilterPredicateState<T> {
+  allFilters: Predicate<T>[],
+  onlyAddedFilters?: Predicate<T>[] | undefined,
+}
+
+export type FilterInfoDict<T = any> = Dictionary<FilterInfo<any, T> | CustomFilter<any>>;