Using JS to sort dash_html_components.Table

Dash Python
1

I’m generating tables from pandas dataframes using dash_html_components. I am not using
dash_table_experiments because I need to conditionally format cell/row color by value - and
that feature is not yet ready for prime time in DTE (I am looking forward to it). My problem lies
in trying to implement simple table column sorting/filtering using some kind of JS library.

I’ve tried various libraries (sorttable.js, tablesorter jquery plugin) to no avail.

Adding JS to the /assets directory works as advertised - I’ve written tests that confirm that. However, I add
the libraries to the /assets directory and follow the library conventions such as adding a class name to a table, assigning an id to the table, making sure there are and

tags, modifying the default Dash HTML template as necessary, etc…

The JS libraries mentioned work fine for regular HTML tables created outside of Dash.
For whatever reason I can’t get it to work with tables I generate with Dash. I get no JS error messages, just
a static table rendering of my data - the columns are not sortable.

Is there something I am missing, or will this fundamentally not work due to a constraint in Dash that I am unaware of?

I’d be happy to supply examples.

Thanks and regards,
Peter

2

@chriddyp - Is there a recipe to introduce a JS package for column sorting without having to roll your own?

Thanks

3

Hi, you can use jQuery Datatables with visdcc.Run_js, see my example code. :slightly_smiling_face:
https://github.com/jimmybow/visdcc/blob/master/example/Run_js/Apply_%20jQuery_Datatables.py