Home > Software design >  How to resize columns in ag-grid
How to resize columns in ag-grid

Time:12-13

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

CodePudding user response:

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

CodePudding user response:

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

  • Related