Is there a collation method for MatSort that accommodates languages with alphabetical orders differing from Unicode orders?

Question

Is there a collation method for MatSort that accommodates languages with alphabetical orders differing from Unicode orders?

When it comes to the Norwegian and Danish Alphabets, the proper order of the characters is as follows:

Æ
Ø
Å

However, MatSort follows the Unicode order for these characters:

Å (197)
Æ (198)
Ø (216)

Is there a way to implement collation to address this issue?

Check out this stackblitz with a table that can be sorted by "No." and "Name":

https://stackblitz.com/edit/angular-an1uqc-8mdqns

Here's the data in the table:

 {position: 1, name: 'Alpha', description: 'Test123'},
  {position: 2, name: 'Bravo',  description: '0'},
  {position: 3, name: 'Charlie', description: 'aaa'},
  {position: 4, name: 'Delta',  description: ''},
  {position: 5, name: 'Echo',  description: '1'},
  {position: 6, name: 'Foxtrot',  description: '2'},
  {position: 7, name: 'ÆGamma',  description: ''},
  {position: 8, name: 'ØHotel',  description: '3'},
  {position: 9, name: 'ÅIndigo',  description: '1000'},

];

According to the Norwegian/Danish alphabet, the correct sorting order for the last three items (ÆGamma, ØHotel, and ÅIndigo) should be:

ÆGamma
ØHotel
ÅIndigo

Yet, MatSort uses Unicode numbers for these characters and sorts them in this manner:

ÅIndigo (197)
ÆGamma (198)
ØHotel (216)

Thank you for taking the time to read this! :]

angular typescript sorting angular-material collation

Answer 1

Answer №1

To achieve a customized localized sort, you can utilize the matSortChange method. This involves implementing String.prototype.localCompare with the language identifier da-DK:

For the template:

<table
  mat-table [dataSource]="sortedData"
  matSort (matSortChange)="sortData($event)"
  class="mat-elevation-z8">

In the component:

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

  this.sortedData = data.sort((a, b) => {
    const isAsc = sort.direction === 'asc';
    switch (sort.active) {
      case 'position': return compareNumber(a.position, b.position, isAsc);
      case 'name': return compareString(a.name, b.name, isAsc);
      case 'description': return compareString(a.description, b.description, isAsc);
      default: return 0;
    }
  });
}

// ...

function compareNumber(a: number, b: number, isAsc: boolean) {
  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

function compareString(a: string, b: string, isAsc: boolean) {
  return a.localeCompare(b, 'da-DK') * (isAsc ? 1 : -1);
}

Check out this live example.

The sorted output will be:

1 Alpha
// ...
6 Foxtrot
7 ÆGamma
8 ØHotel
9 ÅIndigo

And in reverse:

9 ÅIndigo
8 ØHotel
7 ÆGamma
6 Foxtrot
// ...
1 Alpha

Hopefully this explanation is helpful!

Answer 2

To achieve a customized localized sort, you can utilize the matSortChange method. This involves implementing String.prototype.localCompare with the language identifier da-DK:

For the template:

<table
  mat-table [dataSource]="sortedData"
  matSort (matSortChange)="sortData($event)"
  class="mat-elevation-z8">

In the component:

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

  this.sortedData = data.sort((a, b) => {
    const isAsc = sort.direction === 'asc';
    switch (sort.active) {
      case 'position': return compareNumber(a.position, b.position, isAsc);
      case 'name': return compareString(a.name, b.name, isAsc);
      case 'description': return compareString(a.description, b.description, isAsc);
      default: return 0;
    }
  });
}

// ...

