@one-paragon/angular-utilities 1.2.16 → 1.2.18

package/src/table-builder/components/table-container/table-container.html

@@ -0,0 +1,94 @@
+@let tableId = $tableId();
+
+<ng-content select="[before]" />
+
+<ng-container multiSort *ngrxLet="state.tableSettings$ as tableSettings">
+  <div class="header-wrapper">
+    <div class="title">
+      @if ((!$collapseHeader()) || tableSettings.showTitleWhenHeaderCollapsed) {
+        <ng-content select=".tb-header-title"/>
+      }
+      @if((state.groupByKeys$ | async)?.length){
+        <group-by-list />
+      }
+    </div>
+    <div class="flx-row-end">
+      <lib-filter-list />
+      @if (!tableSettings.hideHeader) {
+        @if (!$collapseHeader()) {
+          <ng-container *ngTemplateOutlet="headerMenu"/>
+          <button mat-icon-button color='primary' [matMenuTriggerFor]="mainMenu">
+            <mat-icon>more_vert</mat-icon>
+          </button>
+          <mat-menu #mainMenu='matMenu'>
+            <ng-container *ngTemplateOutlet="headerMenuExtra"/>
+          </mat-menu>
+        }
+        @else {
+          <mat-icon color="primary" [matMenuTriggerFor]="mainMenu" class="flat-menu-button pointer">more_horiz</mat-icon>
+          <mat-menu #mainMenu='matMenu'>
+            <div class="flex-column">
+              <ng-container *ngTemplateOutlet="headerMenu"/>
+            </div>
+            <ng-container *ngTemplateOutlet="headerMenuExtra"/>
+          </mat-menu>
+        }
+        <mat-icon [matTooltip]="$collapseHeader() ? 'expand' : 'collapse'" class="collapse-icon header"
+          (click)="state.toggleCollapseHeader()">
+          {{$collapseHeader() ? 'expand_less' : 'expand_more'}}
+        </mat-icon>
+      }
+
+    </div>
+  </div>
+  @if($useVirtual())
+  {
+    <tb-virtual-scroll-container class="scrollable">
+      <tb-generic-table [rows]="$customRows()" [data]="(data | async)!" [displayData]="$displayData()"
+        (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]="trackBy" />
+    </tb-virtual-scroll-container>
+  }
+  @else
+  {
+    <tb-generic-table [rows]="$customRows()" [data]="(data | async)!" [displayData]="$displayData()"
+      (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]="trackBy" />
+  }
+  @if(tableSettings.usePaginator)
+  {
+    <div class="paginator">
+      <tb-paginator #tbPaginator [tableElRef]="tableElRef" />
+
+      <mat-icon [matTooltip]="$collapseFooter() ? 'expand' : 'collapse'" class="collapse-icon footer"
+        (click)="state.toggleCollapseFooter()">
+        {{$collapseFooter() ? 'expand_more' : 'expand_less'}}
+      </mat-icon>
+    </div>
+  }
+
+  <ng-template #headerMenu>
+    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}
+    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}
+    @if (!tableSettings.hideSort) {<tb-sort-menu/>}
+    @if (!!tableId) {<tb-profiles-menu [$tableId]="tableId" (onSaveState)="onSaveState.emit($event)"/>}
+  </ng-template>
+
+  <ng-template #headerMenuExtra>
+    <button mat-menu-item (click)="resetState()">
+      <mat-icon color="primary">autorenew</mat-icon>
+      <span>Reset table</span>
+    </button>
+    @if (!tableSettings.hideExport) {
+      <button mat-menu-item (click)="exportToCsv()">
+        <mat-icon color="primary">file_download</mat-icon>
+        <span>Export Table</span>
+      </button>
+    }
+    @if (tableId) {
+      <button stop-propagation mat-menu-item (click)="pm.trigger()?.toggleMenu()">
+        <mat-icon color="primary">people</mat-icon>
+        <span>Profiles</span>
+      </button>
+      <tb-profiles-menu class="profiles-menu" #pm [$tableId]="tableId" (onSaveState)="onSaveState.emit($event)"/>
+    }
+  </ng-template>
+</ng-container>

package/src/table-builder/components/table-container/table-container.scss

