ag grid sizeColumnsToFit for columns not working

Question

I have used ag-grid ng2 and trying to apply sizeColumnsToFit. For example: If there are 4 columns then it should be automatically resized and fit to the width of grid. gridOptions.api.sizeColumnsToFit() not working.

var gridOptions = {
    columnDefs: columnDefs,
    rowData: null,
    enableColResize: true
};

this.columnDefs = [
     {headerName: "Age", field: "age", width: 90, minWidth: 50, maxWidth: 100},
    {headerName: "Country", field: "country", width: 120},
    {headerName: "Year", field: "year", width: 90},
    {headerName: "Date", field: "date", width: 110}


    ];

 gridOptions.api.sizeColumnsToFit();

Answer 1

Try this code.. while defining columnDefs set suppressSizeToFit: false for all fields,

this.columnDefs = [
 {headerName: "Age", field: "age", width: 90, minWidth: 50, maxWidth: 100,suppressSizeToFit: false},
 {headerName: "Country", field: "country", width: 120,suppressSizeToFit: false},
 {headerName: "Year", field: "year", width: 90,suppressSizeToFit: false},
 {headerName: "Date", field: "date", width: 110,suppressSizeToFit: false}
 ];

Then in onGridReady use the below code.

onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;   
params.api.sizeColumnsToFit(); 
}

Answer 2

Resizing Columns When Data Is Renderered There are two scenarios main where scenarios where you might want to resize columns based on grid data:

1. Row Data is available at grid initialisation
2. Row Data is available after grid initialisation, typically after data has been set asynchronously via a server call

In the first case you can fire autoSizeColumns() in either the gridReady or the firstDataRendered event as the row data will have been rendered by the time the grid is ready.

In the second case however you can only reliably use firstDataRendered as the row data will be made available, and hence rendered, after the grid is ready.

https://www.ag-grid.com/javascript-grid-resizing/

Answer 3

Keeping the width of the container containing AgGrid anything less than 100% did the trick for me.

Answer 4

You need to provide columnApi.autoSizeColumns() with a list of all column IDs like this:

function onFirstDataRendered (params) {
  params.api.sizeColumnsToFit()
  window.setTimeout(() => {
    const colIds = params.columnApi.getAllColumns().map(c => c.colId)
    params.columnApi.autoSizeColumns(colIds)
  }, 50)
}

…

<AgGridReact onFirstDataRendered={onFirstDataRendered} … />
… 

Answer 5

I implemented a reusable ag-grid react wrapper component that will resize its columns to fit its container's width automatically. It watches its container's width and listens to window.resize event, then it calls gridApi.sizeColumnsToFit() in useEffect when required. If interested, read the code in steps here, or see all in a working sample here at CodeSandBox.