Description
What is the expected behavior?
When a custom sortingDataAccessor
function is assigned to an instance of MatTableDataSource
, I would expect table sorting to work according to that function, regardless of whether the sort
member is assigned before or after the sortingDataAccessor
member.
If there is no way to achieve this, I would at least expect the sensitivity to the assignment order to be mentioned in the documentation in order to avoid confusion. Currently, the Material table documentation does not mention that this is a potential problem.
I encountered this problem when working on an Angular Material application, and it took me a long time to work out why the sorting was not working as I expected.
What is the current behavior?
Sorting works as expected if the sortingDataAccessor
is assigned before the sort
member, but not if it is assigned after the sort
member.
What are the steps to reproduce?
A reproducible example is at: https://stackblitz.com/github/amdw/material-sort-repro
The sortingDataAccessor
here is intended to make the "Score Display" column sort numerically (the same as the "Score Number" column), despite the fact that the column contains string representations of the numbers that use special characters (½) to represent fractions. However, this does not work: trying to click the sort on the "Score Display" column does not result in the expected sort order. (Sorting of the other columns work as expected.)
If you reverse the order of the result.sort
and result.sortingDataAccessor
assignments, as noted in the code comment, then the sorting of the "Score Display" column starts working as expected.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
I've tested it on Angular 7.2, Material 7.3.7, TypeScript 3.2.2. I've tested it on both Firefox 66.0.3 on Fedora 29, and on Chrome 73.0.3683.103 on MacOS Mojave 10.14.3.
Is there anything else we should know?
I can't think of anything.