CODEWITHSUNDEEP
angularsortingangular-material
Rich
Rich

Reputation: 4248

Angular Material Table Alphanumeric Sorting Behaviour

I'm having a problem in Angular Material Table, although it is technically correct, but I'm thinking if there's another way around for this.

Let say that I do have 5 codes, F1, F2, F5, F9, F10.

The Angular Material Table ascending sort order of this will be,

F1
F10
F2
F5
F9

But I'm expecting it to be

F1
F2
F5
F9
F10

My html code is here

<table mat-table [dataSource]="model.financingPurposeList" class="mat-elevation-z8" width="100%">

   <ng-container matColumnDef="code">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Code </th>
       <td mat-cell *matCellDef="let financingPurpose"> {{financingPurpose.code}} </td>
   </ng-container>

   <ng-container matColumnDef="description">
       <th mat-header-cell *matHeaderCellDef> Description </th>
       <td mat-cell *matCellDef="let financingPurpose"> {{financingPurpose.description}} </td>
   </ng-container>

   <tr mat-header-row *matHeaderRowDef="['code', 'description']; sticky: true"></tr>
   <tr mat-row *matRowDef="let row; columns: ['code', 'description'];" (click)="model.selectedFinancingPurpose.toggle(row)"></tr>

</table>

Is there a possible way to do this?

Related Link:

Natural Sorting

Sorting column containing both numbers and strings

Upvotes: 9

Views: 5625

Answers (5)

Mikolaj
Mikolaj

Reputation: 1889

First of all place the matSortChange event listener that points to your sort method into your HTML table tag. In this case its sortData($event) but the name its up to you.

<table mat-table matSort aria-label="Elements"  [dataSource]="dataSource" (matSortChange)="sortData($event)">

Then in your component code add the sort method. Note that you need to insert each column name into switch statement on which you wish to sort.

sortData(sort: Sort): number {
const data = this.inputData.slice();
if (!sort.active || sort.direction === '') {
  this.sortedData = data;
  return;
}

const sortedData = this.inputData.slice(); // input data is your data.
sortedData.sort((a, b) => {
  const isAsc = sort.direction === 'asc'; // detect sort direction
  switch (sort.active) {
    case 'name': return this.sortAlphanumeric(a.name, b.name, isAsc); // column name
    default: return 0;
  }
});

this.dataSource.data = sortedData; // assigns sorted data to your data in the table   }

Next step is to add the custom natural sorting algorithm.

sortAlphanumeric(a: string, b: string, isAsc: boolean): number {
return isAsc ? a.localeCompare(b, 'en', { numeric: true }) : b.localeCompare(a, 'en', { numeric: true }); }

Similar solution with basic sort algorithm: https://material.angular.io/components/sort/overview

Upvotes: 1

Luke Kroon
Luke Kroon

Reputation: 1103

I ended up overriding the sorting function in the data source to use local compare on two strings. The source code is here https://github.com/angular/components/blob/master/src/material/table/table-data-source.ts#L165 and the relevant lines I changed are below

this.dataSource.sortData = (data: T[], sort: MatSort) => {
         .
         .
         .
        let comparatorResult = 0;
        if (valueA != null && valueB != null) {
          // ----- Added this IF below ----.
          if (valueAType === 'string' && valueBType === 'string') {
            comparatorResult = (valueA as string).localeCompare(valueB as string, 'en', { numeric: true })
          } else if (valueA > valueB) {
            comparatorResult = 1;
          } else if (valueA < valueB) {
            comparatorResult = -1;
          }
        } else if (valueA != null) {
        .
        .
        .
      });
    }

Upvotes: 1

Amit Baranes
Amit Baranes

Reputation: 8132

You can achieve that by adding sort function after getting the data.

usage:

ngOnInit() {
this.dataSource.data.sort((a, b) => (a.code- b.code) );
  }

Upvotes: 2

Rich
Rich

Reputation: 4248

This isn't the best solution for this, but I created a short and sweet workaround for this. Using the sort predicate function of the array.

// Following the example to the question

financingPurposeList.sort(function(a, b){
   return a.code.length - b.code.length;
});

Upvotes: 4

Ushma Joshi
Ushma Joshi

Reputation: 459

You can do something like this.

var collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'});
var myArray = ['F1',
'F10',
'F2',
'F5',
'F9'];
console.log(myArray.sort(collator.compare));

Upvotes: 2

Related Questions