How to sort a Dash DataTable by clicking the column header?

Dash Python
1

I’m wondering if it is possible to have a DataTable be sorted by clicking on the column header itself as well as or instead of clicking the sorting icons (which are pretty small).

This question has been asked once before: Is it possible to sort DataTable by only clicking on column header?

But some of the answer on that question is no longer available on GitHub and it has been a year since it was asked. Clicking the header itself seems to be the generally accepted functionality of sorting a table on the internet so it would be good to be able to add this functionality into Dash projects.

Is there a native way to implement this in my Dash project?

If not, is there a work around using JS or a callback?

Thanks!

2

u can use :
sort_action=“native”,
sort_mode=“multi”

properties of the dash.datatable object.

3

Thank you,

I do have:
sort_action=“native”,
sort_mode=“single”

as my settings already.

Changing sort_mode to “multi” appears to just allow sorting by multiple columns at once.

What I would like to be able to do is click the actual header of a column in my DataTable and have it sort the column. At the moment the only way to sort the columns is to click the little up or down arrows within the header of each column, rather than the header itself.

4

Hello @Phobotics,

If you are willing, you can take a look at Dash AG Grid, it supports clicking on the headers for sorting natively, as well as tons of other cool features.

3 Likes
5

Thanks,

I have taken a look and watched the introductory YouTube video on it in the docs of the alpha version. Looks really powerful, I will take a look at implementing it.

3 Likes