Improve UI of Sorting Columns

[andrewbaldwin44]

Prerequisites

• I am using the latest version of Locust
• I am suggesting a new feature, not asking a question

Description

I realized (a little bit late) that MUI has a TableSortLabel component that we could leverage to improve the UI when sorting the columns in the different tables.

The improvement would display arrows, indicating not only which column is being sorted, but also whether the sort is in reverse or not.

The one trade-off is that with the addition of these arrows in the column head, we will never have enough room that the text in the head doesn't wrap (the # Requests / # Fails always wraps)

[cyberw]

Perhaps we can use our old friend non-breaking space ( ) for the #-columns?

[andrewbaldwin44]

Yes you can of course, but then you get our old friend vertical scrollbar 😂

[cyberw]

Well that sucks... I dont really have any other ideas... I dont think sorting is used very often so it is not top prio...

[andrewbaldwin44]

Found a bit of a workaround, the scrollbar disappears >= 1388px

[cyberw]

Perhaps we could use "dense padding" to further compress it? I'm not a fan of 3-row headers :P

[andrewbaldwin44]

Yeah but the "small" table only changes the padding between rows, not between columns :/

[cyberw]

Huh... annoying... sorry, I dont have any ideas...

[andrewbaldwin44]

This is one reason I'm not the biggest fan of MUI, it can really limit you in terms of customization :/ I tried "hacking" the padding as well, but then the alignment for the whole table becomes messed up

Might be best to just leave it as it for now

[cyberw]

Yea that is probably best for now.