[EuiDataGrid] Change behavior of header cell sorting

[kertal]

When you currently click on a column header sorting link, the selected new sorting is added to the actual sorting.

It can be assumed that most of the times users do not need multi sorting, so it would remove potential confusion (that we encountered in our user testing and while watching live demos). Users would need less actions to sort by a single field, while multi sort would still be possible using to sorting popover:

When a users removes a sorting by the column header, and has multiple sorting fields configured, just the specific field should be removed

[chandlerprall]

It can be assumed that most of the times users do not need multi sorting

This could be true, it could be true for specific apps, and it could be true only for a duration of time as users adjust to modified functionality. I also love just this XKCD.

I wonder if another way to avoid potential confusion is a language change in the column header popover or some other indicator to remind users it is an additive action.

[kertal]

This could be true, it could be true for specific apps, and it could be true only for a duration of time as users adjust to modified functionality. I also love just this XKCD.

True, yes this was specific for the amount of confusion multi sort caused in Discover, and while it's now much better because of the Grid usage, I was suprised it still does. What about making this behavior configureable?

[chandlerprall]

What about making this behavior configureable?

I think we'd want to avoid that, as it would likely cause confusion for anyone switching between those configurations.

I will add that, anecdotally, I sometimes get tripped up when testing with the grid's sorting and I'm adding a column sort, but it appears to have no effect because another column is sorted. I have a feeling this comes from me just playing around with the grid and not really paying attention, but it's certainly worth more exploration / user testing.

[snide]

I think this could be easily solved by just making the last sort you add from the menu the "first" sort run when multiple sorts are provided. It would provide immediate feedback (likely what the user wants) and then they can always go to sort menu to get more fine tuned beyond.

[snide]

To illustrate the above comment. When you sort date here, it should become the primary "first" sort run, rather than the additive, second sort. Account can then move to the secondary position.

[kertal]

I will add that, anecdotally, I sometimes get tripped up when testing with the grid's sorting and I'm adding a column sort, but it appears to have no effect because another column is sorted. I have a feeling this comes from me just playing around with the grid and not really paying attention, but it's certainly worth more exploration / user testing.

Yes, I've watched the exact same behavior in a demo of our Kibana Roadmap which made me write this issue (Also knowing lot's of users had problems with the adding of another sort param in Discover in the classic table)

[kertal]

To illustrate the above comment. When you sort date here, it should become the primary "first" sort run, rather than the additive, second sort. Account can then move to the secondary position.

yes, this would help the user getting the right results. having this adapted we could add some telemetry how much users then remove the previous sorted by value.

Another possible solution, provide more actions in the header cell actions popover.

Like

Sort A-Z - would overwrite previous sorting
Sort Z-A - same

Displayed when it's already sorted:

Add sorting A-Z - would add/prepend sorting
Add sorting Z-A - would add/prepend sorting

however it could also be misleading or would need explanations ... unless we could find better wording

[chandlerprall]

@miukimiu can you please take a look at the proposals from @kertal & @snide and give your recommendation?

[elizabetdev]

@kertal, @chandlerprall and @snide,

Recently in our slack channel, it was reported that the discover's sort seemed to be broken in 7.14.

The multiple-sort is causing confusion and most of the users think that the sorting is not working. The first time used the sorting I thought the same.

I saw all of your recommendations and I tried to come with some solutions.

So I think multiple sort functionality should be an option (prop). By default, it would be disabled but consumers could enable it. As @kertal mentioned:

It can be assumed that most of the times users do not need multi sorting, so it would remove potential confusion (that we encountered in our user testing and while watching live demos)

If it's enabled, a "sort fields" would appear. But to give proper feedback to users once we start sorting numbers would appear near the field. These numbers would indicate the sorting order. And we can maintain the default implementation. The last sort we add it's the last sort in the popover.

I also thought about what if we have a toggle to enable/disable multi-sorting? The bad thing is that it would take a lot of space. And the consuming app could implement this toggle outside of the data grid. But maybe having this button would make it more clear that the multiple sort is enabled or disabled. And the option of enabling or disabling would be a user decision rather than the consuming app.

Let me know what you think about these ideas/suggestions.

[snide]

@miukimiu I like the numbers idea and think that's a fantastic indicator to give more understanding to the sort relationship. I think the hidden functionality can be also be "fixed" by just applying the latest sort as the first sort, rather than the last one (hilariously I see this was my same suggestion months ago). :smile:

