Dash DataTable: press on cell should highlight row

Dash Python
1

Hi there, I would like to change the behavior of a DT when I click on an individual cell. Usually only this cell is highlighted (as can be seen in the screenshot). I would prefer if the whole row gets highlighted. Secondary, I would also like to change the color. Does anyone know how to do this? Thanks.

Bildschirmfoto 2020-08-21 um 21.17.51
Bildschirmfoto 2020-08-21 um 21.17.511604×620 51.1 KB

1 Like
2

Hi @HansPeter123

Here is a small example of setting the background color of the active cell in the table definition, and then updating the row color based on the current active cell in a callback.

import dash
from dash.dependencies import Input, Output
import dash_table
import pandas as pd

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/solar.csv")

app = dash.Dash(__name__)


style_data_conditional = [
    {
        "if": {"state": "active"},
        "backgroundColor": "rgba(150, 180, 225, 0.2)",
        "border": "1px solid blue",
    },
    {
        "if": {"state": "selected"},
        "backgroundColor": "rgba(0, 116, 217, .03)",
        "border": "1px solid blue",
    },
]

app.layout = dash_table.DataTable(
    id="table",
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict("records"),
    style_data_conditional=style_data_conditional,
)


@app.callback(
    Output("table", "style_data_conditional"),
    [Input("table", "active_cell")]
)
def update_selected_row_color(active):
    style = style_data_conditional.copy()
    if active:
        style.append(
            {
                "if": {"row_index": active["row"]},
                "backgroundColor": "rgba(150, 180, 225, 0.2)",
                "border": "1px solid blue",
            },
        )
    return style


if __name__ == "__main__":
    app.run_server(debug=True)
4 Likes
3

Hi @AnnMarieW, I tried your solution (I am using Dash R) for the style of the cell but it did not work. It actually gave every cell a blue border and after clicking on a cell it still was pink. I might switch to Python in the future and try it again.

I am aware that there are other topics (Remove or change hotpink selection from Datatable) regarding this issue, but nothing there was really helpful for me.

I hoped there might be some way to do this with a css file in the assets folder.

Secondly, based on the callback structure I already have I would like to avoid adding another one. So is the callback the only way to highlight a complete row based on the active cell?

4

Hi @HansPeter123

I expect there is a way to do this with css, but I wasn’t able to make it work. If you find a different solution, I hope you post it back here.

5

If I find a solution, I will post it here. Thank you

1 Like
6

Hi @AnnMarieW , I tried your solution now in Python and it works great. Thank You.

1 Like
7

hi @HansPeter123 … Super - thanks for letting me know!

1 Like
8

I have see the solution provided and it works.
What is not so easy is to apply it to a wide number of tables.
Each needs to have the callback repeated.

And it is something that could be done entirely in the browser.
is there a similar solution?

Maybe with a class name applied to the <tr> element?

3 Likes
9

In CSS it’s quite simple

td:has(~ .dash-cell.cell--selected.focused), .dash-cell.cell--selected.focused ~ td {
    background-color: #A86561 !important; 
}

It highlights all the siblings of the selected cell.

5 Likes