问题描述
我的应用程序中有一个带有 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 <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'
}
)
推荐答案
要将类添加到 Dash 组件,只需通过 className
关键字传递它,
To add a class to a Dash component, simply pass it via the className
keyword,
... style={'margin-right': 'auto', 'margin-left': 'auto'}, className="sortable")
类本身不会使表格可排序,但您需要加载适当的 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,
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 组件中使表格可排序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
-
jQuery AJAX调用返回整个PHP文件
-
SSRS REPORT ERROR ..十六进制值0x1a,是无效字符。第1行
-
在 iPhone 上解析 JSON 日期
-
Google Drive API Client(Python):文件权限不足()。insert()
-
对信号进行频谱分析时的傅立叶变换(FFT)单位
-
在Windows Phone 8.1上断开网络连接时,NetworkAddressChanged不会触发
-
如何以编程方式断开呼出
-
如何在父母的子女之上定位父母的子女?
-
为什么我们在“git checkout - ”中使用双破折号?
-
PHP不保存数据到数据库
-
在客户端编辑gridview行
-
ReleaseStringUTFChars对于std :: string不起作用
-
什么是做永葆插座检查.NET最好的方法是什么?
-
从java监控笔记本电脑的电池或电源
-
jQuery电话号码验证允许空格,至少8位数字