table fails to render with null children

Author: cklab

build/reactable.js

@@ -1381,10 +1381,12 @@ window.ReactDOM["default"] = window.ReactDOM;
 
                 var firstChild = null;
 
-                if (this.props.children && this.props.children.length > 0 && this.props.children[0].type === _thead.Thead) {
-                    firstChild = this.props.children[0];
-                } else if (typeof this.props.children !== 'undefined' && this.props.children.type === _thead.Thead) {
-                    firstChild = this.props.children;
+                if (this.props.children) {
+                    if (this.props.children.length > 0 && this.props.children[0] && this.props.children[0].type === _thead.Thead) {
+                        firstChild = this.props.children[0];
+                    } else if (this.props.children.type === _thead.Thead) {
+                        firstChild = this.props.children;
+                    }
                 }
 
                 if (firstChild !== null) {

lib/reactable/table.js

@@ -408,10 +408,12 @@ var Table = (function (_React$Component) {
 
             var firstChild = null;
 
-            if (this.props.children && this.props.children.length > 0 && this.props.children[0].type === _thead.Thead) {
-                firstChild = this.props.children[0];
-            } else if (typeof this.props.children !== 'undefined' && this.props.children.type === _thead.Thead) {
-                firstChild = this.props.children;
+            if (this.props.children) {
+                if (this.props.children.length > 0 && this.props.children[0] && this.props.children[0].type === _thead.Thead) {
+                    firstChild = this.props.children[0];
+                } else if (this.props.children.type === _thead.Thead) {
+                    firstChild = this.props.children;
+                }
             }
 
             if (firstChild !== null) {

src/reactable/table.jsx

@@ -362,17 +362,19 @@ export class Table extends React.Component {
 
         let firstChild = null;
 
-        if (
-            this.props.children &&
-            this.props.children.length > 0 &&
-            this.props.children[0].type === Thead
-        ) {
-            firstChild = this.props.children[0]
-        } else if (
-            typeof this.props.children !== 'undefined' &&
-            this.props.children.type === Thead
-        ) {
-            firstChild = this.props.children
+
+        if (this.props.children) {
+            if (
+                this.props.children.length > 0 &&
+                this.props.children[0] &&
+                this.props.children[0].type === Thead
+            ) {
+                firstChild = this.props.children[0]
+            } else if (
+                this.props.children.type === Thead
+            ) {
+                firstChild = this.props.children
+            }
         }
 
         if (firstChild !== null) {

tests/reactable_test.jsx

@@ -33,6 +33,26 @@ var ReactableTestUtils = {
 };
 
 describe('Reactable', function() {
+    describe("with null children", function(){
+        before(function () {
+            ReactDOM.render(
+                <Reactable.Table className="table" id="table">
+                    {null}
+                    {null}
+                    {null}
+                </Reactable.Table>,
+                ReactableTestUtils.testNode()
+            );
+        });
+
+        after(ReactableTestUtils.resetTestEnvironment);
+
+        it('renders the table', function() {
+            expect($('table#table.table')).to.exist;
+        });
+
+    });
+
     describe('directly passing a data array', function() {
         before(function() {
             ReactDOM.render(