Material-table: Clicking a column 3 times removes the sort...is this intended functionality?

[adamsoffer]

If this is the intended functionality, how do you configure the column so that you only have to click twice to sort asc and desc?

If clicking three times is the default setting, I'd reconsider. Good post on the subject here: https://ux.stackexchange.com/questions/86637/should-clicking-a-column-3-times-remove-the-sort

[hrafaelveloso]

Hi @adamsoffer , the native behavior of sorting a table has 3 states, ascending, descending and back to the original state. This pull request #938 targets these 3 states, in order to enable the user to be able to sort the table ascending, desascending and with the third click, return to the state that the table had when it was first rendered without having to reload the page. You can check these 3 states by sorting a spotify playlist by album / artist / song name.

[adamsoffer]

Gotcha. It's a cool feature, but to be honest I thought it was a bug at first lol. I think there should at least be an option to enable/disable 3-states vs 2-states.

[adamsoffer]

cc @hrafaelveloso thoughts?

[hrafaelveloso]

What do you think that should be the default behaviour? Have three states, or two? I like to be able to have the table again with the first data that was rendered. I'll look at the source code and make a PR to have that option for sorting

[hrafaelveloso]

cc @adamsoffer Wait for the #997 to be merged by @mbrn and it will be possible to sort by 2 or 3 states :+1:

[adamsoffer]

thanks @hrafaelveloso !

[ibrambe]

This behaviour makes sense, but the arrow doesn't hide on the third click, only when you hover out.

At first, we also thought it was a sorting bug, but it's just the arrow that should hide on the third click.

[hrafaelveloso]

Yes, you are right, I'll check into that!

[hrafaelveloso]

@ibrambe That's one 'problem' with the way Material-UI handles TableSortLabel.
If you check theirs example (Sorting & Selecting), you will see that, when you hover, they'll show slightly the arrow. I think that I can disable this using their classes prop, but I'll proceed only with @mbrn approval.

You can solve that by inserting this override in your Material-UI theme definition:

  overrides: {
    MuiTableSortLabel: {
      root: {
        "&:hover span": {
          color: "transparent"
        }
      },
      icon: {
        transition: theme.transitions.create(["transform"], {
          duration: theme.transitions.duration.shorter
        })
      }
    }
  }

[ibrambe]

@hrafaelveloso fine. I solved my issue by disabling thirdSortClick :)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.