@one-paragon/angular-utilities 0.1.20 → 0.1.21

package/src/table-builder/components/date-filter/date-filter.component.html

@@ -0,0 +1,24 @@
+<ng-container *ngIf="CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull">
+  <mat-form-field>
+      <input matInput name="filterValue" [ngModel]="info.filterValue" [matDatepicker]="cal"/>
+      <mat-datepicker-toggle class="small-button date-toggle" matSuffix [for]="cal" preventEnter></mat-datepicker-toggle>
+      <mat-datepicker #cal></mat-datepicker>
+  </mat-form-field>
+</ng-container>
+
+<ng-container *ngIf="CurrentFilterType === FilterType.DateBetween">
+  <ng-container ngModelGroup="filterValue">
+    <mat-form-field class="my-filter" >
+      <input matInput name="Start" [ngModel]="info.filterValue?.Start"  placeholder="From" [matDatepicker]="fromVal"
+          (click)="fromVal.open()"/>
+      <mat-datepicker-toggle matSuffix class="small-button date-toggle" [for]="fromVal" preventEnter></mat-datepicker-toggle>
+      <mat-datepicker #fromVal></mat-datepicker>
+    </mat-form-field>
+    <mat-form-field>
+      <input matInput name="End" [ngModel]="info.filterValue?.End"  placeholder="To" [matDatepicker]="toVal" (click)="toVal.open()"/>
+      <mat-datepicker-toggle matSuffix class="small-button date-toggle" [for]="toVal" preventEnter></mat-datepicker-toggle>
+      <mat-datepicker #toVal></mat-datepicker>
+    </mat-form-field>
+  </ng-container>
+</ng-container>
+

package/src/table-builder/components/date-filter/date-filter.component.ts

@@ -0,0 +1,17 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { FilterInfo, PartialFilter } from '../../classes/filter-info';
+import { FilterType } from '../../enums/filterTypes';
+import { ControlContainer, NgForm } from '@angular/forms';
+
+@Component({
+    selector: 'tb-date-filter',
+    templateUrl: './date-filter.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    styleUrls: ['../filter/filter.component.scss'],
+    viewProviders: [{provide: ControlContainer, useExisting: NgForm}]
+})
+export class DateFilterComponent {
+    FilterType = FilterType;
+    @Input() info!: PartialFilter;
+    @Input() CurrentFilterType!: FilterType;
+}

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

