datatable fail to expand horizontally after 4.0.0 upgrade

[EBoisseauSierra]

Problem

When upgrading Dash to v1.0.0 and Dash table (from 3.7.0) to 4.0.0, tables stop to auto-expand horizontally. In other words, they act as "<span>" instead of "<p>".

with dash_table 3.7.0

with dash_table 4.0.0

The issue seems to come from the <table> HTML element. Indeed, its <div class="cell cell-1-1 dash-fixed-content"> container expands to the full width of it's own parent. So if you manually set width: 100% to the <table> element, it works as expected.

However, it would be great to do this through the source code.
But, unlike what is detailed here, the css attribute throws an error:

dash_table.DataTable(
    id='table',
    data=df.to_dict("rows"),
    columns=[{"name": i, "id": i} for i in df.columns],
    css={
        'width': '100%',
    },
),

and the style_table doesn't solve the issue:

dash_table.DataTable(
    id='table',
    data=df.to_dict("rows"),
    columns=[{"name": i, "id": i} for i in df.columns],
    style_table={
        'width': '100%',
    },
),

Question(s)

Is it an expected behaviour?

If so, how to make table full (container's) width again?

---

MWE

requirements for dash_table 3.7.0

dash-core-components==0.39.0
dash-html-components==0.13.2
dash-renderer==0.15.1
dash-table==3.7.0
dash==0.31.1
datetime
pandas==0.23.4
plotly==3.4.1

requirements for dash_table 4.0.0

dash_renderer==1.0.0
dash-core-components==1.0.0
dash-html-components==1.0.0
dash-table==4.0.0
dash==1.0.0
pandas==0.24.2
plotly==3.10.0

test app

import dash
import dash_table
import dash_html_components as html
import pandas as pd

df = pd.read_csv(
    'https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv'
)

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        html.P(
            "foobar",
            style = {
                'background': 'cyan',
                'padding': '10px'
            }
        ),
        dash_table.DataTable(
            id='table',
            data=df.to_dict("rows"),
            columns=[{"name": i, "id": i} for i in df.columns],
        ),
    ],
    style = {
        'background': 'red',
        'padding': '10px'
    }
)


if __name__ == '__main__':
    app.run_server(debug=True)

[chriddyp]

If our default behaviour changed on this matter for 4.0.0, we should also update the documentation.

However, I believe that the previous 3.x default behaviour (expanding to the parent container's width) is the right behaviour here. So, we could consider this to be a bug & regression.

Also, once this gets fixed, let's update this issue: https://community.plot.ly/t/how-to-make-datatable-has-width-100-after-4-0-0-upgrade/25145/4

[EBoisseauSierra]

Thanks for your answer. FYI, I've narrow down the issue to the [3.7.0 – 4.0.0] window.

[Marc-Andre-Rivet]

Confirming this is caused by the 4.0.0 release. This behavior was driven by content_style='grow' vs. content_style='fit' which has been removed in 4.0.0. Linked to #176.

grow caused %-based column widths to expand, which is expected but would also cause pixel-based column widths to expand, which is less expected. fit had the reverse problem.

The style difference boils down to this css:

        &.dash-grow {	
            .cell-0-1,	
            .cell-1-1 {	
                flex: 1 0 auto; // default is flex: 0 0 auto
            }	

             table {	
                width: 100%; // default is no explicit value
            }	
        }

Testing out usage scenarios and will report back here.

[Marc-Andre-Rivet]

Discussion notes: Need to verify if and how the default behavior has changed between 3.7.0 and 4.0.0 - reverting might be the best option. grow is probably the correct default. Rename the prop!

[bpostlethwaite]

Cross posting a temporary fix for this for the people who end up here instead of https://community.plot.ly/t/how-to-make-datatable-has-width-100-after-4-0-0-upgrade/25145/6

adding this workaround as a dash-table property solved the issue for me as well as others

css=[{"selector": "table", "rule": "width: 100%;"}],