Change currently selected row in Dash datatable with callback

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

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

2 Likes

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'
                    )
])

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]
1 Like