Auto-scroll to the selected row for Dash Datatable

Dash Python
1

Hi there,

Is there any way to perform auto-scroll to the selected row for Datatable?
I’ve found a similar question posted a few years ago, but it seems not solved yet:
https://community.plotly.com/t/programatically-set-scrolling-point-for-dash-datatable/7881

What I’m trying is to monitor the log data which needs to be displayed in thousands of rows, and it may great to have such a feature.

Here is my simple try code:

import dash
import dash_table
import pandas as pd
from collections import OrderedDict
from dash import html, dcc
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

df = pd.DataFrame(OrderedDict(
    [
        [
            'Column {}'.format(i + 1), list(range(5000))
        ] for i in range(15)
    ]
))

app.layout = html.Div(children=[
    dash_table.DataTable(
        id = 'table',
        data=df.to_dict('records'),
        columns=[{'id': c, 'name': c} for c in df.columns],
        cell_selectable=True,
        row_selectable='multi',
        selected_rows=[0],
        virtualization=True,
        fixed_rows={'headers': True},
        style_cell={'minWidth': 95, 'width': 95, 'maxWidth': 95},
        style_table={'height': 3000},  # default is 500
        page_size=5000,
    ),
    dcc.Input(
        id='input',
        type='number',
        value=1
    )

])

@app.callback(
    Output('table', 'selected_rows'),
    Output('table', 'active_cell'),
    Input('input', 'value')
)
def update_table(value):
    return [value], {'row': value, 'column': 1}

if __name__ == '__main__':
    app.run_server(debug=True)

I already confirmed that “selected_rows” and “active_cell” work fine based on this code.

image
image1247×596 4.82 KB

FYI, my dash version is 2.0.0.

Thanks in advance!

2

up! any updates? this feature would be great to have!

3

This isn’t possible in the Dash Data Table, but with Dash AG Grid, you can specify a Scroll To row:

You could also do a “post-sort” to place all the selected rows at the top:

2 Likes