[data grid] Stable sorting of DataGrid columns

[laurisvan]

Summary 💡

DataGrid has interesting keyboard modifiers for primary and secondary sorting. However, these are difficult for anybody but heavy users to learn.

Instead, why not use stable sorting when ordering DataGrid contents? For example, see the examples at https://mui.com/x/react-data-grid/sorting/ - when first sorting by "Created on", then "Rating", one would expect to get 5-star rated items on the top, secondarily ordered by "Created on". Instead, the "Created on" seems to get in a seemingly arbitrary order.

This has been a standard behavior for e.g. OS/X and Windows file browsers, Excel etc, so a lot of users have learnt to make use of it.

This probably would also help when inserting items in-between etc, so that the order would be retained.

I am a bit unsure on why the order is not stable, as e.g. JavaScript Array.sort() has been guaranted to be stable as of ECMAScript 2019. What might be the reason DataGrid would not retain its order?

Examples 🌈

No response

Motivation 🔦

Providing stable sorting would create a compelling and widely used alternative to the difficult primary and secondary sorting column keyboard modifiers.

Search keywords: datagrid stable sort
Order ID: 69243

[DanailH]

@mui/xgrid Can someone help here? I don't think there is a concrete thing that we can do but rather understand the decision we took when we did the multi-sorting feature.

[MBilalShafi]

As far as I understand, instead of going with the primary and secondary only, we chose to allow the users to provide as many criteria as possible, the criteria selected first take higher priority, so in your example, if Created On is sorted first, and then Rating is sorted, the first preference will be given to the Created On which is also illustrated by the numbers assigned to each of the sort.

Now because the created on is never repeated, you can see no visual impact on the rating, as it's now a lower priority sort.

Instead, if you try selecting Rating first, and then Created on, you can see the rows first sorted by rating and then by created date:

Is your proposal to inverse this behavior, i.e. the item sorted on the last taking higher priority? Don't you think it makes more sense to keep it like the current behavior (the users can always swap the order of selection of sorts)?

[laurisvan]

@MBilalShafi Let me be clear on what I suggest with the same pictures you have mentioned using good old MS Excel that might be the most widely used "grid editor".

Plese note that this does not require any special data structures - it only requires that the sorted elements are retained in state, and that when the order is changed, the elements in the state are reordered. Unfortunately I do not know enough of MUI internals that I could point to where the problem might be. But as it fails in your example page, I believe the problem might be specific to the UI component (as mentioned before JavaScript Array.sort is at least claimed to be stable).

1. Initially these people are ordered by name (not relevant in this example)

2. When selecting Sort By "Created on" (desc), the items get ordered from most recent to newest.

3. When selecting Sort By "Rating", the items get ordered by rating.

Current & expected outcome: *Please pay close attention to "Created on" - they remain ordered by date within the rating groups (the most recent 5-start item appears first, e.g. 24.10. appears before 12.10.). This is not a coincidence, but stable sorting.

Now, when repeating the same pattern with the MUI Grid example:

1. The initial order is whatever it might be (in this case Name DESC)

2. I sort by "Created on" DESC

3. I Sort by "Rating" DESC

When scrolling down, I see':

Current outcome: The previous sort order is not retained, at least fully - the order of "Created on" is messed up within the same 5-star rating groups
Expected outcome: The previous sort order would be retained

[MBilalShafi]

Ah I see, thanks for the detailed example, now I understand your request.

For the grid, you can achieve the same by multiple sort criterion as I mentioned in my first comment, the grid doesn't retain the previous sort for the column from which the sort has been removed, that's a design choice we took while implementing sorting and I think it makes sense too because more freedom is available to users to define any sort priority/order using multi-sorting. (For a benchmark, AgGrid also behaves in a similar fashion)

@mui/xgrid What do you think?

[cherniavskii]

Would it make sense to add an option for changing the default sorting behavior to multi-sorting?