Black Lives Matter. Please consider donating to Black Girls Code today.
Dash Enterprise delivers an incredible 21x cost savings 💸Download the e-book!

Programatically set scrolling point for Dash DataTable?

Is it possible to programatically update the scrolling point of the DataTable.
For example in Table Experiments gapminder example usage.py we can select the countries by clicking on figure with this call back.

@app.callback(
    Output('datatable-gapminder', 'selected_row_indices'),
    [Input('graph-gapminder', 'clickData')],
    [State('datatable-gapminder', 'selected_row_indices')])
def update_selected_row_indices(clickData, selected_row_indices):
    if clickData:
        for point in clickData['points']:
            if point['pointNumber'] in selected_row_indices:
                selected_row_indices.remove(point['pointNumber'])
            else:
                selected_row_indices.append(point['pointNumber'])
    return selected_row_indices

but now i also want to scroll the table to the last selected country so that the user can see interactively what was just selected. this could be very helpful if there is a lot of data 1000+ rows and you select one somewhere and the scroll the table to it rather than having the user try to go hunt to find what was just selected.

This is not possible right now

@chriddyp do you know is it possible in the underlying react DataGrid?

I’m not sure, I haven’t looked into it. Here is their source code: https://github.com/adazzle/react-data-grid/

1 Like

Thanks. I’ll try to investigate and report here if i figure anything out.

1 Like

Well quick search says they have a property that’s supposed to do it called ScrollToRowIndex.
But there’s a recent issue out on it not working correctly, or only working on initial rendering:

maybe once that’s fixed there, at some point it can be exposed for use in Dash DataTable.

1 Like

Stale, but I’m very interested in this functionality. It looks like the react-data-grid GitHub issue posted was resolved.

For now my workaround is to use paging rather than virtualization, then jump to the appropriate page via a callback.

what’s your use case here? can you sort your data before hand so that the data you are interested in showing appears at the top?

Hi, I’m looking to do the same scroll to a specific row after clicking in a component (timeline in my case). This is for a local monitoring system and the table is for logs.

Is there a way to execute some client side callback or something to scroll the table ? or an output prop that is not the table data to modify the viewport?