Angular Material distinct mat-sort on multiple tables

Question

No problem with separate/distinct pagination on multiple Material tables in Augular. But sorting separate tables on a page is not as simple it seems.

Can someone please point us to a working example of multiple table sorting using the Material Angular (ver 4-5) table component.

Thank You

Answer 1

After a long search, I finally found the resolution to your issue, as well as the full resolution and link to where I found certain pieces. Hopefully this works for you, as it is finally working for me.

Edit: This answer worked for me on Angular 4, so I can't speak to the later versions. Based on a comment from someone below, it appears another answer solves this problem for later versions of Angular.

import { Component, AfterViewInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { MatSort, MatTableDataSource } from '@angular/material';

@Component({
  templateUrl: './my-tables.component.html'
})
export class CopyInstructionsComponent implements AfterViewInit {
  public myFirstTableData: MatTableDataSource<MyTableModel>;
  public mySecondTableData: MatTableDataSource<MyTableModel>;
  @ViewChild('firstTableSort') public firstTableSort: MatSort;
  @ViewChild('secondTableSort') public secondTableSort: MatSort;
  
  constructor(private cdRef: ChangeDetectorRef) {
    // ...the rest of your code here to build the data structures.
  }
  
  ngAfterViewInit() {
    this.myFirstTableData.sort = this.firstTableSort;
    this.mySecondTableData.sort = this.secondTableSort;
    // See => https://stackoverflow.com/questions/39787038/how-to-manage-angular2-expression-has-changed-after-it-was-checked-exception-w
    this.cdRef.detectChanges()
  }
}

<mat-table
  #firstTable
  #firstTableSort="matSort"
  [dataSource]="myFirstTableData"
  matSort
>
  <ng-container matColumnDef="column1">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Column 1</mat-header-cell>
    <mat-cell *matCellDef="let row">{{ row.column1 }}</mat-cell>
  </ng-container>
</mat-table>

<mat-table
  #secondTable
  #secondTableSort="matSort"
  [dataSource]="mySecondTableData"
  matSort
>
  <ng-container matColumnDef="column1">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Column 1</mat-header-cell>
    <mat-cell *matCellDef="let row">{{ row.column1 }}</mat-cell>
  </ng-container>
</mat-table>

Answer 2

After banging my head against the wall for several hours I finally managed to make this work.

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;

I hope this answer helps someone.

Edit: the solution works well with Angular 9 and 10 too.

Answer 3

Here is an Angular 6 working solution for mat-sort on multiple tables:

import { MatSort, MatTableDataSource } from '@angular/material';

...

@ViewChild('sortCol1') sortCol1: MatSort;
@ViewChild('sortCol2') sortCol2: MatSort;

...

Data source 1:

this.dataSource1 = new MatTableDataSource(this.dataSource1);
this.dataSource1.sort = this.sortCol1;

Data source 2:

this.dataSource2 = new MatTableDataSource(this.dataSource2);
this.dataSource2.sort = this.sortCol2;

...

Table 1 (View):

<table mat-table #sortCol1="matSort" [dataSource]="dataSource1" matSort matSortActive="ID" matSortDirection="asc">
...
</table>

Table 2 (View):

<table mat-table #sortCol2="matSort" [dataSource]="dataSource2" matSort matSortActive="ID" matSortDirection="asc">
...
</table>

Answer 4

Here is my solution using the @ViewChildren property decorator. Be sure that the order of your tables matches the sequential order in the QueryList.

"@angular/material": "^7.3.7"

import { MatSort, MatTableDataSource } from '@angular/material';

sortList: QueryList<MatSort>;
@ViewChildren(MatSort) set matSort(ms: QueryList<MatSort>) {
    this.sortList = ms;
    if (this.dataSource1) {
      this.dataSource1.sort = this.sortList.toArray()[0];
    }
    if (this.dataSource2) {
      this.dataSource2.sort = this.sortList.toArray()[1];
    }
    if (this.dataSource3) {
      this.dataSource3.sort = this.sortList.toArray()[2];
    }
}

setup MatTableDataSource in ngOnInit():

this.datSource1 = new MatTableDataSource(this.userData1);
this.dataSource2 = new MatTableDataSource(this.userData2);
this.dataSource3 = new MatTableDataSource(this.userData3);

HTML (simplified)

<mat-table [dataSource]="dataSource1" matSort>
  <ng-container matColumnDef="name">
    <mat-header-cell mat-sort-header *matHeaderCellDef>Name</mat-header-cell>
    ...
  </ng-container>
</mat-table>
<mat-table [dataSource]="dataSource2" matSort>...</mat-table>
<mat-table [dataSource]="dataSource3" matSort>...</mat-table>

Answer 5

For Angular 8: you need to use {static: true} after sort name

@ViewChild('firstTable',{static: true}) firstTable: MatSort;

Answer 6

I put the second mat-sort in the child component and used @Input to transfer data between parent and child.

For example: The first mat-sort for Order data, and the second mat-sort for OrderDetail. (I expect the result that I click the order to expand the order detail data and both have a sort function. It's work for me, hope to help you.)

In the parent component:

<app-sales-orderdetail 
 [orderDetailDataInChild]="orderDetailDataInParent"'></app-sales-orderdetail>

In the child component:

@Input() orderDetailDataInChild = new MatTableDataSource<any>();