I’d like to be able to click on any cell and have the the
entire row selected with a callback indicating the selected row.
Is this possible?
I’ve been playing around with callbacks.
CB1. takes the active_cell and returns a new style_data_conditional that changes the background color of the active cell’s row.
CB2. takes is_focused and returns active_cell = None. The idea here is to negate
the default active cell styling.
Both these callbacks work in isolation but when I include them both the CB2 is
called first resulting in active_cell = None being passed in to the styling CB1 resulting in
no style_data_conditional being applied. Catch-22!
I’m also trying to style the selected row, and eventually I’d like to do even more based on these selections. I couldn’t find an easy way to get a custom styling. It looks like the active_cell is styled after any options passed to style_data_conditional. I eventually just had the callback style the row exactly like that of the active_cell. Problem is that I also want striped rows so I have to do some verbose style concatenations to get that.
Anyway, this solution isn’t great because there’s a noticeable lag between the cell click receiving the style and then the rest of the row getting styled (it has to make the round trip for the Python execution on the server). I think when I get more time I’ll look into exactly how the DataTable is styled in the CSS and then try to override those classes in my own assets.
I’ll look into filing an issue on Dash to see if these pain points / limitations can be improved upon. The absence of click/hover events for the DataTable is quite surprising given how interactive all the other components are.
The row_selectable option is definitely going to be part of our solution, but there a couple of subtle UX pieces that we’re trying to accomplish. A bit of context, we’re trying to rewrite a prototype using Dash (initially targeting the desktop, essentially Python/Qt) and our client liked a few of the features of our tabular viewer. It’s not critical that we replicate all the visual feedback but trying to match it as much as reasonably feasible is a goal of this rewrite. The previous table didn’t have the notion of cell selection, just row-based selections. If a row was clicked, it’s style changed show the active selection (as well as some private attrs being set). If a row was double-clicked, a set of actions were triggered, where this UX feature is what we planned on using the row_selectable option to do.
In my previous post’s rambling, I was trying to see if it’s possible to remove any visual feedback regarding cell selections so as not to confuse the user (these tables are read-only). We’re currently looking into Dash’s clientside callbacks (this could help with styling but it’s mostly to help with other features we want) or potentially trying our hand at a Dash-wrapped react-table component.
Doing this gives you a lot of control over how things are styled, though it’s a bit of a learning curve if you’re not familiar with React/JS. We started with the Table component but then moved to using a MultiGrid implementation (to enable horizontal scrolling, which I only mention just to prevent you from realizing too late that this isn’t possible with Table).
The code for this is for a client and so I’m not at liberty to share any of it. However, there are quite a few examples of using the react-virtualized Table component in various use-cases. I wish I could give some more info but I also wasn’t the one on our team who developed this component so I don’t have a ton of insight to give here.
The “unfortunately” was in response to hsbc_anshuman because I didn’t have any updates related to the DataTable.
