Using Filtering with DataTables and Tabs


#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.

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