# How can I center a large table?

**URL:** <https://community.plotly.com/t/how-can-i-center-a-large-table/29148>\
**Category:** 📊 Plotly Python\
**Created:** [September 24, 2019, 3:59pm UTC](https://community.plotly.com/t/how-can-i-center-a-large-table/29148 "2019-09-24T15:59:52Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![vab2048](https://avatars.discourse-cdn.com/v4/letter/v/bb73d2/32.png) [@vab2048](https://community.plotly.com/u/vab2048)\
**Post date:** [September 24, 2019, 3:59pm UTC](https://community.plotly.com/t/how-can-i-center-a-large-table/29148/1 "2019-09-24T15:59:52Z")

</div>

Suppose I have a large table

```python
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?

---

<div class="post-metadata">

**Author:** ![sjtrny](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/sjtrny/32/12714_2.png) [@sjtrny](https://community.plotly.com/u/sjtrny)\
**Post date:** [September 25, 2019, 1:00am UTC](https://community.plotly.com/t/how-can-i-center-a-large-table/29148/2 "2019-09-25T01:00:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![vab2048](https://avatars.discourse-cdn.com/v4/letter/v/bb73d2/32.png) [@vab2048](https://community.plotly.com/u/vab2048)\
**Post date:** [September 26, 2019, 8:32am UTC](https://community.plotly.com/t/how-can-i-center-a-large-table/29148/3 "2019-09-26T08:32:08Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![sjtrny](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/sjtrny/32/12714_2.png) [@sjtrny](https://community.plotly.com/u/sjtrny)\
**Post date:** [September 26, 2019, 9:05am UTC](https://community.plotly.com/t/how-can-i-center-a-large-table/29148/4 "2019-09-26T09:05:21Z")

</div>

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](https://stackoverflow.com/questions/7852986/javascript-scroll-to-nth-row-in-a-table).

---

<div class="post-metadata">

**Author:** ![vab2048](https://avatars.discourse-cdn.com/v4/letter/v/bb73d2/32.png) [@vab2048](https://community.plotly.com/u/vab2048)\
**Post date:** [September 26, 2019, 9:36am UTC](https://community.plotly.com/t/how-can-i-center-a-large-table/29148/5 "2019-09-26T09:36:19Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![sjtrny](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/sjtrny/32/12714_2.png) [@sjtrny](https://community.plotly.com/u/sjtrny)\
**Post date:** [September 26, 2019, 10:21am UTC](https://community.plotly.com/t/how-can-i-center-a-large-table/29148/6 "2019-09-26T10:21:41Z")

</div>

I’d suggest on the GitHub issue tracker [https://github.com/plotly/dash/issues](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.