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 !
} 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.
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’)
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt
import pandas as pd
app = dash.Dash()
# app.scripts.config.serve_locally = True
# app.css.config.serve_locally = True
DF_GAPMINDER = pd.read_csv(
'https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv'
DF_GAPMINDER = DF_GAPMINDER[DF_GAPMINDER['year'] == 2007]
DF_GAPMINDER.loc[0:20]
DF_SIMPLE = pd.DataFrame({
'x': ['A', 'B', 'C', 'D', 'E', 'F'],
This file has been truncated. show original
