How to pass down event handler as prop in Ag-Grid-React?

Question

I'm not sure if this isn't supported or if I just haven't figured this out yet with Ag-Grid-React.

My problem: I need a button component to be rendered in each cell under a Delete Row column that has onClick and label as props. Upon the button being clicked, I need to dispatch a Redux action that deletes the current row from my table's data.

Column Defs:

import Button from '../button';
import { deleteRow } from './actions';
import { reactCellRendererFactory } from 'ag-grid-react';

const columnDefs = [
  {
    headerName: 'Delete Row',
    width: 100,
    cellRenderer: reactCellRendererFactory(Button),
    cellRendererParams: {
      onClick: (row) => deleteRow(row.data.id),
      backgroundColor: 'red',
      label: 'Delete',
    },
  }, ...

Button Component:

import React, { PropTypes, PureComponent } from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

class Button extends PureComponent {
  static propTypes = {
    backgroundColor: PropTypes.string,
    label: PropTypes.string,
    labelColor: PropTypes.string,
    onClick: PropTypes.func,
  };

  static defaultProps = {
    backgroundColor: 'green',
    label: 'Save',
    labelColor: 'white',
  };

  render() {
    return (
      <MuiThemeProvider>
        <RaisedButton
          backgroundColor={this.props.backgroundColor}
          label={this.props.label}
          labelColor={this.props.labelColor}
          onClick={this.props.onClick}
        />
      </MuiThemeProvider>
    );
  }
}

export default Button;

The Button component does not respond to clicking despite having assigned onClick in cellRendererParams, though it does have access to this.props.label and this.props.onClick.

row appears to be undefined, so what is the best way to get the selected row data in this case for the onClick handler?

What is the best way to do this? Thanks for any help you can lend :)

Answer 1

I suspect that the click handlers are not bound to the right receiver. May I propose a few changes, to make it easier to reason about the code:

The Button component

Instead of wiring the click handler directly, try defining an interim handler on the Button component:

_onButtonClick(){
  this.props.onClick(this.props.rowIndex);
}

Wire up the above handler in the Button react component like:

onClick={this._onButtonClick.bind(this)}

The parent React component

In the deleteRow method of the parent React component, you could get the rowIndex, and thereby identify the current row (it would be represented in the state I guess)

deleteRow(rowIndex) {
  //Perform actual delete of `rowIndex` in `this.state.data`
}

Hooking up of deleteRow in columnDefs would look like:

const columnDefs = [
  {
    headerName: 'Delete Row',
    width: 100,
    cellRenderer: reactCellRendererFactory(Button),
    cellRendererParams: {
      onClick: this.deleteRow.bind(this), // <==== Hooking up deleteRow
      backgroundColor: 'red',
      label: 'Delete',
    },
  }, ...