Datatable wider than its div

Dash Python
1

Hi all,

I’m wondering if there is a solution for this. I’ve tried messing with the css (overflow-x, specifically), but I can’t seem to figure this out.

I have a datatable in a div, but the data (number of columns) is much wider than the div. I want to have the option to scroll to the right to see the rest of the data. Is this possible?

Thanks,
Chris

2

might not be the best solution, but I have 2 divs within one another to contain my table (other than the main one for the whole page).

html.Div([html.Div([dt.DataTable(rows=cols.to_dict('results'),
                               columns=(cols.columns),
                               filterable=True,
                               sortable=True,
                               enable_drag_and_drop=True,
#                              row_selectable=True,
#                              selected_row_indices=[],
                               id=table_id)], style={'width': '99%'})],
                    style={'display': 'flex', 'justify-content': 'center'})
3

Ola,

Thanks very much! I tried your technique, which was similar to what I was doing (I’m not a professional web developer, so my CSS fu is not amazing). However, no luck. Upon investigation with other browsers, which I should have tried way before wasting a few hours messing with CSS, lo and behold my table works as I expected. This also explains why this was working and then (magically) wasn’t.

This is on macOS, btw.

Not working: Chrome dev channel 70.0.3521.2
Working: Chrome beta 69.0.3497.35, Chrome stable 68.0.3440, Firefox 61.0.2, Safari 11.1.2

Sigh. Bitten again by Chrome dev.

Thanks again,
Chris

1 Like
4

Hi Chris & Ola,

I had the same problem. Normally in CSS, you can constrain your table not to overflow its parent div by adding a table-layout: fixed style attribute , eg

I tried doing so in Python by adding : dash_table.DataTable( …, style_table = {‘table-layout’: ‘fixed’}) but unfortunately this applies to the parent DIV and does not cascade to the table element itself.

I was eventually able to solve this by setting this property to all tables in my css file:

table{
table-layout: fixed;
}

You can add a CSS file in Dash by putting them in a ‘static’ folder in your app and referencing them in your Python code as follows :
external_stylesheets = [’/static/main.css’]
app = dash.Dash(name, external_stylesheets=external_stylesheets)

Once this is done, my tables behave as expected. I hope this helps.

Best,

Thomas

1 Like