@one-paragon/angular-utilities 2.1.4 → 2.1.5

package/src/table-builder/functions/sort-data-function.ts

@@ -0,0 +1,80 @@
+import { Predicate } from "@angular/core";
+import { TableBuilderSort } from "../components/table-container/table-container.helpers/sort-state.helpers";
+
+export function sortData<T>(data: T[], sorted: TableBuilderSort[]): T[] {
+  return data.sort(compareT(sorted));
+}
+
+export function filterData<T>(data: T[], filters: Predicate<T>[], resetAll = false){
+  if(filters.length === 0){
+    if(resetAll){
+      for (let index = 0; index < data.length; index++) {
+        const element = data[index];
+        element[tbNoShowSymbol] = false;
+      }
+    }
+    return data;
+  }
+  for (let index = 0; index < data.length; index++) {
+    const element = data[index];
+    const hide = !filters.every(filter => filter(element));
+    if(hide || resetAll){
+      element[tbNoShowSymbol] = hide;
+    }
+  }
+  return data;
+}
+
+export const tbNoShowSymbol = Symbol('tb_no_show');
+
+function compareT<T>(criteria: TableBuilderSort[]) {
+  const transforms = criteria.reduce((acc, c) => {
+    acc[c.active] = {
+      transform: c.sortBy ? c.sortBy :  getFactory(c.active), nulls: c.nulls === 'first' ? -1 : 1};
+    return acc;
+  }, {} as Record<string, { transform: (t: T) => any, nulls: 1 | -1}>);
+
+  return function (a: T, b: T): number {
+    for (let index = 0; index < criteria.length; index++) {
+      const c = criteria[index];
+      const d = transforms[c.active];
+      const nullValue = d.nulls;
+      if (a == null) {
+        if (b == null) return 0;
+        return nullValue;
+      }
+      if (b == null) return -nullValue;
+      const transform = d.transform;
+      const aVal = transform(a);
+      const bVal = transform(b);
+      if (aVal == null) {
+        if (bVal == null) return 0;
+        return nullValue;
+      }
+
+      if (bVal == null) return -nullValue;
+      if (aVal < bVal) return c.direction === 'asc' ? -1 : 1;
+      if (aVal > bVal) return c.direction === 'asc' ? 1 : -1;
+    }
+    return 0;
+  }
+}
+
+export function getFactory(b: string){
+  if(typeof b !== 'string') return (a) => a[b];
+  if(!b.includes('.')) return (a) => {
+    if(!a) return a;
+    return a[b];
+  };
+  const arr = b.split('.');
+  return (a) => {
+    let val = a;
+    if(!a) return a;
+    for (let index = 0; index < arr.length; index++) {
+      val = val[arr[index]];
+      if(val == undefined) return undefined;
+      if(typeof val !== 'object' && index + 1 < arr.length) return undefined;
+    }
+    return val;
+  }
+}

package/src/table-builder/functions/string-filter-function.ts

