How to select the entire row and highlight in dash table library and retrieve the entire selected data

Dash Python
1

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.

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
3

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
}
4

Is it possible to find the active cell data and its row data?

5

@Sandeep,

When you say the data, are you talking about the data or highlighting that row like the question?

6

Take a look here:

→ Table with Click Callback

7

Yeah, When you select a cell, I require entire row data…
As the question mentioned

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)

9

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