Using a static array as datasource for mat-table

Question

I'm trying to make use of the Angular Material table. I'm trying to use the same code as the examples they have but I tin into a problem when I have to define the [dataSource]="data".

This question may sound stupid but my table data is a simple array of objects, how can I implement that?

for the sake of explaining let's say my data looks like this:

public data = [{ ID: 1, Code: "Hi" }, { ID: 2, Code: "Bye" }];

Here's the code I currently have:

<div class="example-container mat-elevation-z8">
    <mat-table #table [dataSource]="data">
        <ng-container matColumnDef="number">
            <mat-header-cell *matHeaderCellDef> Number </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{ row.ID }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="Code">
            <mat-header-cell *matHeaderCellDef> Code </mat-header-cell>
            <mat-cell *matCellDef="let row">{{row.Code}}</mat-cell>
        </ng-container>

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

Answer 1

I found the provided instructions on Angular Material Table rather lacking. Maybe I can help clarify the provided examples.

<mat-table [dataSource]=”dataSource”>
  ...
</mat-table>

• [dataSource]=”dataSource”: This is your actual data array or data source containing the information you want to display. In your case just 'data'.

• You do n̲o̲t̲ need to instantiate a new DataSource as mentioned in Pierre Mallet's answer, an array will suffice. But if you wanted to do that, the simplest way would be (sticking with the names from your example):

  public dataSource = new MatTableDataSource(this.data);

  • Benefits of using/extending the type DataSource are listed here in the documentation.

<ng-container matColumnDef="userName">
  <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
  <mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>
</ng-container>

• matColumnDef="userName": This is just a name to identify this ng-container. Notice the lack of [] around 'matColumnDef', this is not a binding. It is not related to the data you want to display, you may name it anything you want.

• <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>: Not much going on here. Just replace 'Name' with any string you wish to be displayed on top of the column.

• The order in which you place your ng-containers does not matter. In fact, defining your ng-containers here does not mean they will be displayed at all. Whether a ng-container will be displayed at all and in which order will be decided later with *matHeaderRowDef.

• <mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>: Here you declare what is being displayed as data in this column. The variable 'user' is declared h̲e̲r̲e̲ and has no explicit knowledge of your data. You could name this variable anything you want. But the property being called i.e. 'name' must be a property that exists in the data you bound to the datasource.

<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>

• *matHeaderRowDef="columnsToDisplay": This is responsible for determining which of the ng-containers headers will be displayed. 'columnsToDisplay' is a string array containing the names you gave the ng-containers as identifiers. The order in which you place the identifiers in this array determines the order in which the column headers appear. If you ommit the identifier of an ng-container, that container won't be displayed.

<mat-row *matRowDef="let myRowData; columns: columnsToDisplay"></mat-row>

• Displays the rows in the corresponding columns. Except for 'columnsToDisplay' the variables are declared here.