在 Dash html Table 组件中使表格可排序 [英] Making table sortable in Dash html Table component
问题描述
我的应用程序中有一个带有 Dash 的表格，但我使用 html 组件而不是 Dash 的 DataTable 制作了它.该应用程序非常大并且已经配置好，所以我想避免重写它.在 html 中，有 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 要将类添加到 Dash 组件，只需通过 To add a class to a Dash component, simply pass it via the 类本身不会使表格可排序，但您需要加载适当的 JavaScript 库.在 Dash 中，脚本通常在应用初始化时加载.但是，要使这种类型的库工作，它必须在表格渲染后加载，这可以使用 这个库.这是一个小例子， 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, 这篇关于在 Dash html Table 组件中使表格可排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ 使表格可排序.但是，当我用破折号构造表格时，我应该在哪里写这个属性?这是我的表格代码:
<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'
}
)
推荐答案
className 关键字传递它，className keyword,... style={'margin-right': 'auto', 'margin-left': 'auto'}, className="sortable")
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()
登录
关闭
