# Dash DataTable: press on cell should highlight row

**URL:** <https://community.plotly.com/t/dash-datatable-press-on-cell-should-highlight-row/44076>\
**Category:** Dash Python\
**Created:** [August 21, 2020, 7:24pm UTC](https://community.plotly.com/t/dash-datatable-press-on-cell-should-highlight-row/44076 "2020-08-21T19:24:35Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![HansPeter123](https://avatars.discourse-cdn.com/v4/letter/h/3be4f8/32.png) [@HansPeter123](https://community.plotly.com/u/HansPeter123)\
**Post date:** [August 21, 2020, 7:24pm UTC](https://community.plotly.com/t/dash-datatable-press-on-cell-should-highlight-row/44076/1 "2020-08-21T19:24:35Z")

</div>

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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/0/022082ca3ca88cd81cb79e47cb9a5f727197076d.png)

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [August 21, 2020, 9:22pm UTC](https://community.plotly.com/t/dash-datatable-press-on-cell-should-highlight-row/44076/2 "2020-08-21T21:22:50Z")

</div>

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.

```auto
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)

```

---

<div class="post-metadata">

**Author:** ![HansPeter123](https://avatars.discourse-cdn.com/v4/letter/h/3be4f8/32.png) [@HansPeter123](https://community.plotly.com/u/HansPeter123)\
**Post date:** [August 22, 2020, 8:08am UTC](https://community.plotly.com/t/dash-datatable-press-on-cell-should-highlight-row/44076/3 "2020-08-22T08:08:02Z")

</div>

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](https://community.plotly.com/t/remove-or-change-hotpink-selection-from-datatable/26168)) 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?

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [August 22, 2020, 3:39pm UTC](https://community.plotly.com/t/dash-datatable-press-on-cell-should-highlight-row/44076/4 "2020-08-22T15:39:27Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![HansPeter123](https://avatars.discourse-cdn.com/v4/letter/h/3be4f8/32.png) [@HansPeter123](https://community.plotly.com/u/HansPeter123)\
**Post date:** [August 23, 2020, 8:21am UTC](https://community.plotly.com/t/dash-datatable-press-on-cell-should-highlight-row/44076/5 "2020-08-23T08:21:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![HansPeter123](https://avatars.discourse-cdn.com/v4/letter/h/3be4f8/32.png) [@HansPeter123](https://community.plotly.com/u/HansPeter123)\
**Post date:** [August 30, 2020, 6:13pm UTC](https://community.plotly.com/t/dash-datatable-press-on-cell-should-highlight-row/44076/6 "2020-08-30T18:13:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [August 30, 2020, 6:15pm UTC](https://community.plotly.com/t/dash-datatable-press-on-cell-should-highlight-row/44076/7 "2020-08-30T18:15:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mariofutire](https://avatars.discourse-cdn.com/v4/letter/m/2acd7d/32.png) [@mariofutire](https://community.plotly.com/u/mariofutire)\
**Post date:** [July 3, 2021, 5:43pm UTC](https://community.plotly.com/t/dash-datatable-press-on-cell-should-highlight-row/44076/8 "2021-07-03T17:43:17Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![kikatuso](https://avatars.discourse-cdn.com/v4/letter/k/c57346/32.png) [@kikatuso](https://community.plotly.com/u/kikatuso)\
**Post date:** [July 3, 2023, 5:13pm UTC](https://community.plotly.com/t/dash-datatable-press-on-cell-should-highlight-row/44076/9 "2023-07-03T17:13:36Z")

</div>

In CSS it’s quite simple

```auto
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.