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