1

I have the following ag-gridconfigurations. Somehow every column I have does not fit even after executing this.gridApi.sizeColumnsToFit(). Most importantly, I cannot give width to each columns since it gets dynamically loaded from server and every time a file loads I might have dynamic range of columns.

How can I fit the column width for every column in the grid?

  <div id="mygrid" className="ag-theme-alpine" style={{ width: '100%', height: 720 }}>
       <AgGridReact
           columnDefs={this.state.columnDefs}
           defaultColDef={{ resizable: true }}
           rowData={this.state.rowData}
           onGridReady={this.onGridReady.bind(this)}
           onCellValueChanged={this.onCellValueChanged}
       />
  </div>

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

    this.gridApi.sizeColumnsToFit();
  }
user2281858
  • 1,957
  • 10
  • 41
  • 82
  • I think your problem is due to your grid div width being 100%. You need to resize the columns every time the grid size changes. Take a look at [this](https://stackblitz.com/edit/ag-grid-react-hello-world-ncvtad?file=index.js) stackblitz. – ViqMontana Dec 15 '20 at 08:48
  • @Viqas, I did the same still does not work. – user2281858 Dec 15 '20 at 20:27

2 Answers2

2

Try using onFirstDataRendered instead of onGridReady it is the event that happens AFTER data became available to ag-grid.

Mikhail
  • 21
  • 1
0

Add follow line:

onFirstDataRendered : (params) => {
   params.api.sizeColumnsToFit();
},
O Thạnh Ldt
  • 1,103
  • 10
  • 11