Using CheckboxEditor with react-data-grid - reactjs

Question

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.
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: <CheckboxEditor value={this.props.value} column={null} rowIdx={"1"} />
},
{
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) && (nextProps.viewColumns || nextProps.viewColumns.length > 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 > 0) {
return {
value: this.state.viewColumns[i]
};
}
else {
return "";
}
}
// -----------------------------------------------------------------------------------------------------------------------------
setReportingArea(event) {
this.props.actions.setPreferredReportingArea(event.target.value);
}
render() {
return (
<div style={{marginTop: '50px'}}>
<table className="table table-condensed" style={{width: '70%', margin: 'auto'}}>
<thead>
<tr>
<th colSpan="3"><h2>User Profile</h2></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name:</td>
<td>{this.props.user.name}</td>
</tr>
<tr>
<td>Email:</td>
<td>
{this.props.user.Username}
</td>
</tr>
<tr>
<td>Preferred Reporting Area:</td>
<td>
{(this.props.user.ReportingArea) ? (
<MultiSelectBox name="ddlReportingArea"
onChange={this.setReportingArea}
value={this.props.user.ReportingAreaId}
options={this.props.user.ReportingAreas.map((ra) => {
return {id: ra.Id, value: ra.ReportingAreaName};
}).sort((a, b) => {
return a.value > b.value;
})}/>)
: "None Assigned"}
</td>
</tr>
</tbody>
</table>
<div className="row" style={{width: '70%', margin: 'auto'}}>
<div className="form-horizontal form-group">
<label className="col-md-2 control-label">View:</label>
<div className="col-md-2">
<select className="form-control">
<option>Default</option>
</select>
</div>
</div>
</div>
<div className="row" style={{width: '70%', margin: 'auto'}}>
<div className="col-md-6">
<h4>Available Columns</h4>
<ReactDataGrid
rowHeight={35}
minHeight={500}
minWidth={450}
maxWidth={450}
columns={this.state.columns}
rowGetter={this.rowGetter}
rowsCount={this.state.viewColumns.length}/>
</div>
<div className="col-md-2">
<h4>Default Columns</h4>
</div>
<div className="col-md-2">
<h4>Detail Columns</h4>
</div>
<div className="col-md-2">
<h4>History Columns</h4>
</div>
</div>
</div>
);
}
}
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);
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".
Any examples or tutorials would be greatly appreciated.