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

Supposition

can you please elaborate your question and more descriptive what you have done and what you want? – Bink

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://mcmap.net/q/67332/-how-to-manage-angular2-quot-expression-has-changed-after-it-was-checked-quot-exception-when-a-component-property-depends-on-current-datetime
    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>

Ghirlandaio

With angular 7 the second table doesn't appear to have a sort registered because the @ViewChild is not set properly. Instead of two separate @ViewChild annotations you can do something like this: @ViewChildren(MatSort) set matSort(s: QueryList<MatSort>) { // do processing }); – Vallejo

Well, that is frustrating. I would expect to manage those independently, since you might be using them for completely different data representations. Good on you for finding this information out @jbaranski – Ghirlandaio

thanks a lot, I searched a lot for the solution, they say nothing in the documentation of matTable – Outmost

You're very welcome @HazemHASAN. Glad I could help. – Ghirlandaio

@jbaranski where did you find this? Also what do you mean by do processing. An example would be very beneficial to this post. – Mage

@NickGallimore I kind of just played around with it, there was no solid example, does this help? gist.github.com/jbaranski/3ce6581b05f0a360e4e9df836038d177 – Vallejo

What if the number of tables is dynamic? – Hertz

@QianChen => I'm not sure how to do that. I would have to research it myself. This answer is only for the original poster's question. If you want to link to another issue, I could take a shot at it. – Ghirlandaio

This answer doesn't seem to work for Angular 15. The template variable assignment #firstTableSort="matSort" causes an NG8003: No directive found with exportAs 'matSort' error which I couldn't resolve. @AtanasAtanasov's answer worked for me. – Houseroom

@AngelBalashev => I should've prefaced my original answer with the version of Angular I was using at the time. My answer worked for Angular 4, so I will edit my answer above. Thank you for the info! – Ghirlandaio

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.

Kennykeno

for some reason i had to make a little change: @ViewChild('table1', { static: false }) public sort1: MatSort; PD: I'm using a Metronic Theme with Angular 8 and Material 8 but with the notations of Material 5... – Algin

I think this is the most suitable answer (at least for Angular 15). Also the part with static: true is redundant. – Houseroom

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>

Tambac

This doesn't work for angular 7 but the accepted answer is close, I added a comment there with a tweak I had to do to get it working. – Vallejo

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>

Polo

Answer 5

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

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

Goalie

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>();

Bobbysoxer