Change currently selected row in Dash datatable with callback

Dash Python
1

In a Dash datatable, when row_selectable is set to single, there are radio buttons that can be clicked by the user to the left of the table. Is it possible to reselect these radio buttons programmatically with a callback (for example, a next button that indexes the user through the rows)?

I was hoping to do something like this:

@app.callback(
    Output('table', 'selected_row_ids'),
    [Input('next-button', 'n_clicks'),
     State('table', 'selected_row_ids')]
)
def index_next_row(n_clicks, selected_rows):
    index = selected_rows[0]
    return [index + 1]
1 Like
2

Nevermind, selected_rows works when row_selectable is set to single, but not selected_row_ids.

2 Likes
3

Hm, it is not working for me. I can set the index, but the rows stay visibly unselected. I wonder if I am missing some settings in the datatable configuration?


ws_table = html.Div(id='ws-table-container', 
    style={'minHeight':  100, 'margin': '5%'},
    children=[
        DataTable(id='ws-table',
            columns=[ {"name": i, "id": i, "selectable": True}  
                                for i in ['Workspace']],
                    data=[],
                    row_selectable='single',
                    row_deletable=False,
                    style_cell={'textAlign': 'left'},
                    sort_action='native'
                    )
])
4

this worked:

@app.callback(
    Output('table', 'selected_rows'),
    [Input('next-button', 'n_clicks'),
     State('table', 'selected_row_ids')]
)
def index_next_row(n_clicks, selected_rows):
    index = selected_rows[0]
    return [index + 1]
2 Likes
5

Thank you so much, this bit of code was exactly what I needed. :slight_smile: