I have been doing some prototype work with the ng-material's table component. The table component is, basically, a DataGrid.

As part of this proof of concept work I put two separate tables inside the same ecomponent. The code worked well enough, but I had trouble getting both tables to sort.

To get a table to sort you need to add a ViewChild reference to the MatSort. In the HTML:

view plain print about
1<table mat-table [dataSource]="rowData1" matSort >
2</table>

Then you get a reference inside the component code:

view plain print about
1@ViewChild(MatSort) sort: MatSort;

And attach the two together:

view plain print about
1ngOnInit() {
2 this.rowData1.sort = this.sort;
3 }

The my missing magic from last week's post.

There is a problem once you add a second table. First create the two tables:

view plain print about
1<table mat-table [dataSource]="rowData1" matSort >
2</table>
3<table mat-table [dataSource]="rowData2" matSort >
4</table>

Then get the ViewChildren:

view plain print about
1@ViewChild(MatSort) sort: MatSort;
2
3 @ViewChild(MatSort) sort2: MatSort;

This will cause issues, because both variables are pulling the same MatSort value and only the first grid will sort.

The way to solve this is how you mark the table to get the matSort value:

view plain print about
1<table mat-table [dataSource]="rowData1" matSort #sort1="matSort">
2</table>
3<table mat-table [dataSource]="rowData2" matSort #sort2="matSort">
4</table>

Now get the ViewChildren references like this:

view plain print about
1@ViewChild('sort1') sort: MatSort;
2
3 @ViewChild('sort2') sort2: MatSort;

And associate the sort element with the data source:

view plain print about
1ngOnInit() {
2 this.rowData1.sort = this.sort1;
3 this.rowData2.sort = this.sort2;
4 }

Now both grids should sort properly.