How to sort angular material design table when rendering/creating

Question

I succesfully applied the sort mechanism for my angular material design table but what I'm missing is that the table sorts itself when I load the page. It works when I click on the column header of the column I want to sort but not at startup. The only solution I can find is the (matSortChange) but I don't want to define a sort function because obviously angular knows the sort function but just does not apply it when the table is created. One problem I may be facing is that I create the dataSource empty because I add the data in the ngOnInit() function.

I also tried matSortActive="name" matSortDirection="desc" and the arrow is there but it is not sorted, maybe because I have only 0's at the beginning before changing the numbers. But I don't know how I could delay this.

Greetings

Welcome to StackOverflow! Please take the tour (and earn a badge while you are at it) / Also read our How to Ask page and edit your question to improve it. Good questions tend to receive quicker, better answers from the community. For starters, please include a minimal reproducible example to your question. Otherwise, it might take a lot more time and a heap of guessing to figure exactly where the issue lies. — blurfus
– blurfus, Commented Apr 7, 2021 at 23:47
Does this answer your question? Default sorting in Angular Material - Sort header — user733421
– user733421, Commented Apr 8, 2021 at 9:07

Eliseo · Accepted Answer · 2021-04-08 06:57:18Z

0

just before asing the sort to the data source:

ngAfterViewInit() {
    this.sort.active="name";
    this.sort.direction="asc"
    this.dataSource.sort = this.sort;
}

See stackblitz

answered Apr 8, 2021 at 6:57

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to sort angular material design table when rendering/creating

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related