AG Grid columnSize = autoSize not working on 'hidden' tables?

Hi,

Currently trying to switch from DataTable to AG Grid, and I’m having problems with the columnSize set to autoSize.

With a normal layout and a callback setting the rowData and columnSize it all works fine when the Input is changed, including the virtualised columns by setting suppressColumnVirtualisation.

What doesn’t work is a layout where I use dbc.Tabs() and have tables on each tab. When the Input changes, the tables on the currently active tab refresh and correctly update their columnSize, but the tables on the inactive tabs resize to some minimum size as below.

Screenshot 2025-06-16 at 17.19.15

Any clues on how to fix?

John.

Hello @jlayt,

The issue is because of how the content loads, when in the hidden state and still in the dom layout, it will try to resize the columns based upon when the grid is ready.

There are a few options here.
1 make your tabs load the content from callbacks
2 add an event listener to all the grids to trigger the resize when they are made visible
3 trigger all the grids to resize from the tab changing active

Amazing, many thanks, I went for option 2 which was as easy as:

eventListeners={‘rowDataUpdated’: ‘params.api.autoSizeAllColumns()’}

Except it doesn’t quite work. It does fix the issue of hidden tables being the minimum size, but instead makes all the columns the same width. I’m not quite sure what I’m getting wrong?

John.

Maybe try a different event.

Reading through the event list, I don’t think there is an event that specifically triggers on DOM visibility changing. I tried quite a few, including firstDataRendered which their docs suggest is the right one, rowDataUpdated , viewportChanged, columnVisible, modelUpdated, stateUpdated, paginationChanged, etc, even obviously wrong ones like cellKeyDown, all have the same effect (or lack of effect) of even width columns on all tabs, which suggests none of them trigger at the right time, or I’m calling the API wrong.

What’s weird is trying all the 4 possible combinations:

Scenario 1 - No callback and no listener - Even sized columns on all tabs
Scenario 2 - Callback but no listener - Auto size columns on visible tab, minimum size on other tabs
Scenario 3 - Listener but no callback - Even sized columns on all tabs
Scenario 4 - Callback and listener - Even sized columns on all tabs

If the listener is having no effect, then in Scenario 4 the callback should mean the same result as Scenario 2 but it’s almost as if setting the listener interferes somehow with the callback? Or something else I’m doing breaks things…

I had hoped a listener would be the quickest solution, but it’s taking too long so I’ll switch the page to building each tab layout on activation instead.

Thanks!

John.

And 2 hours later that works nicely. Also fixed some an issue with DataTable where the header was the wrong size, so that’s interesting…

John.

I’m a little confused on what you mean by this statement.

Did you switch to using DataTable vs AG Grid? Or did the first thing you tried start working? Did you make sure your version of AG grid the latest?