在破折号html表格组件中使表格可排序

Question

我的应用程序中有一个带有Dash的表，但我是使用html组件制作的，而不是Dash的DataTable。这个应用程序相当大，并且已经配置好了，所以我想避免重写它。在html中有<table class="sortable">使表可排序。但是，当我用破折号构造表时，我应该在哪里写这个属性？这是我的表格代码：

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'
        }
    )

Answer 1

要将类添加到Dash组件，只需通过className关键字传递它

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

但是类本身不会使表可排序，您需要加载一个appropriate JavaScript library。在破折号中，临时票据是usually loaded on app initialization。但是，要使此类型的库正常工作，必须在表呈现后加载它，这可以使用this library实现。这是一个小例子

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()