Dash table inside a tab looses data when going to another tab and back

Dash Python
1

Hi all

I’ve been working on an app where I want to plot some points coming from a table within a tab. I can type in some x and y values which gets plotted on the graph :slight_smile: but when I go to the other tab and back… my data is gone… And I want to be able to continue from where I left the table, even when I’ve been somewhere else in the app!! I’m quit new to dash and I’ve been trying to figure it out, but I guess I neeed help. Here is my code:

import dash
from dash.dependencies import Input, Output
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go

app = dash.Dash(name)
app.css.append_css({‘external_url’: ‘https://codepen.io/chriddyp/pen/bWLwgP.css’})
app.config[‘suppress_callback_exceptions’] = True

columnNames = [‘x’, ‘y’, ‘p0’, ‘p1’]

columns = []
data = []
startData = dict()

for cn in columnNames:
columns = columns + [{‘id’: cn, ‘name’: cn}]
startData[cn] = ‘’

for i in range(4):
data.append(startData)

app.layout = html.Div([html.H1(‘Here is my layout’, style={‘background’: ‘tomato’, ‘textAlign’: ‘center’, ‘margin’: ‘0’}, className=‘row’),

html.Div(className='column', style={'background': 'green', 'width': '300px', 'height': '400px', 'margin': '0'}, children=[
    dcc.Tabs(id="poiTab", value='tabs', children=[
        dcc.Tab(label='table one', value='tab-1'),
        dcc.Tab(label='table two', value='tab-2')]),
    html.Div(id='tabs-content-poi')]),

html.Div(className='column', style={'background': 'MediumSeaGreen', 'textAlign': 'center', 'width': '500px', 'height': '500px', 'margin': '0'}, children=[
    dcc.Graph(id='displayGraph', style={'width': '300px', 'height': '300px', 'margin': '100px'})])])

@app.callback(Output(‘tabs-content-poi’, ‘children’), [Input(‘poiTab’, ‘value’)])
def render_tab_content(tab):
if tab == ‘tab-1’:
return html.Div(className=‘column’,
style={‘background’: ‘blue’, ‘width’: ‘200px’, ‘height’: ‘200px’, ‘margin’: ‘0’}, children=[
dash_table.DataTable(id=‘inputTable’, columns=columns, data=data, editable=True,
style_table={‘maxHeight’: ‘300px’, ‘overflowY’: ‘scroll’})])
elif tab == ‘tab-2’:
return html.Div([html.H3(‘Tab content 2’)])

@app.callback(Output(‘displayGraph’, ‘figure’), [Input(‘inputTable’, ‘data’)])
def display_output(dat):
x0, y0, p0, p1 = [], [], [], []
for i in range(len(dat)):
x0.append(dat[i][‘x’])
y0.append(dat[i][‘y’])
p0.append(dat[i][‘p0’])
p1.append(dat[i][‘p1’])

return {'data': [go.Scatter(x=x0, y=y0, name='points', mode='markers', marker=go.scatter.Marker(symbol=104,
                                                                                                size=10,
                                                                                                color='red'))],
        'layout': go.Layout(showlegend=True)}

if name == ‘main’:
app.run_server(debug=True)

2

import dash
from dash.dependencies import Input, Output
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go

app = dash.Dash(name)
app.css.append_css({‘external_url’: ‘https://codepen.io/chriddyp/pen/bWLwgP.css’})
app.config[‘suppress_callback_exceptions’] = True

columnNames = [‘x’, ‘y’, ‘p0’, ‘p1’]

columns = []
data = []
startData = dict()

for cn in columnNames:
columns = columns + [{‘id’: cn, ‘name’: cn}]
startData[cn] = ‘’

for i in range(4):
data.append(startData)

app.layout = html.Div([html.H1(‘Here is my layout’, style={‘background’: ‘tomato’, ‘textAlign’: ‘center’, ‘margin’: ‘0’}, className=‘row’),

html.Div(className='column', style={'background': 'green', 'width': '300px', 'height': '400px', 'margin': '0'}, children=[
    dcc.Tabs(id="poiTab", value='tabs', children=[
        dcc.Tab(label='table one', value='tab-1'),
        dcc.Tab(label='table two', value='tab-2')]),
    html.Div(id='tabs-content-poi')]),

html.Div(className='column', style={'background': 'MediumSeaGreen', 'textAlign': 'center', 'width': '500px', 'height': '500px', 'margin': '0'}, children=[
    dcc.Graph(id='displayGraph', style={'width': '300px', 'height': '300px', 'margin': '100px'})])])

@app.callback(Output(‘tabs-content-poi’, ‘children’), [Input(‘poiTab’, ‘value’)])
def render_tab_content(tab):
if tab == ‘tab-1’:
return html.Div(className=‘column’,
style={‘background’: ‘blue’, ‘width’: ‘200px’, ‘height’: ‘200px’, ‘margin’: ‘0’}, children=[
dash_table.DataTable(id=‘inputTable’, columns=columns, data=data, editable=True,
style_table={‘maxHeight’: ‘300px’, ‘overflowY’: ‘scroll’})])
elif tab == ‘tab-2’:
return html.Div([html.H3(‘Tab content 2’)])

@app.callback(Output(‘displayGraph’, ‘figure’), [Input(‘inputTable’, ‘data’)])
def display_output(dat):
x0, y0, p0, p1 = [], [], [], []
for i in range(len(dat)):
x0.append(dat[i][‘x’])
y0.append(dat[i][‘y’])
p0.append(dat[i][‘p0’])
p1.append(dat[i][‘p1’])

return {'data': [go.Scatter(x=x0, y=y0, name='points', mode='markers', marker=go.scatter.Marker(symbol=104,
                                                                                                size=10,
                                                                                                color='red'))],
        'layout': go.Layout(showlegend=True)}

if name == ‘main’:
app.run_server(debug=True)