@@ -0,0 +1,78 @@
+<mat-card appearance="outlined" class="filter-card" *ngIf="filter">
+  <mat-card-content>
+    <form #form="ngForm"  (keydown.enter)="onEnter(form.value,$event)" (keydown.escape)="close.emit()">
+      <input type="hidden" name="filterId" [ngModel]="filter.filterId" />
+      <input type="hidden" name="key" [ngModel]="filter.key" />
+      <input type="hidden" name="fieldType" [ngModel]="filter.fieldType" />
+      <div class="head-row" >
+        <h4 class="filter-name">{{(filter.key | spaceCase)}} Filter</h4>
+        <button class="cancel-button small-button" color="primary" mat-icon-button (click)="close.emit();" type="button"
+            matTooltip="Close">
+          <mat-icon class="cancel-button" color="primary">close</mat-icon>
+        </button>
+      </div>
+      <div class="filter-row">
+          <div class="inline">
+            <mat-form-field class="my-filter" >
+                <mat-select  placeholder="Select Filter Type" name="filterType"  [(ngModel)]="currentFilterType" >
+                    <mat-option *ngFor="let kvp of  filterTypes[filter.fieldType] | keyvalue " [value]="$any(kvp.value)[0]">
+                        {{ kvp.key }}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+          </div>
+          <ng-container [ngSwitch]="true">
+              <ng-container *ngSwitchCase="filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||
+                                            filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber" >
+                  <ng-container *ngTemplateOutlet="String"></ng-container>
+              </ng-container>
+              <ng-container   *ngSwitchCase="filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency">
+                  <tb-number-filter [info]="filter" [CurrentFilterType]="currentFilterType!" ></tb-number-filter>
+              </ng-container>
+              <ng-container  *ngSwitchCase="filter.fieldType === FieldType.Boolean">
+                <ng-container   *ngTemplateOutlet="Boolean"></ng-container>
+              </ng-container>
+              <ng-container *ngSwitchCase="filter.fieldType === FieldType.Date">
+                  <tb-date-filter [info]="filter" [CurrentFilterType]="currentFilterType!"></tb-date-filter>
+              </ng-container>
+              <ng-container *ngSwitchCase='filter.fieldType === FieldType.Enum' >
+                <ng-container  *ngTemplateOutlet="Enum"></ng-container>
+              </ng-container>
+          </ng-container>
+          <mat-radio-group name="filterValue" [ngModel]="filter.filterValue" *ngIf="currentFilterType === FilterType.IsNull">
+            <mat-radio-button [value]="true">True</mat-radio-button>
+            <mat-radio-button [value]="false">False</mat-radio-button>
+          </mat-radio-group>
+      </div>
+      <button mat-button (click)="state.addFilter(form.value)" disableRipple [disabled]="form.value.filterValue==undefined || !form.value.filterType">
+        Apply
+      </button>
+    
+    
+    <ng-template #String>
+    <mat-form-field class="my-filter" *ngIf="currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In">
+      <input matInput name="filterValue" [ngModel]="filter.filterValue" />
+    </mat-form-field>
+    <ng-container *ngIf="currentFilterType === FilterType.In">
+      <lib-in-filter [type]="FieldType.String" name='filterValue' [(ngModel)]="filter.filterValue" ></lib-in-filter>
+    </ng-container>
+    </ng-template>
+    
+    <ng-template #Boolean >
+    <div class="switch" [ngSwitch]="currentFilterType">
+      <div class="switch" *ngSwitchCase="FilterType.BooleanEquals">
+        <mat-radio-group name="filterValue" [ngModel]="filter.filterValue" >
+          <mat-radio-button [value]="true" preventEnter>True</mat-radio-button>
+          <mat-radio-button [value]="false" preventEnter>False</mat-radio-button>
+        </mat-radio-group>
+      </div>
+    </div>
+    </ng-template>
+    <ng-template #Enum>
+      <ng-container *ngIf='currentFilterType === FilterType.In' >
+        <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>
+      </ng-container>
+    </ng-template>
+    </form>
+  </mat-card-content>
+</mat-card>

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

@@ -0,0 +1,64 @@
+.filter-name {
+  color: cornflowerblue;
+  margin: 10px 0;
+  font-weight: 600;
+  display: inline-block;
+}
+
+.switch {
+  display: inline-block;
+}
+
+.my-filter {
+  margin-right: 15px;
+}
+
+.cancel-button {
+  float: right;
+}
+
+.head-row {
+  width: 100%;
+}
+.filter-row{
+  width: fit-content;
+}
+mat-card.filter-card{
+  &::ng-deep mat-form-field{
+    width: 150px;
+  }
+  &::ng-deep.mat-mdc-form-field-subscript-wrapper{
+    line-height: 0;
+    &::before{
+      height: 0;
+    }
+  }
+}
+.inline{
+  display: inline-block;
+}
+.small-button {
+  height: 18px;
+  width: 18px;
+  font-size: 18px;
+  padding: 0;
+  margin: 0;
+  ::ng-deep * {
+    line-height: initial;
+    font-size: initial;
+    height: 18px;
+    width: 18px;
+    font-size: 18px;
+    bottom: initial;
+
+  }
+}
+.cancel-button{
+  float: right;
+  font-weight: 700;
+}
+.date-toggle ::ng-deep svg{
+  position: absolute;
+  left: 0;
+  top: 0;
+}

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

