Angular material table from list of list

Question

I want to display following data as table. But it does not work as expected. How can I do it?

displayColumns = ['A', 'B', 'C']
values = [
['a1', 'b1', 'c1'],
['a2', 'b2', 'c2'],
['a3', 'b3', 'c'],
]

<table mat-table [dataSource]="values" class="mat-elevation-z8">
    <ng-container matColumnDef="A">
      <th mat-header-cell *matHeaderCellDef>A</th>
      <td mat-cell *matCellDef="let item; let i = index">{{ item }}</td>
    </ng-container>
    <ng-container matColumnDef="B">
      <th mat-header-cell *matHeaderCellDef>B</th>
      <td mat-cell *matCellDef="let item; let i = index">{{ item }}</td>
    </ng-container>
    <ng-container matColumnDef="B">
      <th mat-header-cell *matHeaderCellDef>B</th>
      <td mat-cell *matCellDef="let item; let i = index">{{ item }}</td>
    </ng-container>

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

I tried above code but displays wrong data.

Answer 1

As simple as:

 <table mat-table [dataSource]="values" class="mat-elevation-z8">
    <ng-container matColumnDef="A">
      <th mat-header-cell *matHeaderCellDef>A</th>
      <td mat-cell *matCellDef="let row">{{ row[0] }}</td>
    </ng-container>
    <ng-container matColumnDef="B">
      <th mat-header-cell *matHeaderCellDef>B</th>
      <td mat-cell *matCellDef="let row">{{ row[1] }}</td>
    </ng-container>
    <ng-container matColumnDef="C">
      <th mat-header-cell *matHeaderCellDef>C</th>
      <td mat-cell *matCellDef="let row">{{ row[2] }}</td>
    </ng-container>

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

Notice you don't need to let item. Simply reference the same row you define later in <tr>:

<td mat-cell *matCellDef="let row">{{ row[0] }}</td>