在 Dash html Table 组件中使表格可排序

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。在 Dash 中，脚本是 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()