HTML with dropdown column

Dash Python
1

Hello!

I have a html table with 5 columns, one of this columns is a dropdown.
This dropdown has too many options, so I was trying to apply the dynamic options in this dropdown to limit the options according to user search.


@app.callback(
    Output({'type': 'carrier-dropdown', 'index': MATCH}, 'options'),
    [Input({'type': 'carrier-dropdown', 'index': MATCH}, 'search_value')],
    State('hidden-carriers-list', 'children'),
    prevent_initial_call=True
)
def update_carrier_dropdown(search_value,hidden_carriers_list):
    carrier_list = json.loads(hidden_carriers_list)
    carrier_options = [item['carrier'] for item in carrier_list]
    options = generate_dropdown_carrier(carrier_options)

    if search_value and len(search_value) > 3:
        return [o for o in options if search_value.upper() in o['label'].upper()]
    else:
        return dash.no_update

The problem is that I can only type one character (letter) and then the dropdown closes, it looks like it is rerendered.
Does anyone have a solution for this?

2

Hello @thayna.s,

Welcome to the community!

Have you checked out AG Grid, a lot of this stuff is all prebuilt. And if you don’t want a prebuilt drop-down select, you can use something like dash mantine which allows you to limit the number of options shown at any given time by adjusting a prop.

3

Hello @jinnyzor ,

Thanks for the reply! The problem with AG Grid is that I am trying to add the allowTyping property, but it isn’t working:

{
            'headerName': 'Dropdown Column', 
            'field':'dropdown-column',
            'cellEditor': 'agSelectCellEditor',
            'cellEditorParams': {
                'values': options,
            },
            'filterList': True,
            'editable': True,
            'allowTyping': True,

        }
4

You can also check out some examples on how to provide your own cellEditor. The dmc select might help you out a lot.