Dash datatable dropdown doesn't work

Dash Python
1

Hi, the DataTable dropdowns doesn’t seem to be working. I run the full code as provided on the website, but it doesn’t show the dropdown.
I am guessing that it is related to the updates. when I run the code with earlier versions of dash and dash_table, it works.
Thanks,

2

Thanks for reporting!

The docs use the version that is mentioned in the installation instructions: https://dash.plot.ly/installation. We’ll update the docs with the new version shortly & and the new syntax.

The main change happened in 3.2.0: https://github.com/plotly/dash-table/blob/master/CHANGELOG.md#changed-1, where you’ll need to change 'type': 'dropdown' to 'presentation': 'dropdown' inside your columns list.

3

Thanks so much Chris, it works now.
Just two small additional things I noticed; the dropdown in the first row does not show the dropdown menu if the cell height is bigger than 60px (I am trying to put small images by each row, and I want to have the cells aligned with them). Second, by default the content of the dropdown cell stays at the top, while those of other cells are are in the middle (This is an issue only when the cell height is bigger than a row height I guess)

Thanks again

4

Hi, is “dropdown_conditional” just supported in the version used in the installation instructions?

5

I mean, Im using different versions and column_conditional_dropdowns is not working.
Is that released already?

6

Chris, could you please update the tutorial docs to align with this update? Thanks.

7

dash.plot.ly/datatable was updated for dash==1.0.0 and dash_table==4.0.0 in New Table API by alinastarkov · Pull Request #533 · plotly/dash-docs · GitHub. The dropdown examples (Dropdowns Inside DataTable | Dash for Python Documentation | Plotly) work when I visit. Is there a particular example that isn’t working for you with these versions?

8

Chris, Thanks for the prompt reply. I was trying on dash==0.40.0 and dash_table==3.6.0. After updating to dash==1.0.0 and dash_table==4.0.0, the example code can run through.

However, I did find one issue for my case, if I didn’t specify the column id names one by one, but only use “columns=[{‘id’: c, ‘name’: c} for c in df.columns]” , then the dropdown option seems not active.

Here is the code in my try:

dash_table.DataTable(
id=‘table-dropdown’,
data=df.to_dict(‘records’),
# columns=[
# {‘id’: ‘climate’, ‘name’: ‘climate’, ‘presentation’: ‘dropdown’},
# {‘id’: ‘temperature’, ‘name’: ‘temperature’},
# {‘id’: ‘city’, ‘name’: ‘city’, ‘presentation’: ‘dropdown’},
# ],
columns=[{‘id’: c, ‘name’: c} for c in df.columns],
editable=True,
dropdown={
‘climate’: {
‘options’: [
{‘label’: i, ‘value’: i}
for i in df[‘climate’].unique()
]
},
‘city’: {
‘options’: [
{‘label’: i, ‘value’: i}
for i in df[‘city’].unique()
]
}
}
),
html.Div(id=‘table-dropdown-container’)

9

I figured out the reason, I didn’t add ‘presentation’: ‘dropdown’ to the columns that I want to show dropdown option. This issue can be solved like this:

allcol = [‘a’,‘b’,‘c’,‘d’,‘e’,‘f’]
dropcol = [‘d’,‘e’]
columns=[{‘id’: c, ‘name’: c} for c in allcol if c not in dropcol] +
[{‘id’: c, ‘name’: c,‘presentation’: ‘dropdown’} for c in dropcol]

2 Likes