Rendering dash-table with dcc.tabs / multi-tab layout

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

- app.py
- index.py
- apps
   |-- __init__.py
   |-- temp1.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.

Reproducible code below -

# temp1.py

import pandas as pd
import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_table
import flask
from app import app

df = pd.read_csv('https://github.com/plotly/datasets/blob/master/2014_apple_stock.csv') 

layout = html.Div([
    
    html.Div([

        dcc.Dropdown(
                id='selection',
                options=[{'label': i, 'value': i} for i in df.AAPL_x],
                value='A'     
        )

    ]) 
    
    html.Div([

        dash_table.DataTable(

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

        ),
    ])
    
])

# Callback
@app.callback(Output('my-table', 'data'),
              [
                  Input("landlord-select", "value")
                  
              ]
             )
def render_table(x):

    df_sub = df[(df['AAPL_x'] == x)]

    return df_sub.to_dict('records')

Layout code -

# index.py 

import pandas as pd
import dash
from dash.dependencies import Input, Output, State
import dash_html_components as html
import dash_core_components as dcc
import plotly.plotly as py
from plotly import graph_objs as go
from plotly.graph_objs import *
import flask
from app import app

from tabs import te​mp1​


# In[8]:


# App Layout

app.layout = html.Div([
    
    # tabs
    html.Div([

        dcc.Tabs(
            id="tabs",
            style={"height":"60","verticalAlign":"middle"},
            children=[
                 dcc.Tab(label="​temp1​", value="te​mp1​_tab"),
            ],
            value="marketing_tab",
        )
        
        ],
        
        className="row tabs_div"
        ),
         
        # Tab content
        html.Div(id="tab_content")

])


# In[9]:

@app.callback(Output("tab_content", "children"),
              [
                  Input("tabs", "value")
              ]
             )
def render_content(tab):
 
    if tab == "​temp1​_tab":
        return ​temp1​.layout
    else:
        return ​temp1​.layout

# In[10]:

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

Initialize

# app.py

import dash
import flask
import dash_core_components as dcc
import dash_html_components as html

server = flask.Flask(__name__)
app = dash.Dash(__name__, server=server)
app.config.suppress_callback_exceptions = True

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 the table using go.Table from plotly graph, however, data-table offers enhanced functionality and user-exp.

[kevalshah90]

pip install dash==1.0.0 <-- Running this fixed the issue.

[kevalshah90]

Hey, @chriddyp - were you able to reproduce the code? It’s not throwing any error for me, just wouldn’t render the datatable. Dropdowns and other elements work fine, however, when I add data-table in there, it stops working. Would appreciate any pointers.