Hi @jgomes_eu
It would be helpful if you could post a minimal example with some sample data. More info on how to do that here
In the meantime, this might be part of the problem: “Why global variables will break your app”
To update a dash-bootstrap-components
Table in a callback, the whole table needs to be re-created with the new data. (Unlike the Dash DataTable
that has a data
prop that can be updated in a callback)
Here is a MWE:
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import plotly.express as px
df = px.data.tips()
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
dropdown = html.Div(
dcc.Dropdown(
id="dropdown",
options=[{"label": i, "value": i} for i in df["day"].unique()],
multi=True,
value=[],
),
className="m-4",
)
app.layout = dbc.Container(
[
html.H1("Table with a Dropdown"),
html.Hr(),
dbc.Row(dbc.Col(dropdown)),
dbc.Row(dbc.Col(id="dbc-table")),
],
fluid=True,
)
@app.callback(Output("dbc-table", "children"), Input("dropdown", "value"))
def update_table(days):
dff = df.copy() if days == [] else df[df["day"].isin(days)]
return dbc.Table.from_dataframe(dff, striped=True, bordered=True, hover=True)