@@ -0,0 +1,47 @@
+.header-wrapper{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width:100%;
+}
+
+
+.flx-row-end{
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.flat-menu{
+  line-height: initial;
+  height: initial;
+}
+
+.pointer{
+  cursor: pointer;
+}
+
+.add-key{
+  width: 90%;
+}
+
+.paginator{
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  background-color: white;
+  bottom: 0px;
+  position: sticky;
+  border-top: .5px solid rgba(0,0,0,.12);
+}
+.profiles-menu{
+  visibility: hidden;
+  width: 0px;
+  height: 0px;
+  display: block;
+  overflow: hidden;
+  position: absolute;
+  top: 50px;
+}

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

@@ -0,0 +1,154 @@
+import { BehaviorSubject, of } from 'rxjs';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { SpaceCasePipe, PhoneNumberPipe } from '../../../utilities';
+import { FilterComponent } from '../filter/filter.component';
+import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FieldType } from '../../interfaces/report-def';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { DateFilterComponent } from '../date-filter/date-filter.component';
+import { TableContainerComponent } from './table-container';
+import { GenFilterDisplayerComponent } from '../table-container-filter/gen-filter-displayer/gen-filter-displayer.component';
+import { GenericTableComponent } from '../generic-table/generic-table.component';
+import { GenColDisplayerComponent } from '../gen-col-displayer/gen-col-displayer.component';
+import { ColumnTotalPipe } from '../../pipes/column-total.pipe';
+import { TableBuilder } from '../../classes/table-builder';
+import { MultiSortDirective } from '../../directives/multi-sort.directive';
+import { TableBuilderConfigToken } from '../../classes/TableBuilderConfig';
+import { provideMockStore } from '@ngrx/store/testing';
+import { PaginatorComponent } from '../generic-table/paginator.component';
+import {  LetModule, PushModule } from '@ngrx/component';
+import { HarnessLoader, parallel } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import {MatTableHarness} from '@angular/material/table/testing';
+import { TransformCreator } from '../../services/transform-creator';
+
+const data = [
+  {
+    name: 'Joe',
+    age: 10,
+    balance: 25
+  },
+  {
+    name: 'Jane',
+    age: 20,
+    balance: 35
+  }
+];
+const metaData =  [
+  {
+    key: 'name',
+    fieldType: FieldType.String,
+    additional: {},
+    order : 1
+  },
+  {
+    key: 'age',
+    fieldType: FieldType.Number,
+    additional: {},
+    order : 2
+  },
+  {
+    key: 'balance',
+    fieldType: FieldType.Number,
+    additional: {},
+    order : 3
+  }
+];
+
+const initialState = {fullTableState: {
+  'test-id': {
+    metaData,
+    hiddenKeys: [],
+    pageSize: 10,
+    initialized : true ,
+    filters: [],
+  }
+},
+globalStorageState : {
+  localProfiles: {}
+}};
+describe('table container', () => {
+  let fixture: ComponentFixture<TableContainerComponent>;
+  let component: TableContainerComponent;
+  let loader: HarnessLoader;
+
+  beforeEach(() => {
+
+    TestBed.configureTestingModule({
+      declarations: [
+        TableContainerComponent,
+        FilterComponent,
+        GenFilterDisplayerComponent,
+        GenericTableComponent,
+        PaginatorComponent,
+        GenColDisplayerComponent,
+        SpaceCasePipe,
+        CurrencyPipe,
+        ColumnTotalPipe,
+        DateFilterComponent,
+        MultiSortDirective,
+      ],
+      providers: [
+       { provide : TableBuilderConfigToken , useValue: {defaultTableState: { }}},
+       provideMockStore({ initialState }),
+       DatePipe,
+       TransformCreator,
+       CurrencyPipe,
+       PhoneNumberPipe,
+      ],
+      imports: [
+        NoopAnimationsModule,
+        CommonModule,
+        FormsModule,
+        LetModule,
+      ]
+    })
+    .compileComponents();
+    fixture = TestBed.createComponent(TableContainerComponent);
+    component = fixture.componentInstance;
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  it('can create component', () => {
+    component.tableId = 'test-id';
+    component.tableBuilder = new TableBuilder(of(data));
+    fixture.detectChanges();
+    expect(component).toBeDefined();
+  });
+
+  it('can add metadata dynamicaly after the table has already been rendered', async () => {
+    const md = new BehaviorSubject(metaData);
+    component.tableId = 'test-id';
+    component.tableBuilder = new TableBuilder(of(data), md);
+
+    fixture.detectChanges();
+    expect(component).toBeDefined();
+
+    const tables = await loader.getAllHarnesses(MatTableHarness);
+    expect(tables.length).toBe(1);
+    const table = tables[0];
+
+    let rows = await table.getRows();
+
+    let cells = (await parallel(() => rows.map(row => row.getCells()))).map(row => row.length);
+
+    expect(cells).toEqual([3, 3]);
+
+    md.next([...metaData, {
+        key: 'dynamic',
+        fieldType: FieldType.String,
+        order : 4,
+        additional: {},
+    }]);
+
+    fixture.detectChanges();
+
+    rows = await table.getRows();
+
+    cells = (await parallel(() => rows.map(row => row.getCells()))).map(row => row.length);
+
+    expect(cells).toEqual([4, 4]);
+
+  });
+});

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

@@ -0,0 +1,356 @@
+import {
+  Component,
+  Input,
+  EventEmitter,
+  Output,
+  ContentChildren,
+  QueryList,
+  ChangeDetectionStrategy,
+  Predicate,
+  ViewChild,
+  inject,
+  TemplateRef,
+  ContentChild,
+  ElementRef,
+  OnInit,
+  OnDestroy,
+  Injector,
+  contentChildren,
+  computed,
+  effect,
+  untracked,
+  runInInjectionContext,
+  input,
+} from '@angular/core';
+import { BehaviorSubject, Observable, ReplaySubject, combineLatest, of } from 'rxjs';
+import { ArrayAdditional, FieldType, MetaData } from '../../interfaces/report-def';
+import { map, mergeAll, scan, startWith, timestamp, mergeMap, switchMap } from 'rxjs/operators';
+import { TableBuilder } from '../../classes/table-builder';
+import { MatRowDef } from '@angular/material/table';
+import { CustomCellDirective, TableCustomFilterDirective, TableFilterDirective } from '../../directives';
+import { stateIs, TableStore } from '../../classes/table-store';
+import { ExportToCsvService } from '../../services/export-to-csv.service';
+import { ArrayDefaults } from '../../classes/DefaultSettings';
+import { TableBuilderConfigToken } from '../../classes/TableBuilderConfig';
+import { InitializationState, TableState } from '../../classes/TableState';
+import { WrapperFilterStore } from '../table-container-filter/table-wrapper-filter-store';
+import { cloneDeep } from 'lodash';
+import { defaultShareReplay } from '../../../rxjs';
+import { createFilterFunc, isCustomFilter, isFilterInfo } from '../../classes/filter-info';
+import { Dictionary } from '../../interfaces/dictionary';
+import { TableWrapperDirective } from '../../directives/table-wrapper.directive';
+import { createLinkCreatorDict } from '../../services/link-creator.service';
+import { TableBuilderStateStore } from '../../ngrx/tableBuilderStateStore';
+import { containerImports } from './table-container-imports';
+import { updateFilterInfoState, updateFilterPredicateState, updateFilterState } from './table-container.helpers/filter-state.helpers';
+import { initialSortState, updateSortState } from './table-container.helpers/sort-state.helpers';
+import { getAllGroupHeaderNames, initialGroupByState, updateGroupByState } from './table-container.helpers/groupBy.helpers';
+import { sortAndFilterData } from './table-container.helpers/data-state.helpers';
+import { TableProps, defaultProps } from './tableProps';
+import { PaginatorComponent } from '../generic-table/paginator.component';
+import { TableBuilderDataSource } from '../../classes/TableBuilderDataSource';
+import { GenericTableComponent } from '../generic-table/generic-table.component';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { DataStore } from '../../classes/data-store';
+import { PersistedTableSettings } from '../../classes/table-builder-general-settings';
+
+
+@Component({
+    selector: 'tb-table-container',
+    templateUrl: './table-container.html',
+    styleUrls: ['./table-container.scss', '../../styles/collapser.styles.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore],
+    standalone: true,
+    imports: containerImports
+}) export class TableContainerComponent<T = any> implements OnInit, OnDestroy {
+  props: TableProps = { ...defaultProps };
+  @Output() data = new BehaviorSubject<T[]>([]);
+
+  public state = inject(TableStore);
+  private dataStore = inject(DataStore);
+  public config = inject(TableBuilderConfigToken);
+  public exportToCsvService = inject(ExportToCsvService<T>);
+  public wrapper = inject(TableWrapperDirective, { optional: true });
+  public stateService = inject(TableBuilderStateStore);
+  public injector = inject(Injector);
+
+  filterDirectives = contentChildren(TableFilterDirective, {descendants: true});
+  customFilterDirectives = contentChildren(TableCustomFilterDirective, {descendants: true});
+
+  $allFilterDirectives = computed( () =>  {
+      if(this.wrapper) {
+        return [...this.filterDirectives(), ...this.customFilterDirectives(), ...this.wrapper.$registrations()];
+      } {
+        return [...this.filterDirectives(), ...this.customFilterDirectives()];
+      }
+    }
+  );
+
+  $isInitializationState = (state: InitializationState) => computed(() =>
+    this.state.selectSignal(s => s.initializationState >= state)()) ;
+
+  allFilterDirectivesEffect = effect(() => {
+    const loaded = this.$isInitializationState(InitializationState.LoadedFromStore)();
+    const stateFilters = this.state.$filters();
+    const filterDirectives = this.$allFilterDirectives();
+    untracked(() => {
+      if(loaded) {
+        filterDirectives.filter( f => !f.used).forEach( f => {
+          f.used = true;
+          if(f.savable) {
+            var filter = stateFilters[f.filterId];
+            if(isFilterInfo(filter)) {
+              const filterDirective: TableFilterDirective = f as TableFilterDirective;
+              filterDirective.fieldType = filter.fieldType;
+              filterDirective.filterType = filter.filterType;
+              filterDirective.setFilterValue(filter.filterValue);
+              filterDirective.key = filter.key;
+              filterDirective.update();
+            }
+            if(isCustomFilter(filter)) {
+              f.active = filter.active ?? false;
+            }
+            this.state.addFilter((f.filter$ as any));
+          }
+        });
+      }
+    })
+  });
+
+  @ViewChild(PaginatorComponent)  paginatorComponent?: PaginatorComponent;
+  @ViewChild(GenericTableComponent)  genericTable?: GenericTableComponent;
+  _$customRows = contentChildren(MatRowDef<any>);
+  $customRows = computed(() => [...this._$customRows()]);
+  $customCells = contentChildren(CustomCellDirective);
+  $myColumns = computed(() => {
+    return this.state.$metaDataArray().map( metaData => ({metaData, customCell: this.$customCells().find(cc => cc.customCell === metaData.key)}))
+  })
+  @ContentChild('table', {read: ElementRef}) tableElRef!: ElementRef;
+
+  @Input({ required: true }) tableBuilder!: TableBuilder;
+  $tableId = input<string | undefined>(undefined, { alias: 'tableId'})
+  @Input() set indexColumn(val: boolean) {
+    this.props.indexColumn = val;
+  }
+  @Input() set selectionColumn(val: boolean) {
+    this.props.selectionColumn = val;
+  }
+  @Input() set isSticky(val: boolean) {
+    this.props.isSticky = val;
+  }
+  @Input() set stickyFooter(val: boolean) {
+    this.props.stickyFooter = val;
+  }
+  @Input() set pageSize(value: number) {
+    this.state.setPageSize(value);
+  }
+  @Input() set groupHeaderTemplate( template: TemplateRef<any>) {
+    this.props.groupHeaderTemplate = template;
+  }
+  @Input() set groupHeaderHeight(value: number) {
+    this.props.groupHeaderHeight = value;
+  }
+  @Input() trackBy!: string;
+  @Input() inputFilters?: Observable<Array<Predicate<T>>>;
+
+  @Output() selection$ = new EventEmitter();
+  $data = toSignal(this.data, { initialValue: [] });
+  @Output() onStateReset = new EventEmitter();
+  @Output() onSaveState = new EventEmitter();
+  @Output() state$ = this.state.getSavableState().pipe(
+    map(state => cloneDeep(state)),
+    defaultShareReplay(),
+  );
+
+  clearSelections(){
+    this.genericTable?.selection.clear(true);
+  }
+  displayData = new ReplaySubject<T[]>(1);
+
+  $displayData = toSignal(this.displayData, { initialValue: [] });
+
+  $collapseFooter = this.state.$collapseFooter;
+  $collapseHeader = this.state.$collapseHeader;
+
+  ngOnDestroy(){
+    const tableId = this.$tableId();
+    if(tableId) {
+      this.stateService.saveTableStateToLocal({ tableId, tableState: this.state.getSavableStateSignal() });
+    }
+  }
+
+  firstPage(): void {
+   this.paginatorComponent?.$paginator()?.firstPage();
+  }
+
+  lastPage(): void {
+   this.paginatorComponent?.$paginator()?.lastPage();
+  }
+
+  resetState() {
+    this.customFilterDirectives().forEach( cf => cf.reset());
+    this.filterDirectives().forEach( cf => cf.reset() );
+    this.state.resetState();
+    this.onStateReset.next(null)
+  }
+  $persistedState = computed(() => {
+    const tableId = this.$tableId();
+    if(tableId) {
+      return this.stateService.$selectLocalTableStateForView(tableId)();
+    }
+    return undefined
+  });
+
+  private initializeStateEffect = effect(() => {
+    const metaLoaded = this.$isInitializationState(InitializationState.MetaDataLoaded)();
+    const tableId = this.$tableId();
+    const persistedState = this.$persistedState();
+    untracked(() => {
+      if(metaLoaded) {
+        this.state.setTableSettings(this.tableBuilder.settings);
+        if(tableId){
+          if(persistedState){
+            persistedState.persistedTableSettings = new PersistedTableSettings(persistedState.persistedTableSettings);
+            this.state.updateStateFromPersistedState(persistedState);
+            return;
+          }
+        }
+        this.state.setInitializationState(InitializationState.LoadedFromStore);
+      }
+    });
+  });
+  customFilters$ = new BehaviorSubject<Predicate<T>[]>([]);
+  initializeData() {
+
+    const predicateFilters$ = combineLatest([this.inputFilters?.pipe(startWith([])) ?? of([] as Predicate<T>[]), this.customFilters$])
+      .pipe(map(([a, b]) => [...a, ...b]));
+
+    const filters$ = combineLatest([
+      this.state.filters$.pipe(scan(updateFilterInfoState, { allFilters: {} }), timestamp()),
+      predicateFilters$.pipe(scan(updateFilterPredicateState, {allFilters: [] as Predicate<T>[]}), timestamp())
+    ])
+    .pipe(
+      map(([filterInfo, pred]) => updateFilterState(filterInfo, pred))
+    );
+
+    const sortsState$ = this.state.sort$.pipe(scan(updateSortState, initialSortState));
+
+    const sortedAndFilteredData$ = sortAndFilterData(this.tableBuilder.getData$(), sortsState$, filters$);
+
+    const flatGrouped$ = combineLatest([sortedAndFilteredData$.pipe(timestamp()), this.state.groupByKeys$.pipe(timestamp()), this.state.expandedGroups$.pipe(timestamp())]).pipe(
+      scan(updateGroupByState, initialGroupByState),
+      map(({displayData}) => displayData),
+      defaultShareReplay(),
+    );
+
+    this.state.on(sortedAndFilteredData$, (data) => {
+      this.data.next(data);
+      this.dataStore.patchState({dataLen: data.length});
+    });
+
+    this.state.on(flatGrouped$, (data) => {
+      this.displayData.next(data);
+    });
+  }
+  ngOnInit() {
+    const customCells$ = toObservable(this.$customCells, { injector: this.injector });
+    this.state.setLinkMaps(this.tableBuilder.metaData$!.pipe(
+      map(createLinkCreatorDict)
+    ));
+    const customCellMeta = customCells$.pipe(switchMap(c => c.length ? combineLatest(c.map(c => c.$metaData)) : of([] as MetaData[])));
+    const metaForState = combineLatest([this.tableBuilder.metaData$,  customCellMeta]).pipe(map(([mds, customCells]) => {
+      mds = mds.map(this.mapArrayFieldsMetaDatas);
+      return [
+        ...mds,
+        ...customCells.map( md => this.mergeMetaData(md, mds.find( item => item.key === md.key ) ))
+      ]
+    }));
+    this.state.setMetaData(metaForState);
+    runInInjectionContext(this.injector, () => {
+      const ds = new TableBuilderDataSource<T>(
+        this.$displayData,
+        this.state,
+        this.dataStore
+      );
+      this.state.updateState({
+        props: {
+          dataSource: ds,
+          ...this.props
+        }
+      })
+    })
+    this.initializeData();
+  }
+
+  mergeMetaData(metaData1: MetaData, metaData2?: MetaData) {
+    if(!metaData2){
+      metaData1.noExport = true;
+      return metaData1
+    }
+    if(!metaData1.displayName) metaData1.displayName = metaData2.displayName;
+    if(!metaData1.preSort) metaData1.preSort = metaData2.preSort;
+    if(!metaData1.order) metaData1.order = metaData2.order;
+    if(!metaData1.width) metaData1.width = metaData2.width;
+    if(metaData2.fieldType) metaData1.fieldType = metaData2.fieldType;
+    metaData1.noExport = !metaData2;
+    return metaData1;
+  }
+
+  exportToCsv(): void {
+    this.exportToCsvService.exportToCsv(this.$data());
+  }
+
+  expandAllGroups = () => {
+    const groupHeaders = getAllGroupHeaderNames(this.$displayData());
+    this.state.expandAllOfGroup({ groupHeadersByKey: groupHeaders });
+  }
+
+  collapseAllGroups = () => this.state.collapseAll();
+
+  ngAfterContentInit() {
+    this.state.runOnceWhen(
+      stateIs(InitializationState.LoadedFromStore),
+      state => {
+        this.addFilterDirectives(state);
+        this.state.updateState({ initializationState: InitializationState.Ready });
+      });
+  }
+
+
+  mapArrayFieldsMetaDatas = (meta : MetaData<T>) => {
+    if(meta.fieldType === FieldType.Array){
+      const additional = {...meta.additional} as ArrayAdditional;
+      additional.arrayStyle = additional?.arrayStyle ?? ArrayDefaults.arrayStyle;
+      additional.limit = additional.limit ?? this.config.arrayDefaults?.limit ?? ArrayDefaults.limit;
+      return {...meta,additional}
+    }
+    return meta;
+  }
+
+
+  addFilterDirectives = (state: TableState) => {
+    const customFilters$ =  toObservable(this.$allFilterDirectives, {injector: this.injector}).pipe(
+      mergeMap( customerFilters => customerFilters
+        .filter( filter => !filter.savable )
+        .map(filter => filter.filter$ )
+      ),
+      mergeAll(),
+      scan( (a,b)=> {
+          if(b.active) {
+            a[b.filterId] = isCustomFilter(b) ? b.predicate : createFilterFunc(b);
+          } else {
+            delete a[b.filterId] ;
+          }
+      return a;
+      }, {} as Dictionary<Predicate<any>>),
+      map( f => Object.values(f))
+    );
+
+    this.state.on(customFilters$, (f) => {
+      this.customFilters$.next(f);
+    });
+  }
+
+  $useVirtual = this.state.$isVirtual;
+}

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

@@ -0,0 +1,20 @@
+import { TemplateRef } from '@angular/core';
+import { TableBuilderDataSource } from '../../classes/TableBuilderDataSource';
+
+export interface TableProps {
+  indexColumn: boolean;
+  selectionColumn: boolean;
+  isSticky: boolean;
+  stickyFooter:boolean;
+  groupHeaderTemplate?: TemplateRef<any>;
+  dataSource?: TableBuilderDataSource<any>;
+  groupHeaderHeight?: number;
+}
+
+export const defaultProps: TableProps = {
+  indexColumn: false,
+  selectionColumn: false,
+  isSticky: true,
+  stickyFooter: false,
+  groupHeaderHeight: undefined,
+}