@one-paragon/angular-utilities 2.2.4 → 2.2.6

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

@@ -0,0 +1,440 @@
+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, 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';
+
+@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);
+  });
+  $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 => parseTbSizeToPixels(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] );
+  }
+  $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);
+  $getUserDefinedTableWidth = this.selectSignal(state => state.userDefined.table.width);
+  getUserDefinedTableWidth$ = this.select(state => state.userDefined.table.width);
+  $userDefinedRowHeight = this.selectSignal(state => (state.userDefined.rowHeight));
+  $userDefinedHeaderHeight = this.selectSignal(state => (state.userDefined.headerHeight));
+  $userDefinedPageSize = this.selectSignal(state => (state.userDefined.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));
+  }));
+  $expandGroups = this.selectSignal(state => state.groupBy, { equal: (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!);
+  $showAll = this.selectSignal(s => s.userDefined?.showAll ?? s.showAll);
+
+
+  $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);
+
+  $getLinkInfo = (md:MetaData) => this.selectSignal(state => state.linkMaps[md.key]);
+
+  $isVirtual = this.selectSignal(state =>
+    state.notPersistedTableSettings.useVirtualScroll
+    || state.showAll
+    || state.userDefined?.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';
+    }
+  });
+
+  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 = [];
+        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;
+    }
+    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;
+    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),
+      initializationState: InitializationState.TableSettingsLoaded
+    };
+    s.pageSize = settings.tableSettings?.paginatorSettings?.pageSize ?? s.pageSize;
+    s.showAll = settings.tableSettings?.paginatorSettings?.defaultAll ?? s.showAll;
+
+    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 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 } });
+  });
+  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();
+        }
+        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 }));
+  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 } }))
+
+  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';
+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,87 @@
+@let metaData = $metaData();
+@let customCell = $customCell();
+@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>
+          @if(!customCell?.columnDef?.headerCell)
+          {
+              @if(metaData.fieldType !== FieldType.NotMapped || !!metaData.sortLogic?.sortBy)
+              {
+                <div mat-sort-header style="width: 100%" [disabled]="metaData.noSort">
+                  {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}
+                </div>
+              }
+              @else if(metaData.fieldType === FieldType.NotMapped)
+              {
+                <div style="width: 100%">
+                  {{ metaData.displayName ?  metaData.displayName : ( metaData.key | spaceCase ) }}
+                </div>
+              }
+              @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>
+}

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

@@ -0,0 +1,43 @@
+.header-container {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    align-items: center;
+}
+
+.negative-currency {
+  color: red;
+}
+
+.column-head{
+  position: relative;
+}
+
+.bold,
+.group-footer {
+  font-weight: 900;
+}
+
+.cdk-drag-preview {
+  background: white;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+              0 8px 10px 1px rgba(0, 0, 0, 0.14),
+              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 33%;
+  border-right-width: 0px;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+.drag-handle{
+  color:lightblue;
+  cursor: move;
+  margin-right: 9px;
+}
+
+

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

@@ -0,0 +1,49 @@
+import { ComponentFixture, ComponentFixtureAutoDetect, TestBed, waitForAsync } from '@angular/core/testing';
+import { ColumnBuilderComponent } from './column-builder.component';
+import { FieldType } from '../../interfaces/report-def';
+import { TableBuilderConfigToken } from '../../classes/TableBuilderConfig';
+import { provideMockStore } from '@ngrx/store/testing';
+import { SpaceCasePipe } from '../../../utilities/pipes/space-case.pipes';
+import { CurrencyPipe, DatePipe } from '@angular/common';
+import { PhoneNumberPipe } from 'projects/angular-utilities/src/utilities';
+import { MatTable } from '@angular/material/table';
+
+const initialState = { fullTableState: {
+  'test-id': {
+    metaData: [],
+    hiddenKeys: [],
+    pageSize: 10,
+    initialized: true,
+  }
+} };
+
+
+describe('ColumnBuilderComponent', () => {
+  let component: ColumnBuilderComponent;
+  let fixture: ComponentFixture<ColumnBuilderComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ColumnBuilderComponent, SpaceCasePipe],
+      providers: [
+        { provide: TableBuilderConfigToken, useValue: { defaultTableState: { } } },
+        { provide: MatTable, useValue: { addColumnDef: (colDef) => {} } },
+        provideMockStore({ initialState }),
+        DatePipe,
+        CurrencyPipe,
+        PhoneNumberPipe,
+      ],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ColumnBuilderComponent);
+    component = fixture.componentInstance;
+    component.metaData = { key: 'key', fieldType: FieldType.String };
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});