Angular Material Table Dynamic Columns|Dynamic-columns-mat-table

Dynamic-Columns-Mat-Table

Here we have solution for dynamic Mat table columns

Step 1: Create column Definition Model class

export  class ColumnDefinition {
    columnDef: string;
    header: string;
    cell: any;
    constructor(_columnDef: string, _header: string, _cell: any) {
     this.columnDef = _columnDef;       this.header = _header; this.cell = _cell;
    }
  }

Step 2: Add Mat-Table Defintion as below in Html Template 

<table mat-table [dataSource]="mattabledataSource" matSort class="mat-elevation-z8">
    <ng-container *ngFor="let col of displaycolumndefs" matColumnDef="{{col.columnDef}}" >
        <div   >
            <th mat-header-cell *matHeaderCellDef  mat-sort-header > {{col.header}}  </th>
            <td mat-cell *matCellDef="let element">{{ col.cell(element) }}</td>
        </div>
    </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Step 3 : Declare Array of ColumnDefinition that defines your dynamic columns as below 

 export const  peoplecolumns: ColumnDefinition[] = [
    { columnDef: 'Sno',    header: 'Sno.',   cell: (element: people) => `${element.Sno}`},
    { columnDef: 'name',     header: 'Name.', cell: (element: people) => `${element.name}`   },
    { columnDef: 'canspeak',   header: 'Can speak?', cell: (element: people) => `${element.canspeak}`},
    { columnDef: 'canwrite',   header: 'Can write?', cell: (element: people) => `${element.canwrite}`}
  ];

Step 4 : Create Data source Model here we created people model as  below

export interface people {
  name: string;
  Sno: number;
  canspeak: boolean;
  canwrite: boolean;
}

Step 5 : Create Data source array , in this example we created people array as below 

export const  PEOPLE_DATA: people[] = [
  {Sno: 1, name: 'John', canspeak: false, canwrite: false},
  {Sno: 2, name: 'Miller', canspeak: false, canwrite: false},
  {Sno: 3, name: 'Peter', canspeak: false, canwrite: false},
  {Sno: 4, name: 'Smith', canspeak: false, canwrite: false},
  {Sno: 5, name: 'Warner', canspeak: false, canwrite:false},
  {Sno: 6, name: 'Shane', canspeak: false, canwrite:false},
  {Sno: 7, name: 'Mr.G', canspeak: false, canwrite: false},
  {Sno: 8, name: 'Ryan', canspeak: false, canwrite: false},
  {Sno: 9, name: 'Rocky', canspeak: false, canwrite: false},
  {Sno: 10, name: 'Sham', canspeak: false, canwrite: false},
];

Step 6: In Component.ts file declare below variables 

  displayedColumns: Array<string> = peoplecolumns.map(c => c.columnDef);
  public mattabledataSource:  MatTableDataSource<any>;
  public displaycolumndefs: ColumnDefinition[];
  public peopledata;

            // For Sorting 

@ViewChild(MatSort) sort: MatSort;

 

Step 7: In Component.ts constructor call  add below 

  constructor () {
// peoplecolumns assigned to displayed column definition
    this.displaycolumndefs =peoplecolumns;
    this.peopledata  = PEOPLE_DATA;
// Mat Data Source constructor call 
    this.mattabledataSource = new MatTableDataSource<any>();
// people data assigned to mat data source
    this.mattabledataSource.data =this.peopledata;
}  

Step 8: In Component.ts ngOnInit()-For Sorting

ngOnInit() {

    this.mattabledataSource.sort = this.sort;

  }

Step 9 : Run your project and see the result as  below 

Code Action @ StackBlitz