CODEWITHSUNDEEP
javascriptreactjsag-grid
user2281858
user2281858

Reputation: 1997

ag-grid react does not auto fit column width

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();
  }

Upvotes: 1

Views: 2759

Answers (2)

O Thạnh Ldt
O Thạnh Ldt

Reputation: 1223

Add follow line:

onFirstDataRendered : (params) => {
   params.api.sizeColumnsToFit();
},

Upvotes: 0

Mikhail
Mikhail

Reputation: 21

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

Upvotes: 2

Related Questions