Implementing ag-Grid row selection with custom checkbox

Question

I have the following ColDef for my ag-Grid table:

const checkboxRenderer: React.SFC<ICellRendererParams> = params => {
  const checked = find(this.state.selectedOptions, x => x.id === params.data.id) != null;
  return (
    <div className="custom__cb">
      <input type="checkbox" checked={checked} />
      <label>
        <span className="custom__cb__label-text">{params.value}</span>
      </label>
    </div>
  );
};

const columnDef: ColDef = 
    colDef.field = 'id';
    colDef.cellRendererFramework = checkboxRenderer;
}

I've defined my ag-Grid table like this:

onSelectionChanged = (e: SelectionChangedEvent) => {
  const { api } = e;
  if (api) {
    const selectedOptions = api.getSelectedRows();
    this.setState({ selectedOptions });
  }
};

onRowSelected = (e: RowSelectedEvent) => {
  const isAlreadySelected = find(this.state.selectedOptions, x => x.id === e.data.id) != null;
  if (isAlreadySelected) {
    this.setState({ selectedOptions: this.state.selectedOptions.filter(x => x.id !== e.data.id) });
  } else {
    this.setState({ selectedOptions: [...this.state.selectedOptions, e.data] });
  }
};

<AgGridReact
  columnDefs={columnDefs}
  rowData={options}
  onSelectionChanged={this.onSelectionChanged}
  onRowSelected={this.onRowSelected}
  rowSelection="multiple"
/>

This renders the correct custom checkbox and also sets selectedOptions in my component state correctly when a row is selected. The problem is that my custom checkbox does not reflect the correct checked status. It is always unchecked. It doesn't look like checkboxRenderer is re-rendering when my state is changed.

How can I implement a custom row selection checkbox that correctly reflects the checked state?

Answer 1

I'm uncertain this pertains to your issue, but the following were keys to getting AgGridReact to update upon state change:

On the <AgGridReact component, use onGridReady property instead of setting data and also set deltaRowDataMode={true}

In componentDidUpdate React component event, selectively (only when row data changes) reset row data via this.gridApi.setRowData(rowData)

Those changes were key to making the grid update while maintaining the grid's state.