How to make the columns in ag-grid to autosize based on the content of the cell however we still the header to be completely visible?

Dash Python
1

Our columns are autosized on intial load and we are using custom css to always clamp so that header should appear properly by even wrapping part of it to second line. However when we are adding new columns from toggle side bar, its not being auto sized to fit the cell content but rather its taking min width. How to make any column either there by default or being added after initial load to auto size to fit the content and also to have their headers appear by wrapping into multiplelines?

2

Hello @codermemem,

You’ll need to add an event listener to the grid upon the visibility change of columns and update the defaultColDef and the columnSize using dash_clientside.set_props.

3

Hello,

Thanks for your reply, I was wondering why does columnSize:autosize isnt working when we dont have row data as static but we have col defs. When I try this autosize option all the columns are overlapping and shrinked a lot and cant see the data itself.

Also, do u have any example to use the suggested event listeners to do this?
Also, we have multiple layouts and some of them are conditional layouts , would this approach still work.

4

columnSize='autoSize' performs an api call and then gets set to None, this is why the columnSize will need to be provided again.

As far as what you are describing, I am unsure how to troubleshoot without seeing some code or a video of it.

Here is an example of adding eventListeners to a Grid:

These should work with any layout that you are describing.