Merge pull request glittershark#285 from cklab/noHeaderProp

issue glittershark#284 - ability to hide Thead in a Table

Author: glittershark

build/reactable.js

@@ -1378,6 +1378,7 @@ window.ReactDOM["default"] = window.ReactDOM;
                 var children = [];
                 var columns = undefined;
                 var userColumnsSpecified = false;
+                var showHeaders = typeof this.props.hideTableHeader === 'undefined';
 
                 var firstChild = null;
 
@@ -1489,10 +1490,9 @@ window.ReactDOM["default"] = window.ReactDOM;
                     )
                 ) : null;
 
-                return _react['default'].createElement(
-                    'table',
-                    props,
-                    columns && columns.length > 0 ? _react['default'].createElement(_thead.Thead, { columns: columns,
+                var tableHeader = null;
+                if (columns && columns.length > 0 && showHeaders) {
+                    tableHeader = _react['default'].createElement(_thead.Thead, { columns: columns,
                         filtering: filtering,
                         onFilter: function (filter) {
                             _this.setState({ filter: filter });
@@ -1506,7 +1506,12 @@ window.ReactDOM["default"] = window.ReactDOM;
                         sort: this.state.currentSort,
                         sortableColumns: this._sortable,
                         onSort: this.onSort.bind(this),
-                        key: 'thead' }) : null,
+                        key: 'thead' });
+                }
+                return _react['default'].createElement(
+                    'table',
+                    props,
+                    tableHeader,
                     _react['default'].createElement(
                         'tbody',
                         { className: 'reactable-data', key: 'tbody' },

lib/reactable/table.js

@@ -405,6 +405,7 @@ var Table = (function (_React$Component) {
             var children = [];
             var columns = undefined;
             var userColumnsSpecified = false;
+            var showHeaders = typeof this.props.hideTableHeader === 'undefined';
 
             var firstChild = null;
 
@@ -516,10 +517,9 @@ var Table = (function (_React$Component) {
                 )
             ) : null;
 
-            return _react2['default'].createElement(
-                'table',
-                props,
-                columns && columns.length > 0 ? _react2['default'].createElement(_thead.Thead, { columns: columns,
+            var tableHeader = null;
+            if (columns && columns.length > 0 && showHeaders) {
+                tableHeader = _react2['default'].createElement(_thead.Thead, { columns: columns,
                     filtering: filtering,
                     onFilter: function (filter) {
                         _this.setState({ filter: filter });
@@ -533,7 +533,12 @@ var Table = (function (_React$Component) {
                     sort: this.state.currentSort,
                     sortableColumns: this._sortable,
                     onSort: this.onSort.bind(this),
-                    key: 'thead' }) : null,
+                    key: 'thead' });
+            }
+            return _react2['default'].createElement(
+                'table',
+                props,
+                tableHeader,
                 _react2['default'].createElement(
                     'tbody',
                     { className: 'reactable-data', key: 'tbody' },

src/reactable/table.jsx

@@ -359,6 +359,7 @@ export class Table extends React.Component {
         let children = [];
         let columns;
         let userColumnsSpecified = false;
+        let showHeaders = typeof this.props.hideTableHeader === 'undefined';
 
         let firstChild = null;
 
@@ -479,24 +480,28 @@ export class Table extends React.Component {
 
         let noDataText = this.props.noDataText ? <tr className="reactable-no-data"><td colSpan={columns.length}>{this.props.noDataText}</td></tr> : null;
 
-        return <table {...props}>
-            {columns && columns.length > 0 ?
-             <Thead columns={columns}
-                 filtering={filtering}
-                 onFilter={filter => {
+        var tableHeader = null;
+        if (columns && columns.length > 0 && showHeaders) {
+            tableHeader = (
+                <Thead columns={columns}
+                       filtering={filtering}
+                       onFilter={filter => {
                      this.setState({ filter: filter });
                      if (this.props.onFilter) {
                         this.props.onFilter(filter)
                      }
                  }}
-                 filterPlaceholder={this.props.filterPlaceholder}
-                 filterClassName={this.props.filterClassName}
-                 currentFilter={this.state.filter}
-                 sort={this.state.currentSort}
-                 sortableColumns={this._sortable}
-                 onSort={this.onSort.bind(this)}
-                 key="thead"/>
-             : null}
+                       filterPlaceholder={this.props.filterPlaceholder}
+                       filterClassName={this.props.filterClassName}
+                       currentFilter={this.state.filter}
+                       sort={this.state.currentSort}
+                       sortableColumns={this._sortable}
+                       onSort={this.onSort.bind(this)}
+                       key="thead"/>
+            )
+        }
+        return <table {...props}>
+            {tableHeader}
             <tbody className="reactable-data" key="tbody">
                 {currentChildren.length > 0 ? currentChildren : noDataText}
             </tbody>

tests/reactable_test.jsx

@@ -677,6 +677,46 @@ describe('Reactable', function() {
         })
     });
 
+    describe('table headers', function() {
+        describe("with hideTableHeader prop on <Table>", function() {
+            before(function () {
+                ReactDOM.render(
+                    <Reactable.Table className="table" id="table" data={[
+                    { Name: 'Griffin Smith', Age: '18'},
+                    { Age: '23', Name: 'Lee Salminen'},
+                    { Age: '28', Position: 'Developer'},
+                    { Name: 'Leonor Hyatt', Position: null}
+                ]} hideTableHeader />,
+                    ReactableTestUtils.testNode()
+                );
+            });
+
+            after(ReactableTestUtils.resetTestEnvironment);
+
+
+            it('renders the table', function() {
+                expect($('table#table.table')).to.exist;
+            });
+
+            it('renders the first row with the correct data', function() {
+                ReactableTestUtils.expectRowText(0, ['Griffin Smith', '18', '']);
+            });
+
+            it('renders the second row with the correct data', function() {
+                ReactableTestUtils.expectRowText(1, ['Lee Salminen', '23', '']);
+            });
+
+            it('renders the third row with the correct data', function() {
+                ReactableTestUtils.expectRowText(2, ['', '28', 'Developer']);
+            });
+
+            it('does not show a <Thead>', function() {
+                expect($('#table thead')).not.to.exist;
+            });
+        });
+
+
+    });
 
     describe('unsafe() strings', function() {
         context('in the <Table> directly', function() {