Datatable Horizontal Overflow Issues

Dash Python
1

Hey everyone,

I’m working on a dash layout that places a plotly map next to a datatable on the same row. I’m utilizing the CSS from this sample app with some minor edits: dash-sample-apps/apps/dash-oil-gas-ternary at main · plotly/dash-sample-apps · GitHub

The issues arises when the window is wide enough to display each element side by side. The datatable is always displayed in its entirety and flows off the screen instead of adding a horizontal scroll bar. However, this issue does not occur when the datatable has its own row. In this case, the behavior is as expected. The table adds a horizontal scrollbar when the window is too narrow to display the table’s fixed width in its entirety.

I followed the documentation regarding horizontal scroll (DataTable Width & Column Width | Dash for Python Documentation | Plotly) and have also tried modifying the CSS to fix the table-layout but I’m still having to luck. Any suggestions to stop the table from flowing off the page and force a horizontal scroll? Any help is appreciated, thank you!

dt.DataTable(
columns=[
     {"hideable": True, "name": i, "id": i,}
     for i in bus_df.columns
],
css=[
     {
          "selector": "table",
          "rule": "table-layout: fixed",
     }
],
style_cell={
     "whiteSpace": "normal",
     "height": "auto",
     "minWidth": "50px",
     "width": "50px",
     "maxWidth": "50px",
},
style_data_conditional=[
     {
           "if": {"row_index": "odd"},
           "backgroundColor": "rgb(248, 248, 248)",
     }
],
style_header={
      "backgroundColor": "rgb(230, 230, 230)",
      "fontWeight": "bold",
},
style_table={
     "height": 350,
     "overflowX": "scroll",
     "overflowY": "auto",
},
data=bus_df.to_dict("records"),
sort_action="native",
filter_action="native",
export_format="csv",
page_size=50,
                                        ),
2

Any suggestions? I’ve still had no luck solving this issue.