@@ -0,0 +1,51 @@
+import { FilterFunc, FilterFuncs, FilterInfo } from '../classes/filter-info';
+import { EnumFilterTypes, FilterType, StringFilterTypes } from '../enums/filterTypes';
+import { isNull } from './null-filter-function';
+
+
+const stringEqualFunc:FilterFunc<string> = (filterInfo:FilterInfo) => {
+  const equalsVal = prepareForStringCompare(filterInfo.filterValue);
+  return ((val)=> prepareForStringCompare(val) === equalsVal );
+}
+
+const stringContainsFunc:FilterFunc<string> = (filterInfo:FilterInfo) => {
+  const containsVal = prepareForStringCompare(filterInfo.filterValue);
+  return ((val)=>prepareForStringCompare(val).includes(containsVal));
+}
+
+const stringDoesNotContainFunc:FilterFunc<string> = (filterInfo:FilterInfo) => {
+  const doesNotContainVal = prepareForStringCompare(filterInfo.filterValue);
+  return ((val)=> !prepareForStringCompare(val)?.includes(doesNotContainVal));
+}
+
+const stringStartsWithFunc:FilterFunc<string> = (filterInfo:FilterInfo) => {
+  const startsWith = prepareForStringCompare(filterInfo.filterValue);
+  return ((val)=> prepareForStringCompare(val).startsWith(startsWith));
+}
+
+const stringEndsWithFunc:FilterFunc<string> = (filterInfo:FilterInfo) => {
+  const startsWith = prepareForStringCompare(filterInfo.filterValue);
+  return ((val)=> prepareForStringCompare(val).endsWith(startsWith));
+}
+
+const multipleStringValuesEqualsFunc:FilterFunc<string[],string> = (filterInfo:FilterInfo) => {
+  const filterVals = filterInfo.filterValue.map( (v: string) => prepareForStringCompare(v));
+  return ((val)=> filterVals.some((s:string) => prepareForStringCompare(val) === s));
+}
+
+export const StringFilterFuncs: FilterFuncs<StringFilterTypes> = {
+    [FilterType.StringEquals]: stringEqualFunc,
+    [FilterType.StringContains]: stringContainsFunc,
+    [FilterType.StringDoesNotContain]: stringDoesNotContainFunc,
+    [FilterType.StringStartWith]: stringStartsWithFunc,
+    [FilterType.StringEndsWith]: stringEndsWithFunc,
+    [FilterType.IsNull]: isNull,
+    [FilterType.In]: multipleStringValuesEqualsFunc,
+};
+
+export const EnumFilterFuncs: FilterFuncs<EnumFilterTypes> = {
+  [FilterType.IsNull]: isNull,
+  [FilterType.In] : multipleStringValuesEqualsFunc,
+};
+
+export const prepareForStringCompare = (val: any):string => (val?.toString().trim().toLowerCase());

package/{table-builder/interfaces/ColumnInfo.d.ts → src/table-builder/interfaces/ColumnInfo.ts}

@@ -1,6 +1,7 @@
-import { CustomCellDirective } from "../directives/custom-cell-directive";
-import { MetaData } from "./report-def";
-export interface ColumnInfo {
-    metaData: MetaData;
-    customCell?: CustomCellDirective;
-}
+import { CustomCellDirective } from "../directives/custom-cell-directive";
+import { MetaData } from "./report-def";
+
+export interface ColumnInfo {
+  metaData: MetaData;
+  customCell?: CustomCellDirective;
+}

package/src/table-builder/interfaces/column-template.ts

@@ -0,0 +1,9 @@
+import { TemplateRef } from '@angular/core';
+import { MetaData } from './report-def';
+
+export class ColumnTemplates {
+  header: TemplateRef<any>;
+  footer: TemplateRef<any>;
+  body: TemplateRef<any>;
+  metaData: MetaData;
+}

package/{table-builder/interfaces/dictionary.d.ts → src/table-builder/interfaces/dictionary.ts}

@@ -1,3 +1,3 @@
-export interface Dictionary<T> {
-    [key: string]: T;
-}
+export interface Dictionary<T> {
+  [key: string]: T;
+}

package/src/table-builder/interfaces/report-def.ts

