在 Dash html Table 组件中制作 table sortable

Question

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

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

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

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

class 本身不会生成 table 排序 table，但您需要加载一个 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。这是一个小例子，

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

在 Dash html Table 组件中制作 table sortable

Making table sortable in Dash html Table component

python

plotly-dash