6

I have angular material datasource. angular material version is ^5.0.3 Sorting is working. However for some columns it is sorting incorrectly. where number and text is there. For instance, sorted result like, 'XXX', '1', '1tesxt', '1', 'OPD', OXD', '12'. 

<mat-table #table [dataSource]="dataSource" matSort > 
  <ng-container matColumnDef="model">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Model </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.model}} </mat-cell>
  </ng-container>

Appreciate your help.

Kim Kern
  • 54,283
  • 17
  • 197
  • 195
Roja Fernando
  • 61
  • 1
  • 2

3 Answers3

6

This is because the standard sortingDataAccessor casts number strings to number and in Javascript 1 > 'one' and 1 < 'one' both evaluates to false.

As a workaround, you can define your own sortingDataAccessor without the cast:

ngAfterViewInit() {    
  this.dataSource.sort = this.sort;
  this.dataSource.sortingDataAccessor = (data, attribute) => data[attribute];
}

The workaround is copied from this Github issue.

Random
  • 3,158
  • 1
  • 15
  • 25
Kim Kern
  • 54,283
  • 17
  • 197
  • 195
1
this.dataSource.sortingDataAccessor = (item, property) => ['length', 'age'].includes(property) ? +item[property] : item[property];
sweetnandha cse
  • 705
  • 7
  • 16
0

You need to take out those characters that are not numbers and convert the string that is holding the numeric characters to a numeric type value.

Your initial column value: 'ID0239'. After taking out the characters: '0239'. After converting the string to number: 0239.

And 0239 is the value you need to return inside the sortingDataAccessor function.

Ovidiu
  • 1