Incorporating multi-select dropdown in datatable

Dash Python
1

Hi,

I am trying to incorporate a multi-select dropdown in my datatable, but the functionality doesn’t seem to be working. I have the following code.

dash_table.DataTable(
id=‘some_id’,
columns=col_data,
data=[{}],
editable=True,
row_deletable=True,
dropdown={
‘Col1’: {
‘options’: [
{‘label’: i,‘value’: i}
for i in reference_table[‘Col1’]]
},
‘Col2’: {
‘options’: [
{‘label’: i,‘value’: i}
for i in reference_table[‘Col2’]],
‘multi’:True,
},
}
),

Does dropdown field, inside the data table object accept multi:True? It works when I use dcc.dropdown but it doesn’t work inside data table?

Any help is much appreciated!

1 Like
2

Hello guys,

trying to implement this as I have conditional dropdowns in last column of datatable (DataTable with Per-Row Dropdowns @Dropdowns Inside DataTable | Dash for Python Documentation | Plotly) in which I want to allow multiple selections.

‘multi’: True in dropdown_conditional still doesn’t work. Any workarounds?

Thanks

3

Hello @aboh,

I don’t think this is possible with datatable, but have you checked out AG Grid?

You can add your own custom components, including multi select.

4

Hi @jinnyzor,

thanks for your suggestion. Do you have any examples of how to implement this?

I tried the following but no luck:

        {
            "headerName": "Select Editor",
            "field": "cities",
            "cellEditor": "agSelectCellEditor",
            "cellEditorParams": {
                "values": ["New York", "London", "Boston", "Manchester"],
            },
            "multi": True
        },
5

Sure, I dont know if you can do it in the default select from the grid, but you can check a custom:

1 Like
6

Thanks @jinnyzor, this works like a charm. However, I’d also like to have different dropdown options based on value in another column in the same row? Using DataTable this could be done with dropdown_conditional argument and “filter_query”.

For AG grid I found this - angular6 - How to load different options in AG-Grid select dropdown ,based on other cell value in the same row with Angular 6? - Stack Overflow. I tried to adapt it for use in Python but just can’t make it work. Do you have any examples or ideas?

7

You should check out the docs for conditional drop downs.

But yes, inside the function you can perform a switch as to which dropdowns you want to use based upon the params.data[column] of the column that drives the options.