Datatable how to scroll X (horizontal)

Dash Python
1

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 !

2

You can do horizontal scroll. For example:
xBbNLH96Yg

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, it mentions Horizontal Scroll.

3 Likes
3

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’)

4

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.

5

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

1 Like
6

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

to my case …

Thanks for the info :wink: