Adds on onKeyDown handler to Th to sort on enter

Author: jasonblanchard

build/reactable.js

@@ -659,6 +659,13 @@ window.ReactDOM["default"] = window.ReactDOM;
             value: function handleClickTh(column) {
                 this.props.onSort(column.key);
             }
+        }, {
+            key: 'handleKeyDownTh',
+            value: function handleKeyDownTh(column, event) {
+                if (event.keyCode === 13) {
+                    this.props.onSort(column.key);
+                }
+            }
         }, {
             key: 'render',
             value: function render() {
@@ -696,6 +703,7 @@ window.ReactDOM["default"] = window.ReactDOM;
                             className: thClass,
                             key: index,
                             onClick: this.handleClickTh.bind(this, column),
+                            onKeyDown: this.handleKeyDownTh.bind(this, column),
                             role: 'button',
                             tabIndex: '0' }),
                         column.label

build/tests/reactable_test.js

@@ -1223,6 +1223,30 @@
                     // Make sure the headers have the right classes
                     expect($(nameHeader)).to.have['class']('reactable-header-sort-desc');
                 });
+
+                it('sorts by last name in ascending order by enter keydown', function () {
+                    var nameHeader = $('#table thead tr.reactable-column-header th')[0];
+                    ReactTestUtils.Simulate.keyDown(nameHeader, { keyCode: 13 });
+
+                    ReactableTestUtils.expectRowText(0, ['Lee Salminen', '23', 'Programmer']);
+                    ReactableTestUtils.expectRowText(1, ['Griffin Smith', '18', 'Engineer']);
+                    ReactableTestUtils.expectRowText(2, ['Ian Zhang', '28', 'Developer']);
+
+                    // Make sure the headers have the right classes
+                    expect($(nameHeader)).to.have['class']('reactable-header-sort-asc');
+                });
+
+                it('does not sort on non-enter keydown', function () {
+                    var nameHeader = $('#table thead tr.reactable-column-header th')[0];
+                    ReactTestUtils.Simulate.keyDown(nameHeader, { keyCode: 10 });
+
+                    ReactableTestUtils.expectRowText(0, ['Lee Salminen', '23', 'Programmer']);
+                    ReactableTestUtils.expectRowText(1, ['Griffin Smith', '18', 'Engineer']);
+                    ReactableTestUtils.expectRowText(2, ['Ian Zhang', '28', 'Developer']);
+
+                    // Make sure the headers have the right classes
+                    expect($(nameHeader)).to.have['class']('reactable-header-sort-asc');
+                });
             });
 
             describe('passing `true` to sortable', function () {

lib/reactable/thead.js

@@ -40,6 +40,13 @@ var Thead = (function (_React$Component) {
         value: function handleClickTh(column) {
             this.props.onSort(column.key);
         }
+    }, {
+        key: 'handleKeyDownTh',
+        value: function handleKeyDownTh(column, event) {
+            if (event.keyCode === 13) {
+                this.props.onSort(column.key);
+            }
+        }
     }, {
         key: 'render',
         value: function render() {
@@ -77,6 +84,7 @@ var Thead = (function (_React$Component) {
                         className: thClass,
                         key: index,
                         onClick: this.handleClickTh.bind(this, column),
+                        onKeyDown: this.handleKeyDownTh.bind(this, column),
                         role: 'button',
                         tabIndex: '0' }),
                     column.label

src/reactable/thead.jsx

@@ -45,6 +45,12 @@ export class Thead extends React.Component {
         this.props.onSort(column.key);
     }
 
+    handleKeyDownTh(column, event) {
+      if (event.keyCode === 13) {
+        this.props.onSort(column.key);
+      }
+    }
+
     render() {
         // Declare the list of Ths
         var Ths = [];
@@ -83,6 +89,7 @@ export class Thead extends React.Component {
                     className={thClass}
                     key={index}
                     onClick={this.handleClickTh.bind(this, column)}
+                    onKeyDown={this.handleKeyDownTh.bind(this, column)}
                     role="button"
                     tabIndex="0">
                     {column.label}

tests/reactable_test.jsx

@@ -1123,6 +1123,30 @@ describe('Reactable', function() {
                 // Make sure the headers have the right classes
                 expect($(nameHeader)).to.have.class('reactable-header-sort-desc');
             });
+
+            it('sorts by last name in ascending order by enter keydown', function(){
+                var nameHeader = $('#table thead tr.reactable-column-header th')[0];
+                ReactTestUtils.Simulate.keyDown(nameHeader, {keyCode: 13});
+
+                ReactableTestUtils.expectRowText(0, ['Lee Salminen', '23', 'Programmer']);
+                ReactableTestUtils.expectRowText(1, ['Griffin Smith', '18', 'Engineer']);
+                ReactableTestUtils.expectRowText(2, ['Ian Zhang', '28', 'Developer']);
+
+                // Make sure the headers have the right classes
+                expect($(nameHeader)).to.have.class('reactable-header-sort-asc');
+            });
+
+            it('does not sort on non-enter keydown', function(){
+                var nameHeader = $('#table thead tr.reactable-column-header th')[0];
+                ReactTestUtils.Simulate.keyDown(nameHeader, {keyCode: 10});
+
+                ReactableTestUtils.expectRowText(0, ['Lee Salminen', '23', 'Programmer']);
+                ReactableTestUtils.expectRowText(1, ['Griffin Smith', '18', 'Engineer']);
+                ReactableTestUtils.expectRowText(2, ['Ian Zhang', '28', 'Developer']);
+
+                // Make sure the headers have the right classes
+                expect($(nameHeader)).to.have.class('reactable-header-sort-asc');
+            });
         });
 
         describe('passing `true` to sortable', function() {
@@ -1658,7 +1682,7 @@ describe('Reactable', function() {
                 ReactableTestUtils.expectRowText(2, ['Third']);
             });
         });
-    
+
         describe('sorts and calls onSort callback via props', function(){
             var sortColumn = null;
 
@@ -1678,7 +1702,7 @@ describe('Reactable', function() {
                                 // sort based on classname
                                 return a.props.className.localeCompare(b.props.className);
                             }
-                        }]} 
+                        }]}
                         onSort={ callback }/>,
                     ReactableTestUtils.testNode()
                 );