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.
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
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?
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.
