@one-paragon/angular-utilities 2.8.3 → 2.8.4

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

@@ -0,0 +1,531 @@
+import { Component, ChangeDetectionStrategy, ViewContainerRef, Injector, computed, inject, input, viewChild, effect, untracked, signal, output, linkedSignal } from '@angular/core';
+import { MatFooterRowDef, MatHeaderRowDef, MatRowDef, MatTable, MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { SelectionChange, SelectionModel } from '@angular/cdk/collections';
+import { TableStore } from '../../classes/table-store';
+import { switchMap } from 'rxjs/operators';
+import { ColumnBuilderComponent } from '../column-builder/column-builder.component';
+import { Dictionary } from '../../interfaces/dictionary';
+import { ColumnInfo } from '../../interfaces/ColumnInfo';
+import { CdkDragDrop, CdkDropList, DragDropModule } from '@angular/cdk/drag-drop';
+import { ConditionalClassesDirective, FunctionPipe, StopPropagationDirective, StylerDirective } from '../../../utilities';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { formatNumber, NgTemplateOutlet } from '@angular/common';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { createTransformer } from '../../services/transform-creator';
+import { initIndexSymbol } from '../table-container/table-container.helpers/sort-state.helpers';
+import { parseTbSizeToPixels } from '../../classes/table-builder-general-settings';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { DataStore } from '../../classes/data-store';
+import { TableBuilderConfigToken } from '../../classes/TableBuilderConfig';
+import { getAllGroupHeaderNamesByKeys, mapGroupHeader } from '../table-container/table-container.helpers/groupBy.helpers';
+import { MatMenuModule } from "@angular/material/menu";
+import { MatSlideToggle } from "@angular/material/slide-toggle";
+import { FieldType } from '../../interfaces/meta-data';
+import { FilterType } from '../../enums/filterTypes';
+import { TableContainerComponent } from '..';
+import { Group, isGroupHeader } from '../../types/group-types';
+
+@Component({
+  selector: 'tb-generic-table',
+  templateUrl: './generic-table.component.html',
+  styleUrl: './generic-table.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
+    MatTooltipModule, FunctionPipe, StylerDirective, ConditionalClassesDirective, MatMenuModule, MatSlideToggle,
+    StopPropagationDirective
+  ],
+})
+export class GenericTableComponent {
+  protected state = inject(TableStore);
+  protected dataStore = inject(DataStore);
+  private viewContainer = inject(ViewContainerRef);
+  private config = inject(TableBuilderConfigToken);
+  private _injector = inject(Injector);
+  private tableContainer = inject(TableContainerComponent, { optional: true });
+
+  smallFooter = 10
+
+  $headerRow = viewChild(MatHeaderRowDef);
+  $footerRow = viewChild(MatFooterRowDef);
+  $table = viewChild(MatTable);
+  $dropList = viewChild(CdkDropList);
+
+  selection$ = output<SelectionChange<any>>({ alias: 'selection' });
+
+  $displayData = input.required<any[]>({ alias: 'displayData' });
+  $displayDataLength = computed(() => this.$displayData().length);
+  $data = input.required<any[]>({ alias: 'data' });
+  $rows = input<MatRowDef<any>[]>([], { alias: 'rows' });
+  $columnInfos = input.required<ColumnInfo[]>({ alias: 'columnInfos' });
+  $dataSource = input.required<MatTableDataSource<any>>({ alias: 'dataSource' });
+
+
+  $keys = computed(() => {
+    const displayed = this.state.$orderedVisibleColumns();
+    const built = this.$columns();
+    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);
+
+  $trackBy = input<string | undefined |((item: any) => any)>(undefined, { alias: 'trackBy' });
+  $trackByFunction = computed(() => {
+    const trackBy = this.$trackBy();
+    if(!trackBy) return (index:number, item: any) => isGroupHeader(item) ? `${item.level}-${item[initIndexSymbol]}` : item[initIndexSymbol];
+    return ((index:number, item: any) => {
+      if(isGroupHeader(item)) return `${item.level}-${item[initIndexSymbol]}`;
+      return typeof trackBy === 'function' ? trackBy(item) : item[trackBy];
+    });
+  });
+
+  $hasFooterMeta = computed(() => this.state.$metaDataArray().some(md => !!md.additional?.footer))
+  $hasCustomFooter = computed(() => this.$columnInfos()?.some(ci => !!ci.customCell?.columnDef?.footerCell));
+  $footerRowStyle = computed(() => {
+    const hasData = !!this.$displayDataLength();
+    const metaFooter = this.$hasFooterMeta();
+    const customFooter = this.$hasCustomFooter();
+    const hasSelectionColumn = this.state.$props().selectionColumn;
+    return customFooter || hasSelectionColumn || (hasData && metaFooter) ? 'regular-footer' : hasData ? 'no-footer' : 'small-footer';
+  });
+  $showFooterRow = computed(() => this.$footerRowStyle() !== 'no-footer');
+
+  injector = Injector.create({
+    providers: [
+      { provide: MatTable, useFactory: () => this.$table() },
+      { provide: CdkDropList, useFactory: () => this.$dropList() },
+    ],
+    parent: this._injector
+  });
+
+  $hasIndexColumn = computed(() => this.state.selectSignal(state => state.props.indexColumn)());
+  $columns = signal<Dictionary<ColumnBuilderComponent>>({});
+  $showHeader = computed(() => !this.state.$tableSettings().hideColumnHeader);
+
+  $paginatorHeight = signal(0);
+  r = new ResizeObserver(entries => this.$paginatorHeight.set(entries[0]?.contentRect.height || 0));
+  #rr = effect((cleanup) => {
+    const paginatorWrapper = this.tableContainer?.$paginatorWrapper();
+    if(!paginatorWrapper) return;
+    this.r.observe(paginatorWrapper.nativeElement);
+    cleanup(() => { this.r.disconnect(); });
+  });
+  $offset = this.dataStore.selectSignal( s => s.virtualScrollOffset);
+  $footerOffset = computed(() => this.$useVirtualScroll() ? this.$offset() : this.$paginatorHeight());
+
+  drop(event: CdkDragDrop<string[]>) {
+    this.state.setUserDefinedOrder({ newOrder: event.currentIndex, oldOrder: event.previousIndex })
+  }
+
+  #buildColumnsEffect = effect(() => {
+    const columnInfos = this.$columnInfos() || [];
+    const table = this.$table();
+    if(!table) return;
+
+    untracked(() => {
+
+      Object.entries(this.$columns()).forEach(([key, value]) => {
+        const columnInfo = columnInfos.find(ci => ci.metaData.key === key);
+        if(!columnInfo || columnInfo.customCell !== value.$customCell()) {
+          delete this.$columns()[key];
+          table?.removeColumnDef(value.$columnDef()!);
+        }
+      });
+
+      columnInfos.forEach(ci => this.buildColumn(ci))
+    })
+  });
+
+  #buildRowsEffect = effect(() => {
+    const table = this.$table();
+    const rows = this.$rows();
+    const keys = this.$keys();
+    if(!table) return;
+
+    untracked(() => {
+      rows.forEach(row => {
+        table.removeRowDef(row);
+        row.columns = keys;
+        table.addRowDef(row);
+      });
+    })
+  });
+
+  #buildHeaderRowEffect = 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);
+    })
+  });
+
+  #buildFooterEffect = 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);
+    })
+  });
+
+  $usePaginator = computed(() => this.state.$tableSettings().usePaginator);
+  $useVirtualScroll = computed(() => this.state.$viewType().includes('virtual'));
+  $virtualStart = this.dataStore.selectSignal(d => d.virtualEnds.start);
+  $offsetIndex = computed(() => {
+    const virtualStart = this.$virtualStart();
+    const pageSize = this.state.$pageSize();
+    const currentPage = this.state.$currentPage();
+    if(this.$useVirtualScroll()){
+      return virtualStart;
+    }
+    if(this.$usePaginator()){
+      return pageSize * currentPage;
+    }
+    return 0;
+  });
+
+  rowClicked(t: any, event?: MouseEvent){
+    const tbs = this.state.$tableSettings();
+    if(tbs.rowClick) tbs.rowClick(t, event);
+  }
+
+  isGroupHeader(_: number, row: { isGroupHeader: boolean }) {
+    return row.isGroupHeader;
+  }
+
+  setExpanded(key: string, groupUniqueName: string, isExpanded: boolean): void {
+    if(!isExpanded && this.state.$expandedPropForKeyIsAll(key)()) {
+      const groupHeaders = getAllGroupHeaderNamesByKeys(this.$displayData(), [key]);
+      this.state.expandOfGroup(groupHeaders.map(g => ({ groupKey: g.groupKey, uniqueNameOfHeadersToExpand: g.headers })));
+    }
+    this.state.updateExpandedGroups({ key, isExpanded, groupUniqueName });
+  }
+
+  buildColumn(column: ColumnInfo) {
+    const alreadyBuiltColumn = this.$columns()[column.metaData.key];
+    if(alreadyBuiltColumn) {
+      alreadyBuiltColumn.setMetaData(column.metaData);
+    } else {
+      const component = this.viewContainer.createComponent(ColumnBuilderComponent, {
+        index: 0,
+        injector: this.injector
+      });
+      component.instance.$customCell.set(column.customCell);
+      component.instance.$customHeader.set(column.customHeader);
+      component.instance.setMetaData(column.metaData);
+      component.instance.$data = this.$data;
+      component.instance.whenViewInited(() => {
+        this.$columns.update(columnsDict => ({
+          ...columnsDict,
+          [column.metaData.key]: component.instance
+        }));
+      });
+    }
+  }
+
+  $hasSelectColumn = computed(() => this.state.selectSignal(state => state.props.selectionColumn)());
+  $selection = computed(() => {
+    const trackBy = this.$trackBy();
+    if(trackBy){
+      const trackByFn = typeof trackBy === 'function' ? trackBy : (item: any) => item[trackBy];
+      const model = new SelectionModel<any>(true, [], true, (a, b) => trackByFn(a) === trackByFn(b));
+      untracked(() => {
+        this.checkForPreviousSelection(model);
+      });
+      return model;
+    }
+    const model = new SelectionModel<any>(true, []);
+    untracked(() => {
+      this.checkForPreviousSelection(model);
+    });
+    return model;
+  });
+  checkForPreviousSelection(m: SelectionModel<any>){
+    const had = this.tableContainer?._selection$.getValue();
+    if(had && had.source.selected.length){
+      m.clear();
+      m.select(...had.source.selected);
+      return;
+    }
+  }
+  selectionChange$ = toObservable(this.$selection).pipe(switchMap(s => s.changed));
+  $selectionChange = toSignal(this.selectionChange$);
+  onSelectionChangeEffect = effect(() => {
+    const selectionChange = this.$selectionChange();
+    if(!selectionChange) return ;
+    untracked(() => this.selection$.emit(selectionChange))
+  });
+  $isAllSelected = computed(() => {
+    this.$selectionChange();
+    const selected = this.$selection()?.selected;
+    if(!selected?.length) return false;
+    return this.$selectableData()?.length === selected.length;
+  });
+  $masterToggleChecked = this.$isAllSelected;
+  $masterToggleIndeterminate = computed(() => {
+    this.$selectionChange();
+    return !!this.$selection()?.selected.length && !this.$masterToggleChecked()});
+
+  $paginated = computed(() => this.state.$viewType() === 'virtual paginator' || this.state.$viewType() === 'paginator');
+  $selectableData = computed(() => {
+    const isGrouped = !!this.state.$groupByData().length;
+    this.state.$expandGroups();
+    if(this.$paginated()){
+      const previousPageRecords = this.state.$currentPage() * this.state.$pageSize();
+      if(isGrouped){
+        const onScreen = this.$dataSource().data.slice(previousPageRecords, previousPageRecords + this.state.$pageSize());
+        const nested = onScreen.flatMap(
+          (group: Group) => (group.isGroupHeader && !this.state.$getIsExpanded(group.key, group.uniqueName)()) ? mapGroupHeader(group, true) : []
+        );
+        return onScreen.concat(nested).filter(row => !row.isGroupHeader);
+      }
+      return this.$data().slice(previousPageRecords, previousPageRecords + this.state.$pageSize());
+    }
+    else if(this.state.$viewType() === 'all' || this.state.$viewType() === 'virtual all'){
+      return this.$data();
+    }
+    return [];
+  });
+
+  $selectAllMessage = computed(() => {
+    if(this.$isAllSelected()) return `Deselect all ${this.$selection().selected.length} selected`;
+    const selectable = formatNumber(this.$selectableData().length, 'en-US');
+    let message = `Select all ${selectable}`;
+    if(this.$paginated()){
+      message += ' on this page';
+    }
+    return message;
+  })
+
+  #onSelectableDataChangeEffect = effect(() => {
+    const selectableData = this.$selectableData();
+    untracked(() => {
+      const selected = this.$selection()?.selected;
+      if(!selected.length) return;
+      const trackBy = this.$trackBy();
+      const trackByFunc = trackBy ?
+        (s) => {
+          const trackByFn = typeof trackBy === 'function' ? trackBy : (item: any) => item[trackBy];
+          return selectableData.every(d => trackByFn(d) !== trackByFn(s))}
+        : s => !selectableData.includes(s);
+      const removed = selected.filter(trackByFunc);
+      this.$selection().deselect(...removed)
+    })
+  });
+
+  /** 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());
+    }
+  }
+
+  selectTop(size: number){
+    const pageSize = this.state.$pageSize();
+    const all = this.state.$showAll();
+
+    if(size > pageSize && !all){
+      setTimeout(() => {
+        this.state.setUserDefinedShowAll(true);
+      }, 2);
+    }
+    this.$selection().clear();
+    this.$selection().select(...this.$data().slice(0, size));
+  }
+
+  $tableWidth = linkedSignal<number | undefined, { width: string }>({
+    source: this.state.$getUserDefinedTableWidth,
+    computation: (currentUserDefinedWidth, { source: previousUserDefinedWidth } = { value: null as any, source: 0 as any }) => {
+      if( currentUserDefinedWidth){
+        return ({ width: `${currentUserDefinedWidth}px`, minWidth: 'initial' });
+      } if( wasReset() ){
+        return ({ width: 'initial' });
+      }
+      return ({} as { width: string });
+
+      function wasReset(){
+        return (previousUserDefinedWidth ?? 0) >= 0 && currentUserDefinedWidth == null;
+      }
+    }
+  });
+
+  getGroupHeaderTransform = (key: string, val: string) => computed(() => {
+    if(val == undefined || val === 'null') return 'BLANK';
+    try {
+      const meta = this.state.$getMetaData(key)();
+      if(meta.groupByLogic?.groupByHeader){
+        return meta.groupByLogic.groupByHeader(val);
+      }
+      return createTransformer(this.state.$getMetaData(key)(), this.config, true, true)({ [`${key}`]: val }) || val;
+    } catch (error) {
+      return val;
+    }
+  })
+
+  $rowHeight = computed(() => {
+    if(this.state.$userDefinedRowHeight()){
+      return this.state.$userDefinedRowHeight() + 'px';
+    }
+    const notPersistedTableSettings = this.state.$notPersistedTableSettings();
+    if(this.state.$isVirtual() && notPersistedTableSettings.virtualSettings?.enforceRowHeight){
+      const height = notPersistedTableSettings.virtualSettings!.rowHeight;
+      return parseTbSizeToPixels(height) + 'px';
+    }
+    if(notPersistedTableSettings.rowHeight){
+      return parseTbSizeToPixels(notPersistedTableSettings.rowHeight) + 'px';
+    }
+    return undefined;
+  });
+
+  $headerHeight = computed(() => {
+    if(this.state.$userDefinedHeaderHeight()){
+      return this.state.$userDefinedHeaderHeight() + 'px';
+    }
+    const notPersistedTableSettings = this.state.$notPersistedTableSettings();
+    if(this.state.$isVirtual() && notPersistedTableSettings.virtualSettings?.enforceHeaderHeight){
+      const height = notPersistedTableSettings.virtualSettings!.headerHeight;
+      return parseTbSizeToPixels(height) + 'px';
+    }
+    if(notPersistedTableSettings.headerHeight){
+      return parseTbSizeToPixels(notPersistedTableSettings.headerHeight) + 'px';
+    }
+    return undefined;
+  });
+
+  $groupHeaderHeight = computed(() => {
+    const groupHeaderHeight = this.state.$notPersistedTableSettings().groupHeaderHeight;
+    if(groupHeaderHeight){
+      return parseTbSizeToPixels(groupHeaderHeight) + 'px';
+    }
+    return this.$rowHeight();
+  });
+
+  $footerHeight = computed(() => {
+    const footerStyle = this.$footerRowStyle();
+    switch (footerStyle) {
+      case 'regular-footer':
+        return this.$rowHeight();
+      case 'small-footer':
+        return `${this.smallFooter}px`;
+      default:
+        return '0px';
+    }
+  });
+
+  $stickyFooter = computed(() => this.state.$props().stickyFooter || this.state.$isVirtual());
+
+  $rowStyles = computed(() => this.state.$tableSettings().rowStyles || {});
+  $rowClasses = computed(() => this.state.$tableSettings().rowClasses || {});
+
+  allOfGroupSelected = (uniqueName: string) => computed(() => {
+    //make sure signal is marked dirty when selection or over all data changes
+    this.$selectionChange();
+    this.$data();
+    const header = this.$dataSource().data.find(d => isGroupHeader(d) && d.uniqueName === uniqueName);
+    const children = mapGroupHeader(header, true).filter(i => !isGroupHeader(i));
+    if(!children.length) return { containsAll: false, containsSome: false, length: 0 };
+    let containsAll = true;
+    let containsSome = false;
+    for(var a of children){
+      const contains = this.$selection().isSelected(a);
+      if(contains) containsSome = true;
+      else containsAll = false;
+      if(!containsAll && containsSome) break;
+    }
+    return { containsAll, containsSome, length: children.length };
+  });
+
+  toggleGroup = (uniqueName: string, allSelected: boolean) => {
+    const header = this.$dataSource().data.find(d => isGroupHeader(d) && d.uniqueName === uniqueName);
+    const children = mapGroupHeader(header, true).filter(i => !isGroupHeader(i));
+    if(allSelected){
+      this.$selection().deselect(...children)
+    } else {
+      this.$selection().select(...children);
+    }
+  }
+
+  toggleGroupMessage = (amountOfItems: number, allSelected: boolean) => {
+    if(allSelected) return `Deselect all in this group`;
+    const selectable = formatNumber(amountOfItems, 'en-US');
+    return `Select all ${selectable} in this group`;
+  }
+
+  getCustomGroupRowTemplate = (groupingKey: string) => computed(() => {
+    const customGroupRows = this.state.$props().customGroupRows || [];
+
+    // Find the best matching custom group row template
+    // First, look for exact key matches, then for global templates (null key)
+    const exactMatches = customGroupRows.filter(cgr => {
+      if(!cgr.appliesTo(groupingKey)) return false;
+      const key = cgr.$groupingKey();
+      return key === groupingKey || (Array.isArray(key) && key.includes(groupingKey));
+    });
+    const globalMatches = customGroupRows.filter(cgr => cgr.appliesTo(groupingKey) && cgr.$groupingKey() === null);
+
+    // Sort by priority (higher priority first)
+    const allMatches = [...exactMatches, ...globalMatches].sort((a, b) => b.$priority() - a.$priority());
+
+    return allMatches[0]?.template();
+  });
+
+  addSelectFilter(e: boolean){
+    if(!e){
+      this.state.removeFilter(this.$selectFilterKey()!);
+      return;
+    }
+    this.state.addFilter({
+      fieldType: FieldType.Boolean,
+      filterId: `header-column-select-${crypto.randomUUID()}`,
+      filterValue: true,
+      filterType: FilterType.Custom,
+      key: 'tb_select',
+      predicate: (item: any) => this.$selection().isSelected(item),
+      active: e,
+      chipLabel: 'Show Only Selected',
+      notSavable: true,
+    });
+  }
+  $selectFilterKey = computed(() => {
+    const selectFilter = Object.keys(this.state.$filters()).find(key => key.startsWith('header-column-select'));
+    return selectFilter;
+  });
+
+  $hasSelectFilter = computed(() => !!this.$selectFilterKey());
+
+  _onSelect = effect(() => {
+    const selectionChange = this.$selectionChange();
+    untracked(() => {
+      const selectFilterKey = this.$selectFilterKey();
+      if(!selectionChange || !selectFilterKey || this.$isAllSelected()) return;
+      this.state.removeFilter(selectFilterKey);
+      this.addSelectFilter(true);
+    });
+  });
+
+  $indexColumnWidth = computed(() => {
+    const indexColumnWidth = this.state.$notPersistedTableSettings()?.indexColumnWidth;
+    if (indexColumnWidth) return { flex: `0 0 ${parseTbSizeToPixels(indexColumnWidth) + 'px'}`, maxWidth: 'none' } ;
+    return undefined;
+  });
+
+  $selectionColumnWidth = computed(() => {
+    const selectionColumnWidth = this.state.$notPersistedTableSettings()?.selectionColumnWidth;
+    if (selectionColumnWidth) return { flex: `0 0 ${parseTbSizeToPixels(selectionColumnWidth) + 'px'}`, maxWidth: 'none' } ;
+    return undefined;
+  });
+}

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

@@ -0,0 +1,125 @@
+import { Component, ChangeDetectionStrategy, computed, inject, viewChild, effect, untracked } from '@angular/core';
+import { MatPaginator, MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { switchMap } from 'rxjs/operators';
+import { TableStore } from '../../classes/table-store';
+import { MatButtonModule } from '@angular/material/button';
+import { DataStore } from '../../classes/data-store';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { notNull } from '../../../rxjs';
+import { InitializationState } from '../../classes/TableState';
+
+@Component({
+  selector: 'tb-paginator',
+  imports: [MatPaginatorModule, MatButtonModule],
+  template: `
+  <div class="paginator-row">
+    @if($currentPageData(); as pageData)
+    {
+      <div [class.page-amounts]="true">
+        @if(!$showAll() && $collapseFooter())
+        {
+          <span>
+            {{pageData.currentStart}} - {{pageData.currentEnd}} of
+          </span>
+        }
+        @if($showAll() || $collapseFooter())
+        {
+          {{pageData.total}}
+        }
+      </div>
+    }
+    <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons
+      [class]="{ 'hide' : $collapseFooter() || $showAll() }">
+    </mat-paginator>
+    @if ($showAllOption() && !$collapseFooter())
+    {
+      <button mat-button (click)="showAll()">
+        <span [style.text-decoration]="$showAll() ? 'line-through' : ''" >All</span>
+      </button>
+    }
+  </div>
+  `,
+  styleUrls: ['./generic-table.component.scss', '../../styles/collapser.styles.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PaginatorComponent {
+  private state = inject(TableStore);
+  private data = inject(DataStore);
+  $paginator = viewChild(MatPaginator);
+
+  $dataLength = this.data.selectSignal(d => d.sortedFilteredDataLength);
+  $viewableDataLength = this.data.selectSignal(d => d.sortedFilteredGroupedDataLength);
+  pageEvent$ = toObservable(this.$paginator).pipe(notNull(), switchMap(p => p.page));
+  $pageEvent = toSignal(this.pageEvent$);
+  $pageIndexChangeEvent = computed(() => this.$pageEvent()?.pageIndex);
+  $pageSizeChangeEvent = computed(() => this.$pageEvent()?.pageSize);
+  $currentPageData = computed(() => {
+    const pageEvent = this.$pageEvent();
+    if(!pageEvent) return;
+    const paginator = this.$paginator()!;
+    // Reset because initial page event does not have page length
+    pageEvent.pageIndex = paginator.pageIndex;
+    pageEvent.pageSize = paginator.pageSize;
+    pageEvent.length = paginator.length;
+    const pageDetails = mapPaginationEventToCurrentPageDetails(pageEvent);
+    const dataLength = this.$dataLength();
+    return ({ ...pageDetails, total: dataLength })
+  })
+
+  #onPageIndexEffect = effect(() => {
+    const index = this.$pageIndexChangeEvent();
+    if(index === undefined) return;
+    untracked(() => this.state.setCurrentPage(index))
+  });
+  #onPageSizeEffect = effect(() => {
+    const size = this.$pageSizeChangeEvent();
+    const initialized = this.state.$initializationState() >= InitializationState.Ready;
+    if(!size || !initialized) return;
+    untracked(() => this.state.setUserDefinedPageSize(size));
+  });
+  #onMetaPageSizeEffect = effect(() => {
+    const paginator = this.$paginator();
+    if(!paginator) return;
+    const metaPageSize = this.state.$pageSize();
+    const initialized = this.state.$initializationState() >= InitializationState.Ready;
+    untracked(() => initialized && paginator._changePageSize(metaPageSize));
+  });
+  onDataLengthEffect = effect(() => {
+    const paginator = this.$paginator();
+    const dataLength = this.$viewableDataLength();
+    untracked(() => {
+      if(paginator){
+        paginator.length = dataLength;
+        const maxIndex = Math.max(0, Math.ceil(dataLength / paginator.pageSize) - 1);
+        if(paginator.pageIndex > maxIndex){
+          paginator.pageIndex = maxIndex;
+          this.state.setCurrentPage(maxIndex);
+        }
+      }
+    })
+  });
+  $collapseFooter = computed(() => this.state.selectSignal(state => state.persistedTableSettings.collapseFooter)());
+  $showAllOption = this.state.selectSignal(s => s.notPersistedTableSettings?.paginatorSettings?.includeAllInOptions);
+  $showAll = this.state.$showAll;
+  showAll(){
+    const showAll = !this.$showAll();
+    this.state.setUserDefinedShowAll(showAll);
+    if(showAll){
+      this.state.toggleCollapseFooter({ collapseFooter: true });
+    }
+  }
+}
+
+const mapPaginationEventToCurrentPageDetails = (pageData: PageEvent):CurrentPageDetails => {
+  return ({
+    currentStart: (pageData.pageIndex * pageData.pageSize) + 1,
+    currentEnd: Math.min(pageData.length, ((pageData.pageIndex + 1) * pageData.pageSize)),
+    total: pageData.length
+  })};
+
+
+interface CurrentPageDetails {
+  currentStart:number,
+  currentEnd:number,
+  total:number
+}

package/src/table-builder/components/group-by-list/group-by-list.component.css

@@ -0,0 +1,24 @@
+.tb-group-label {
+  font-weight: bolder;
+  padding-right: 15px;
+}
+:host{
+  display: flex;
+  padding-left: 8px;
+  align-items: center;
+}
+:host mat-chip-set mat-chip{
+  margin: 0;
+}
+:host mat-chip-set .nested-arrow{
+  display: flex;
+  width: 15px;
+  justify-content: center;
+}
+.chip-c{
+  display: flex;
+  align-items: center;
+}
+.sort-icon{
+  cursor: pointer;
+}