Mat-table Sorting Demo not Working

Question

I am trying to get the mat-table sorting to work locally, and while I can get the data to show up as expected, clicking on the header row does not do the sortin

Answer 1

Actually matColumnDef name(i.e column name) and your Class/Interface property name should be equal to make it work.

Sometimes we can't change our Class/Interface property name, in that case, we can implement custom sorting as below.

let say your columns  as  ['id', 'name'] and 
your class/interface  as  ['userId', 'name']

if we perform sorting on the 'id' column it won't work. Try with the custom sorting

this.dataSource.sortingDataAccessor = (item,property)=>{

 // where item is your class/interface data
 // where property is your column name

       switch(property){
           case 'id' : return item.userId
           default: return item[property];
        }
}