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 [d

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.

Answer 2

even if you use static datas you will have to instantiate a new DataSource.

mat-table always need a real DataSource in @Input. DataSource is an abstract class, so you have to implement a class who inherit from DataSource.

This DataSource must have a method "connect" implemented which will return an Observable of the data you want to display.

So in your case something like that should work ;

// in your component

interface MyDataType {
    ID: number;
    Code: string;
}

export class StaticDataSource extends DataSource<MyDataType> {
  constructor(private staticData: MyDataType[]) {
    super();
  }

  connect(): Observable<MyDataType[]> {
    return Observable.of(this.staticData);
  }

  disconnect() {}
}
...
this.staticDataSource = new StaticDataSource(data);

// in your template
 <mat-table #table [dataSource]="staticDataSource">