# Callback troubles with nested components (multiselect dropdown in html/dbc Table) **URL:** \ **Category:** Dash Python\ **Created:** [January 5, 2023, 6:50pm UTC](https://community.plotly.com/t/callback-troubles-with-nested-components-multiselect-dropdown-in-html-dbc-table/71369 "2023-01-05T18:50:31Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![jmcmplot](https://avatars.discourse-cdn.com/v4/letter/j/46a35a/32.png) [@jmcmplot](https://community.plotly.com/u/jmcmplot)\ **Post date:** [January 5, 2023, 6:50pm UTC](https://community.plotly.com/t/callback-troubles-with-nested-components-multiselect-dropdown-in-html-dbc-table/71369/1 "2023-01-05T18:50:32Z")
I am building a table using dash bootstrap components as I would like to have a multi-select dropdown in the datatable. This works in, but when I try to trigger a callback based on my selection, the callback doesn’t fire. The table is created using the following code: \*note df = a dataframe of variable length with columns q\_uuid and questions used to build the table which is loaded as an output child from a different callback following a button press. ```auto @app.callback(Output("question_table_location","children"), Input("load_button", "n_clicks")) def load_output(load_b,instance_id): ############################ # Build HTML table table_header = [ html.Thead(html.Tr([html.Th("Selected"), html.Th("Question_UUID"), html.Th("Question"), html.Th("Category")]))] table_row = [] for row in range(df.shape[0]): temp_row = html.Tr([html.Td(dcc.Checklist(options=[{'label': '', 'value': 'Checked'}], value=[''], id=f'cb_{row}')), html.Td(df.loc[row,'q_uuid']), html.Td(df.loc[row,'question']), html.Td([dcc.Dropdown( [{"label": f"{vci}", "value": vci} for vci in categories], placeholder="Category", id=f"cat_dd_{row}", multi=True, style={'width':'100%'})])]) table_row.append(temp_row) table_body = [html.Tbody(table_row)] table = dbc.Table(table_header + table_body, bordered=True,id='question-table',style={"width": "1400px"}) return table ``` because I have a variable number of dropdowns, I tried to set the output up as follows: ```auto @app.callback(Output("select_all_button", "disabled"), [Input(f"cat_dd_{row}","value") for row in range(df.shape[0])]) def select_row(*args): button_id = ctx.triggered_id print(button_id) print(args) return False ``` If I remove the callback the table builds fine, but with the callback things hang when I press the button to build the table. Any suggestions would be appreciated!. ---
**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\ **Post date:** [January 5, 2023, 7:03pm UTC](https://community.plotly.com/t/callback-troubles-with-nested-components-multiselect-dropdown-in-html-dbc-table/71369/2 "2023-01-05T19:03:05Z")
Hello @jmcmplot, Welcome to the community! Instead of trying to create inputs for the number of inputs, you can utilize pattern-matching, which will keep things closer and even dynamic between data changing. 🙂 > **[Pattern-Matching Callbacks | Dash for Python Documentation | Plotly](https://dash.plotly.com/pattern-matching-callbacks)** > > The pattern-matching callback selectors \`MATCH\`, \`ALL\`, & \`ALLSMALLER\` allow you to write callbacks that respond to or update an arbitrary or dynamic number of components. New in Dash 1.11.0! table: ```auto ############################ # Build HTML table table_header = [ html.Thead(html.Tr([html.Th("Selected"), html.Th("Question_UUID"), html.Th("Question"), html.Th("Category")]))] table_row = [] for row in range(df.shape[0]): temp_row = html.Tr([html.Td(dcc.Checklist(options=[{'label': '', 'value': 'Checked'}], value=[''], id=f'cb_{row}')), html.Td(df.loc[row,'q_uuid']), html.Td(df.loc[row,'question']), html.Td([dcc.Dropdown( [{"label": f"{vci}", "value": vci} for vci in categories], placeholder="Category", id={"index":f"{row}","type":"cat_dd"}, multi=True, style={'width':'100%'})])]) table_row.append(temp_row) table_body = [html.Tbody(table_row)] table = dbc.Table(table_header + table_body, bordered=True,id='question-table',style={"width": "1400px"}) ``` callback: ```auto @app.callback(Output("select_all_button", "disabled"), Input({'index':ALL,'type':'cat_dd'},"value") def select_row(_): button_id = ctx.triggered_id print(button_id) print(args) return False ``` Hopefully this will work for you. 🙂 ---
**Author:** ![jmcmplot](https://avatars.discourse-cdn.com/v4/letter/j/46a35a/32.png) [@jmcmplot](https://community.plotly.com/u/jmcmplot)\ **Post date:** [January 5, 2023, 7:21pm UTC](https://community.plotly.com/t/callback-troubles-with-nested-components-multiselect-dropdown-in-html-dbc-table/71369/3 "2023-01-05T19:21:43Z")
> [@jinnyzor](#): > > ```auto > @app.callback(Output("select_all_button", "disabled"), > Input({'index':ALL,'type':'cat_dd'},"value") > def select_row(_): > button_id = ctx.triggered_id > > print(button_id) > print(args) > return False > > ``` Thanks for the quick response! I implemented what you suggested (which makes total sense), but the same thing happens, that is when I click the button to load the table, nothing happens, but when I hide the select\_row callback, the button press loads the table with all the dropdowns etc. It seems tough to debug as I don’t see any output following the button press - it’s as if it never makes it to it’s associated callback… ---
**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\ **Post date:** [January 5, 2023, 7:24pm UTC](https://community.plotly.com/t/callback-troubles-with-nested-components-multiselect-dropdown-in-html-dbc-table/71369/4 "2023-01-05T19:24:36Z")
Are you running your app with `debug=True`? ---
**Author:** ![jmcmplot](https://avatars.discourse-cdn.com/v4/letter/j/46a35a/32.png) [@jmcmplot](https://community.plotly.com/u/jmcmplot)\ **Post date:** [January 5, 2023, 7:29pm UTC](https://community.plotly.com/t/callback-troubles-with-nested-components-multiselect-dropdown-in-html-dbc-table/71369/5 "2023-01-05T19:29:06Z")
yup, but as far as outputs things seem to just hang, there are no errors etc ---
**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\ **Post date:** [January 5, 2023, 7:31pm UTC](https://community.plotly.com/t/callback-troubles-with-nested-components-multiselect-dropdown-in-html-dbc-table/71369/6 "2023-01-05T19:31:50Z")
```auto @app.callback(Output("select_all_button", "disabled"), Input({'index':ALL,'type':'cat_dd'},"value") def select_row(_): if ctx.triggered.value: button_id = ctx.triggered_id print(button_id) print(args) return False return dash.no_update ``` Try changing to this. ---
**Author:** ![jmcmplot](https://avatars.discourse-cdn.com/v4/letter/j/46a35a/32.png) [@jmcmplot](https://community.plotly.com/u/jmcmplot)\ **Post date:** [January 5, 2023, 7:34pm UTC](https://community.plotly.com/t/callback-troubles-with-nested-components-multiselect-dropdown-in-html-dbc-table/71369/7 "2023-01-05T19:34:22Z")
Thanks - it’s working now - the problem was I was already outputting to select\_all\_button somewhere else. Thanks for your help!