[grid] Provide additional control over sorting

[krumware]

Description

The current default sorting algorithm in vaadin-grid-sorter will cause issues for some users, and is fairly limited.

The most obvious problem visible is lack of control over string sorting, where uppercase and lowercase letters are treated differently. If we have a list of usernames (or other mixed casing strings) [ Foo, bar, baz ] and sort Ascending, the user will see [ Foo, bar, baz ] when they will clearly expect to see [ bar, baz, Foo].

Expected outcome

Developers should have options to augment or provide sorting options or function.

A few potential proposals: Expose a value attribute on vaadin-grid-sorter that overrides path and allows the user to provide a computed binding or other value to apply to the sorting. ex: value="myEasyToLowerFunction(propertyname)"

Expose similar functionality as dom-repeat by letting the user provide a sort function on vaadin-grid-sorter. sort="mySortingFunction" where mySortFunction: function(items,direction) or similar.

<vaadin-grid-sorter case-sensitive="false"> may be a quick addition, but may open a rabbit hole of (pun not intended) requests for specific sort modifications.

Actual outcome

The grid is at the mercy of the default sorting algorithm.

Live Demo

Steps to reproduce

Browsers Affected

• [x] All

[tomivirkki]

Hi @krumware

If you want custom sorting (or filtering) for the grid, the current advice on this is to implement it in your own dataProvider function like in the “Sorting with Data Provider” demo. When you implement a dataProvider you have full control over the items (including their sort order) that you return for the grid to display.

The items array provider is just one simple dataProvider implementation (that makes a lot of assumptions for the developer). If you want to utilize parts of the items array data source, you can copy those to your own dataProvider.

[limonte]

If you want custom sorting (or filtering) for the grid

@krumware is expecting case-insensitive sorting/filtering to be the default. So am I.

Predix Design System provides case-insensitive sorting/filtering out-of-the-box: https://www.predix-ui.com/#/elements/data-table/px-data-table

The current issue with vaadin-grid is visible in @manolo's example: https://manolo.github.io/crud-demo/index-valo.html

'Cantu' is placed before 'afad asdf' which is totally unexpected.

[krumware]

Thanks for the info @tomivirkki - and good talking to you again! I would argue that implementing a dataProvider function is asking more of a typical developer than should be necessary, and will serve as a barrier to entry for some folks.

Looking at the source, maybe its possible to use a different sorting function instead of _multiSort, if provided in the options that are passed with the filter? I will have to dabble with this when I have the chance to mess with the source.

In the end, I think it makes the most sense to expose something here that allows the developer to customize on a per-column basis rather than per-grid.

[robertop87]

I think by default the natural sorting should be implemented, I mean: (Special Chars), (Numbers) and (Letters) Currently Vaadin sort is not the best because the result is: (Special Chars Group 1), (Numbers), (Special Chars Group 2), (Letters)

[sebastianroming]

Any updates on this? I'm facing the same problem.

[sebastianroming]

@tomivirkki @jtomass Has anything happened here?

[tomivirkki]

Created the following issue https://github.com/vaadin/vaadin-grid/issues/1683 Having the items related features in a dedicated module would make features like this easier for us to implement and nicer for developers to use.