@@ -0,0 +1,89 @@
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { MaterialModule } from '../../material.module';
+import { FilterComponent } from '../filter/filter.component';
+import { CommonModule, DatePipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FieldType } from '../../interfaces/report-def';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { SpaceCasePipe } from '../../../utilities/pipes/space-case.pipes';
+import { DateFilterComponent } from '../date-filter/date-filter.component';
+import { FilterType } from '../../enums/filterTypes';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatButtonHarness} from '@angular/material/button/testing';
+import { MatSelectHarness } from '@angular/material/select/testing';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { OptionHarnessFilters } from '@angular/material/core/testing';
+import { TableBuilderConfigToken } from '../../classes/TableBuilderConfig';
+import { provideMockStore } from '@ngrx/store/testing';
+import { isObservable } from 'rxjs';
+
+function fillInput<T>(fixture: ComponentFixture<T>, name: string, value: string) {
+  const input = fixture.debugElement.query(By.css('input[name=' + name + ']')).nativeElement as HTMLInputElement;
+  input.value = value;
+  input.dispatchEvent(new Event('input'));
+  fixture.detectChanges();
+}
+
+async function setSelect(loader: HarnessLoader, filter: Pick<OptionHarnessFilters, 'isSelected' | 'selector' | 'text'>) {
+  const select = await loader.getHarness<MatSelectHarness>(MatSelectHarness);
+  await select.open();
+  await select.clickOptions(filter);
+}
+
+describe('filter component', () => {
+
+  beforeEach(() => {
+
+    TestBed.configureTestingModule({
+      declarations: [FilterComponent, DatePipe, SpaceCasePipe, DateFilterComponent],
+      providers: [
+        DatePipe,
+        { provide : TableBuilderConfigToken , useValue: {defaultTableState: { }}},
+        provideMockStore({ initialState: {} }),
+      ],
+      imports: [
+        NoopAnimationsModule,
+        MaterialModule,
+        CommonModule,
+        FormsModule,
+      ]
+    })
+      .compileComponents();
+  });
+
+  it('filter info object should be populated', async () => {
+    const fixture = TestBed.createComponent(FilterComponent);
+    const component = fixture.componentInstance;
+
+    const originFunc = component.state.addFilter;
+
+    const spy = spyOn(component.state, 'addFilter');
+
+
+
+    spy.and.callFake( a => {
+      if(isObservable(a)) {
+        throw new Error('Observable not supported');
+      } else {
+        expect(a.filterType).toBe(FilterType.StringContains);
+        expect(a.filterValue).toBe('a');
+      }
+      return originFunc(a);
+    });
+
+    component.filter = {
+      key: 'name',
+      fieldType: FieldType.String
+    };
+
+    const loader = TestbedHarnessEnvironment.loader(fixture);
+    const button = await loader.getHarness<MatButtonHarness>(MatButtonHarness.with( {text: 'Apply'}));
+
+    await setSelect(loader, {text: 'Contains'});
+    fillInput(fixture, 'filterValue', 'a');
+    await button.click();
+
+    expect(spy).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,35 @@
+import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';
+import { filterTypeMap, FilterInfo, UnmappedTypes, mappedFieldTypes, PartialFilter } from '../../classes/filter-info';
+import { TableStore } from '../../classes/table-store';
+import { FilterType } from '../../enums/filterTypes';
+import { FieldType } from '../../interfaces/report-def';
+
+
+type thingy = Omit<FieldType,UnmappedTypes>
+
+@Component({
+    selector: 'tb-filter',
+    templateUrl: './filter.component.html',
+    styleUrls: ['./filter.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FilterComponent<T extends mappedFieldTypes = any> {
+  filterTypes = filterTypeMap;
+  FilterType = FilterType;
+  FieldType = FieldType;
+  @Input() filter!: PartialFilter;;
+  @Output() close = new EventEmitter();
+  currentFilterType?: FilterType;
+  constructor( public state: TableStore) { }
+
+  ngOnInit() {
+    this.currentFilterType = this.filter.filterType;
+  }
+  onEnter(filter: FilterInfo, event: any) {
+    event.preventDefault();
+    if (filter.filterValue != null && filter.filterType) {
+      this.state.addFilter(filter);
+      this.close.emit();
+    }
+  }
+}

package/src/table-builder/components/filter/in-list/in-list-filter.component.ts

@@ -0,0 +1,82 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, ViewContainerRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import { Observable } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+import { TableStore } from '../../../classes/table-store';
+import { Dictionary } from '../../../interfaces/dictionary';
+import { FieldType, MetaData } from '../../../interfaces/report-def';
+
+
+@Component({
+  selector: 'tb-in-list-filter , [tb-in-list-filter]',
+  template: `
+  <div *ngFor="let item of keyValues$ | async| keyvalue" >
+    <mat-checkbox [checked]='selectedKeys.includes(item.key)' stop-propagation (change)='selectFilterChanged($event, item.key)' >
+      {{metaData.fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
+    </mat-checkbox>
+  </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: InListFilterComponent,
+    multi: true
+  }]
+})
+export class InListFilterComponent implements ControlValueAccessor {
+
+  constructor(private ref: ChangeDetectorRef, private tableState: TableStore ) {}
+  value: string[] = [];
+  FieldType = FieldType;
+  writeValue(obj: string[]): void {
+    this.value = obj;
+
+    if(this.value) {
+      this.selectedKeys = this.value.map( f => f );
+    }
+    this.ref.markForCheck();
+  }
+
+  onChange = (_: any) => { };
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  onTouched = () => { };
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+  @Input() key!: string;
+
+  keyValues$! : Observable<Dictionary<string>>;
+  selectedKeys : string[] = [];
+  metaData!: MetaData;
+
+  ngOnInit() {
+    this.keyValues$ = this.tableState.getMetaData$(this.key).pipe(
+      tap(metaData => this.metaData = metaData),
+      map( metaData => {
+        if(metaData.additional?.filterOptions?.filterableValues ) {
+          return  metaData.additional.filterOptions.filterableValues.reduce( (prev: any, cur)=> { prev[cur] = cur; return prev }, {});
+        } else {
+          if(metaData.fieldType === FieldType.Enum ) {
+            return metaData.additional!.enumMap;
+          }
+        }
+        return {};
+      })
+    );
+  }
+
+  selectFilterChanged($event, val) {
+    if($event.checked) {
+      this.selectedKeys.push(val);
+    } else {
+      this.selectedKeys = this.selectedKeys.filter( item => item !== val);
+    }
+
+   this.value = this.selectedKeys;
+    this.onChange(this.value);
+  }
+
+}

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

@@ -0,0 +1,52 @@
+<ng-container *ngIf="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'>
+      <button [class.isHidden]="!col.isVisible" stop-propagation mat-menu-item cdkDrag [cdkDragData]="col"
+        *ngFor="let col of displayCols">
+        <div (click)="col.isVisible = !col.isVisible; emit(displayCols)" style="display: flex; align-items: center;">
+          <button mat-icon-button matTooltip="Hide Column" class="show-hide" *ngIf="col.isVisible; else hidden">
+            <mat-icon color="primary">check_box</mat-icon>
+          </button>
+          <p class="label">
+            {{col.displayName || (col.key | spaceCase) }}
+          </p>
+
+          <ng-template #hidden>
+            <button mat-icon-button matTooltip="Show Column" class="show-hide">
+              <mat-icon>indeterminate_check_box</mat-icon>
+            </button>
+          </ng-template>
+
+        </div>
+      </button>
+    </div>
+  </mat-menu>
+</ng-container>

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,44 @@
+import { Component, ChangeDetectionStrategy} from '@angular/core';
+import { DisplayCol } from '../../classes/display-col';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { orderViewableMetaData, TableStore } from '../../classes/table-store';
+import {CdkDragDrop} from '@angular/cdk/drag-drop';
+
+@Component({
+  selector: 'tb-col-displayer',
+  templateUrl: './gen-col-displayer.component.html',
+  styleUrls: ['./gen-col-displayer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class GenColDisplayerComponent {
+  columns$: Observable< DisplayCol[]>;
+  constructor( private tableState: TableStore ) {
+    this.columns$ = this.tableState.state$.pipe(
+      map( state =>
+        orderViewableMetaData(state)
+          .map( md => ({
+            key: md.key,
+            displayName: md.displayName,
+            isVisible: !state.hiddenKeys.includes(md.key)
+          }))
+      ),
+    );
+  }
+
+  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,77 @@
+<mat-table
+  cdkDropList
+  cdkDropListLockAxis='x'
+  cdkDropListOrientation="horizontal"
+  (cdkDropListDropped)="drop($event)"
+  class="table-drag-list"
+  #table
+  [dataSource]="dataSource"
+  [trackBy]='trackByFunction'
+  [styler]="tableWidth | async"
+>
+
+    <ng-container matColumnDef="select">
+
+        <mat-header-cell *matHeaderCellDef class="f-mat-header-cell" style="flex: initial;  padding-left: .7rem!important;" >
+          <mat-checkbox (change)="$event ? masterToggle() : null"
+                        [checked]="!!(masterToggleChecked$ | async)"
+                        [indeterminate]="masterToggleIndeterminate$ | async">
+          </mat-checkbox>
+        </mat-header-cell>
+
+        <mat-cell *matCellDef="let row" style="flex: initial; padding-left: .7rem!important;">
+          <mat-checkbox *ngIf="!row.isGroupFooter"
+                        (click)="$event.stopPropagation()"
+                        (change)="$event ? selection.toggle(row) : null"
+                        [checked]="selection.isSelected(row)">
+          </mat-checkbox>
+        </mat-cell>
+
+        <mat-footer-cell *matFooterCellDef style="flex: initial;  padding-left: .7rem!important;">
+          {{ selection.selected.length }}
+        </mat-footer-cell>
+      </ng-container>
+
+      <ng-container matColumnDef="index">
+          <mat-header-cell *matHeaderCellDef class="f-mat-header-cell" >#</mat-header-cell>
+          <mat-cell *matCellDef="let i = index;"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) +  i + 1 }} </mat-cell>
+          <mat-footer-cell *matFooterCellDef></mat-footer-cell>
+
+      </ng-container>
+
+      <ng-container matColumnDef="groupHeader">
+        <mat-cell *matCellDef="let row">
+          <div [style.paddingLeft]="row.padding + 'px !important'" >
+            <button mat-icon-button (click)="updateGroup(row);">
+              <mat-icon *ngIf="!row.isExpanded">chevron_right</mat-icon>
+              <mat-icon *ngIf="row.isExpanded">expand_more</mat-icon>
+            </button>
+            {{row.groupHeaderName}}
+          </div>
+          <div style="flex-grow: 1">
+            <ng-container *ngTemplateOutlet="groupHeaderTemplate; context: { element: row }"></ng-container>
+          </div>
+        </mat-cell>
+      </ng-container>
+
+  <ng-container *ngIf="showHeader$ | async">
+    <mat-header-row *matHeaderRowDef="keys; sticky: isSticky"></mat-header-row>
+  </ng-container>
+  <mat-row *matRowDef="let row; columns: keys; let i = index"></mat-row>
+  <mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroupHeader" style="background-color: white;"></mat-row>
+  <mat-row *matRowDef="let row; columns: keys; when: isGroupFooter" style="background-color: whitesmoke;"></mat-row>
+  <mat-footer-row *matFooterRowDef="keys"></mat-footer-row>
+
+</mat-table>
+
+<div class="flx-row-end sticky">
+  <tb-paginator #tbPaginator
+    [dataSource]="dataSource"
+    [tableElRef]="tableElRef"
+    [data$]="data$">
+  </tb-paginator>
+
+  <mat-icon [matTooltip]="(collapseFooter$ | async) ? 'expand' : 'collapse'" class="collapse-icon footer" (click)="state.toggleCollapseFooter()">
+    {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}
+  </mat-icon>
+</div>

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

@@ -0,0 +1,45 @@
+
+.mat-mdc-row:nth-child(odd) {
+  background-color: #cdeefe
+}
+
+.sticky {
+  bottom: 0px;
+  position: sticky;
+  border-top: .5px solid rgba(0,0,0,.12);
+}
+
+.page-amounts{
+  color: rgba(0, 0, 0, 0.54);
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+  font-size: 12px;
+  margin-right: .2rem;
+}
+
+.flx-row-end{
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  background-color: white;
+}
+
+:host::ng-deep.mat-mdc-paginator-container {
+  min-height: initial !important;
+}
+
+.group-header {
+  display: flex;
+}
+
+: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: 0 0 0 .2rem;
+    line-height: normal;
+  }
+}
+
+