CODEWITHSUNDEEP
angularangular-material
Nibin Baby
Nibin Baby

Reputation: 564

Angular 5 - can we do sorting for a table column and show the icon along it (for unsorting)

I have a table and have activated the sort headers using material angular. Can i sort by any of the column initially and show the unsorting icon, which normally comes after the column name click, along with he initially sorted icon.

For eg.; I have a table with column A,B,C,D. I want to sort the table by column C. And I want the sorted icon active initially (on component load itself).So when I click on the icon it unsorts.

Thanks in advance.

Upvotes: 0

Views: 858

Answers (1)

Fabian Küng
Fabian Küng

Reputation: 6183

Yes you can initially sort a a column. Check out MatSort and its sort function.

All you need to do in your component is the following:

// Reference the matSort which you should already have anyway
@ViewChild(MatSort) sort: MatSort;

ngOnInit() {
  // Link the sort to the table and then sort it initially
  this.dataSource.sort = this.sort;
  this.sort.sort({disableClear: false, id: 'progress', start: 'desc'});
}

Here is a stackblitz where I have taken one of the Angular Material examples and added an initial sort on the column progress.

Upvotes: 1

Related Questions