I’ve got a basic page that displays a table. I’m choosing Tablesorter for my table (jQuery tablesorter 2.0). This is done by referencing the tablesorter theme in the className
of the Table html component, like so:
myTable = html.Table(myTableHeader + [myTableBody],
className='tablesorter-blue')
^Obviously you also need to have referenced the blue css as an external css script plus the jQuery and tablesorter scripts which you can either download or reference externally from the CDN (jquery.tablesorter - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers / jQuery tablesorter 2.0).
So the above works if I set the className
to tablesorter-blue
matching the definition in the css file (https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/theme.blue.css).
However, what this doesn’t do is enable two tablesorter widgets, in particular zebra
and filter
. The first is a style preference, the second allows text input filtering on column values. Applying the widgets is done via a JavaScript call like so:
$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme: 'blue',
widgets : [ 'zebra', 'filter' ]
});
});
As you can see this achieves two things: first it sets the theme to blue, and second enables the widgets. So what I should be able to do is just set the className
to tablesorter
per the documentation, then call the function separately. However, I cannot get this to trigger in Dash, even if I add this to a separate js under assets. I’ve also experimented with the including a html.Script()
as well, but no luck. I keep having to go into Chrome developer console to do it manually.
How can I do this through Dash?