[Sortable] Sorting is always done case sensitive - add an option to make sort case insensitive

[Cyberdada]

Bug, feature request, or proposal:

Bug, feature request, or proposal - I guess all of the above...

What is the expected behavior?

If a flag existed that allowed you to set sort as case insensitive , a case insensitive sort would work like this:
A
b
C

What is the current behavior?

It works like this:
A
C
b

What are the steps to reproduce?

use
https://stackblitz.com/angular/dmykovoxxbv?file=app%2Ftable-sorting-example.ts
and change some of the names intial letter to lowercase

What is the use-case or motivation for changing an existing behavior?

I think more people than me need it :)

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 5.1.0
Material: 5.0.1
Browser: Chrome
TYpescript: 2.6.2

Is there anything else we should know?

[eTallang]

There is a function sortingDataAccessor on MatTableDataSource that can be overwritten to define how the sorting of the different columns should be performed (regarding how to access the data to sort). Setting sortingDataAccessor will solve your problem. However, every time I have used mat-table along with MatTableDataSource and sorting, I have found that I needed to overwrite the sortingDataAccessor, simply because the default data accessor behaves unexpectedly regarding handling null values, numbers vs strings, and as you have experienced, capitalized letters.

I'm not sure how this could be solved generally though, since sorting logic is highly dependent on how the data should be interpeted.

[Cyberdada]

Interesting, thanks. I also noticed that sorting a datecolumn is superslow... I do not understand why though.
In my opinion the grid should offer basic numerical + alphanumerical case /not case sensitive + time sorting, and it should be able handle nulls/nan/undefined ;) If your needs go above that you would have to roll your own sorter.

[jelbourn]

Adding an option for case insensitivity would be odd in cases when people do specify a custom comparator

[eTallang]

@jelbourn I agree, I'm not sure providing flags for altering sorting logic is the best approach here. Could a reevaluation of the default sorting behavior be appropriate? In my opinion, the most logical approach to a default sorting function would be to make it case-insensitive, and handle null values and dates more gracefully than today.

[andrewseguin]

Sorting for null/undefined values has a fix here #8698

[andrewseguin]

With regard to changing case insensitivity in sort, I think its best to be explicit with how you want the data to be viewed when sorting, which is what the sortingDataAccessor is for. It should be fairly trivial to return your data with toLowerCase() when sorting. I don't expect us to change the default behavior of handling cases since it would be a large breaking change at this point for something that can easily be overriden.

[LosD]

@andrewseguin At least it should be documented properly with a big label of "We know that our default is weird, but we can't change it now, here's how to fix it:".

When you break the least-surprise rule, you need to be very explicit about it.

[skined90]

Can someone please write an example how to override sortingDataAccessor?

[LosD]

@skined90 Luckily, it's pretty simple. Here I based the solution on the original StackBlitz code linked in the issue: https://stackblitz.com/edit/angular-yfw5ia?file=app/table-sorting-example.ts

Only difference is the added constructor (ngInit might be a better place, but this is what is used in our production code, so this I know works), and the data changed to get some lowercase names.

Edit: Changed to ngOnInit and tested. Works fine. I think that's preferable.

Yet another edit: My own code doesn't have any number fields, if yours do, you'll need to re-implement the default sort's way to treat numbers as a special case. Currently the sort will stop working if you try to sort one of the number columns.

[skined90]

@LosD Thank you very much!

[LosD]

You're very welcome. :)

[YakirSmartag]

This is a code that does a special case for a string, but otherwise just returns the value:

this.dataSource.sortingDataAccessor = (data: any, sortHeaderId: string): string => {
  if (typeof data[sortHeaderId] === 'string') {
    return data[sortHeaderId].toLocaleLowerCase();
  }

  return data[sortHeaderId];
};