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

Dash Python
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

1
1.png852×1020 38.1 KB

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.

1 Like
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

10

A post was split to a new topic: Issue with datatable conditional formatting

11

Hi for filtering purpose, is it necessary to define the table within the app layout ?

12

it is not, you could define it within a callback.

14

Chris,
Upon using the 1st code example given here, I get an error message.

https://dash.plot.ly/datatable/filtering

TypeError: Unexpected keyword argument filter_action
Allowed arguments: active_cell, column_conditional_dropdowns, column_conditional_tooltips, column_static_dropdown, column_static_tooltip, columns, content_style, css, data, data_previous, data_timestamp, derived_viewport_data, derived_viewport_indices, derived_viewport_selected_rows, derived_virtual_data, derived_virtual_indices, derived_virtual_selected_rows, dropdown_properties, editable, end_cell, filtering, filtering_settings, filtering_type, filtering_types, id, is_focused, locale_format, merge_duplicate_headers, n_fixed_columns, n_fixed_rows, navigation, pagination_mode, pagination_settings, row_deletable, row_selectable, selected_cells, selected_rows, sorting, sorting_settings, sorting_treat_empty_string_as_none, sorting_type, start_cell, style_as_list_view, style_cell, style_cell_conditional, style_data, style_data_conditional, style_filter, style_filter_conditional, style_header, style_header_conditional, style_table, tooltip_delay, tooltip_duration, tooltips, virtualization

What is the correct code to be used ?

15

have you upgraded to a recent dash?

16

no not needed at all, also, even if you get to define your table within the app layout, you can actually return every possible properties available in callbacks, for example i am returning the deletable property of rows in the table. We can return anything and everything.

@app.callback(
output=[
Output(component_id=‘inter-inputs’, component_property=‘style’),
Output(component_id=‘summary-inputs’, component_property=‘style’),
Output(component_id=‘edit-inter-button’, component_property=‘style’),
Output(component_id=‘interactions-table’, component_property=‘row_deletable’)
],
inputs=[
Input(component_id=‘summary-radio’, component_property=‘value’),
Input(component_id=‘edit-inter’, component_property=‘on’),
]
)