Hi Team,
I was trying to find a way to select the entire row and highlight it.
Once i have selected the row, i need to update the selected row data in to another html divs.
Could you please have a look into this feature.
Help would be appreciated!
Thanks.
AIMPED
December 8, 2022, 9:24am
2
@Sandeep something like this (adapted form this example )?
from dash import Dash, Input, Output, State, dash_table, html
import pandas as pd
import json
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
app = Dash(__name__)
app.layout = html.Div([
dash_table.DataTable(
id='datatable-interactivity',
columns=[
{"name": i, "id": i, "deletable": True, "selectable": True} for i in df.columns
],
data=df.to_dict('records'),
editable=True,
filter_action="native",
sort_action="native",
sort_mode="multi",
column_selectable="single",
row_selectable="multi",
row_deletable=True,
selected_columns=[],
selected_rows=[],
page_action="native",
page_current=0,
page_size=10,
),
html.Div(id='datatable-interactivity-container')
])
@app.callback(
Output('datatable-interactivity', 'style_data_conditional'),
Output('datatable-interactivity-container', 'children'),
Input('datatable-interactivity', 'selected_rows'),
State('datatable-interactivity', 'data'),
prevent_initial_call=True
)
def update_styles(selected_rows, data):
# change formatting of selected rows
row_highlighting = [
{
'if': {'row_index': i},
'background_color': '#D2F3FF'
} for i in selected_rows
]
# extract data of selected rows
selected_row_content = [data[row] for row in selected_rows]
return row_highlighting, json.dumps(selected_row_content, indent=2)
if __name__ == '__main__':
app.run_server(debug=True)
2 Likes
Alternatively, you could use css if you already have a lot going on with the conditional formatting.
Something like this might work (haven’t tried it)
tr:has(td:first-of-type>input:checked) {
background-color: #D2F3FF
}
Sandeep
December 8, 2022, 10:29am
4
Is it possible to find the active cell data and its row data?
@Sandeep ,
When you say the data, are you talking about the data or highlighting that row like the question?
AIMPED
December 8, 2022, 11:35am
6
Take a look here:
`dash_table.DataTable` is an interactive table that supports rich styling, conditional formatting, editing, sorting, filtering, and more.
→ Table with Click Callback
Sandeep
December 8, 2022, 11:53am
7
Yeah, When you select a cell, I require entire row data…
As the question mentioned
Sandeep
December 8, 2022, 11:57am
8
@AIMPED , → Table with Click Callback
The tutorial provides only the active or selected cell value(data).
In the same way, If i select that cell. I need to retrieve the entire row cell values(data)
Hello @Sandeep ,
The selected_cell data gives you the row_index which can be used the same way you retrieved the row data information.
You’d just need to allow for the use of the selected_cell as your input trigger.
2 Likes