✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
📊 Dash 2.0 is Arriving. Register here.

Data Table - Not Interacting

Folks,

I cannot figure out why my data table is not interactive. I am looking for it to be capable of both sorting and filtering. Also, the next and previous buttons don’t work.

 #Table
                           dash_table.DataTable(
                                                id='table',
                                                columns=[{"name": i, "id": i} for i in df.columns],
                                                data=df.to_dict("rows"),
                                                editable=True,
                                                filtering=True,
                                                sorting=True,
                                                sorting_type='multi',
                                                n_fixed_rows=1,
                                                style_cell_conditional=[
                                                                        {'if':{'column_id':'Status'},
                                                                         'width':'10%'},
                                                                         {'if':{'column_id':'Work Order'},
                                                                         'width':'10%'},
                                                                         {'if':{'column_id':'Part Number'},
                                                                         'width':'10%'},
                                                                         {'if':{'column_id':'Serial Numbers'},
                                                                         'width':'10%'},
                                                                         {'if':{'column_id':'Quantity'},
                                                                         'width':'5%'},
                                                                         {'if':{'column_id':'Program'},
                                                                         'width':'10%'},
                                                                         {'if':{'column_id':'Arrival Date'},
                                                                         'width':'10%'},
                                                                         {'if':{'column_id':'Need Date'},
                                                                         'width':'10%'},
                                                                         {'if':{'column_id':'Test Date'},
                                                                         'width':'10%'},
                                                                         {'if':{'column_id':'Test ID'},
                                                                         'width':'5%'},
                                                                         {'if':{'column_id':'Facility'},
                                                                         'width':'10%'}],
                                                style_table={
                                                             'maxHeight':'300',
                                                             'overflowY':'scroll',
                                                             'overflowX':'scroll'}
                                                ),

Any help is appreciated.

Cheers.

There is a bug in data table for which it needs to be connected to a callback to become interactive. Just link it to a bogus callback that does not do much and you will be ok.

Thanks for the reply! I’ve added a pointless callback and it partially worked. I am able to sort, but not filter. Any other suggestions?

#Pointless Callback to make table interact - literally does nothing.
@app.callback(
    Output('table-container', "children"),
    [Input('table', "derived_virtual_data"),
     Input('table', "derived_virtual_selected_rows")])
def update_graph(rows, derived_virtual_selected_rows):
    return html.Div([])

Filtering syntax is super awkward, you need to do: eq "foo" for strings and > num(0) for numbers. It’s common to just want to type: foo and expect everything that contains "foo" will be filtered. Make sure you’re not making this mistake.

There’s an issue on this topic: https://github.com/plotly/dash-table/issues/169

While, I was making this error it did not fix everything. I have a column that is formatted as a string but some of those strings are formed from numbers such as 95607. Neither =“95607” nor =num(95607) works. Some columns are searchable via these methods…

FYI, for strings you need eq "95607" not ="95607"

Not true. =“string” works fine.

Good to hear, but it isn’t documented: https://dash.plot.ly/datatable/interactivity

Thanks for the help! And if you have any ideas for making a string made up of numeric characters filterable, I am all ears.

Cheers.