Default sorting in Angular Material - Sort header

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

Answer 1

Maybe have you tried to call on the init of the page the sort function forced on name and direction?

     ngOnInit() {
    let defSort: Sort = {};
    defSort.direction = 'asc';
    defSort.active = 'name';
    this.sortData(defSort);
  }

Answer 2

You can bind mat-table sort properties to you component variable also.

As @Andrew Seguin says:

<table matSort matSortActive="name" matSortDirection="asc">

This is proper way to set default sorting if you know which one is that.

In case that you get sorting from somewhere else (in my case from query string params), you can also do it like this (sorting arrows works perfectly here):

sortDirection: 'name',  // this can be changed or filled in any time
sortProperty: 'asc',


<mat-table matSort [matSortActive]="sortProperty" [matSortDirection]="sortDirection">

Answer 3

In my case sorting was not working because matColumDef id and mat-cell var is different

<ng-container matColumnDef="firstName">
   <th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-table-header">First Name</th>
  <td mat-cell *matCellDef="let item"> {{ item.name}}</td>
</ng-container>

after making changes matColumnDef="firstName" to matColumnDef="name" which is same as item.name

    <ng-container matColumnDef="name">
   <th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-table-header">First Name</th>
  <td mat-cell *matCellDef="let item"> {{ item.name}}</td>
</ng-container>

it works fine for me

Answer 4

Update for Material (tested with v7.3):

@ViewChild(MatSort) matSort: MatSort;

private someMethod(): void {
  this.matSort.sort({ id: 'columnName', start: 'asc', disableClear: false });
}

This will also update the mat-sort-header's arrow without any workaround

Answer 5

I had to make default sort on load

const matSort = { id: defaultSort.name } as MatSortable;
this.sort.direction = defaultSort.sort === 'asc' ? '' : defaultSort.sort === 'desc' ? 'asc' : 'desc' as SortDirection;
this.sort.sort(matSort);

Answer 6

The answer from @Andrew Seguin (first and accepted answer) did the visual trick for me, but it didn't sort the table.

My solution is to use the html code provided by @Andrew Seguin and call the sortData(sort: Sort) method myself, but how to do that? As specified in the documentation, the ,,Sort'' is an interface which hast two properties, active and direction and the interface must look something like that:

export interface Sort {
   active:string //The id/name of the column being sorted
   direction:string //asc or dsc depending on the use case (The sort direction)
}

So the trick is to call the sortData(sort: Sort) method in ngOnInit as follows:

ngOnInit(){
    //Do some nitialization
    this.sortData({active:'name', direction:'asc'});
}

sortData(sort: Sort) {
    //Your sorting algorithm (see examples in documentation, link above and at the bottom)
}

The HTML code is as in the accepted answer ;-) Hope this helps anyone, Alex

Documentation examples