AgGrid column width fit to content, ignore header?

Dash Python
1

Hi Dash community,

I currently have my table set to columnSize=:"autoSize", but it takes into consideration of both header text as well as the cell content. My table has long header, but very short cell contents. The behavior I want is have column width fit to content, and wrap header text if necessary. Is that possible, and if so, how? Thanks very much.

2

Hi @benson_c , welcome to the community.

You could try to change columnSize="autoSize" to columnSize="sizeToFit" and add defaultColDef={"wrapHeaderText:True} in your Ag Grid option to see if it worked.

Something as below:

app.layout = html.Div(
    [dag.AgGrid(
            id="grid-size-callback",
            rowData=df.to_dict("records"),
            columnDefs=[{"field": i} for i in df.columns],
            dashGridOptions={"animateRows": False},
            columnSize="sizeToFit",
        defaultColDef = {'wrapHeaderText':True}
        ),
    ]
)
3

Hey @hoatran appreciate your answer. sizeToFit crush the table width to fit user screen which is not how I wanted as this makes some columns too narrow. I want to allow user to horizontally scroll if needed. Sorry I’m not able to share screenshot as data is sensitive…

4

Try this:

           columnSize="autoSize",
            columnSizeOptions={"skipHeader": True},
            defaultColDef = {'wrapHeaderText':True}

You can also include a minimum column width.

1 Like
5

That did the trick! Thanks @AnnMarieW