Black Lives Matter. Please consider donating to Black Girls Code today.

Adding a ROW of dropdowns in Data-table

Using the data-table, I would like to create a single ‘row’ of dropdowns. The examples in the user-guide show for an entire column. I tried to use the column_conditional_dropdowns as follows but couldn’t get it to work.

html.Div([
            dt.DataTable(
                columns=([{'id': 'Model', 'name': '', 'editable': False}] +
                         [{'id': p, 'name': p} for p in params]),

                style_header={
                    'backgroundColor': '#eee', 'fontWeight': 'bold', 'font-size': '14px', 'text-align': 'center'},

                data=[dict(Model='name', A='x', B='y', C='z')] + [
                    dict(Model='Type', A='Text', B='number', C='number')] +
                     [dict(Model=i) for i in range(1, 50000)],

                # column_conditional_dropdowns=[
                #     {
                #         # column id
                #         'id': 'A',
                #         'dropdown': [{
                #             # these are filter strings
                #             'condition': 'Model eq "Type"',
                #             'dropdown': [
                #                 {'label': i, 'value': i}
                #                 for i in ['number', 'Text', 'Timestamp']
                #             ]
                #         }]
                #     }],

                editable=True,
                style_table={
                    'maxHeight': '750px',
                    'width': '99.9%',
                    'overflowY': 'scroll',
                    'overflowX': 'hidden',
                    'border': 'thin lightgrey solid'
                },

                style_cell={'font-family': 'Roboto Condensed'},
                style_cell_conditional=[{'if': {'column_id': 'Model'}, 'minWidth': '40px', 'width': '40px',
                                         'maxWidth': '40px', 'font-size': '14px', 'text-align': 'center',
                                         'backgroundColor': '#eee'}] +
                                       [{'if': {'column_id': p}, 'minWidth': '100px', 'width': '100px',
                                         'maxWidth': '100px', 'font-style': 'normal'} for p in params] +
                                       [{"if": {"row_index": 0}, 'font-style': 'italic', 'font-size': '14px',
                                         'text-align': 'center', 'backgroundColor': '#eee'}],
                pagination_settings={
                    'current_page': 0,
                    'page_size': 21
                },
                pagination_mode='fe',
                id='quick_table'),

            # html.Div([html.Button('-> NEXT: PLOT')])
        ], style={'display': 'block', 'height': '80%'}, id='table_plot_frame'),

image

I would like the marked rows to all be dropdowns.

Anyone any ideas? :slight_smile: