
<div class="mat-custom-table-wrapper">
  <mat-table #table [dataSource]="dataSource" class="mat-elevation-z8" matSort>
  <!-- checkbox header -->
  <ng-container matColumnDef="select">
    <mat-header-cell *matHeaderCellDef>
      <mat-checkbox
        color="primary"
        (change)="$event ? masterToggle() : null"
        [checked]="selection.hasValue() && isAllSelected()"
        [indeterminate]="selection.hasValue() && !isAllSelected()"
      >
      </mat-checkbox>
    </mat-header-cell>
    <mat-cell *cdkCellDef="let row">
      <mat-checkbox
        color="primary"
        (click)="$event.stopPropagation()"
        (change)="$event ? selection.toggle(row) : null"
        [checked]="selection.isSelected(row)"
      >
      </mat-checkbox>
    </mat-cell>
  </ng-container>
  <!-- table dynamic columns -->
  <ng-container
    *ngFor="let column of columns"
    [matColumnDef]="column.columnDef"
  >
    <mat-header-cell *cdkHeaderCellDef mat-sort-header
      >{{ column.header }}</mat-header-cell
    >
    <mat-cell *cdkCellDef="let row">
      <div *ngIf="column.header.includes('Date')">
        {{row[column.columnDef] ? (row[column.columnDef] | date: 'dd/MM/yyyy') :
        ''}}
      </div>

      <div *ngIf="column.header.includes('Volume')" style = "padding-right: 10px;">
        {{row[column.columnDef] ? (row[column.columnDef] | number : '1.3-3') :
        ''}}
      </div> 

      <div
        *ngIf="!column.header.includes('Date') && !column.header.includes('Volume')"
      >
        {{row[column.columnDef] }}
      </div>
    </mat-cell>
  </ng-container>

  <!-- table action column -->
  <ng-container matColumnDef="action">
    <mat-header-cell *matHeaderCellDef>Action</mat-header-cell>
    <mat-cell
      *matCellDef="let element"
      action-buttons
      [value]="element"
      (buttonAction)="onTableAction($event)"
    >
      {{ element.weight }}
    </mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
</div>
