Rendering dash-table with multi-page/tab layout.

[kevalshah90]

I am attempting to render data-table with dcc.tabs structure. My dash application follows multi-page/tab layout - dash-tabs.

- app.py
- index.py
- apps
   |-- __init__.py
   |-- tab1.py
   |-- tab2.py

In one of tab.py file, I am writing my code for the page layout which includes a mix of dcc elements and data-table. In my callback function, I update the data property of data-table. Code below -

@app.callback(
    Output('my-table', 'data'),
    [Input('dropdown', 'value')])
def callback_a(i):
    df = pd.DataFrame(numpy.arange(30).reshape(5, 6))

    return df.to_dict(orient='records')

My layout looks something like this -

layout = html.Div([

    html.Div([

        dcc.Dropdown(
                id='select',
                options=[{'label': i, 'value': i} for i in List],
                value='abc',
                placeholder="xyz",
                style={'width': '100%'}

        ), 

    ], style={"width": "15%", "margin-left": "20%", "margin-right": "35%"}), 

    html.Div([

        dash_table.DataTable(

            id='my-table',
            columns=[{"name": i, "id": i} for i in df_lease.columns],

        )
    ])
])

I run into callback error:

InvalidCallbackReturnValue: 
The callback for property `children` of component `tab_content`
returned a value having type `module`
which is not JSON serializable.

My question is do dash-table's work with dcc.tabs. Is there support for them to work similar to other plotly graph objects. For instance, I can render this using go.Table from plotly graph, however, data-table offers enhanced functionality and user-exp.

[kevinfaust0308]

this is the exact issue im facing and have been searching for a solution for ages. is there any update to this? im currently just using a normal html table as an alternative but its not ideal...

[omoowosally]

did you manage to solve this?

[hussamalmuayad-8451]

try this

modify your layout to this

layout = html.Div([

    html.Div([

        dcc.Dropdown(
                id='select',
                options=[{'label': i, 'value': i} for i in List],
                value='abc',
                placeholder="xyz",
                style={'width': '100%'}

        ), 

    ], style={"width": "15%", "margin-left": "20%", "margin-right": "35%"}), 

    html.Div(id="table_wrapper")
])

Modify your callback

@app.callback(
    Output('table_wrapper', 'children'),
    [Input('dropdown', 'value')])
def callback_a(i):
    df = pd.DataFrame(numpy.arange(30).reshape(5, 6))

    return html.Div([

        dash_table.DataTable(

            id='my-table',   
            data=df.to_dict(orient='records'),
            columns=[{"name": i, "id": i} for i in df.columns],

        )
    ])

instead of returning the data argument of the DataTable return the entire table within a Div. This is also aesthetically better because you avoid having an empty table in your webapp waiting to be populated.

[gvwilson]

Hi - we are tidying up stale issues and PRs in Plotly's public repositories so that we can focus on things that are most important to our community. If this issue is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. (Please note that we will give priority to reports that include a short reproducible example.) If you'd like to submit a PR, we'd be happy to prioritize a review, and if it's a request for tech support, please post in our community forum. Thank you - @gvwilson