function compareNumber(a: number, b: number, isAsc: boolean) {
  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

function compareString(a: string, b: string, isAsc: boolean) {
  return a.localeCompare(b, 'da-DK') * (isAsc ? 1 : -1);
}

Check out this live example.

The sorted output will be:

1 Alpha
// ...
6 Foxtrot
7 ÆGamma
8 ØHotel
9 ÅIndigo

And in reverse:

9 ÅIndigo
8 ØHotel
7 ÆGamma
6 Foxtrot
// ...
1 Alpha

Hopefully this explanation is helpful!

Answer 3

Answer №2

Dealing with German umlauts posed a challenge for me as well. To address this issue while utilizing MatTableDataSource, I devised a solution by creating a custom sortData() implementation:

@ViewChildren(MatSort) public matSortQueryList: QueryList<MatSort>;

public dataSource: MatTableDataSource<CUSTOMTYPE> = new MatTableDataSource<CUSTOMTYPE>([]);
private readonly defColl = new Intl.Collator('de');
private readonly _subs = new Subscription();

public ngAfterViewInit() {
  this.dataSource.data = CUSTOMDATA[];
  
  this._subs.add(
    this.matSortQueryList.changes.subscribe(elems => {
      if (elems.length && !this.dataSource.sort) {
        this.dataSource.sort = elems.first;
      }
    })
  );
  
  this.dataSource.sortData = (data: CUSTOMTYPE[], sort: MatSort) => {
    const sorted = data.sort((a, b) => {
      return this.defColl.compare(a.CUSTOMPROPERTY as string, b.CUSTOMPROPERTY as string);
    });

    return sort.direction === 'desc' ? sorted.reverse() : sorted;
  }
}

Additionally, I suggest leveraging Intl.Collator for improved performance over localeCompare.

Answer 4

Dealing with German umlauts posed a challenge for me as well. To address this issue while utilizing MatTableDataSource, I devised a solution by creating a custom sortData() implementation:

@ViewChildren(MatSort) public matSortQueryList: QueryList<MatSort>;

public dataSource: MatTableDataSource<CUSTOMTYPE> = new MatTableDataSource<CUSTOMTYPE>([]);
private readonly defColl = new Intl.Collator('de');
private readonly _subs = new Subscription();

public ngAfterViewInit() {
  this.dataSource.data = CUSTOMDATA[];
  
  this._subs.add(
    this.matSortQueryList.changes.subscribe(elems => {
      if (elems.length && !this.dataSource.sort) {
        this.dataSource.sort = elems.first;
      }
    })
  );
  
  this.dataSource.sortData = (data: CUSTOMTYPE[], sort: MatSort) => {
    const sorted = data.sort((a, b) => {
      return this.defColl.compare(a.CUSTOMPROPERTY as string, b.CUSTOMPROPERTY as string);
    });

    return sort.direction === 'desc' ? sorted.reverse() : sorted;
  }
}

Additionally, I suggest leveraging Intl.Collator for improved performance over localeCompare.

Is there a collation method for MatSort that accommodates languages with alphabetical orders differing from Unicode orders?

Answer №1

Answer №2

Similar questions

The Capacitor Community Electron Platform, which combines IONIC, Angular, and Electron, encountered a TypeError: [ERR_INVALID_ARG_TYPE]. This error message indicates that the "path" argument must be in the

Showing nested arrays in API data using Angular

Surprising fraction of behavior

Capture Video on iOS devices using the MediaRecorder API and display it using HTML5 Video Player

Using Ionic 2 to close the FAB menu with a button press

Error in ag-Grid CSV export feature displaying incorrect file names

Creating a HTML element that functions as a text input using a div

The NestJS framework encountered an error due to a method being undefined in the

Enhance the annotation of JS types for arguments with default values

Angular project models

Using NavParams within a service component,

Utilizing Ionic Storage to set default request headers through an HTTP interceptor in an Angular 5 and Ionic 3 application

Ways to display map results in multiple columns utilizing react

Tips for simulating a Ref

Trigger the React useEffect only when the inputed string matches the previous one

Is there a way to change the font size with a click in JavaScript or Angular?

"Facing an issue where ts-node is not recognizing d.ts files, despite tsc being able to compile them

Implementing intelligent parameter type enforcement according to configuration settings

When utilized in a nested component, the service is found to be null

"During the constructor initialization, an Angular/TypeScript global variable that was assigned within an