Making table sortable in Dash html Table component

Question

I have a table in my app with Dash, but I made it using the html components and not with the DataTable of Dash. The app is quite big and already configured, so I would like to avoid rewriting it. In html there is the <table class="sortable"> which makes the table sortable. However, when I construct the table with dash, where should I write this attribute? Here is my table code:

def generate_table(dataframe, max_rows=1000):
    return html.Table([
        html.Thead(
            html.Tr([html.Th(col) for col in dataframe.columns])
        ),
        html.Tbody([
            html.Tr([
                html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
            ]) for i in range(min(len(dataframe), max_rows))
        ])
    ], style={
        'margin-right': 'auto',
        'margin-left': 'auto'
        }
    )

emher · Accepted Answer · 2020-09-08 17:27:43Z

2

To add a class to a Dash component, simply pass it via the className keyword,

... style={'margin-right': 'auto', 'margin-left': 'auto'}, className="sortable")

The class itself won't make the table sortable though, you'll need to load an appropriate JavaScript library. In Dash, scrips are usually loaded on app initialization. However, for this type of library to work, it must be loaded after the table has been render, which can be achived using this library. Here is a small example,

import dash
import dash_html_components as html
import pandas as pd
import dash_defer_js_import as dji


def generate_table(dataframe, max_rows=1000):
    return html.Table([
        html.Thead(
            html.Tr([html.Th(col) for col in dataframe.columns])
        ),
        html.Tbody([
            html.Tr([
                html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
            ]) for i in range(min(len(dataframe), max_rows))
        ])
    ], style={'margin-right': 'auto', 'margin-left': 'auto'}, className="sortable")


df = pd.DataFrame({'Fruits': ["Apple", "Banana"], 'Vegetables': ["Tomato", "Cucumber"]})
app = dash.Dash()
app.layout = html.Div([generate_table(df), dji.Import(src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js")])

if __name__ == '__main__':
    app.run_server()

answered Sep 8, 2020 at 17:27

emher

6,0841 gold badge24 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jason m Over a year ago

Should you be able to see this js script added to the html if you inspect?

Collectives™ on Stack Overflow

Making table sortable in Dash html Table component

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related