Check out our Angular Book Series.

How do I sort two ng-material table instances on the same component?

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:


<table mat-table [dataSource]="rowData1" matSort >
</table>

Then you get a reference inside the component code:


@ViewChild(MatSort) sort: MatSort;

And attach the two together:


ngOnInit() {
this.rowData1.sort = this.sort;
}

The my missing magic from last week's post.

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


<table mat-table [dataSource]="rowData1" matSort >
</table>
<table mat-table [dataSource]="rowData2" matSort >
</table>

Then get the ViewChildren:


@ViewChild(MatSort) sort: MatSort;

@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:


<table mat-table [dataSource]="rowData1" matSort #sort1="matSort">
</table>
<table mat-table [dataSource]="rowData2" matSort #sort2="matSort">
</table>

Now get the ViewChildren references like this:


@ViewChild('sort1') sort: MatSort;

@ViewChild('sort2') sort2: MatSort;

And associate the sort element with the data source:


ngOnInit() {
this.rowData1.sort = this.sort1;
this.rowData2.sort = this.sort2;
}

Now both grids should sort properly.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.