@@ -0,0 +1,186 @@
+import { Dictionary } from './dictionary';
+import { PipeTransform, Predicate, TemplateRef } from '@angular/core';
+import { TableBuilderExport } from '../classes/TableBuilderConfig';
+import { QueryParamsHandling } from '@angular/router';
+import { StylerStyle } from '../../utilities/directives/styler';
+
+
+export enum FieldType {
+    Unknown = 0,
+    Date = 1,
+    /**
+     * @deprecated If `additional.link` is set the column will be treated as a link.
+     */
+    Link = 2,
+    ImageUrl = 3,
+    Currency = 4,
+    Array = 5,
+    Hidden = 6,
+    Number = 7,
+    String = 8,
+    Boolean = 9,
+    PhoneNumber = 10,
+    /**
+     * @deprecated For mapped properties use proper type (for sorting and filtering) with `map`.
+     * For unmapped properties use `FieldType.NotMapped` with map.
+     */
+    Expression = 11,
+    Enum = 12,
+    DateTime = 13,
+    NotMapped = 14,
+}
+
+export enum SortDirection {
+    asc= 'asc',
+    desc= 'desc'
+}
+
+export enum Target {
+  Blank = '_blank',
+  Self = '_self',
+  Parent = '_parent',
+  Top = '_top'
+}
+
+interface BaseMeta <T = any> {
+  displayName?: string;
+  additional?: Additional<T>;
+  order?: number;
+  preSort?: SortDef;
+  sortLogic?: {
+    /**
+     * defaults to last
+     */
+    nulls?: 'first' | 'last';
+    sortBy?: ((t: T) => any) | 'use map';
+  }
+  noSort?: boolean;
+  width?: string;
+  noExport?: boolean;
+  filterLogic?: {
+    filterBy?: ((t: T) => any) | 'use map';
+    /**
+     * defaults to the MetaData's Field type
+     */
+    filterType?: FieldType;
+  },
+  noFilter?: boolean;
+  customCell?: boolean;
+  /**
+   * @deprecated Please use map instead
+   */
+  transform?: ((o: T, ...args: any[])=> any) | ((o: string, ...args: any[])=> any) | PipeTransform;
+  click?: (element: T, key: string ) => void;
+  template?: TemplateRef<any>;
+  classes?: Dictionary<Predicate<T> | true>;
+  toolTip?: string | ((t:T) => string);
+  useIcon?: boolean;
+  map? : (t:T) => any;
+}
+type Path<T, U = never, P = never> = (T extends P ? never : T extends object ?
+{ [K in keyof T]: K extends string | number ? `${K}` | (T[K] extends (Array<any> | undefined) ? `${K}.${keyof Array<any> & (string | number)}` :  `${K}.${Path<T[K], T[K], P | U >}`) : never; }[keyof T]
+: never)
+
+export interface MappedMetaData<T = any, AdditionalFields extends string[] = []> extends BaseMeta<T> {
+  key: (Path<T> | AdditionalFields[number]) & string;
+  fieldType: Exclude<typeof FieldType[keyof typeof FieldType], FieldType.NotMapped | FieldType.Expression>;
+  /**
+   * if used with map, `mapItem` will only be used where the row is not available, ex. group header 
+   */
+  mapItem?: (i: string) => any;
+}
+
+export type MetaData<T = any, AdditionalFields extends string[] = []> = MappedMetaData<T, AdditionalFields> | NotMappedMetaData<T>;
+
+export interface NotMappedMetaData<T = any> extends BaseMeta<T> {
+  key: string;
+  fieldType: FieldType.NotMapped | FieldType.Expression;
+}
+export interface  ReportDef<DataType = any> {
+    data: DataType[];
+    metaData: MetaData [];
+    totalRecords?: number;
+    count: number;
+}
+
+export interface SortDef {
+    direction: SortDirection;
+    precedence?: number;
+}
+
+export interface FilterOptions {
+  filterableValues : string[]
+}
+export interface DateTimeOptions {
+  format?: string;
+  includeSeconds?: boolean;
+  includeMilliseconds: boolean;
+}
+type interpolatedRoute = string;
+export interface Additional<T = any> {
+  link? : {
+    base?: string;
+    urlKey?: string;
+    target?: Target;
+    useRouterLink?: boolean;
+    /**
+     * If you want to use a route with interpolated params, you can use this. Wrap the property name in curly braces.
+     * For example, if interpolatedRoute = /users/{id}/edit, {id} will be replaced with the value of the element's id property.
+     */
+    interpolatedRoute?: interpolatedRoute | ((t: T) => string);
+    routerLinkOptions?:{
+      queryParams?: [string, interpolatedRoute | ((t: T) => string)][];
+      fragment?: string;
+      preserveFragment?: boolean;
+      queryParamsHandling?: QueryParamsHandling;
+    }
+  }
+  footer?: { type: 'sum' };
+  export?: TableBuilderExport;
+  dateFormat?: string;
+  dateTimeOptions?:  DateTimeOptions;
+  filterOptions?: FilterOptions;
+  styles?: StylerStyle<T>;
+  columnPartStyles?: {
+    header?: Dictionary<string>,
+    body?: StylerStyle<T>,
+    innerBody?: StylerStyle<T>,
+    footer?: Dictionary<string>,
+  }
+  columnPartClasses?: {
+    header?: Dictionary<Predicate<T> | true>,
+    footer?: Dictionary<Predicate<T> | true>,
+  }
+  enumMap?: {[key:number]:string};
+  boolean? : {
+    showForFalse? : true | { icon : string },
+    forTrue? : { icon : string }
+  }
+}
+
+export enum ArrayStyle {
+  CommaDelimited,
+  NewLine
+}
+
+export interface ArrayAdditional extends Additional {
+    limit?: number;
+    arrayStyle?: ArrayStyle;
+}
+
+
+
+export function metaDataArrToDict<T = MetaData>(arr: MetaData[], transform?: (m : MetaData) => T): Dictionary<T>{
+  const dict = {};
+  if(transform){
+    arr.forEach(e => dict[e.key] = transform(e));
+  } else {
+    arr.forEach(e => dict[e.key] = e);
+  }
+  return dict;
+}
+
+export interface CustomCellMeta extends Pick<MetaData, 'key' | 'displayName' | 'preSort' | 'fieldType' | 'order' | 'width'>{
+  customCell: true;
+  noExport?: boolean;
+}

