Using Filtering with DataTables and Tabs

Dash Python
1

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.

Part1
Part1.png931×800 12.8 KB

Part2
Part2.png1483×805 23.8 KB

Part3
Part3.png1134×803 11.3 KB

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
)]))