title: Using CheckboxEditor with react-data-grid
body: <p>I'm new to React and I'm trying to get the react-data-grid to display a checkbox for one of the columns.  I have imported react-data-grid and react-data-grid-addons but I'm not sure how to pass the required props to the CheckboxEditor.</p>
  
  <pre><code>import React, {PropTypes} from "react";
  import {connect} from "react-redux";
  import {bindActionCreators} from "redux";
  import * as identityActions from "../../actions/identityActions";
  import * as defectViewActions from "../../actions/defectViewActions";
  import MultiSelectBox from "../common/MultiSelectBox";
  
  import ReactDataGrid from "react-data-grid";
  import Editors from "react-data-grid-addons";
  const {CheckboxEditor} = Editors;
  
  class UserProfilePage extends React.Component {
      constructor(props, context) {
          super(props, context);
          this.setReportingArea = this.setReportingArea.bind(this);
          this.rowGetter = this.rowGetter.bind(this);
          this.onCellChanged = this.onCellChanged.bind(this);
  
          this.state = {
              viewColumns: [],
              summaryColumns: [],
              detailColumns: [],
              commentColumns: [],
              columns: [
                  {
                      key: "Name",
                      name: "Column",
                      resizable: false,
                      width: 200,
                      editable: false
                  },
                  {
                      key: "SummaryView",
                      name: "Summary",
                      resizable: false,
                      width: 80,
                      editor: &lt;CheckboxEditor value={this.props.value} column={null} rowIdx={"1"} /&gt;
                  },
                  {
                      key: "DetailView",
                      name: "Detail",
                      resizable: false,
                      width: 80,
                      editable: true,
                  },
                  {
                      key: "CommentView",
                      name: "Comment",
                      resizable: false,
                      width: 80,
                      editable: true,
                  }
              ]
          };
      }
  
      componentDidMount() {
          this.props.defectViewActions.loadViewColumns();
      }
  
      componentWillReceiveProps(nextProps) {
          if ((!this.props.viewColumns || this.props.viewColumns.length === 0) &amp;&amp; (nextProps.viewColumns || nextProps.viewColumns.length &gt; 0)) {
              nextProps.viewColumns.forEach(function (col) {
                  col.SummaryView = false, col.DetailView = false, col.CommentView = false;
  
                  switch (col.DefaultView) {
                      case 1:
                          col.SummaryView = true;
                          break;
                      case 2:
                          col.DetailView = true;
                          break;
                      case 3:
                          col.CommentView = true;
                          break;
                  }
              });
  
              this.setState({
                  viewColumns: nextProps.viewColumns
              })
              ;
          }
      }
  
      onCellChanged() {
          console.log("Cell updated");
      }
  
      // -- React Data Grid ----------------------------------------------------------------------------------------------------------
      rowGetter(i) {
          if (this.state.viewColumns.length &gt; 0) {
              return {
                  value: this.state.viewColumns[i]
              };
          }
          else {
              return "";
          }
      }
  
      // -----------------------------------------------------------------------------------------------------------------------------
  
      setReportingArea(event) {
          this.props.actions.setPreferredReportingArea(event.target.value);
      }
  
      render() {
          return (
              &lt;div style={{marginTop: '50px'}}&gt;
                  &lt;table className="table table-condensed" style={{width: '70%', margin: 'auto'}}&gt;
                      &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th colSpan="3"&gt;&lt;h2&gt;User Profile&lt;/h2&gt;&lt;/th&gt;
                      &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Name:&lt;/td&gt;
                          &lt;td&gt;{this.props.user.name}&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Email:&lt;/td&gt;
                          &lt;td&gt;
                              {this.props.user.Username}
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Preferred Reporting Area:&lt;/td&gt;
                          &lt;td&gt;
                              {(this.props.user.ReportingArea) ? (
                                  &lt;MultiSelectBox name="ddlReportingArea"
                                                  onChange={this.setReportingArea}
                                                  value={this.props.user.ReportingAreaId}
                                                  options={this.props.user.ReportingAreas.map((ra) =&gt; {
                                                      return {id: ra.Id, value: ra.ReportingAreaName};
                                                  }).sort((a, b) =&gt; {
                                                      return a.value &gt; b.value;
                                                  })}/&gt;)
                                  : "None Assigned"}
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
  
                  &lt;div className="row" style={{width: '70%', margin: 'auto'}}&gt;
                      &lt;div className="form-horizontal form-group"&gt;
                          &lt;label className="col-md-2 control-label"&gt;View:&lt;/label&gt;
                          &lt;div className="col-md-2"&gt;
                              &lt;select className="form-control"&gt;
                                  &lt;option&gt;Default&lt;/option&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div className="row" style={{width: '70%', margin: 'auto'}}&gt;
                      &lt;div className="col-md-6"&gt;
                          &lt;h4&gt;Available Columns&lt;/h4&gt;
                          &lt;ReactDataGrid
                              rowHeight={35}
                              minHeight={500}
                              minWidth={450}
                              maxWidth={450}
                              columns={this.state.columns}
                              rowGetter={this.rowGetter}
                              rowsCount={this.state.viewColumns.length}/&gt;
                      &lt;/div&gt;
  
                      &lt;div className="col-md-2"&gt;
                          &lt;h4&gt;Default Columns&lt;/h4&gt;
                      &lt;/div&gt;
  
                      &lt;div className="col-md-2"&gt;
                          &lt;h4&gt;Detail Columns&lt;/h4&gt;
                      &lt;/div&gt;
  
                      &lt;div className="col-md-2"&gt;
                          &lt;h4&gt;History Columns&lt;/h4&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  UserProfilePage.propTypes = {
      user: PropTypes.object.isRequired,
      viewColumns: PropTypes.array.isRequired,
      defectViewActions: PropTypes.object.isRequired,
      actions: PropTypes.object.isRequired
  };
  
  function mapStoreStateToProps(state, ownProps) {
      return {
          user: state.Identity,
          viewColumns: state.ViewColumns
      };
  }
  
  function mapDispatchToProps(dispatch) {
      return {
          actions: bindActionCreators(identityActions, dispatch),
          defectViewActions: bindActionCreators(defectViewActions, dispatch)
      };
  }
  
  export default connect(mapStoreStateToProps, mapDispatchToProps)(UserProfilePage);
  </code></pre>
  
  <p>From the documentation is presume "value" is returned by the "rowGetter" but how do I pass the "key" and "onCellChange" props to the CheckboxEditor and is "rowIdx" obtained from "this.state.viewColumns".</p>
  
  <p>Any examples or tutorials would be greatly appreciated.</p>