Data disappearing when navigating in tabs - need to click on an input - Datatable

Dash Python
1

Hi Chris,

I have used the following method to integrate tables in a dash application with tabs:

@HansG Thanks for reporting! I see what’s going on here.

A little context: When Dash serves the page, it crawls the app.layout to see which component libraries are being used (e.g. dash_core_components). Then, with this list of unique component libraries, it serves the necessary JS and CSS bundles that are distributed with those component libraries.

In this case, we’re serving dash_table_experiments on a separate page, as the response of a callback. Dash only sees dash_html_components and dash_core_components in the app.layout and so it doesn’t serve the necessary JS and CSS bundles that are required for the dash-table-components component that is rendered in the future.

This is a design flaw of Dash. For now, you can get around this issue by rendering a hidden dash-table-experiments component in the layout like:

app.layout = html.Div([
_ html.Div(id=‘content’),_
_ dcc.Location(id=‘location’, refresh=False),_
_ html.Div(dt.DataTable(rows=[{}]), style={‘display’: ‘none’})_
])

When loading the app, my table and the data inside it appear properly, however, when navigating through the tabs, and getting back in the tab where my table is, the data has disappear, and I need to click on one of the inputs for the data to appear again.

Any idea how I can fix this issue?

Thanks

2

I have actually found the issue, but can’t really solve it.

I have 5 tabs on my app. The table is in the first tab. Which is the default value tab in my html.Div([dcc.Tabs])

I have tested putting the tabs value as an input, and what I have noticed, is that when getting back in my first tab, it doesn’t recognized that I am on the first tab. I need to click twice on the tab for it to understand.

Any idea why is that happening? thxs

3

Hm, not sure what’s going on here. Can you create a really small, reproducable example of the issue? i.e. ~60 lines

4 
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt

tab1_layout = [

    html.Div([
            dt.DataTable(
                rows=[{}],
                row_selectable=True,
                filterable=True,
                sortable=True,
                column_widths=25,
                selected_row_indices=[],
                id='datatable'
            ),

    ],  className="row")

]

app = dash.Dash()
app.config['suppress_callback_exceptions'] = True

app.layout = html.Div(

    children=[

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

        html.Div([
            dcc.Tabs(
                tabs=[
                    {'label': 'Tab1', 'value': 1},
                    {'label': 'Tab2', 'value': 2},
                ],
                value=1,
                id='tabs',
                vertical=False
            ),

            html.Div(id='tab-output', style=dict(marginTop='0.5rem')),
        ])
    ])


@app.callback(
     dash.dependencies.Output(component_id='tab-output',  component_property='children'),
     [dash.dependencies.Input(component_id='tabs',  component_property='value')])
def update_dashboard(tabs):

    if tabs == 1:
        return tab1_layout
    elif tabs == 2:
        return html.Div()


@app.callback(
    dash.dependencies.Output('datatable', 'rows'),
    [dash.dependencies.Input('tabs', 'value')])
def update_table_console(tabs):
    print('update')
    import pandas as pd

    df = pd.DataFrame({
        'a': [1, 2, 3],
        'b': [4, 1, 4],
        'c': ['x', 'y', 'z'],
    })

    return df.to_dict('records')

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

Anything on this one please ? I have a hard time understanding. Thanks mate

6

I’ve used a workaround using the following link: What is the execution order of callbacks?

Thxs

7

Was there any concrete solution to this issue or did you locate the underlying issue?

I am experiencing a similar issue at the moment, where I must click on a tab twice in order to load the content for that respective tab.

8

do we have any solutions on it?

9

@mishd - Are you facing the same issue that was reported above or is your issue different? If it is a different issue, could you try creating a simple, reproducable example and updating your dash versions? Some of these issues have been fixed in recent dash releases.

10

Hi @chriddyp, Yes, I am facing the same issue. so I have multiple tabs generating multiple tables and the moment I moved one tab to another tab and then moved back to the same tab it juts disappears. I have user persistent on dash.DataTable but seems not working.

11

@mishd - Could you try creating a simple, reproducible example? See How to Get your Questions Answered on the Plotly Forum for details. The code above posted in April 2018 is using dash_table_experiments, which is no longer maintained.

12

Were you able to fix this? I am running into similar problem despite using persistence property of data table and tabs.

dash_table.DataTable(

                    id='table-1',
                    persistence=True,
                    persistence_type='memory',

                    columns=[{'id':'Tenant','name':'Tenant'},
                                   {'id':'Tenant Brokerage','name':'Tenant Brokerage'},
                                   {'id':'Tenant Industry','name': 'Tenant Industry'},
                                   {'id':'Square Footage','name': 'Square Footage'},
                                   {'id':'Year Renovated','name': 'Year Renovated'},
                                   {'id':'Building Floor','name': 'Building Floor'}],

                    style_cell={
                        'fontFamily': 'Arial',
                        'fontSize': 12,
                        'textAlign': 'center',
                        'height': '40px',
                        'padding': '2px 22px',
                        'whiteSpace': 'inherit',
                        'overflow': 'hidden',
                        'textOverflow': 'ellipsis',
                    },

                    style_table={
                        'maxHeight': '50ex',
                        'overflowY': 'scroll',
                        'width': '60%',
                    },

                    page_size = 10,
                    sort_action='native',
                    row_selectable='multi',
                    filter_action='native',
                    row_deletable=True,
                    editable=True
                ),
1 Like