✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Dash data_table with dropdowns and filter - strange behaviour

If I use a dash data_table with a column that consists of dropdown boxes, the filter feature for the column shows a strange behavior.

It looks like the filter applies to the ‘value’-component of the dropdown instead of the ‘label’-component. This is not very helpful, since the user is only aware of the visible ‘label’-strings.

Of course I can implement a workaround for this problem by a private mapping between labels and values or I can use a custom filter.
Embarrassing however, if there were a simple solution, which I don’t know about.

Example:
The following table contains two columns, the first one is a native numeric column and behaves perfectly.
The second column is a dropdown column. It allows only for filtering on the numerical values 1,2,3 behind the dropdown, but not on the visible labels ‘One’, ‘Two’, ‘Three’.

grafik

Here is the dash-code to my example:

import dash
import dash_table

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(

    data=[
        {'col1':1, 'col2':1},
        {'col1':2, 'col2':2},
        {'col1':3, 'col2':3}],
    columns=[
        {'id':'col1', 'name':'Column1'},
        {'id':'col2', 'name':'Column2', 'presentation': 'dropdown'}],
    dropdown={'col2':
        {'options' : [
            {'label': 'One', 'value': 1},
            {'label': 'Two', 'value': 2},
            {'label': 'Tree', 'value': 3}
        ]}},
    filter_action="native",
    editable=True
    )

if __name__ == '__main__':
    app.run_server(debug=True)