AGGrid with react, calling this.gridApi.sizeColumnsToFit(); is not fitting columns

Question

My problem is my grid won't remain repsonsive at all, or if I try to create a grid not as many columns the whole grid just looks weird. I'd like for it to stretch out to its containers width. Which is what I'd expect sizeColumsToFit To do. I'm getting a warning : ag-Grid: tried to call sizeColumnsToFit() but the grid is coming back with zero width, maybe the grid is not visible yet on the screen? But how do i even work around this. For example I load data from my reducer hence a rerender will happen, or i have a loading spinner when my data is in the state of fetching. Whats some patterns you guys take to tackle this?

Heres a example:

onGridReady(params) {
        const { mode } = this.props;
        this.gridApi = params.api;
        this.gridApi.mode = mode;
        this.columnApi = params.columnApi;
        this.gridApi.addDispatcher = this.props.add;
        this.gridApi.deleteDispatcher = this.props.delete;
        this.gridApi.updateDispatcher = this.props.update;
        console.log(window.innerWidth);
        this.sizeToFit();
        window.onresize = () => {
          this.gridApi.sizeColumnsToFit();
        };
      }

Heres my Render method:

determineRender() {
    const {isWaiting, columnDefs, schema } = this.props;
    let { data } = this.props;
    data = denormalize(data.result, schema, data.entities);
    data = _.orderBy(data, ['id'], ['desc']);
    if (isWaiting) {
      return (
        <div className={cx('grid-loading')}>
          <CircularProgress className={cx('grid-progress')} color="accent" size={500} />
        </div>
      );
    }

    return (
      <div className={cx('grid-full')}>
        <div
            className={cx('grid-full') + ' ag-theme-material'}>
          <AgGridReact
                  columnDefs={columnDefs}
                  enableSorting
                  enableColResize
                  deltaRowDataMode
                  getRowNodeId={nodeData => nodeData.id}
                  rowData={data}
                  pagination
                  paginationPageSize={15}
                  rowSelection={this.state.rowSelection}
                  defaultColDef={this.state.defaultColDef}
                  enableFilter
                  enableCellChangeFlash
                  getRowHeight={this.state.getRowHeight}
                  onGridReady={this.onGridReady} />
        </div>
      </div>
    );
  }

EDIT: I suspect with all the things happening, the grid legit doesnt know the width in onGridReady since the dom hasn't finished loading however everything else is initialized. If i do something like this: setTimeout(() => this.gridApi.sizeColumnsToFit(), 500); in onGridReady(params) {...} it'll work but there will be a delay and not everyones browser runs a the same speed. Any paradigms on handling this?

Answer 1

You could use the onFirstDataRendered event and call sizeColumnsToFit then. You can check the docs here.