Ag-grid column grouping resize issue

Question

In my developed grid with column grouping, there is white empty space is appear at end when resize the columns. Any Suggestion?[![enter image description here][1]][1]

Answer 1

You can call sizeColumnsToFit() after columnRowGroupChanged event:

columnRowGroupChanged A row group column was added or removed.

.html template event binding

(columnRowGroupChanged)="groupChanged($event)"

or .ts gridOptions event binding (don't forget to define [gridOptions] in .html)

this.gridOptions:{
    onColumnRowGroupChanged : this.groupChanged.bind(this)
}

handling

groupChanged(params){
    params.api.sizeColumnsToFit();
}

DEMO

Answer 2

Starting from ag-grid 23.1.0, we no longer have to use sizeColumnsToFit. Instead, in column definition, add flex: 1 to the last visible column.

This prevents all annoying jumps and weird grid behavior when resizing columns. In case user enlarge the column, horizontal scrollbar will appear, which is the expected behavior. Please go over your code and change sizeColumnsToFit to the flex solution. Flex also gives you control over relative column sizes, you can read more about it in the docs: https://www.ag-grid.com/javascript-grid-resizing/.

Example:

columnDefs = [{...}
               ...
             {
                headerName: 'HeaderA',
                field: 'name',
                ...
                flex: 1, // Adding this to last column definition
              }]