header = [
    { label: 'ORD_NO', column: 'ORD_NO' },
    { label: 'FITEM_ID', column: 'FITEM_ID' },
  ]

ngAfterViewInit(){
    this.dailyService.getJobStyle()
    .subscribe(JS=>{
      this.jobStyle = JS;
      this.dataSource = new MatTableDataSource<JobStyle>(this.jobStyle);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    })
  }

<!-- FILTER COMPONENT -->
<div class="Parent">
  <mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>
</div>
<!-- FILTER COMPONENT -->

<!-- <div class="mat-elevation-z8 content-center inner-border"> -->
  <table mat-table  [dataSource]="dataSource" matSort>

    <ng-container [matColumnDef]="col.column" *ngFor="let col of header">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{col.label}} </th>
      <td mat-cell *matCellDef="let row"> {{row[col.column]}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>
<!-- </div> -->

<mat-dialog-actions>

  <button class="mat-raised-button" (click)="close()">
    Close
  </button>

  <button class="mat-raised-button mat-primary" (click)="save()">
    Save
  </button>

</mat-dialog-actions>

/* Structure */
.full-width-table {
    width: 100%;
  }

  .mat-form-field {
    font-size: 14px;
    width: 20%;
    padding: 20px;
  }

  .Parent {
    display: flex;
  }

  .padding-top {
    padding-top: 20px;
  }

  .padding-left {
    padding-left: 20px;
  }

  .example-margin {
    margin: 10px;
  }

  .margin-left{
    margin-left: 20px;
  }

  .content-right {
    text-align: right;
  }

  .content-center {
    text-align: center;
  }

  .example-container {
    height: 400px;
    overflow: auto;
  }