DataTable Cannot Show Full Table at Left and Right Edge

[Sinba7]

I created a datatable an place it in a dbc.Col, but the leftest and rightest columns of the table can only display partially. I wonder it's something wrong with using dataTable with dbc.Col/dbc.Row. The table screenshot is as below. Can anyone help me with this? TextAlign:Right TextAlign: Left Also if I fix the header and then change the columns, cell width of header row and other rows will distort as following: PS: I only have this problem after upgrade dash from 1.1.1 to 1.13.0. Everything work fine with Dash 1.1.1. Here are the packages versions: dash==1.13.0 dash-bootstrap-components==0.10.2 dash-table==4.8.0 Thanks much!

[alexcjohnson]

Thanks @Sinba7! There are some known CSS clashes between dash-table and bootstrap - perhaps this will fix it for you? https://github.com/plotly/dash/issues/1190#issuecomment-612602259

Even if it does, don't close this issue - let's include table-specific resets for these clashes, and use this issue to track progress. @Marc-Andre-Rivet do you think there's a reasonable way to do this that won't conflict with any of our style customization API?

[chriddyp]

Looks like we've got a reproducible example here 🙂 https://community.plotly.com/t/datatable-incorrectly-displayed-at-left-and-right-edge-and-distort-after-update-columns/41265/3?u=chriddyp

This may be similar to another issue a community member was having with the latest version(s). The table's column width's aren't updating when rows are removed: https://community.plotly.com/t/dash-1-12-datatable-format-issues-when-using-fixed-header/39120/7?u=chriddyp

[Sinba7]

To add another example: I got the first error when running this dash example code in a script. https://dash.plotly.com/datatable/virtualization. I did some experiments and found that as long as I set fix_rows or visualization=True, this error occurs.

[wbrgss]

Dash Bootstrap Components uses the .row class, which sets negative L/R margins and display: flex:

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

So I think community member sislvacl's solution is a good one to use in order to provide CSS overrides. Alternatively, we could change the .row class to avoid collision, but I think this would be a breaking change for people relying on it to override table styles.

.dash-table-container .row {
  display: block;
  margin: 0;
}

cc @Marc-Andre-Rivet