Angular Material 2: Multiple mat-table sorting is working on first table only

Question

I have used Angular Material in my application and I have two mat-table with sorting on single component but my sorting is working only on first table

here is ts code

@ViewChild(MatSort) inventoryDataSort: MatSort;
@ViewChild(MatPaginator) inventoryDataPaginator: MatPaginator;

@ViewChild(MatSort) additionalDataSort: MatSort;
@ViewChild(MatPaginator) additionalDataPaginator: MatPaginator;
ngAfterViewInit() {
    this.inventoryDataSource.sort = this.inventoryDataSort;
    this.inventoryDataSource.paginator = this.inventoryDataPaginator;
    this.additionalDataSource.sort = this.additionalDataSort;
    this.additionalDataSource.paginator = this.additionalDataPaginator;
}

mat-table

<mat-table #table1 [dataSource]="inventoryDataSource" matSort>
<mat-table #table2 [dataSource]="additionalDataSource" matSort>

score 7 · Accepted Answer · edited Mar 28 '18 at 21:15

7

Selector in ViewChild queries DOM and it finds first math. Could you try change this part from

@ViewChild(MatSort) inventoryDataSort: MatSort;
@ViewChild(MatPaginator) inventoryDataPaginator: MatPaginator;

@ViewChild(MatSort) additionalDataSort: MatSort;
@ViewChild(MatPaginator) additionalDataPaginator: MatPaginator;

to

@ViewChild(MatSort) inventoryDataSort: MatSort;
@ViewChild(MatPaginator) inventoryDataPaginator: MatPaginator;

@ViewChild('table2', {read: MatSort}) additionalDataSort: MatSort;
@ViewChild('table2', {read: MatPaginator}) additionalDataPaginator: MatPaginator;

edited Mar 28 '18 at 21:15

Kim Kern

54,283
17
197
195

answered Dec 07 '17 at 09:10

MRsa

666
4
8

Still not working for me. I am having pagination and sort on all tables. – AlpeshVasani Feb 08 '18 at 11:22
@ViewChild('table2', { read: MatPaginator }) paginatorUpcoming: MatPaginator; @ViewChild('table3', { read: MatPaginator }) paginatorExpired: MatPaginator; @ViewChild(MatPaginator) paginatorGym: MatPaginator; @ViewChild('table2', { read: MatSort }) sortUpcoming: MatSort; @ViewChild('table3', { read: MatSort }) sortExpired: MatSort; @ViewChild(MatSort) sortGym: MatSort; – AlpeshVasani Feb 08 '18 at 11:25

score 0 · Answer 2 · answered Nov 07 '19 at 10:40

I have already answered this in a similar question, but I will post it here also. It might help another poor soul.

Using Angular v.8.2.0.

I am assuming that all required attributes are used and correct (mat-sort, mat-table, [dataSource], matColumnDef, mat-sort-header, etc).

I have a simple component with two sortable tables (I omitted the irrelevant code for brevity).

Each of the tables has an unique ref attribute in the template. For example:

<table #table1>
<table #table2>

Then, in the component, I use the @ViewChild decorator for each of the sorters:

@ViewChild('table1', { read: MatSort, static: true }) sort1: MatSort;
@ViewChild('table2', { read: MatSort, static: true }) sort2: MatSort;

The read property is very important here. Don't miss it!

Then (in ngOnInit), I assign the sorters to each table data source as shown in the offical docs:

this.dataSource1.sort = this.sort1;
this.dataSource2.sort = this.sort2;

Angular Material 2: Multiple mat-table sorting is working on first table only

2 Answers2

Linked