@one-paragon/angular-utilities 1.2.11 → 1.2.12

package/src/table-builder/components/gen-col-displayer/gen-col-displayer.component.html

@@ -0,0 +1,55 @@
+@if(columns$ | async; as displayCols){
+  <span matTooltip="Show/hide columns">
+    <button mat-icon-button [matMenuTriggerFor]="menu">
+      <mat-icon color="primary">visibility_off</mat-icon>
+    </button>
+  </span>
+  <mat-menu #menu="matMenu" class="my-mat-menu">
+
+    <button mat-menu-item>
+      <span matTooltip="Close">
+        <button class="filter-button" mat-icon-button>
+          <mat-icon>close</mat-icon>
+        </button>
+      </span>
+    </button>
+
+    <button mat-menu-item stop-propagation>
+      <span matTooltip="Show all columns">
+        <button mat-icon-button (click)="reset(displayCols)">
+          <mat-icon color="primary">done_all</mat-icon>
+        </button>
+      </span>
+
+      <span matTooltip="Hide all columns">
+        <button mat-icon-button (click)="unset(displayCols)">
+          <mat-icon color="primary">cancel</mat-icon>
+        </button>
+      </span>
+    </button>
+
+    <div cdkDropList (cdkDropListDropped)="drop($event)" stop-propagation [cdkDropListLockAxis]="'y'">
+      @for (col of displayCols; track col.key) {
+        <button [class.isHidden]="!col.isVisible" stop-propagation mat-menu-item cdkDrag [cdkDragData]="col">
+        <div (click)="col.isVisible = !col.isVisible; emit(displayCols)" style="display: flex; align-items: center;">
+          @if(col.isVisible){
+            <button mat-icon-button matTooltip="Hide Column" class="show-hide">
+              <mat-icon color="primary">check_box</mat-icon>
+            </button>
+          } @else {
+            <button mat-icon-button matTooltip="Show Column" class="show-hide">
+              <mat-icon>indeterminate_check_box</mat-icon>
+            </button>
+          }
+          
+          <p class="label">
+            {{col.displayName || (col.key | spaceCase) }}
+          </p>
+
+        </div>
+      </button>
+      }
+
+    </div>
+  </mat-menu>
+}

package/src/table-builder/components/gen-col-displayer/gen-col-displayer.component.scss

@@ -0,0 +1,57 @@
+.show-hide {
+  margin-right: 15px;
+  height: 24px;
+  width: 24px;
+  padding: 4px;
+}
+
+.label {
+    color: cornflowerblue;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: left;
+    margin: 0;
+    font-size: 17px;
+    font-weight: 700;
+    display: inline-block;
+    width: 66%;
+}
+
+.row {
+    margin: 0;
+    padding: 0;
+}
+
+.isHidden {
+    background-color: lightgrey;
+    color: darkgray;
+    font-weight: 700;
+    font-size: 17px;
+    white-space: nowrap;
+}
+
+.filter-button {
+    margin-top: 10px;
+}
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  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: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+.mdc-list-item__primary-text{
+  display: inline-block;
+  width: 100%;
+}
+

package/src/table-builder/components/gen-col-displayer/gen-col-displayer.component.ts

