title: ag-Grid Cell Rendering - Custom Props
body: <p>After looking through the <a href="https://www.ag-grid.com/javascript-grid-cell-rendering/?framework=all#gsc.tab=0" rel="noreferrer">ag-Grid Cell Rendering documentation</a> I don't see a way to add custom properties to the cell renderer via the <code>cellRenderFramework</code> argument. For example, I'd like to pass in a callback to my custom renderer that is called when the button is clicked.</p>
  
  <pre><code>class AddCellRenderer extends React.Component&lt;ICellRendererParams, {}&gt; {
  
    /**
     * Callback handle to pass data to on a click.
     */
    public static callback = (data: MyData): void =&gt; { return; };
  
    public constructor(params: ICellRendererParams) {
      super(params);
    }
  
    public render() {
      let className = 'pt-button pt-intent-success pt-icon-add';
      let text = 'Click to add';
      if (this.props.data.saved) {
        className = 'pt-button pt-intent-danger pt-icon-remove';
        text = 'Click to remove';
      }
      return (
        &lt;button type="button" onClick={this.onClick} className={className}&gt;{text}&lt;/button&gt;
      );
    }
  
    private onClick = (event: React.FormEvent&lt;HTMLButtonElement&gt;): void =&gt; {
      AddCellRenderer.callback(this.props.data);
      this.setState({ ...this.state }); // Make React update the component.
    }
  }
  </code></pre>
  
  <p>And I have another component that uses it like so</p>
  
  <pre><code>public render() {
    let saveCellRenderer = AddCellRenderer;
    saveCellRenderer.callback = this.onSelectData;
    const columnDefs: ColDef[] = [
      {
        headerName: 'Add to Available Data',
        cellRendererFramework: AddCellRenderer,
      },
      ...
    ];
    ...
    }
  </code></pre>
  
  <p>There must be another way to pass this callback as props other than a static public method which is ugly and will not work when multiple components use the renderer, how do I go about doing this with ag-Grid?</p>