How can I center a large table?

📊 Plotly Python
1

Suppose I have a large table

import plotly.graph_objects as go

fig = go.Figure(data=[go.Table(
    header=dict(values=['A Scores', 'B Scores'],
                line_color='darkslategray',
                fill_color='lightskyblue',
                align='left'),
    cells=dict(values=[[i for i in range(100)], # 1st column
                       [i for i in range(100)]], # 2nd column
               line_color='darkslategray',
               fill_color='lightcyan',
               align='left'))
])

fig.update_layout(width=500, height=300)
fig.show()

How can I make it so the table is centred around a custom row (say the 50th row here) when a button is pressed?

2

I think you can do this by paging a datatable https://dash.plot.ly/datatable/callbacks

3

Unfortunately, whilst useful, the paging functionality is not what I was looking for.

I was more looking for a a solution to keeping the entire table on display but the scroll bar initialised to a specific point.

Do you know if this functionality exists?

4

You could try a combination of anchor tags on each row of the table and then making the button change the URL to go to #row-id. This doesn’t guarantee that the row will be centred though, only that it will be in view.

You’ll probably need to use some client-side javascript to centre the viewport over a particular row. Something like https://stackoverflow.com/questions/7852986/javascript-scroll-to-nth-row-in-a-table.

5

Thanks this seems like the right direction.

If I wanted to ask for this as a feature request (so it can easily be done from the python API) do I request the feature here or on the github page?

6

I’d suggest on the GitHub issue tracker https://github.com/plotly/dash/issues. My gut feeling is that this would best be part of DataTable, since it has attributes such as derived_viewport_row_ids which could be changed to a settable attribute or a new function added.