Default sort angular mat table arrow not being set

Question

I am trying to get my Material table to first load with a column sorted and have the header arrow set to show that it is sorted. I added the following to my table to sort the table by default when loaded:

<table matSort matSortActive="name" matSortStart="asc" matSortDisableClear>

This seems to work and the data is sorted but the header arrow does no reflect the sort.

score 9 · Accepted Answer · answered Nov 20 '19 at 06:28

9

You can define the default sort before you set the sorter of your datasource.

ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.sort.sort(({ id: 'name', start: 'asc'}) as MatSortable);
    this.dataSource.sort = this.sort;
}

Working Stackblitz example

answered Nov 20 '19 at 06:28

JuNe

1,911
9
28

It worked for me. The arrow being set took a litle bit of time to me because in my case i was putting this code on the ngAfterViewInit(). For some reason it does not work. Moving it to the ngInit() start to work immediately. Thnx – mpssantos Dec 30 '19 at 15:18

score 0 · Answer 2 · answered Feb 17 '21 at 09:50

There are some known issues with mat sort arrow not being displayed.
One issue, while not exactly the same as yours, provides a working, programmatic solution: https://github.com/angular/components/issues/10242
It was the only workaround that worked for me.
For specific code see this answer: https://stackoverflow.com/a/65501143/407758

Default sort angular mat table arrow not being set

2 Answers2