DashTable callback not working when used under tab

Dash Python
1

I want DataTable under a tab. In below sample, callback is called and i am see the print msg.
working sample:

stab_sus_list=html.Div([
Preformatted text html.H2(“List of suspects”),
html.Div(id=‘test’)
],id=‘sus_list’)
@app.callback(dash.dependencies.Output(‘sus_display’,‘data’),
[dash.dependencies.Input(‘susList’,‘value’)]
)
def displayContent(value):
print(“sus tab touched”)
dataframe=pandas.read_csv(‘suspect.cvs’)
return dataframe.to_dict(“rows”)

In below sample, even though i opened the ‘susList’ tab the callback is not getting called.

not working sample:

stab_sus_list= html.H2([
html.H3(“List of suspects”),
dash_table.DataTable(
id=“sus_display”,
columns=suspectsCol
)
],id=‘susList’)
@app.callback(dash.dependencies.Output(‘sus_display’,‘data’),
[dash.dependencies.Input(‘susList’,‘value’)]
)
def displayContent(value):
print(“sus tab touched”)
dataframe=pandas.read_csv(‘suspect.cvs’)
return dataframe.to_dict(“rows”
indent preformatted text by 4 spaces

2

Hi @kivenakt could you please share a working minimal and standalone script reproducing the problem? Regarding Tabs, is this documentation page https://dash.plot.ly/dash-core-components/tabs helpful? The answer to your problem might be different depending on how yo’ure defining the Tabs content (in a callback or with the children property).

3

submit_layout = html.Div([
html.Header(“AI logos”, style=h1_style),
html.H6() ,
dcc.Tabs(id=‘tabs’, value=‘tab-1’, children=[
dcc.Tab(label=‘Live Stream’, value=‘tab-0’,style=tab_style),
dcc.Tab(label='word Database ', value=‘tab-1’,style=tab_style),
dcc.Tab(label=‘word Finding’, value=‘tab-2’,style=tab_style),
]),
html.Div(id=‘tabs-content’),
html.Img(src=‘data:image/png;base64,{}’.format(encoded_image),style = {
‘height’: ‘13%’,
‘width’: ‘10%’,
‘top’: ‘8px’,
‘right’: ‘16px’,
‘float’: ‘left’,
‘position’: ‘absolute’,
‘padding-top’: 0,
‘padding-right’: 0
})
],style=layout_style)

word_db_tab = html.Div([
dcc.Tabs(id=‘stab’,value=‘stab-0’,children=[
dcc.Tab(label=‘Available word List’, value=‘stab-0’,style=stab_style,id=‘test’),
dcc.Tab(label=‘Add word’, value=‘stab-1’,style=stab_style),
dcc.Tab(label=‘Delete word’, value=‘stab-2’,style=stab_style),
]),
html.Div(id=‘stab_out’)
])

stab_sus_list= html.H2([
html.H3(“List of words”),
dash_table.DataTable(
id=“sus_display”,
columns=wordsCol
)
],id=‘susList’)

@app.callback(dash.dependencies.Output(‘sus_display’,‘data’),
[dash.dependencies.Input(‘listButton’,‘value’)])
def displayContent(value):
print(“sus tab touched”)
dataframe=pandas.read_csv(‘word.cvs’)
return dataframe.to_dict(“rows”)

4

I hope above code will help us.
Overall my main problem is , if i try to add the Datatable under tab(here it is stab-0). Initially when i can see the table , later if based on my callback as below:

@app.callback(dash.dependencies.Output('sus_display','data'),
              [dash.dependencies.Input('listButton','value')])
def displayContent(value):
    print("sus tab touched")
    dataframe=pandas.read_csv('suspect.cvs')
    return dataframe.to_dict("rows")

When ever i open stab-0, it should load the cvs and show. But is not.

If i remove the Datatable under stab-0 and try to the same in some Div, it is working.

5

any update on the topic?