# Datatable how to scroll X (horizontal)

**URL:** <https://community.plotly.com/t/datatable-how-to-scroll-x-horizontal/15604>\
**Category:** Dash Python\
**Created:** [November 13, 2018, 4:40pm UTC](https://community.plotly.com/t/datatable-how-to-scroll-x-horizontal/15604 "2018-11-13T16:40:59Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![valentin.lefranc](https://avatars.discourse-cdn.com/v4/letter/v/5f8ce5/32.png) [@valentin.lefranc](https://community.plotly.com/u/valentin.lefranc)\
**Post date:** [November 13, 2018, 4:40pm UTC](https://community.plotly.com/t/datatable-how-to-scroll-x-horizontal/15604/1 "2018-11-13T16:40:59Z")

</div>

Hello !

It was possible before to scroll X my datatable. But now (maybe I ve done something wrong) the data frame (too many column to fully appear in the body is blocked. I manage to make appear a scroll but it is not “touchable” :

Here is my code :

app.layout = html.Div([  
html.H4(‘DataTable’),  
html.Label(‘Report type:’, style={‘font-weight’: ‘bold’}),  
dcc.Dropdown(  
id=‘field-dropdown’,  
options=[{‘label’: df, ‘value’: df} for df in dataframes],  
value=‘MY\_DATAFRAME’,  
clearable=False  
), html.Div([  
dt.DataTable(  
# Initialise the rows  
rows=[{}],  
row\_selectable=True,  
sortColumn=True,  
filterable=True,  
sortable=True,  
selected\_row\_indices=[],  
id=‘table’  
)], style={‘overflowX’: ‘scroll’, ‘height’: 500}),  
html.Div(id=‘selected-indexes’)  
] , className=‘container’)

thanks !

---

<div class="post-metadata">

**Author:** ![caiyij](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/caiyij/32/4462_2.png) [@caiyij](https://community.plotly.com/u/caiyij)\
**Post date:** [November 13, 2018, 9:48pm UTC](https://community.plotly.com/t/datatable-how-to-scroll-x-horizontal/15604/2 "2018-11-13T21:48:39Z")

</div>

You can do horizontal scroll. For example:  
 ![xBbNLH96Yg](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/f/f53ecdc467989dfd2243c5189fbe392c4aa01f81.gif)

```auto
import dash
import dash_html_components as html
import dash_table

app = dash.Dash( __name__ )

app.layout = html.Div([
    dash_table.DataTable(
        columns=[{
            'name': 'Column {}'.format(i),
            'id': 'column-{}'.format(i)
        } for i in range(1,15)],
        data=[
            {'column-{}'.format(i): (j + (i-1)*5) for i in range(1, 15)}
            for j in range(5)
        ],
        style_table={'overflowX': 'scroll'},
    )], style={'width':500})

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

```

See the documentation here [https://dash.plot.ly/datatable/sizing](https://dash.plot.ly/datatable/sizing), it mentions Horizontal Scroll.

---

<div class="post-metadata">

**Author:** ![valentin.lefranc](https://avatars.discourse-cdn.com/v4/letter/v/5f8ce5/32.png) [@valentin.lefranc](https://community.plotly.com/u/valentin.lefranc)\
**Post date:** [November 14, 2018, 9:22am UTC](https://community.plotly.com/t/datatable-how-to-scroll-x-horizontal/15604/3 "2018-11-14T09:22:23Z")

</div>

OK thanks, I was using dash\_table\_experiments and there is no option style\_table={‘overflowX’: ‘scroll’}  
Is there a way to pass the same option to dash\_table\_experiments ?

because when I use dash\_table my dataframe do not appear anymore. My df is ok but once it is put back in data by the callback is doesn’t appear well.

The oart of code

dcc.Dropdown(  
id=‘field-dropdown’,  
options=[{‘label’: df, ‘value’: df} for df in dataframes],  
value=‘MY\_DF’,  
clearable=False  
),

dt.DataTable(  
# Initialise the rows  
data={},  
row\_selectable=‘multi’,  
filtering=True,  
sorting=True,  
id=‘table’,  
style\_table={‘overflowX’: ‘scroll’}  
),

@app.callback(Output(‘table’, ‘data’), [Input(‘field-dropdown’, ‘value’)])  
def update\_table(user\_selection):  
“”"  
For user selections, return the relevant table  
“”"  
df = get\_data\_object(user\_selection)  
print(df)  
return df.to\_dict(‘rows’)

---

<div class="post-metadata">

**Author:** ![meg](https://avatars.discourse-cdn.com/v4/letter/m/35a633/32.png) [@meg](https://community.plotly.com/u/meg)\
**Post date:** [November 14, 2018, 9:16pm UTC](https://community.plotly.com/t/datatable-how-to-scroll-x-horizontal/15604/4 "2018-11-14T21:16:55Z")

</div>

Hey. Is this question solved yet? I am also experiencing the same issue. Datatable imported from dash-table-experiments do not allow horizontal scrolling function in Chrome. However, i found it works in Firefox. Solutions would be appreciated.

---

<div class="post-metadata">

**Author:** ![caiyij](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/caiyij/32/4462_2.png) [@caiyij](https://community.plotly.com/u/caiyij)\
**Post date:** [November 14, 2018, 9:21pm UTC](https://community.plotly.com/t/datatable-how-to-scroll-x-horizontal/15604/5 "2018-11-14T21:21:07Z")

</div>

The `dash_table` in my answer above is a newer version of `dash_table_experiments`.

> [@Cannot display all columns of a table](https://community.plotly.com/t/cannot-display-all-columns-of-a-table/15049/4):
>
> No. dash\_table is the new dash\_table\_experiments (the project is no longer an “experiment”)

---

<div class="post-metadata">

**Author:** ![valentin.lefranc](https://avatars.discourse-cdn.com/v4/letter/v/5f8ce5/32.png) [@valentin.lefranc](https://community.plotly.com/u/valentin.lefranc)\
**Post date:** [November 15, 2018, 4:06pm UTC](https://community.plotly.com/t/datatable-how-to-scroll-x-horizontal/15604/6 "2018-11-15T16:06:31Z")

</div>

Ok I will try to modify the dropdown example of datatable experiment :

> <https://github.com/plotly/dash-table-experiments/blob/master/usage-callback.py>

to my case …

Thanks for the info 😉