在我的应用程序中使用 DataTable答案

【问题标题】：Using a DataTable with my app在我的应用程序中使用 DataTable
【发布时间】：2018-11-08 14:20:06
【问题描述】：

我正在使用Dash 使用 python 构建仪表板。我有以下代码：

import dash
import dash_core_components as dcc
import dash_table_experiments as dte
import dash_html_components as html
from datetime import datetime as dt

app = dash.Dash()

app.layout = html.Div([
    dcc.Location(id = 'url', refresh=False),
    html.Div(id = 'page-content')
])
app.config['suppress_callback_exceptions'] = True

def get_index():
    index = html.Div([
        dcc.Link('Live Data', href='/live')
    ], className = 'row')
    return index

live = html.Div([
    html.H1('Table '),
    dcc.DatePickerRange(
            id = 'selected-period',
            initial_visible_month=dt(2018, 4, 5),
            start_date = dt(2018, 4, 22),
            end_date=dt(2018, 4, 25)
    ),
    # dte.DataTable(
    #     rows= [{}],
    #     row_selectable = True,
    #     filterable = True,
    #     sortable = True,
    #     editable = False,
    #     id = 'data-table'
    # )
])

@app.callback(
    dash.dependencies.Output('page-content', 'children'),
    [dash.dependencies.Input('url', 'pathname')]
)
def display_correct_page(pathname):
    if pathname == '/live':
        return live
    else:
        return get_index()

if __name__ == '__main__':
    app.run_server(debug=True)

我想使用dash_core_components.Link，但它似乎与dash_table_experiments 不兼容。当我在注释掉 dte.DataTable 的情况下运行此代码时，该应用程序运行良好。当我尝试使用dte.DataTable 部分运行应用程序时，我得到一个白屏。我不明白为什么会这样，因为我之前使用过dte.DataTable 并且我没有任何问题。问题似乎在于我使用的是dcc.Link，但我不明白为什么会这样。

问题：有没有办法将dte.DataTable 与dcc.Links 一起使用？如果是这样的话;如何更改我的脚本以显示所需的 DataTable？

（我知道我可以通过删除dcc.Link 部分并像一个非常基本的应用程序一样运行它来使这个脚本工作。我希望能够使用该链接，因为我想将两个不同的应用程序与@987654332 结合起来@.)

【问题讨论】：

您是否在浏览器控制台中看到任何错误？

标签： python-3.x plotly dashboard plotly-dash

【解决方案1】：

破折号expects 表示初始layout 包含所有组件，即您需要在布局中创建一个空表。

如果添加隐藏表

html.Div(dte.DataTable(rows=[{}]), style={'display': 'none'}),

到你的app.layout 它应该可以工作。

【讨论】：

还有一件事！如果我现在运行脚本，就会有两个 DataTables！如何在布局中隐藏它？
@Mr.President：查看更新的答案，将表格包装在div 中并通过style 隐藏它应该可以做到。
我只剩下一个问题，我想你可以轻松回答，因为你这么好！我可以给你发消息吗？

【解决方案2】：

很好的答案@maximilian。万一这对任何人都有帮助，在过去两年中，Dash DataTable 发生了很大变化，所以这是我在 DataTable 上制作的一个教程，可以帮助您入门。 https://youtu.be/USTqY4gH_VM

【讨论】：