Column sorting icon isn't intuitive

[corywatilo]

The icon at the top right of the table ("Total sum") has a caret which leads me to believe this table is sorted by that column (which it isn't - it's actually a dropdown to modify the data in the column).

There are a few things going on here:

1. It's actually triggered on hover, but the menu is slightly delayed. 9/10 times, I click the button to change sorting before I realize it's a dropdown, then end up activating an option I didn't intend to.
2. The 3 bars/hamburger icon is actually the sorting option (but it doesn't look like a button), and there is a tooltip for this when you hover the 3 bars, but it appears over the dropdown instead, which is a different button

Suggestions

• [ ] Reserve the chevron/caret icon for indicating a sort direction, and use that icon for triggering it (vs bars)
• [ ] Encapsulate the "Total sum" column header (1px border?) to make it look like its own dropdown inside the table header
• [ ] Split the tooltips, add a more accurate tooltip for the option that lets you change the data being represented in the column
• [ ] Any reason we wouldn't default to sort descending? Seems like what I'm always looking for...

[clarkus]

Agree that the affordance for sorting is pretty confusing. In the recent table designs, I've been using the sort indicator patterns shown here. In some cases I've used a active-tab-like underline to reinforce which column is being used to sort the table (not shown in figma).

We've been moving to column configuration options for tables recently. There are still a few places where this hasn't been applied, but ideally we'd give the users some control external to the table to configure what columns are shown, the order they're shown, and some controls for formatting or units.