Components: [Table] Collation for languages where alphabetical order is different from Unicode order

[turbolego]

Feature Description

In Norwegian and Danish Alphabets, the correct order of the Norwegian/Danish characters are:

1. Æ
2. Ø
3. Å

However, the Unicode order for these characters are:

1. Å (197)
2. Æ (198)
3. Ø (216)

Could collation be implemented to solve this?

Use Case

Here is a stackblitz with a table that can be sorted by "No." and "Name":

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

If you sort by "Name" the name starting with "Å" comes before "Æ" and "Ø".
If the sorting was following the alphabetical order of Norwegian/Danish, the name starting with "Æ" would come before "Ø" and "Å".

As it stands now, the sorting of names with Norwegian and Danish characters are incorrect.

Thanks for reading! 😄

[jelbourn]

The MatTableDataSource is meant to be a super simple "getting started" data source more than anything else. The intent is that, for more complex scenarios (e.g. robust i18n, server-side operations, etc.), apps would create their own data source.

Our docs could probably do a better job of communicating this, though.

[turbolego]

@jelbourn the data in the table in my stackblitz example is this:

```const ELEMENT_DATA: TestElement[] = [
{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'},

];
```
The correct way to sort the last three items (ÆGamma, ØHotel and ÅIndigo) according to the Norwegian/Danish alphabet would be:

1. ÆGamma
2. ØHotel
3. ÅIndigo

But MatSort uses the Unicode numbers for these characters and sorts like this instead:

1. ÅIndigo (197)
2. ÆGamma (198)
3. ØHotel (216)

How can a different data source cause MatSort to sort on something else than the Unicode numbers for these characters without using something like collation?

Sorry if i misunderstood your previous answer.

[jelbourn]

It would be however these strings are normally sorted in locales where the characters are used; I don't actually know how people do this myself.

[alexstaroselsky]

This can be achieved by using a custom sort implementation via a matSortChange event handler and String.prototype.localeCompare with an a locale, in this case da-DK, passed in.

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

@Component({
  selector: 'table-sorting-example',
  styleUrls: ['table-sorting-example.css'],
  templateUrl: 'table-sorting-example.html',
})
export class TableSortingExample {
  displayedColumns: string[] = ['position', 'name', 'description'];
  sortedData: TestElement[] = [];

  constructor() {
    this.sortedData = ELEMENT_DATA.slice();
  }

  sortData(sort: Sort) {
    console.log(JSON.stringify(sort));

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

    const isAsc = sort.direction === 'asc';

    this.sortedData = data.sort((a, b) => {
      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 compareString(a: string, b: string, isAsc: boolean) {
  return a.localeCompare(b, 'da-DK') * (isAsc ? 1 : -1);
}

Here is an example in action:
https://stackblitz.com/edit/angular-an1uqc-jv1s6z

[turbolego]

Thank you so much @alexstaroselsky this was really helpful! 😄
@jelbourn perhaps this could be added as an example? 😶
https://material.angular.io/components/sort/overview