DataTable with filtering as well as components within cells

Dash Python
1

Hello,

I’m pretty new to Dash and a little bit confused by what is possible with it and what not. So far I got a tabbed app with DataTables including filtering and sorting in each tab. That works perfectly fine.

However I need to display additional information for some data cells by clicking or hovering them using for example tool tips or popups. As far as I understood the DataTables only allow pure text as cell content (at least I didn’t manage do get HTML code or other components in there. This PR here looks like it would perfectly fit my needs: https://github.com/plotly/dash-table-experiments/pull/11
But when I use data_table_experiments instead of data_table filtering is not available anymore:

TypeError: Unexpected keyword argument `filtering`
Allowed arguments: column_widths, columns, editable, enable_drag_and_drop, filterable, filters, header_row_height, id, 
max_rows_in_viewport, min_height, min_width, resizable, row_height, row_scroll_timeout, row_selectable, row_update, rows, 
selected_row_indices, sortColumn, sortDirection, sortable, tab_index

It seems like filtering is done differently in data_table_experiments compared to data_table or not working at all. In addition it seems like data_table_experiments would be deprecated now.

Any help getting dash data_tables with filtering and components within cells to work would be very appreciated.

2

It is, just not that keyword called “filtering”. I recommend starting from scratch with the dash table user guide that I wrote, it explains everything: Dash DataTable | Dash for Python Documentation | Plotly

This was always just a prototype feature. For a variety of reasons, it turned out much more difficult to get to work across all use cases, so we won’t be doing this feature in the immediate future.

However, for the particular use case of tooltips in cells, we’re considering adding that to dash_table. What else would you want in cells?

3

Thanks for the quick reply! And thanks for the great framework and user guide. Basically everything I did with Dash so far is based on these two pages:
https://dash.plot.ly/datatable/callbacks
https://dash.plot.ly/dash-core-components/tabs

I only turned to data_table_experiments since I hoped it might provide me with in-cell functionalities.

For my use case the content of cells might either be linked to one or multiple rows in another data_table (on other tabs) or contain multi-line explanations. So possible solutions for me would be

  1. (perfect) When someone clicks on a cell the windows focus changes to another data_table (within the same app, but probably on another tab), either highlighting a specific row or filtering the rows for a specific value
  2. (perfect) Same as 1., but with multiple rows
  3. (great) When someone clicks on a cell some lightbox-like overlay opens and shows additional data
  4. (great) (Multi-line) tooltips in cells, enabling to present the additional information when hovering
  5. (great) Possibility to use HTML links (opening in new tabs) in cells
4

@chriddyp how are the chances that some of the above listed features might get implemented into dash_table?

5

It should be able to highlight or filter with a callback right now, and you could capture “clicking on a cell” by listening to the “active_cell” property (see Reference | Dash for Python Documentation | Plotly). However, I don’t think that it will “focus” the other table.

You could do this with a html.Div that is absolutely positioned so that it appears “over” the table. It would be hard to get the lightbox to appear over the cell that you are clicking on (you wouldn’t know the coordinates unless you did something like compute the coordinates depending on the active_cell coordinates with the height and width of the cell).

Seems like a good idea and it could be a first-class property of the datatable. Would be quite a bit of work though.

This one is requested a lot, so we’ll do it. We need to work out a lot of architectural details first though (namely the relationship between data types and cell renderers).

Also, just in case you (or other readers) weren’t aware, feature requests like this are available for sponsorship. That is, we’ll build out certain high-priority features for companies or organizations if they pay for the development time. Dash itself was actually funded this way, as was this datatable rewrite. More details and contact here: Consulting, Training & Open-Source Development

6

Thanks!

Sounds great, didn’t notice the active_cell property so far. However I only managed to get this working when also enabling the editable property. Is it possible to use active_cell without editable?

Yeah, I thought about that but manually considering everything like column-width (if not set fixed) makes this quite messy. Using active_cell as input information for the requested data only I might just create a overlay at the center of the screen.

Considering tooltips and links: I’m looking forward to these features :slight_smile:.