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.
1 Like
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)
3 Likes
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?
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.
If I find a solution, I will post it here. Thank you
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