Components: Default sorting in Sort header

[JacekKosciesza]

Question:

How can I change Angular Material code below, so that data-table is sorted by 'name' column, ascending order by default. Arrow (indicating current sort direction) must be displayed.

<table matSort (matSortChange)="sortData($event)">
  <tr>
    <th mat-sort-header="name">Dessert (100g)</th>
    <th mat-sort-header="calories">Calories</th>
    <th mat-sort-header="fat">Fat (g)</th>
    <th mat-sort-header="carbs">Carbs (g)</th>
    <th mat-sort-header="protein">Protein (g)</th>
  </tr>

  <tr *ngFor="let dessert of sortedData">
    <td>{{dessert.name}}</td>
    <td>{{dessert.calories}}</td>
    <td>{{dessert.fat}}</td>
    <td>{{dessert.carbs}}</td>
    <td>{{dessert.protein}}</td>
  </tr>
</table>

What is the expected behavior?

What is the current behavior?

I was trying something like this, to show arrow (indicating sort order) but it doesn't work.

<table matSort (matSortChange)="sortData($event)" matSortActive="name" matSortStart="asc" matSortDisableClear>

What are the steps to reproduce?

Here's link to Plunker
StackOverflow Question

[shalugin]

You can do it like this:

  @ViewChild(MatSort) sort: MatSort;

  ngOnInit(): void {
    this.sort.sort(<MatSortable>{
        id: 'id',
        start: 'desc'
      }
    );
  }

[andrewseguin]

You're mistaking matSortStart for matSortDirection.

Try this:

<table matSort (matSortChange)="sortData($event)" matSortActive="name" matSortDirection="asc" matSortDisableClear>

https://plnkr.co/edit/sg0hC5d8LTjLKhbH9Eug?p=preview

matSortStart can be used to reverse the cycle used when sort (e.g. when the user clicks to sort, it starts at desc instead of asc).

[JacekKosciesza]

@andrewseguin Thank you - that's the solution I was looking for. Probably documentation should be updated, because it is not very obvious how to do it.

[ORESoftware]

gotta love the sort.sort

[ichepurnoy]

// And we should remember that matSortActive shall go along with matSortDirection, to start working.

[mhosman]

Related to this, how can I change the sort dynamically after initialization? For example, I have a table and every time I change the sort, I create a new route. Now if I want to go back and dynamically set the order of the prev page, I can set the direction but the active field is not shown with the arrow.

[ichepurnoy]

@mhosman as I said above, maybe, try to set both matSortActive and matSortDirection.

[mhosman]

@ichepurnoy yes, I set both but nothig... maybe is a bug. I have something like this:

<table matSort (matSortChange)="sortData($event)" matSortActive="{{ sortActive }}" matSortDirection="{{ sortDirection }}" matSortDisableClear>

If I set the sortActive and sortDirection values in the ngOnInit it works okay dynamically, but after the view init if I try to change those values is not working.

[spulvraz]

@mhosman: try this instead:
<table matSort (matSortChange)="sortData($event)" [matSortActive]="sortActive" [matSortDirection]="sortDirection" matSortDisableClear>

[mafav]

same issue as @mhosman

[Gil-Epshtain]

same problem as @mhosman, I've try both methods assigning:

1. ... matSortActive="{{ sortActive }}" matSortDirection="{{ sortDirection }}" ...
2. ... [matSortActive]="sortActive" [matSortDirection]="sortDirection" ...
   Both method didn't work after initilized (only the first time I've set the values this will work).
   Any ideas on how to solve this???

[pavelekNET]

It is bug for sure. I solved this issue with a small CSS workaround:

Template:
... [matSortActive]="sortActive" [matSortDirection]="sortDirection" matSortDisableClear

CSS:
th.mat-header-cell .mat-sort-header-container.mat-sort-header-sorted .mat-sort-header-arrow{ opacity: 1 !important; }

[Gil-Epshtain]

I've opened a bug on this issue, see: "Bug: matSortDirection will not work if matSortActive had changed in matSort directive. #12754"

[matthewdfleming]

@pavelekNET I also needed to add the transform to the css (or else the arrow was not aligned properly).

.mat-header-cell .mat-sort-header-container.mat-sort-header-sorted .mat-sort-header-arrow {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

[phihochzwei]

// And we should remember that matSortActive shall go along with matSortDirection, to start working.

YOU sir, are a life saver :)

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}