Using a DataTable with my app

Question

I'm using Dash to build a dashboard with python. I have the following code:

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)

I want to work with the dash_core_components.Link, but it seems not compatible with dash_table_experiments. When I run this code with the dte.DataTable commented out, the app works fine. When I try the run the app with the dte.DataTable part, I get a white screen.. I don't understand why this is happening, since I've used dte.DataTable before and I had no problems whatsoever. The problem seems to lie in the fact that I'm using dcc.Link but I don't understand why it would.

Question: Is there a way to use dte.DataTable with dcc.Links? If so; how can I change my script so that it shows the desired DataTable?

(I understand that I can make this script work by removing the dcc.Link part and just running it like a very basic app. I want to be able to use the link because I want to combine two different apps with dte.DataTable.)

Answer 1

Dash expects that the initial layout has all the components present, i.e. you would need to create an empty table in your layout.

If you add a hidden table

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

to your app.layout it should work.