✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Datatable Horizontal Overflow Issues

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: https://github.com/plotly/dash-sample-apps/tree/master/apps/dash-oil-gas-ternary

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 (https://dash.plotly.com/datatable/width) 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,
                                        ),

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