10000 issue #284 - ability to hide Thead in a Table · leetcode/reactable@1bde970 · GitHub
[go: up one dir, main page]
Skip to content

Commit 1bde970

Browse files
cklabcklab
committed
issue glittershark#284 - ability to hide Thead in a Table
 - add handling for a hideTableHeader property for Table
1 parent c72a78b commit 1bde970

File tree

4 files changed

+78
-23
lines changed

4 files changed

+78
-23
lines changed

‎build/reactable.js

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1378,6 +1378,7 @@ window.ReactDOM["default"] = window.ReactDOM;
13781378
var children = [];
13791379
var columns = undefined;
13801380
var userColumnsSpecified = false;
1381+
var showHeaders = typeof this.props.hideTableHeader === 'undefined';
13811382

13821383
var firstChild = null;
13831384

@@ -1489,10 +1490,9 @@ window.ReactDOM["default"] = window.ReactDOM;
14891490
)
14901491
) : null;
14911492

1492-
return _react['default'].createElement(
1493-
'table',
1494-
props,
1495-
columns && columns.length > 0 ? _react['default'].createElement(_thead.Thead, { columns: columns,
1493+
var tableHeader = null;
1494+
if (columns && columns.length > 0 && showHeaders) {
1495+
tableHeader = _react['default'].createElement(_thead.Thead, { columns: columns,
14961496
filtering: filtering,
14971497
onFilter: function (filter) {
14981498
_this.setState({ filter: filter });
@@ -1506,7 +1506,12 @@ window.ReactDOM["default"] = window.ReactDOM;
15061506
sort: this.state.currentSort,
15071507
sortableColumns: this._sortable,
15081508
onSort: this.onSort.bind(this),
1509-
key: 'thead' }) : null,
1509+
key: 'thead' });
1510+
}
1511+
return _react['default'].createElement(
1512+
'table',
1513+
props,
1514+
tableHeader,
15101515
_react['default'].createElement(
15111516
'tbody',
15121517
{ className: 'reactable-data', key: 'tbody' },

‎lib/reactable/table.js

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -405,6 +405,7 @@ var Table = (function (_React$Component) {
405405
var children = [];
406406
var columns = undefined;
407407
var userColumnsSpecified = false;
408+
var showHeaders = typeof this.props.hideTableHeader === 'undefined';
408409

409410
var firstChild = null;
410411

@@ -516,10 +517,9 @@ var Table = (function (_React$Component) {
516517
)
517518
) : null;
518519

519-
return _react2['default'].createElement(
520-
'table',
521-
props,
522-
columns && columns.length > 0 ? _react2['default'].createElement(_thead.Thead, { columns: columns,
520+
var tableHeader = null;
521+
if (columns && columns.length > 0 && showHeaders) {
522+
tableHeader = _react2['default'].createElement(_thead.Thead, { columns: columns,
523523
filtering: filtering,
524524
onFilter: function (filter) {
525525
_this.setState({ filter: filter });
@@ -533,7 +533,12 @@ var Table = (function (_React$Component) {
533533
sort: this.state.currentSort,
534534
sortableColumns: this._sortable,
535535
onSort: this.onSort.bind(this),
536-
key: 'thead' }) : null,
536+
key: 'thead' });
537+
}
538+
return _react2['default'].createElement(
539+
'table',
540+
props,
541+
tableHeader,
537542
_react2['default'].createElement(
538543
'tbody',
539544
{ className: 'reactable-data', key: 'tbody' },

‎src/reactable/table.jsx

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -359,6 +359,7 @@ export class Table extends React.Component {
359359
let children = [];
360360
let columns;
361361
let userColumnsSpecified = false;
362+
let showHeaders = typeof this.props.hideTableHeader === 'undefined';
362363

363364
let firstChild = null;
364365

@@ -479,24 +480,28 @@ export class Table extends React.Component {
479480

480481
let noDataText = this.props.noDataText ? <tr className="reactable-no-data"><td colSpan={columns.length}>{this.props.noDataText}</td></tr> : null;
481482

482-
return <table {...props}>
483-
{columns && columns.length > 0 ?
484-
<Thead columns={columns}
485-
filtering={filtering}
486-
onFilter={filter => {
483+
var tableHeader = null;
484+
if (columns && columns.length > 0 && showHeaders) {
485+
tableHeader = (
486+
<Thead columns={columns}
487+
filtering={filtering}
488+
onFilter={filter => {
487489
this.setState({ filter: filter });
488490
if (this.props.onFilter) {
489491
this.props.onFilter(filter)
490492
}
491493
}}
492-
filterPlaceholder={this.props.filterPlaceholder}
493-
filterClassName={this.props.filterClassName}
494-
currentFilter={this.state.filter}
495-
sort={this.state.currentSort}
496-
sortableColumns={this._sortable}
497-
onSort={this.onSort.bind(this)}
498-
key="thead"/>
499-
: null}
494+
filterPlaceholder={this.props.filterPlaceholder}
495+
filterClassName={this.props.filterClassName}
496+
currentFilter={this.state.filter}
497+
sort={this.state.currentSort}
498+
sortableColumns={this._sortable}
499+
onSort={this.onSort.bind(this)}
500+
key="thead"/>
501+
)
502+
}
503+
return <table {...props}>
504+
{tableHeader}
500505
<tbody className="reactable-data" key="tbody">
501506
{currentChildren.length > 0 ? currentChildren : noDataText}
502507
</tbody>

‎tests/reactable_test.jsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -677,6 +677,46 @@ describe('Reactable', function() {
677677
})
678678
});
679679

680+
describe('table headers', function() {
681+
describe("with hideTableHeader prop on <Table>", function() {
682+
before(function () {
683+
ReactDOM.render(
684+
<Reactable.Table className="table" id="table" data={[
685+
{ Name: 'Griffin Smith', Age: '18'},
686+
{ Age: '23', Name: 'Lee Salminen'},
687+
{ Age: '28', Position: 'Developer'},
688+
{ Name: 'Leonor Hyatt', Position: null}
689+
]} hideTableHeader />,
690+
ReactableTestUtils.testNode()
691+
);
692+
});
693+
694+
after(ReactableTestUtils.resetTestEnvironment);
695+
696+
697+
it('renders the table', function() {
698+
expect($('table#table.table')).to.exist;
699+
});
700+
701+
it('renders the first row with the correct data', function() {
702+
ReactableTestUtils.expectRowText(0, ['Griffin Smith', '18', '']);
703+
});
704+
705+
it('renders the second row with the correct data', function() {
706+
ReactableTestUtils.expectRowText(1, ['Lee Salminen', '23', '']);
707+
});
708+
709+
it('renders the third row with the correct data', function() {
710+
ReactableTestUtils.expectRowText(2, ['', '28', 'Developer']);
711+
});
712+
713+
it('does not show a <Thead>', function() {
714+
expect($('#table thead')).not.to.exist;
715+
});
716+
});
717+
718+
719+
});
680720

681721
describe('unsafe() strings', function() {
682722
context('in the <Table> directly', function() {

0 commit comments

Comments
 (0)
0