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

本文介绍了在 Dash html Table 组件中使表格可排序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的应用程序中有一个带有 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 组件中使表格可排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-20 08:02