@@ -0,0 +1,59 @@
+import { Component, ChangeDetectionStrategy, inject } from '@angular/core';
+import { DisplayCol } from '../../classes/display-col';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { orderedCodeVisibleMetaData, TableStore } from '../../classes/table-store';
+import {CdkDragDrop, DragDropModule} from '@angular/cdk/drag-drop';
+import { AsyncPipe } from '@angular/common';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { SpaceCasePipe, StopPropagationDirective } from '../../../utilities';
+import { defaultShareReplay } from '../../../rxjs';
+
+@Component({
+  selector: 'tb-col-displayer',
+  templateUrl: './gen-col-displayer.component.html',
+  styleUrls: ['./gen-col-displayer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush ,
+  standalone: true,
+  imports: [
+    AsyncPipe, MatTooltipModule, MatIconModule, MatButtonModule, MatMenuModule, StopPropagationDirective,
+    DragDropModule, SpaceCasePipe
+  ]
+})
+export class GenColDisplayerComponent {
+  private tableState = inject(TableStore);
+
+  columns$: Observable< DisplayCol[]>;
+  constructor() {
+    this.columns$ = this.tableState.state$.pipe(
+      map( state =>
+        orderedCodeVisibleMetaData(state)
+          .map( md => ({
+            key: md.key,
+            displayName: md.displayName,
+            isVisible: !state.hiddenKeys.includes(md.key)
+          }))
+      ),
+      defaultShareReplay()
+    );
+  }
+
+  reset(displayCols: DisplayCol[]) {
+    displayCols.forEach(c => c.isVisible = true);
+    this.emit(displayCols);
+  }
+  drop(event: CdkDragDrop<string[]>) {
+    this.tableState.setUserDefinedOrder({ newOrder: event.currentIndex, oldOrder:event.previousIndex })
+  }
+  unset(displayCols: DisplayCol[]) {
+    displayCols.forEach(c => c.isVisible = false);
+    this.emit(displayCols);
+  }
+
+  emit(displayCols: DisplayCol[]) {
+    this.tableState.setHiddenColumns(displayCols.map( c => ({key: c.key, visible: c.isVisible})));
+  }
+}

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

@@ -0,0 +1,78 @@
+<mat-table
+  cdkDropList
+  cdkDropListLockAxis='x'
+  cdkDropListOrientation="horizontal"
+  (cdkDropListDropped)="drop($event)"
+  class="table-drag-list"
+  [class]="($footerRowStyle())"
+  #table
+  [dataSource]="state.props().dataSource!"
+  [trackBy]="trackByFunction"
+  [style]="tableWidth | async "
+>
+
+  <!-- select column -->
+  <ng-container matColumnDef="select">
+
+    <mat-header-cell *matHeaderCellDef  class="select-column">
+      <mat-checkbox (change)="$event ? masterToggle() : null"
+                    [checked]="!!(masterToggleChecked$ | async)"
+                    [indeterminate]="masterToggleIndeterminate$ | async">
+      </mat-checkbox>
+    </mat-header-cell>
+
+    <mat-cell *matCellDef="let row" class="select-column">
+      <mat-checkbox
+        (click)="$event.stopPropagation()"
+        (change)="$event ? selection.toggle(row) : null"
+        [checked]="selection.isSelected(row)"/>
+    </mat-cell>
+
+    <mat-footer-cell *matFooterCellDef class="select-column">
+      {{ selection.selected.length }}
+    </mat-footer-cell>
+  </ng-container>
+
+
+  <!-- index column -->
+  <ng-container matColumnDef="index">
+    <mat-header-cell *matHeaderCellDef class="f-mat-header-cell" class="index-column">#
+    </mat-header-cell>
+    <mat-cell *matCellDef="let i = index;" class="index-column">
+      {{ 1 + i + offsetIndex }}
+    </mat-cell>
+    <mat-footer-cell *matFooterCellDef class="index-column"></mat-footer-cell>
+  </ng-container>
+
+  <!-- Grouping -->
+  <ng-container matColumnDef="groupHeader">
+    <mat-cell *matCellDef="let row">
+      @let expanded = (state.getIsExpanded | func : row.key : row.groupName );
+      <div [style.paddingLeft]="row.padding + 'px !important'">
+        <button mat-icon-button (click)="setExpanded(row.key, row.groupName, !expanded());">
+          @if (!expanded()) {
+            <mat-icon>chevron_right</mat-icon>
+          } @else {
+            <mat-icon>expand_more</mat-icon>
+          }
+        </button>
+        {{ getTransform | func : row.key :  row.groupHeaderDisplay }} ({{ row.length }})
+      </div>
+      <div style="flex-grow: 1">
+        <ng-container *ngTemplateOutlet="state.props().groupHeaderTemplate!; context: { element: row }"></ng-container>
+      </div>
+    </mat-cell>
+  </ng-container>
+
+  <mat-row [style.height]="$rowHeight()" [style.min-height]="$rowHeight()"
+           *matRowDef="let row; columns: $keys(); let i = index"/>
+  <mat-row [style.height]="state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()"
+           [style.min-height]="state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()"
+           *matRowDef="let row; columns: ['groupHeader']; when: isGroupHeader" style="background-color: white;"/>
+</mat-table>
+
+<mat-header-row [style.height]="$headerHeight()" [style.min-height]="$headerHeight()"
+  *matHeaderRowDef="$keys(); sticky: state.props().isSticky" [style.top.px]="((offset$ | async)! * -1)"/>
+<mat-footer-row [style.height]="$rowHeight()" [style.min-height]="$rowHeight()"
+  *matFooterRowDef="$keys(); sticky: $stickyFooter() "
+  [style.bottom.px]="$stickyFooter() ? (offset$ | async) : undefined"/>

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

@@ -0,0 +1,42 @@
+
+:host{
+  --mat-paginator-container-size: initial;
+}
+.select-column {
+  min-width: var(--tb-min-select-column-width, 42px)
+}
+.index-column {
+  min-width: var(--tb-min-index-column-width, 42px)
+}
+.mat-mdc-row:nth-child(odd) {
+  background-color: var(--tb-odd-row-background-color, #cdeefe);
+}
+.page-amounts{
+  color: rgba(0, 0, 0, 0.54);
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+  font-size: 12px;
+  margin-right: .2rem;
+}
+:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+:host::ng-deep{
+  & .mdc-data-table__cell, .mdc-data-table__header-cell, .mdc-data-table__cell, .mdc-data-table__header-cell{
+    padding: var(--tb-cell-padding, 0 0 0 .2rem);
+    line-height: var(--tb-cell-line-height, normal);
+  }
+}
+::ng-deep .op-date-time-input{
+  line-height: 3rem;
+  font-size: .9rem;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+  padding-left: 0.2rem;
+  width: 12rem;
+
+}
+.small-footer{
+  mat-footer-row{
+    min-height: 1rem;
+    height: 1rem;
+  }
+}

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

@@ -0,0 +1,299 @@
+import { Component, ViewChild, Input, ChangeDetectionStrategy, Output, SimpleChanges, OnInit, QueryList, ViewContainerRef, Injector, EventEmitter, computed, inject, input, viewChild, effect, untracked, signal } from '@angular/core';
+import { MatFooterRowDef, MatHeaderRowDef, MatRowDef, MatTable, MatTableModule } from '@angular/material/table';
+import { Observable, combineLatest } from 'rxjs';
+import { SelectionChange, SelectionModel } from '@angular/cdk/collections';
+import { TableStore } from '../../classes/table-store';
+import { map } from 'rxjs/operators';
+import { ColumnBuilderComponent } from '../column-builder/column-builder.component';
+import { Dictionary } from '../../interfaces/dictionary';
+import { FieldType } from '../../interfaces/report-def';
+import { previousAndCurrent } from '../../../rxjs/rxjs-operators';
+import { ColumnInfo } from '../../interfaces/ColumnInfo';
+import { CdkDragDrop, CdkDropList, DragDropModule } from '@angular/cdk/drag-drop';
+import { FunctionPipe } from '../../../utilities';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TransformCreator } from '../../services/transform-creator';
+import { initIndexSymbol } from '../table-container/table-container.helpers/sort-state.helpers';
+import { VirtualScrollOptions } from '../../classes/table-builder-general-settings';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { DataStore } from '../../classes/data-store';
+
+@Component({
+  selector: 'tb-generic-table',
+  templateUrl: './generic-table.component.html',
+  styleUrls: ['./generic-table.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
+    MatTooltipModule, AsyncPipe, FunctionPipe,
+  ],
+})
+export class GenericTableComponent implements OnInit {
+  protected state = inject(TableStore);
+  private dataStore = inject(DataStore);
+  private viewContainer = inject(ViewContainerRef);
+  private transformCreator = inject(TransformCreator);
+
+  $headerRow = viewChild(MatHeaderRowDef);
+  $footerRow = viewChild(MatFooterRowDef);
+  $table = viewChild(MatTable);
+
+  drop(event: CdkDragDrop<string[]>) {
+    this.state.setUserDefinedOrder({ newOrder:event.currentIndex, oldOrder:event.previousIndex })
+  }
+  _trackBy?: string;
+  @Input() set trackBy(trackBy: string){
+    if(trackBy){
+      this._trackBy = trackBy;
+      this.trackByFunction = (index:number, item: any) => item[trackBy];
+    }
+    this.setUpSelections(trackBy);
+  }
+  get trackBy(): string | undefined { return this._trackBy }
+  $displayData = input.required<any[]>({ alias: 'displayData' });
+  $displayDataLength = computed(() => this.$displayData()?.length || 0);
+  $hasFooterMeta = computed(() => this.state.$metaDataArray().some(md => !!md.additional?.footer))
+  $data = input.required<any[]>({ alias: 'data' })
+  data$ = toObservable(this.$data);
+  @Input() rows!: QueryList<MatRowDef<any>>;
+  @Input() columnBuilders!: ColumnBuilderComponent[];
+  $columnInfos = input.required<ColumnInfo[]>({ alias: 'columnInfos' });
+  $hasCustomFooter = computed(() => this.$columnInfos()?.some(ci => !!ci.customCell?.columnDef?.footerCell))
+  @ViewChild(CdkDropList, { static: true }) dropList!: CdkDropList;
+  $footerRowStyle = computed(() => {
+    const hasData = !!this.$displayDataLength();
+    const metaFooter = this.$hasFooterMeta();
+    const customFooter = this.$hasCustomFooter();
+    const hasSelectionColumn = this.state.props().selectionColumn;
+    return customFooter || (hasData && (metaFooter || hasSelectionColumn)) ? 'regular-footer' : hasData ? 'no-footer' : 'small-footer';
+  });
+  $showFooterRow = computed(() => this.$footerRowStyle() !== 'no-footer');
+  currentColumns!: string[];
+  _injector = inject(Injector);
+  injector = Injector.create({
+    providers: [
+      {provide: MatTable, useFactory: ()=> this.$table() },
+      {provide: CdkDropList, useFactory: ()=> this.dropList },
+    ],
+    parent: this._injector
+  });
+  rowDefArr :MatRowDef<any>[] = [];
+  $hasSelectColumn = computed(() => this.state.selectSignal(state => state.props.selectionColumn)());
+  $hasIndexColumn = computed(() => this.state.selectSignal(state => state.props.indexColumn)());
+  myColumns = signal<Dictionary<ColumnBuilderComponent>>({});
+  $showHeader = computed(() => !this.state.tableSettings().hideColumnHeader)
+  offset$ = this.dataStore.select( s => s.virtualScrollOffset );
+  offsetIndex = 0;
+  dataView!: Observable<any[]>;
+
+  constructor() {
+    this.setUpSelections();
+    effect(() => {
+      const columnInfos = this.$columnInfos() || [];
+      untracked(() => {
+        Object.entries(this.myColumns()).forEach(([key, value]) => {
+          const columnInfo = columnInfos.find(ci => ci.metaData.key === key);
+          if(!columnInfo || columnInfo.customCell !== value.customCell) {
+            delete this.myColumns()[key];
+            this.$table()?.removeColumnDef(value.columnDef);
+          }
+        })
+        columnInfos.forEach(ci => this.addMetaData(ci))
+      })
+    });
+    effect(() => {
+      const headerRow = this.$headerRow();
+      const showHeader = this.$showHeader();
+      const table = this.$table();
+      untracked(() => {
+        if(headerRow && showHeader && table) table.addHeaderRowDef(headerRow);
+        else if(headerRow && table) table.removeHeaderRowDef(headerRow);
+      })
+    });
+    effect(() => {
+      const footerRow = this.$footerRow();
+      const showFooter = this.$showFooterRow();
+      const table = this.$table();
+      untracked(() => {
+        if(footerRow && showFooter && table) table.addFooterRowDef(footerRow);
+        else if(footerRow && table) table.removeFooterRowDef(footerRow);
+      })
+    });
+  }
+
+  defaultTrackBy = (index:number, item: any) => item[initIndexSymbol];
+  trackByFunction = this.defaultTrackBy;
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.rows && this.rows && this.myColumns().length) {
+      this.initializeRowDefs([...this.rows]);
+    }
+  }
+  $keys = computed(() => {
+    const displayed = this.state.$orderedVisibleColumns();
+    const built = this.myColumns();
+    const keys = displayed.filter(d => !!built[d]);
+    if(this.$hasSelectColumn()){
+      keys.unshift('select');
+    }
+    if(this.$hasIndexColumn()) {
+      keys.unshift('index');
+    }
+    return keys;
+  })
+  keys$ = toObservable(this.$keys);
+  ngOnInit() {
+    this.initializeRowDefs([...this.rows]);
+
+    this.state.on(this.keys$, keys => {
+      this.rowDefArr?.forEach(row => row.columns = keys)
+    });
+
+    this.state.on(this.selectableData$, (data) => {
+      if(this.selection.selected.length){
+        const trackByFunction = this.trackBy ? (s) => data.every(d =>  d[this.trackBy!] !== s[this.trackBy!]) : s => !data.includes(s);
+        const removed = this.selection.selected.filter(trackByFunction);
+        this.selection.deselect(...removed);
+      }
+    });
+
+    if(this.state.tableSettings().usePaginator || this.state.tableSettings().useVirtualScroll) {
+      this.state.on(combineLatest([this.state.state$, this.dataStore.state$]), ([state, data]) => {
+        this.offsetIndex = data.virtualEnds.start;
+        if(this.state.tableSettings().usePaginator) {
+          this.offsetIndex += (state.pageSize * state.currentPage);
+        }
+      });
+    }
+  }
+
+
+  isGroupHeader(_: number, row: { isGroupHeader: boolean }) {
+    return row.isGroupHeader;
+  }
+
+  setExpanded(key: string, groupKey: string, isExpanded: boolean): void {
+    this.state.updateExpandedGroups({ key , isExpanded, groupKey });
+  }
+
+  addMetaData(column: ColumnInfo) {
+    const columnBuilder = this.myColumns()[column.metaData.key];
+    if(columnBuilder) {
+      columnBuilder.metaData = column.metaData;
+    } else {
+      const component = this.viewContainer.createComponent(ColumnBuilderComponent, {
+        index: 0,
+        injector: this.injector
+      });
+      component.instance.customCell = column.customCell;
+      component.instance.metaData = column.metaData;
+      component.instance.data$ = this.data$;
+      this.myColumns.update(mc => ({...mc, [column.metaData.key]: component.instance}));
+    }
+  }
+
+  initializeRowDefs = (defs:MatRowDef<any>[])=>{
+    const table = this.$table();
+    if(!table) return;
+    this.rowDefArr.forEach(r=> table.removeRowDef(r));
+    this.rowDefArr = defs;
+    defs.forEach(r => {
+      r.columns = this.$keys().concat(Object.values(this.myColumns()).filter(c => c.metaData.fieldType !== FieldType.Hidden).map(c => c.metaData.key));
+      table.addRowDef(r)
+    });
+  }
+
+  selection! : SelectionModel<any>;
+  @Output() selection$ = new EventEmitter<SelectionChange<any>>();
+  masterToggleChecked$ = this.selection$.pipe(map(()=>this.selection.hasValue() && this.isAllSelected()));
+  masterToggleIndeterminate$ = this.selection$.pipe(map(()=>this.selection.hasValue() && !this.isAllSelected()));
+  setUpSelections(trackBy?: string){
+    this.selection = trackBy ? new SelectionModel<any>(true, [], true, (a, b) => a[trackBy] === b[trackBy]) : new SelectionModel<any>(true, []);
+    this.state.on(this.selection.changed, c => this.selection$.emit(c));
+  }
+  $selectableData = computed(() => {
+    if(this.state.$viewType() === 'virtual paginator' || this.state.$viewType() === 'paginator'){
+      const previousPageRecords = this.state.state().currentPage * this.state.state().pageSize;
+      return this.$data().slice(previousPageRecords, previousPageRecords + this.state.state().pageSize);
+    }else if(this.state.$viewType() === 'all' || this.state.$viewType() === 'virtual all'){
+      return this.$data();
+    }
+    return [];
+  });
+  selectableData$ = toObservable(this.$selectableData);
+  isAllSelected() {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.$selectableData()?.length || 0;
+    return numSelected === numRows;
+  }
+
+  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  masterToggle() {
+    if(this.isAllSelected()){
+      this.selection.clear()
+    } else {
+      this.selection.select(...this.$selectableData());
+    }
+  }
+
+  tableWidth = this.state.getUserDefinedTableSize$.pipe(
+    previousAndCurrent<number | undefined>(0),
+    map(([previousUserDefinedWidth, currentUserDefinedWidth]) => {
+      if( currentUserDefinedWidth){
+        return ({width:`${currentUserDefinedWidth}px`});
+      } if( wasReset() ){
+        return ({width:'initial'});
+      }
+      return ({});
+
+      function wasReset(){
+        return (previousUserDefinedWidth ?? 0) >=0 && currentUserDefinedWidth == null;
+      }
+    })
+  );
+
+  getTransform = (key: string, val: string) => {
+    if(val == undefined || val === 'null') return '';
+    try {
+      return this.transformCreator.createTransformer(this.myColumns[key].metaData, true)({ [key]: val});
+    } catch (error) {
+      return val;
+    }
+  }
+
+  $rowHeight = this.state.selectSignal(s => {
+      if(this.state.$isVirtual() && (s.notPersistedTableSettings.useVirtualScroll as VirtualScrollOptions)?.enforceRowHeight){
+        const height = (s.notPersistedTableSettings.useVirtualScroll as VirtualScrollOptions)!.rowHeight;
+        return height + 'px' ;
+      }
+      if(typeof s.notPersistedTableSettings.rowHeight === 'number'){
+        return s.notPersistedTableSettings.rowHeight + 'px';
+      }
+      return s.notPersistedTableSettings.rowHeight;
+
+    });
+
+  $headerHeight = this.state.selectSignal(s => {
+    if(this.state.$isVirtual() && (s.notPersistedTableSettings.useVirtualScroll as VirtualScrollOptions)?.enforceHeaderHeight){
+      const height = (s.notPersistedTableSettings.useVirtualScroll as VirtualScrollOptions)!.headerHeight;
+      return height + 'px';
+    }
+    if(typeof s.notPersistedTableSettings.headerHeight === 'number'){
+      return s.notPersistedTableSettings.headerHeight + 'px';
+    }
+    return s.notPersistedTableSettings.headerHeight;
+  });
+
+  $groupHeaderHeight = this.state.selectSignal(s => {
+    if(s.notPersistedTableSettings.groupHeaderHeight){
+      return s.notPersistedTableSettings.groupHeaderHeight + 'px';
+    }
+    return this.$rowHeight();
+  });
+
+  $stickyFooter = computed(() => this.state.props().stickyFooter || this.state.$isVirtual());
+}