How to resize columns in ag-grid

Question

I am new to ag-grid. As seen in the screenshot below, I have 4 columns initially. When I remove column 3 (test3), notice that there is space on the right that indicates that a column in missing. How can I ensure that once a column is removed, that the remaining 3 columns (in this case) will fill the area? I tried to pass resizable: true into defaultcolDef but that did not fix the issue...

Intial View

View once Test 3 column is filtered out

Answer 1

Use flex: 1 on each column.

See the documentation here for more info: https://www.ag-grid.com/javascript-data-grid/column-sizing/#column-flex

Or checkout this plunker example: https://plnkr.co/edit/7evoWXCM1sChDBmX

Just drag one of the columns out of the grid to see it working

Answer 2

You can use the columnVisible-event to catch any columns added or removed

https://www.ag-grid.com/javascript-data-grid/grid-events/#reference-columns-columnVisible

and then call

gridOptions.api.sizeColumnsToFit();

https://www.ag-grid.com/javascript-data-grid/column-sizing/#size-columns-to-fit