package/src/table-builder/ngrx/tableBuilderStateStore.ts

@@ -0,0 +1,197 @@
+import { ComponentStore } from "@ngrx/component-store";
+import { Injectable, Signal } from "@angular/core";
+import { Dictionary } from "../interfaces/dictionary";
+import { PersistedTableState } from "../classes/TableState";
+
+@Injectable({ providedIn: 'root'})
+export class TableBuilderStateStore extends ComponentStore<GlobalStorageState> {
+  constructor(){
+    super(loadGlobalStorageState() || defaultStorageState)
+  }
+
+  //selectors
+  $selectLocalTableProfile = (profileKey:string): Signal<Profile | undefined> => this.selectSignal(state => 
+    state.localProfiles[profileKey]);
+
+  $selectLocalTableStateForView = (tableId: string) => this.selectSignal(
+    this.$selectLocalTableProfile(tableId),
+    (profile) => {
+      if(profile?.current) {
+        return  profile.states[profile.current];
+      }
+      if(profile?.localSavedState) return profile.localSavedState;
+      return null;
+    }
+  )
+
+  $selectLocalProfileCurrentKey = (key:string) => this.selectSignal(
+    this.$selectLocalTableProfile(key),
+    (profile) => profile?.current);
+
+  $selectLocalProfileDefaultKey = (key:string) => this.selectSignal(
+    this.$selectLocalTableProfile(key),
+    (profile) => profile?.default);
+
+  $selectLocalProfileKeys = (tableId:string) => this.selectSignal(
+    this.$selectLocalTableProfile(tableId),
+    (profile) => Object.keys(profile?.states || {})
+  );
+
+
+  // reducers
+  
+
+  saveTableSettingsToLocalAndStorage = (tableId: string, stateName: string, tableState: PersistedTableState, asDefault?: boolean) => {
+    this.saveTableStateToStorage(tableId, stateName, tableState, asDefault);
+    this.saveTableStateToLocal({ tableId, tableState, stateName, asDefault });
+  }
+  
+  saveTableStateToLocal = this.updater((state, props: { tableId: string, tableState: PersistedTableState, stateName?: string, asDefault?: boolean }) => {
+    let profile = state.localProfiles[props.tableId];
+    if(!profile?.states) {
+      profile = {states:{}};
+    }
+    if(!props.stateName){
+      profile = {...profile, localSavedState: props.tableState };
+    } else {
+      profile = {...profile, states: {...profile.states, [props.stateName] : props.tableState} };
+    }
+    if(props.asDefault){
+      profile.default = props.stateName;
+    }
+    return {...state, localProfiles: {...state.localProfiles, [props.tableId]: profile} }
+  });
+
+  saveTableStateToStorage = (tableId: string, stateName: string, tableState: PersistedTableState, asDefault = false) => {
+    const globalSavedState: PersistedGlobalStorageSate = JSON.parse(localStorage.getItem('global-state-storage') ?? JSON.stringify(defaultStorageState) );
+    globalSavedState.localProfiles[tableId] ??= { states : {}}
+    globalSavedState.localProfiles[tableId].states[stateName] = tableState;
+    if(asDefault){
+      globalSavedState.localProfiles[tableId].default = stateName;
+    }
+    localStorage.setItem('global-state-storage', JSON.stringify( globalSavedState));
+  }
+
+  addNewStateToLocalAndStorage = (tableId: string, newStateName: string, tableState: PersistedTableState, asDefault?: boolean) => {
+    this.saveTableSettingsToLocalAndStorage(tableId, newStateName, tableState, asDefault);
+    this.setLocalCurrentState({ tableId: tableId, currentStateKey: newStateName});
+  }
+
+  setLocalCurrentState = this.updater((state, props: { tableId: string, currentStateKey: string }) => {
+    const profile = state.localProfiles[props.tableId] || { states: {}};
+    profile.current = props.currentStateKey;
+    return {...state, localProfiles: {...state.localProfiles, [props.tableId]: {...profile}}};
+  });
+
+  setDefaultInLocalAndStorage = (tableId: string, newDefault: string) => {
+    this.setDefaultInLocal({ default: newDefault, key: tableId });
+    this.setDefaultInStorage(tableId, newDefault);
+  }
+
+  setDefaultInLocal = this.updater((state, props: { key: string, default: string }) => {
+    if(state.localProfiles[props.key]?.states[props.default]) {
+      return ({...state, localProfiles: {...state.localProfiles, [props.key]: {...state.localProfiles[props.key], default: props.default} } });
+    }
+    return state;
+  });
+  
+  unsetDefaultFromLocalAndStorage = (tableId: string) => {
+    this.unsetDefaultFromLocal(tableId);
+    this.unsetDefaultFromStorage(tableId);
+  }
+
+  unsetDefaultFromLocal = (tableId: string) => {
+    this.patchState(tables => {
+      const profile = { ...tables.localProfiles[tableId] };
+      if(profile) {
+        delete profile.default;
+      }
+      return { ...tables, localProfiles: { ...tables.localProfiles, [tableId]: profile } };
+    });
+  }
+
+  unsetDefaultFromStorage = (tableId: string) => {
+    const globalSavedState: GlobalStorageState = JSON.parse(localStorage.getItem('global-state-storage') ?? JSON.stringify(defaultStorageState) );
+    if(globalSavedState.localProfiles[tableId]) {
+      delete globalSavedState.localProfiles[tableId].default;
+      localStorage.setItem('global-state-storage', JSON.stringify( globalSavedState));
+    }
+  }
+
+  setDefaultInStorage = (tableId: string, stateName: string) => {
+    const tableProfile = this.$selectLocalTableProfile(tableId)();
+    const globalSavedState: GlobalStorageState = JSON.parse(localStorage.getItem('global-state-storage') ?? JSON.stringify(defaultStorageState) );
+    let savedProfile = globalSavedState.localProfiles[stateName];
+    if(!savedProfile?.states) {
+      savedProfile =  { default: stateName, states : tableProfile!.states };
+    } else {
+      savedProfile.default = stateName;
+    }
+    globalSavedState.localProfiles[tableId] = savedProfile;
+    localStorage.setItem('global-state-storage', JSON.stringify( globalSavedState));
+  }
+
+  deleteLocalProfilesState = this.updater((state, props: { key: string, stateKey: string }) => {
+    let profile = state.localProfiles[props.key];
+    if(profile) {
+      const current = profile.current === props.stateKey ? profile.default : profile.current;
+      profile = {...profile,current, states: { ...profile.states}};
+      delete profile.states[props.stateKey];
+      if(current === props.stateKey) {
+        profile.current = undefined;
+      }
+      return {...state, localProfiles: {...state.localProfiles, [props.key]: profile} };
+    } else {
+      return state;
+    }
+  });
+
+  deleteProfileFromLocalAndStorage = (key: string, stateKey: string) => {
+    const globalSavedState: GlobalStorageState = JSON.parse(localStorage.getItem('global-state-storage') ?? JSON.stringify(defaultStorageState) );
+    if(!globalSavedState.localProfiles[key]) {
+      return;
+    } else {
+      delete (globalSavedState.localProfiles[key].states ?? {})[stateKey];
+    }
+    if(globalSavedState.localProfiles[key].default === stateKey) {
+      globalSavedState.localProfiles[key].default = undefined;
+    }
+    localStorage.setItem('global-state-storage', JSON.stringify( globalSavedState));
+    this.deleteLocalProfilesState({ key, stateKey })
+  }
+}
+
+function loadGlobalStorageState() : GlobalStorageState | void {
+  const storage = localStorage.getItem('global-state-storage');
+  
+  if(storage) {
+    const s: GlobalStorageState = (JSON.parse(storage) as PersistedGlobalStorageSate);
+    s.localProfiles ??= {};
+    for(const key in s.localProfiles){
+      const profile = s.localProfiles[key];
+      s.localProfiles[key] = { ...profile, current: profile.default } as Profile
+    }
+    return {...defaultStorageState, ...s};
+  }
+}
+
+interface PersistedProfile {
+  states: Dictionary<PersistedTableState>;
+  default?: string;
+}
+export interface Profile extends PersistedProfile {
+  current?: string;
+  localSavedState?: PersistedTableState;
+}
+
+export interface GlobalStorageState {
+  localProfiles: Dictionary<Profile>;
+}
+
+interface PersistedGlobalStorageSate {
+  localProfiles: Dictionary<PersistedProfile>;
+}
+
+export const defaultStorageState: GlobalStorageState = {
+  localProfiles: {}
+}

