Programatically set scrolling point for Dash DataTable?

Dash Python
1

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.

1 Like
2

This is not possible right now

3

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

4

Iā€™m not sure, I havenā€™t looked into it. Here is their source code: GitHub - adazzle/react-data-grid: Feature-rich and customizable data grid React component

1 Like
5

Thanks. Iā€™ll try to investigate and report here if i figure anything out.

1 Like
6

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
7

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.

8

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?

9

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?

10

Also interested in this feature. It is needed when table is dynamically appended and need to see what is added right away.

11

Hi everyone. Is there anything on this issue??? I am having a use case where in a dataframe, I have past and future dates. Where as I want to show the rows with the datetime.today as the top rows when the table is first rendered or the page is refreshed. Is that possible now?

12

Is there any update on implementing this feature?

13

up! any updates?

14

This is not possible in the Dash Data Table, but itā€™s available in Dash AG Grid

1 Like