support custom style on navigation cell

Author: AllenFang

src/TableBody.js

@@ -38,6 +38,9 @@ class TableBody extends Component {
     const customEditAndNavStyle = typeof keyBoardNav === 'object' ?
       keyBoardNav.customStyleOnEditCell :
       null;
+    const customNavStyle = typeof keyBoardNav === 'object' ?
+      keyBoardNav.customStyle :
+      null;
     let expandColSpan = this.props.columns.filter(col => !col.hidden).length;
     if (isSelectRowDefined && !this.props.selectRow.hideSelectColumn) {
       expandColSpan += 1;
@@ -119,7 +122,9 @@ class TableBody extends Component {
               tabIndex={ (tabIndex++) + '' }
               isFocus={ isFocusCell }
               keyBoardNav={ enableKeyBoardNav }
-              onKeyDown={ this.handleCellKeyDown }>
+              onKeyDown={ this.handleCellKeyDown }
+              customNavStyle={ customNavStyle }
+              row={ data }>
               { columnChild }
             </TableColumn>
           );

src/TableColumn.js

@@ -105,19 +105,19 @@ class TableColumn extends Component {
       style,
       isFocus,
       keyBoardNav,
-      tabIndex
+      tabIndex,
+      customNavStyle,
+      row
     } = this.props;
 
     let { className } = this.props;
 
-    const tdStyle = {
+    let tdStyle = {
       textAlign: dataAlign,
       display: hidden ? 'none' : null,
       ...style
     };
 
-    className = isFocus ? `${className} default-focus-cell` : className;
-
     const opts = {};
 
     if (cellEdit) {
@@ -133,6 +133,19 @@ class TableColumn extends Component {
     if (keyBoardNav && isFocus) {
       opts.onKeyDown = this.handleKeyDown;
     }
+
+    if (isFocus) {
+      if (customNavStyle) {
+        const cusmtStyle = typeof customNavStyle === 'function' ?
+          customNavStyle(children, row) : customNavStyle;
+        tdStyle = {
+          ...tdStyle,
+          ...cusmtStyle
+        };
+      } else {
+        className = `${className} default-focus-cell`;
+      }
+    }
     return (
       <td tabIndex={ tabIndex } style={ tdStyle }
           title={ columnTitle }
@@ -156,7 +169,9 @@ TableColumn.propTypes = {
   isFocus: PropTypes.bool,
   onKeyDown: PropTypes.func,
   tabIndex: PropTypes.string,
-  keyBoardNav: PropTypes.oneOfType([ PropTypes.bool, PropTypes.object ])
+  keyBoardNav: PropTypes.oneOfType([ PropTypes.bool, PropTypes.object ]),
+  customNavStyle: PropTypes.oneOfType([ PropTypes.func, PropTypes.object ]),
+  row: PropTypes.any  /* only used on custom styling for navigation */
 };
 
 TableColumn.defaultProps = {