From b52fbb665bfe42ea2c518cc865856d23b2e5d571 Mon Sep 17 00:00:00 2001 From: Paul Cameron Date: Tue, 7 Apr 2015 15:49:07 -0400 Subject: [PATCH 1/3] - add colSpan prop to Td objects --- src/reactable.jsx | 16 +++++++++++--- tests/reactable_test.jsx | 47 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 60 insertions(+), 3 deletions(-) diff --git a/src/reactable.jsx b/src/reactable.jsx index e6d98491..8dac1e7b 100644 --- a/src/reactable.jsx +++ b/src/reactable.jsx @@ -246,7 +246,8 @@ render: function() { var tdProps = { className: this.props.className, - onClick: this.handleClick + onClick: this.handleClick, + colSpan: this.props.colSpan }; // Attach any properties on the column to this Td object to allow things like custom event handlers @@ -289,7 +290,7 @@ }, render: function() { var children = toArray(React.Children.children(this.props.children)); - + var colSpanDebt = 0; if ( this.props.data && this.props.columns && @@ -311,9 +312,18 @@ value = value.value; } + if(typeof(props.colSpan) !== 'undefined') { + colSpanDebt += props.colSpan - 1; + } + return {value}; } else { - return ; + if(colSpanDebt > 0) { + colSpanDebt--; + return ''; + } else { + return ; + } } }.bind(this))); } diff --git a/tests/reactable_test.jsx b/tests/reactable_test.jsx index 7be1edfc..212b54ed 100644 --- a/tests/reactable_test.jsx +++ b/tests/reactable_test.jsx @@ -270,6 +270,53 @@ describe('Reactable', function() { }) }); + describe('using colSpan', function() { + before(function() { + React.render( + + + + + + This summary spans 3 cols + + , + ReactableTestUtils.testNode() + ); + }); + + after(ReactableTestUtils.resetTestEnvironment); + + it('renders the table', function() { + expect($('table#table.table')).to.exist; + }); + + it('renders the column headers in the table', function() { + var headers = []; + $('thead th').each(function() { + headers.push($(this).text()); + }); + + expect(headers).to.eql([ 'Name', 'Age', 'Position' ]); + }); + + 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('renders the fourth row with the correct data', function() { + ReactableTestUtils.expectRowText(3, ['This summary spans 3 cols']); + }); + }); + describe('passing through HTML props', function() { describe('adding s with className to the ', function() { before(function() { From c6ff6f922fdb33c62ccfca8bef6f7c6d91a082e7 Mon Sep 17 00:00:00 2001 From: Paul Cameron Date: Wed, 8 Apr 2015 13:13:53 -0400 Subject: [PATCH 2/3] - add filtering tests --- tests/reactable_test.jsx | 106 +++++++++++++++++++++++++++------------ 1 file changed, 73 insertions(+), 33 deletions(-) diff --git a/tests/reactable_test.jsx b/tests/reactable_test.jsx index 212b54ed..fb8ed5e1 100644 --- a/tests/reactable_test.jsx +++ b/tests/reactable_test.jsx @@ -271,49 +271,89 @@ describe('Reactable', function() { }); describe('using colSpan', function() { - before(function() { - React.render( - - - - - - This summary spans 3 cols - - , - ReactableTestUtils.testNode() - ); - }); + describe('basic colSpan', function() { + before(function() { + React.render( + + + + + + This summary spans 3 cols + + , + ReactableTestUtils.testNode() + ); + }); - after(ReactableTestUtils.resetTestEnvironment); + after(ReactableTestUtils.resetTestEnvironment); - it('renders the table', function() { - expect($('table#table.table')).to.exist; - }); + it('renders the table', function() { + expect($('table#table.table')).to.exist; + }); - it('renders the column headers in the table', function() { - var headers = []; - $('thead th').each(function() { - headers.push($(this).text()); + it('renders the column headers in the table', function() { + var headers = []; + $('thead th').each(function() { + headers.push($(this).text()); + }); + + expect(headers).to.eql([ 'Name', 'Age', 'Position' ]); }); - expect(headers).to.eql([ 'Name', 'Age', 'Position' ]); - }); + it('renders the first row with the correct data', function() { + ReactableTestUtils.expectRowText(0, ['Griffin Smith', '18', '']); + }); - 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 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('renders the third row with the correct data', function() { - ReactableTestUtils.expectRowText(2, ['', '28', 'Developer']); + it('renders the fourth row with the correct data', function() { + ReactableTestUtils.expectRowText(3, ['This summary spans 3 cols']); + }); }); - it('renders the fourth row with the correct data', function() { - ReactableTestUtils.expectRowText(3, ['This summary spans 3 cols']); + describe('filtering with colSpan', function() { + before(function() { + this.component = React.render( + + + + + + This summary spans 3 cols + + , + ReactableTestUtils.testNode() + ); + }); + + after(ReactableTestUtils.resetTestEnvironment); + + context('select colspan value', function() { + before(function() { + this.component.filterBy('summary'); + }); + + it('applies the filtering', function() { + ReactableTestUtils.expectRowText(0, ['This summary spans 3 cols']); + }); + }); + + context('select value from other row', function() { + before(function() { + this.component.filterBy('Griffin'); + }); + + it('applies the filtering', function() { + ReactableTestUtils.expectRowText(0, ['Griffin Smith', '18', '']); + }); + }); }); }); From b19f5386c632b3a101bbac3aba3fe1b67b6acd2a Mon Sep 17 00:00:00 2001 From: Paul Cameron Date: Wed, 22 Apr 2015 13:40:28 -0400 Subject: [PATCH 3/3] - adding in dummy td elements to "fix" sorting --- build/reactable.js | 20 ++++++-- build/tests/reactable_test.js | 87 +++++++++++++++++++++++++++++++++++ package.json | 15 +++--- src/reactable.jsx | 8 +++- tests/reactable_test.jsx | 4 +- 5 files changed, 120 insertions(+), 14 deletions(-) diff --git a/build/reactable.js b/build/reactable.js index f73b505d..ee0a7a25 100644 --- a/build/reactable.js +++ b/build/reactable.js @@ -246,7 +246,9 @@ render: function() { var tdProps = { className: this.props.className, - onClick: this.handleClick + onClick: this.handleClick, + colSpan: this.props.colSpan, + style: this.props.style }; // Attach any properties on the column to this Td object to allow things like custom event handlers @@ -289,7 +291,7 @@ }, render: function() { var children = toArray(React.Children.children(this.props.children)); - + var colSpanDebt = 0; if ( this.props.data && this.props.columns && @@ -311,9 +313,21 @@ value = value.value; } + if(typeof(props.colSpan) !== 'undefined') { + colSpanDebt += props.colSpan - 1; + } + return React.createElement(Td, React.__spread({column: column, key: column.key}, props), value); } else { - return React.createElement(Td, {column: column, key: column.key}); + if(colSpanDebt > 0) { + colSpanDebt--; + var hiddenStyle = { + display: "none" + } + return React.createElement(Td, {column: column, key: column.key, style: hiddenStyle}); + } else { + return React.createElement(Td, {column: column, key: column.key}); + } } }.bind(this))); } diff --git a/build/tests/reactable_test.js b/build/tests/reactable_test.js index e705abe4..20ffddc0 100644 --- a/build/tests/reactable_test.js +++ b/build/tests/reactable_test.js @@ -270,6 +270,93 @@ describe('Reactable', function() { }) }); + describe('using colSpan', function() { + describe('basic colSpan', function() { + before(function() { + React.render( + React.createElement(Reactable.Table, {className: "table", id: "table"}, + React.createElement(Reactable.Tr, {data: { Name: 'Griffin Smith', Age: '18'}}), + React.createElement(Reactable.Tr, {data: { Age: '23', Name: 'Lee Salminen'}}), + React.createElement(Reactable.Tr, {data: { Age: '28', Position: 'Developer'}}), + React.createElement(Reactable.Tr, null, + React.createElement(Reactable.Td, {column: "Name", colSpan: "3"}, "This summary spans 3 cols") + ) + ), + ReactableTestUtils.testNode() + ); + }); + + after(ReactableTestUtils.resetTestEnvironment); + + it('renders the table', function() { + expect($('table#table.table')).to.exist; + }); + + it('renders the column headers in the table', function() { + var headers = []; + $('thead th').each(function() { + headers.push($(this).text()); + }); + + expect(headers).to.eql([ 'Name', 'Age', 'Position' ]); + }); + + 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('renders the fourth row with the correct data', function() { + ReactableTestUtils.expectRowText(3, ['This summary spans 3 cols', '', '']); + }); + }); + + describe('filtering with colSpan', function() { + before(function() { + this.component = React.render( + React.createElement(Reactable.Table, {filterable: ['Name'], className: "table", id: "table"}, + React.createElement(Reactable.Tr, {data: { Name: 'Griffin Smith', Age: '18'}}), + React.createElement(Reactable.Tr, {data: { Age: '23', Name: 'Lee Salminen'}}), + React.createElement(Reactable.Tr, {data: { Age: '28', Position: 'Developer'}}), + React.createElement(Reactable.Tr, null, + React.createElement(Reactable.Td, {column: "Name", colSpan: "3"}, "This summary spans 3 cols") + ) + ), + ReactableTestUtils.testNode() + ); + }); + + after(ReactableTestUtils.resetTestEnvironment); + + context('select colspan value', function() { + before(function() { + this.component.filterBy('summary'); + }); + + it('applies the filtering', function() { + ReactableTestUtils.expectRowText(0, ['This summary spans 3 cols', '', '']); + }); + }); + + context('select value from other row', function() { + before(function() { + this.component.filterBy('Griffin'); + }); + + it('applies the filtering', function() { + ReactableTestUtils.expectRowText(0, ['Griffin Smith', '18', '']); + }); + }); + }); + }); + describe('passing through HTML props', function() { describe('adding s with className to the
', function() { before(function() { diff --git a/package.json b/package.json index 92a53211..da1bfad9 100644 --- a/package.json +++ b/package.json @@ -8,20 +8,16 @@ "url": "https://github.com/glittershark/reactable.git" }, "bugs": { - "url" : "http://github.com/glittershark/reactable/issues", - "email" : "wildgriffin45@gmail.com" + "url": "https://github.com/glittershark/reactable/issues" }, "author": "Griffin Smith", "license": "MIT", - "bugs": { - "url": "https://github.com/glittershark/reactable/issues" - }, "homepage": "https://github.com/glittershark/reactable", "scripts": { "test": "./node_modules/grunt-cli/bin/grunt testOnce" }, "peerDependencies": { - "react": "*" + "react": "^0.12.0" }, "devDependencies": { "grunt": "^0.4.4", @@ -37,5 +33,10 @@ "karma-spec-reporter": "0.0.12", "mocha": "^1.18.2" }, - "keywords": ["react-component", "react", "table", "data-tables"] + "keywords": [ + "react-component", + "react", + "table", + "data-tables" + ] } diff --git a/src/reactable.jsx b/src/reactable.jsx index 8dac1e7b..c61956f9 100644 --- a/src/reactable.jsx +++ b/src/reactable.jsx @@ -247,7 +247,8 @@ var tdProps = { className: this.props.className, onClick: this.handleClick, - colSpan: this.props.colSpan + colSpan: this.props.colSpan, + style: this.props.style }; // Attach any properties on the column to this Td object to allow things like custom event handlers @@ -320,7 +321,10 @@ } else { if(colSpanDebt > 0) { colSpanDebt--; - return ''; + var hiddenStyle = { + display: "none" + } + return
; } else { return ; } diff --git a/tests/reactable_test.jsx b/tests/reactable_test.jsx index fb8ed5e1..fb0e8b62 100644 --- a/tests/reactable_test.jsx +++ b/tests/reactable_test.jsx @@ -314,7 +314,7 @@ describe('Reactable', function() { }); it('renders the fourth row with the correct data', function() { - ReactableTestUtils.expectRowText(3, ['This summary spans 3 cols']); + ReactableTestUtils.expectRowText(3, ['This summary spans 3 cols', '', '']); }); }); @@ -341,7 +341,7 @@ describe('Reactable', function() { }); it('applies the filtering', function() { - ReactableTestUtils.expectRowText(0, ['This summary spans 3 cols']); + ReactableTestUtils.expectRowText(0, ['This summary spans 3 cols', '', '']); }); });