How to pass the proper input to ag-grid?

Question

I am facing a very weird issue, I am setting up the rowData for agGrid. If I am passing the variable directly, it's not working but printing it on console and assigning it works. I am assuming it might be a data format issue, but I am wondering how it's working when copied from console.

  const getPeerData = (rows) => {
    let company = rows;
    console.log(company) // If I copy from console and paste like below it's working fine
    company = [{
      "currency": "USD",
      "count": 24
    }]
    return company;
  };


  const gridOptions = {
    columnDefs : columnDefs,
    rowData : getPeerData(peerData),  // I tried rowData = peerData but it's not working
    rowSelection : 'single'
  };

What could be possibly wrong here ?

Answer 1

setup the grid after the page has finished loading:-

 const getPeerData = (rows) => {
        let company = rows;
        console.log(company) 
         company = [{
          "currency": "USD",
          "count": 24
        }];
        return company;
      };
    
    
    // setup the grid after the page has finished loading
    
        document.addEventListener('DOMContentLoaded', function () {
          var gridDiv = document.querySelector('#myGrid');
          new agGrid.Grid(gridDiv, gridOptions);
           gridOptions.api.setRowData(getPeerData());
        });

Or,

Consider using react version of ag-grid:-

https://plnkr.co/edit/NfTowhZqpqwd87HX

render() {
    return (
      <div style={{ width: '100%', height: '100%' }}>
          <AgGridReact
            modules={this.state.modules}
            columnDefs={this.state.columnDefs}
            defaultColDef={this.state.defaultColDef}
            onGridReady={this.onGridReady}
            rowData={this.state.rowData}
          />
      </div>
    );
  }
}