dash_table.DataTable - filtering and sorting doesn't seem to work?


#1

Hi, i was just trying to use the new dash_table.DataTable component. But this doesnt seem to work for filter/sort/delete col/delete row etc. The table is created in the dash output, but is not able to sort, nor able to filter etc.

is it working fine for others?

Layout -

import dash_table as dtable


#2

Anyone looking at this please?
The new datatable has amazing features, matching almost excel type properties. But unable to use this please?


#3

If you share the smallest amount of code that can run and displays your problem it makes it much easier for people to help you.

You may be hitting a known bug where many client side features don’t work without a callback: https://github.com/plotly/dash-table/issues/202#issuecomment-436750407


#4

Like @Damian said, filtering and sorting only works when a callback is connected to the table. You are returning the table from a callback so it’s not connected. You can circumvent this by assigning a dummy callback to the table you want or move the table into the layout and instead of returning the table as children, output to data property of the table.


#5

Thanks very much for help, it worked. One more thing on this, if we are outputing the data property, how do we read the same data to style the table conditionally?

html.Div([
dtable.DataTable(
id=‘data-table’,
data=[{}],
filtering=True,
sorting=True,
sorting_type=“multi”,
columns=[{‘name’: i, ‘id’: i} for i in py_to_kdb],
style_as_list_view=True,
style_cell={‘padding’: ‘5px’},
style_header={
‘backgroundColor’: ‘white’,
‘fontWeight’: ‘bold’
},
style_table={
‘overflowX’: ‘scroll’,
‘maxHeight’: ‘500’,
‘overflowY’: ‘scroll’
},
style_data_conditional=[
{
‘if’: {‘row_index’: i},
“backgroundColor”: “#3D9970”,
‘color’: ‘white’
} for i in range(0,len([{}]))
],
)
], id=‘data-table-div’)


#6

from the returned data want to conditionally decide which row to highlight as per different fields


#7

i am returning data from a callback so the tables are getting displayed, but what property should be used to loop through the rows to conditionally format the rows.?


#8

Got the fix, created another callback which returns

@app.callback(
output=Output(‘data-table’, ‘style_data_conditional’),
inputs=[Input(component_id=‘update-button’, component_property=‘n_clicks’)],

to this table -

html.Div([
dtable.DataTable(
id=‘data-table’,
data=[{}],
filtering=True,
sorting=True,
sorting_type=“multi”,
columns=[{‘name’: i, ‘id’: i} for i in py_to_kdb],
style_as_list_view=True,
style_cell={‘padding’: ‘5px’},
style_header={
‘backgroundColor’: ‘white’,
‘fontWeight’: ‘bold’
},
style_table={
‘overflowX’: ‘scroll’,
‘maxHeight’: ‘500’,
‘overflowY’: ‘scroll’
},
style_data_conditional=[{}]
)
], id=‘data-table-div’)

and it works beautifully. Thanks all for help


#9

A post was split to a new topic: dash_table.DataTable - Determining which rows have changed