Hi, I have a problem as follows: a series of checkboxes are added to a dbc.table component, When one of the checkboxes changes, it triggers a callback. However, Only one checkbox should be selected at a time. I am using the pattern matching callback example to receive the callback input event, But I dont know how to change the state of all the other components (besides the one which triggered the callback). As I cannot have an output the same as an input without causing a callback loop.
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State, MATCH, ALL, ALLSMALLER
import pandas as pd
app = dash.Dash(__name__, suppress_callback_exceptions=True, external_stylesheets=[dbc.themes.CYBORG])
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/beers.csv')
#Generate list of checklists to add to table (ID=index, value=brewery)
checkboxrange=[]
for i in range(df.index.size):
checkboxrange.append(dcc.Checklist(
id={
'type': 'brewery-selector',
'index': str(i)
},
options=[
{
'label': str(df["brewery_id"].values[i]),
'value': str(df["brewery_id"].values[i]),
}
],
value=[],
)
)
#add checklists to dataframe
df.insert(0, "visible", checkboxrange, True)
#filter
df = df.filter(["visible","beer","style"])
df = df.head(20)
#generate table
table = dbc.Table.from_dataframe(df,
id="table",
bordered=True,
dark=False,
hover=True,
responsive=True,
striped=True,
)
app.layout = html.Div([
html.Div(id='container-ex3', children=[table]),
html.Div(id='callback_output', children=[]),
])
#Callback whenever one of the checkboxes are modifies
@app.callback(
Output('callback_output', 'children'),
[Input({'type': 'brewery-selector', 'index': ALL}, 'value')])
def checkboxchanges(checkbox):
#check which checkbox was ticked
#untick all others
#return new textbox value to update other components (graph/socket etc)
print(str(checkbox))
return str(checkbox)
if __name__ == '__main__':
app.run_server(debug=True)