I'd prefer if possible we keep the functionality of the grid the same, rather than use a prop toggle. Reasoning is that with a prop I suspect folks will make a subjective decision based upon their needs, and it will lead to inconsistency across the product line. Let's assume mult-sort is possible, and figure out how to solve that with design.

[cchaos]

++ I agree with keeping the functionality built-in without any way to remove it and just fixing the order. This is one of those features of DataGrid that makes it better/more robust than BasicTable and I don't think we need such an explicit checkbox in the already crowded toolbar.

I think the numbering is a great idea. I'd consider making it even more prominent, though like wrapping it in a subdued notification badge.

[elizabetdev]

I'd prefer if possible we keep the functionality of the grid the same, rather than use a prop toggle.

Sounds good 👍🏽

I think the numbering is a great idea. I'd consider making it even more prominent, though like wrapping it in a subdued notification badge.

Wrapping it in a subdued notification badge is a great idea.

@kertal and @chandlerprall do we all agree that the next steps are:

• Fix the order
• Implement the numbers (design is in Figma)

[kertal]

I'd prefer if possible we keep the functionality of the grid the same, rather than use a prop toggle.

Sounds good 👍🏽

I think the numbering is a great idea. I'd consider making it even more prominent, though like wrapping it in a subdued notification badge.

Wrapping it in a subdued notification badge is a great idea.

@kertal and @chandlerprall do we all agree that the next steps are:

• Fix the order
• Implement the numbers (design is in Figma)

fine with that, I like the numbering suggesting, gives clearance what happens. also changing the order is fine. only thing I wonder if we find a way to replace sorting also. Prepending a new sort is fine, however I think most of the time users just want to sort by a single value. However I can't think of a way currently to support this except adding 2 additional header cell actions for replacing the sort ... and this is I think to much for this simple use case.

[chandlerprall]

Adding the numbers sounds great. I don't feel the order change makes sense, I have not seen that pattern in any multi-sort application before, nor does it [anecdotally] feel right from the use cases I've personally had

[ryankeairns]

++ the numbering idea. -- the 'placing first' idea. For the reasons Chandler notes, this feels like it goes against existing patterns.

I do recall the feeling of 'nothing happens' but in playing with it again now (months later) it works as expected. I wonder if other smaller things may have changed along the way to mitigate this a bit. Perhaps we try the number change and see how it feels before moving on with the other suggestions.

I will add that one of the most common UX issues I have witnessed when testing the data grid is people regularly not noticing the header area. This may also be contributing to some of the sorting observations.

[elizabetdev]

I chatted yesterday with @chandlerprall and this issue is ready to be implemented.

For now, let's just keep the order as it is and add the numbers:

• When there’s only one sorting field an arrow appears.
• When there are more than two sorting fields an arrow and a number indicating the sorting order appear in the corresponding header cell.

You can find the Figma prototype here (Anyone at Elastic with the link can view it).

[kertal]

Looking forward to this feature, just wondering if there are any plans when this could be done 😄

[kertal]

While showing the numbers to the user will definitely improve the the multisort experience, I think we should find a way to support the use case of sorting that I assume most of Discover users use on a daily basis. Switching the sort to another field, without keeping the previous field. Appending the new field to sort by has been a frequently source of confusion, and I also got recent user feedback, saying sorting doesn't work. With having numbers to show the order of sorting, this will definitely improve, but I would love to have a way to configure the way sorting works when using the column header actions. I'd prefer overwriting the current sorting, neither appending, or prepending the sort. I agree we shouldn't break this default behavior in EUIDataGrid, but having a way to configure it, would be awesome. Having this option, I would use it in Discover to allow multisort when using the UI in the toolbar, while having "quick sort" in the header action menu.

Less important, but I also wanted to mention one thing a regular old school Discover user was missing: Sorting in classic table took just one click. Don't think this is something we could do easily, and I also think, that this is something "old school" users will get used to.

FYI: @constancecchen @chandlerprall

[github-actions[bot]]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[kertal]

still think we should work on this

[github-actions[bot]]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.

[github-actions[bot]]

❌ Per our previous message, this issue is auto-closing after having been open and inactive for a year. If you strongly feel this is still a high-priority issue, or are interested in contributing, please leave a comment or open a new issue linking to this one for context.