Create dynamic table out of an arbitrary Object (which may as well be a JSON Object)

custom-tables.component.html

<table mat-table [dataSource]="tableData" style="width: 100%">
    <ng-container [matColumnDef]="col" *ngFor="let col of tableData[0] | keys">
        <th mat-header-cell *matHeaderCellDef> {{ col }} </th>s
        <td mat-cell *matCellDef="let element"> {{ element[col] }} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="tableData[0] | keys"></tr>
    <tr mat-row *matRowDef="let row; columns: tableData[0] | keys;"></tr>
</table>

custom-tables.component.ts

@Component({
	selector: 'app-custom-tables',
	templateUrl: './custom-tables.component.html',
	styleUrls: ['./custom-tables.component.scss']
})
export class CustomTablesComponent implements OnInit {

    public tableData = [
      {A: "test", B: "super", C: "shit"},
      {A: "test", B: "super", C: "shit"},
      {A: "test", B: "super", C: "shit"},
    ];

    constructor() { }

    ngOnInit() {
      // NOTE: Here we should send a request to retrieve the tables' data (any json object will do)
    }
    
  }

table.pipe.ts

import {Pipe, PipeTransform} from "@angular/core";

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
	transform(value) : any {
		return Object.keys(value);
	}
}