Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

[RESOLVED] Dropdown options in Datatable not showing?

Hey,

I succeed to implement the drop-down option within the data table without any problem. However, when I click on the options, I can’t display the menu/list of values possible.

[
        	    dash_table.DataTable(
        		        id='table-roster-site',
        		        editable = True,
        				data=df_roster.to_dict('rows'),
        		    	columns=[{'id': c, 'name': c, 'presentation' : 'dropdown'} for c in df_roster.columns],
                        column_static_dropdown = [
                        {
                            'id' : 'MISSION',
                            'dropdown' : [
                                {'label' : i, 'value' : i}
                                for i in df_roster['MISSION'].unique()
                                ]
                        },
                        {
                            'id' : 'NAME',
                            'dropdown' : [
                                {'label' : i, 'value' : i}
                                for i in df_roster['NAME'].unique()
                                ]
                        }
                        ]

Did anyone face the same issue?

Thx, Quentin.

1 Like

Oh, it’s 'presentation'! The docs say 'type'. Thanks!

I wish I could help, but mine worked with this change. My only guess for your error is that the result of df_roster['MISSION'].unique() is not a list of strings, but some numpy type.

I am facing the same issue. Even copying and pasting the example provided in the User Guide is not working- i.e. the drop-down returns an empty list. Was this resolved?

For me it appears to be due to using bootstrap.css . Credits to this post below:

Is there a way to be able to make it work?

Oops just figured it out. For anyone having a similar issue, please add the following CSS:

.Select-menu-outer {
display : block !important;
}

Credits:

7 Likes

Thanks a lot !

I am indeed using Dash-Bootstrap-Components. Thx so much for sharing the solution !

1 Like

Apparently this solution is not viable again, with the latest updates, and without Dash-bootstrap-components.
It would be nice if official documents would also contain instructions for necessary css components.

4 Likes

Has anyone found a working solution to this? Like the user above said, this currently is not working.

The solution ended up working for me. I was making a mistake in where I was placing the css (never worked with this before). Ensure it is not inside any media group but is at the outermost indentation level.Screen Shot 2020-06-01 at 8.00.31 PM

2 Likes

Also had this issue using dash bootstrap components.

I just tried the CSS fix by creating an assets/ folder in the app’s root dir then making a .css file and putting this in it:

.Select-menu-outer {
display : block !important;
}

Plotly Dash docs have more info about including CSS.

1 Like

Hi,
I have tried the following & it solves the issue
I am using external_stylesheets=[dbc.themes.FLATLY]
Don’t know if it is a correct solution, but it is ok

dash_table.DataTable(

    id='table-dropdown',

    data=df.to_dict('records'),

    **css=({ 'display' : 'block' }),**

    columns=[

        {'id': 'climate', 'name': 'climate', 'presentation': 'dropdown'},

        {'id': 'temperature', 'name': 'temperature'},

        {'id': 'city', 'name': 'city', 'presentation': 'dropdown'},

    ],

    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()

            ]

        }

    }

),

Hi - can you say where to add the CSS-code? When I copy -paste your code python crashes - it doesn’t like the asterisks. It doesn’t work without the asterisks, either - DashTable doesn’t recognize ‘css’ as an argument. I tried saving the code snippet as ‘dashtable.css’ in a folder ‘assets’, as suggested in the dash-manual for adding css-files - but that didn’t make any difference.

I reckon I’m missing some basic dash-knowledge. Eager to learn & to solve the issue.

Hi David,
You should remove the asterisks, I don’t know why it is showing in my post it is a mistake maybe because I wanted to make the line bold that it was added
Can you please share your code if I could help ?

Hello to All!

What an awesome thing Plotly-Dash! I am using already 2 years the tools!

This solution here forced me to make an account just to say hello and a huge thank you for the solution with the external .css

Thanks a lot!

1 Like