Merge pull request #135 from NachmanBerkowitz:fix_index_col

Fix index col

Author: NachmanBerkowitz

projects/table-builder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mx-table-builder",
-  "version": "0.4.27",
+  "version": "0.4.28",
   "peerDependencies": {
     "@angular/common": "~12.1.1",
     "@angular/core": "~12.1.1",

projects/table-builder/src/lib/components/generic-table/generic-table.component.html

@@ -23,7 +23,7 @@
 
       <ng-container matColumnDef="index">
           <mat-header-cell *matHeaderCellDef class="f-mat-header-cell" >#</mat-header-cell>
-          <mat-cell *matCellDef="let i = index;"> {{ (paginator.pageIndex * paginator.pageSize) +  i + 1 }} </mat-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>
@@ -35,7 +35,7 @@
 </mat-table>
 
 <div class="flx-row-end sticky">
-  <tb-paginator [dataSource]="dataSource" [tableElRef]="tableElRef"
+  <tb-paginator [dataSource]="dataSource" [tableElRef]="tableElRef" #tbPaginator
   [data$]="data$"></tb-paginator>
 
   <mat-icon [matTooltip]="(collapseFooter$ | async) ? 'expand' : 'collapse'" class="collapse-icon footer" (click)="state.toggleCollapseFooter()">

projects/table-builder/src/lib/components/generic-table/generic-table.component.ts

@@ -44,8 +44,6 @@ export class GenericTableComponent implements OnInit {
   @Input() columnBuilders: ColumnBuilderComponent[];
 
   @Input() columnInfos: Observable<ColumnInfo[]>;
-
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatTable, { static: true }) table: MatTable<any>;
   @ViewChild('table', {read: ElementRef}) tableElRef: ElementRef;
   currentColumns: string[];

src/app/table-builder-example/table-builder-example.component.html

@@ -8,7 +8,7 @@
 </div>
 
 <tb-table-container *ngIf='tableBuilder' (data)='emitter($event)' [SaveState]='true' tableId='test-table-id-123' #tb
-  [tableBuilder]='tableBuilder' [inputFilters]='myFilter' [pageSize]="50" [SelectionColumn]='true' (selection$)="selectionEvent($event)">
+  [tableBuilder]='tableBuilder' [inputFilters]='myFilter' [pageSize]="50" [SelectionColumn]='true' (selection$)="selectionEvent($event)" [IndexColumn]="true">
   <span [ngClass]="(tb.state$ | async).persistedTableSettings.collapseHeader ? 'small-title' : 'big-title'"
   class="tb-header-title">TRIAL TITLE</span>
   <p *customCell="'testCell';let element = element;" [class.makeMeRed]="element?.name && element?.name[0] === 'H'" >Hi {{element.name}}!</p>