press enter will expand cell

Author: conor-j-malone

src/Cell.js

@@ -98,6 +98,12 @@ const Cell = React.createClass({
     }
   },
 
+  onCellKeyDown(e) {
+    if (this.canExpand() && e.key === 'Enter') {
+      this.onCellExpand(e);
+    }
+  },
+
   onDragHandleDoubleClick(e) {
     e.stopPropagation();
     let meta = this.props.cellMetaData;
@@ -120,7 +126,7 @@ const Cell = React.createClass({
     return style;
   },
 
-  getFormatter(): ?ReactElement {
+  getFormatter() {
     let col = this.props.column;
     if (this.isActive()) {
       return <EditorContainer rowData={this.getRowData()} rowIdx={this.props.rowIdx} idx={this.props.idx} cellMetaData={this.props.cellMetaData} column={col} height={this.props.height}/>;
@@ -327,6 +333,10 @@ const Cell = React.createClass({
     return (this.props.column.editor != null) || this.props.column.editable;
   },
 
+  canExpand() {
+    return this.props.expandableOptions && this.props.expandableOptions.canExpand;
+  },
+
   renderCellContent(props) {
     let CellContent;
     let Formatter = this.getFormatter();
@@ -341,8 +351,8 @@ const Cell = React.createClass({
     let cellExpander;
     let marginLeft = this.props.expandableOptions ? (this.props.expandableOptions.treeDepth * 30) : 0;
     let marginLeftCell = this.props.expandableOptions ? (this.props.expandableOptions.treeDepth * 10) : 0;
-    if (this.props.expandableOptions && this.props.expandableOptions.canExpand) {
-      cellExpander = (<span style={{float: 'left', marginLeft: marginLeft}} onClick={this.onCellExpand}>{this.props.expandableOptions.expanded ? String.fromCharCode('9660') : String.fromCharCode('9658')}</span>);
+    if (this.canExpand()) {
+      cellExpander = (<span style={{float: 'left', marginLeft: marginLeft}} onClick={this.onCellExpand} >{this.props.expandableOptions.expanded ? String.fromCharCode('9660') : String.fromCharCode('9658')}</span>);
     }
     return (<div  ref="cell"
       className="react-grid-Cell__value">{cellExpander}<span style={{float: 'left', marginLeft: marginLeftCell}}>{CellContent}</span> {this.props.cellControls} </div>);
@@ -363,7 +373,7 @@ const Cell = React.createClass({
     let dragHandle = (!this.isActive() && this.canEdit()) ? <div className="drag-handle" draggable="true" onDoubleClick={this.onDragHandleDoubleClick}><span style={{display: 'none'}}></span></div> : null;
 
     return (
-      <div {...this.props} className={className} style={style} onClick={this.onCellClick} onDoubleClick={this.onCellDoubleClick} onDragOver={this.onDragOver}>
+      <div {...this.props} className={className} style={style} onKeyDown={this.onCellKeyDown} onClick={this.onCellClick} onDoubleClick={this.onCellDoubleClick} onDragOver={this.onDragOver}>
       {cellContent}
       {dragHandle}
       </div>