Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Using Filtering with DataTables and Tabs

Hello, so I’ve noticed something really interesting when I filter a datatable that is viewed in a Tab. I basically have multiple tabs that show different DataTables, and if I filter one DataTable after a key and then switch to another tab, the filtered key remains in the associated column but it works for the other DataTable.

But the problem is that I need to manually refresh the filter (or delete one character from the filter and put it back) to actually filter after that key, as you can see in the third picture. Is there a workaround to do this automatically ?
html.Div([
dcc.Tabs(
tabs=[
{‘label’: ‘tab 1’, ‘value’: 1},
{‘label’: ‘tab 2’, ‘value’: 2},
{‘label’: ‘tab 3’, ‘value’: 3},
],

html.Div(id=‘tab-output’, style={…’})
], id=‘content’, style={…’}),

@app.callback(dash.dependencies.Output(‘tab-output’, ‘children’),
[dash.dependencies.Input(‘tabs’, ‘value’)])
def display_tab(value):
if value == 1:
df3 = …
return (
html.Div(dt.DataTable(
rows=df3.to_dict(‘records’),
filterable=True,
sortable=True,
editable=False
))
)

if value == 2:
    df6 = ...
    return (html.Div(dt.DataTable(
        rows=df6.to_dict('records'),
        filterable=True,
        sortable=True,
        editable=False
    )))

if value == 3:
    df7 = ...
    return (html.Div([
dt.DataTable(
    rows=df7.to_dict('records'),
    filterable=True,
    sortable=True,
    editable=False
)]))