package/src/table-builder/pipes/column-total.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { MetaData } from '../interfaces/report-def';
+import {sumBy} from 'lodash';
+
+@Pipe({
+  name: 'columnTotal',
+      })
+export class ColumnTotalPipe implements PipeTransform {
+  transform(data: any[], metaData: MetaData) {
+    const dataToCalculate = data.filter(d => !d.isGroupHeader)
+    switch (metaData.additional!.footer!.type) {
+      case 'sum':
+      return sumBy(dataToCalculate, metaData.key);
+    }
+  }
+}

package/src/table-builder/pipes/format-filter-type.pipe.ts

@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { FilterType } from '../enums/filterTypes';
+
+@Pipe({name: 'formatFilterType' })
+export class FormatFilterTypePipe implements PipeTransform {
+  transform(filterType: FilterType, value: any){
+    if(filterType === FilterType.IsNull){
+      return value ? filterType : 'Is Not Blank'
+    }
+    return filterType;
+  }
+}

package/src/table-builder/pipes/format-filter-value.pipe.ts

@@ -0,0 +1,40 @@
+import { Pipe, PipeTransform, computed, inject } from '@angular/core';
+import { TableStore } from '../classes/table-store';
+import { FieldType, MetaData } from '../interfaces/report-def';
+import { DatePipe } from '@angular/common';
+import { FilterType } from '../enums/filterTypes';
+import { spaceCase } from '../../utilities/pipes/space-case.pipes';
+import { DateTimeFilterFuncs } from '../functions/date-filter-function';
+
+
+@Pipe({name: 'formatFilterValue' })
+export class FormatFilterValuePipe implements PipeTransform {
+  tableState = inject(TableStore);
+  private datePipe = inject(DatePipe);
+
+  transform(value: any, key: string, filterType: FilterType) {
+    return computed(() => transform(value, this.tableState.$getMetaData(key)(), filterType));
+  }
+}
+
+const transform = (value: any, meta: MetaData, filterType: FilterType): string => {
+  if(filterType === FilterType.IsNull) {
+    return '';
+  }
+  if(value && (filterType === FilterType.In )){
+    if(meta.fieldType === FieldType.Enum) {
+      return value.map( (v: any) => spaceCase(meta.additional!.enumMap![v])).join(', ') ?? value;
+    }
+    return value.join(', ') ?? value;
+  }
+  if(filterType === FilterType.NumberBetween){
+    return value.Start + ' - ' + value.End;
+  }
+  if(meta.fieldType === FieldType.Date){
+    return new DatePipe('en-US').transform(value, 'MM/dd/yy') || '';
+  }
+  if(meta.fieldType === FieldType.DateTime){
+    return (!!DateTimeFilterFuncs[filterType] ? new DatePipe('en-US').transform(value, 'short') : new DatePipe('en-US').transform(value, 'MM/dd/yy')) || '';
+  }
+  return value
+}

package/src/table-builder/pipes/key-display.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform, computed, inject } from '@angular/core';
+import { TableStore } from '../classes/table-store';
+import { spaceCase } from '../../utilities/pipes/space-case.pipes';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Pipe({name: 'keyDisplay' })
+export class KeyDisplayPipe implements PipeTransform {
+  tableState = inject(TableStore);
+
+  transform = (key: string) =>
+    computed(() => this.tableState.$getMetaData(key)()?.displayName || spaceCase(key))
+}