在angular 6中创建动态且可配置的表的最佳方法是什么？

npm install @angular/material @angular/cdk

import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';

@NgModule({
  imports: [
    MatTableModule,
    MatPaginatorModule
  ],
  ...
})
export class YourModule { }

export interface YourData {
  column1: string;
  column2: string;
  // 其他列...
}

const dataSource: YourData[] = [
  { column1: 'Value 1', column2: 'Value 2' },
  // 其他数据行...
];

export interface YourColumn {
  header: string;
  field: string;
  // 其他配置...
}

const columns: YourColumn[] = [
  { header: 'Column 1', field: 'column1' },
  { header: 'Column 2', field: 'column2' },
  // 其他列...
];

<table mat-table [dataSource]="dataSource">
  <ng-container *ngFor="let column of columns" [matColumnDef]="column.field">
    <th mat-header-cell *matHeaderCellDef>{{ column.header }}</th>
    <td mat-cell *matCellDef="let element">{{ element[column.field] }}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columns.map(column => column.field)"></tr>
  <tr mat-row *matRowDef="let row; columns: columns.map(column => column.field)"></tr>
</table>

<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>