Hiding Datatable along with Tab

Dash Python
1

I have an application which consists of a series of tabs, with each tab having one or more DataTables as children. I’m using callbacks to hide tabs. I originally had a problem with the active tab not disppearing when it should have been hidden, I got around that by setting both ‘style’ and ‘selected_style’ to {“display”: “none”}. I’m stuck on how to hide the DataTable associated with the active tab when it’s hidden, it seems like DataTables aren’t automatically hidden if their containing Tab is.

I would just unset the selected tab by changing the ‘value’ of the containing Tabs component, but I already have another callback which sets the activate tab so it’s not possible to add this as the output of another callback.

I believe this is close to a minimal example showing the issue. When you select Tab 1, then click on the ‘Hide tab 1’ button, the DataTable shown on tab 1 continues to appear even when the containing tab disappears.

I’d appreciate any advice about how I can get the DataTable to disappear along with its containing tab. Thank you!

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
from dash_table.DataTable import DataTable

import pandas as pd

app = dash.Dash()

df1 = pd.DataFrame({'One':[1,2], 'Two':[3,4], 'Three':[5,6]},columns=['One','Two','Three'], index=["Flow #1", "Flow #2"])
example_table_1 = [DataTable(id="table1", data = df1.to_dict('records'), columns=[{"name": i, "id": i} for i in df1.columns])]

df2 = pd.DataFrame({'Four':[5,6], 'Five':[7,8], 'Six':[9,10]},columns=['Four','Five','Six'], index=["Flow #3", "Flow #4"])
example_table_2 = [DataTable(id="table2", data = df2.to_dict('records'), columns=[{"name": i, "id": i} for i in df2.columns])]

app.layout = html.Div(
    [
        dcc.Location(id="url"),
        dcc.Tabs(
            [dcc.Tab(label="Tab 1", id='tab1', value="tab1", children=example_table_1),
            dcc.Tab(label="Tab 2", id='tab2', value="tab2", children=example_table_2),
            ],
            id="tabgroup"
        ),
        html.Button('Hide tab 1', id="hide_1_button"),
        html.Button('Hide tab 2', id="hide_2_button"),
        html.Button('Activate tab 2', id="activate_tab_2")
    ]
)

@app.callback(
[Output('tab1', 'style'),Output('tab1', 'selected_style')],
Input('hide_1_button', 'n_clicks'),
prevent_initial_call=True,)
def hide_tab1(_):
    return {"display": "none"}, {"display": "none"}

@app.callback(
[Output('tab2', 'style'),
 Output('tab2', 'selected_style')],
Input('hide_2_button', 'n_clicks'),
prevent_initial_call=True,)
def hide_tab2(_):
    return {"display": "none"}, {"display": "none"}

@app.callback(
Output('tabgroup', 'value'),
Input('activate_tab_2', 'n_clicks'),
prevent_initial_call=True,)
def activate_tab_2(_):
    return 'tab2'

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