Skip to content
This repository has been archived by the owner on Jan 15, 2022. It is now read-only.

- add colSpan prop to Td objects #135

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

- add colSpan prop to Td objects #135

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b52fbb6
- add colSpan prop to Td objects
Apr 7, 2015
c6ff6f9
- add filtering tests
Apr 8, 2015
b19f538
- adding in dummy td elements to "fix" sorting
Apr 22, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 17 additions & 3 deletions build/reactable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 &&
Expand All @@ -311,9 +313,21 @@
value = value.value;
}

if(typeof(props.colSpan) !== 'undefined') {
colSpanDebt += props.colSpan - 1;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we fail with a warning if a user specifies a colSpan of less than 1 here?

}

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)));
}
Expand Down
87 changes: 87 additions & 0 deletions build/tests/reactable_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <Tr>s with className to the <Table>', function() {
before(function() {
Expand Down
15 changes: 8 additions & 7 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,16 @@
"url": "https://github.com/glittershark/reactable.git"
},
"bugs": {
"url" : "http://github.com/glittershark/reactable/issues",
"email" : "[email protected]"
"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",
Expand All @@ -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"
]
}
20 changes: 17 additions & 3 deletions src/reactable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 &&
Expand All @@ -311,9 +313,21 @@
value = value.value;
}

if(typeof(props.colSpan) !== 'undefined') {
colSpanDebt += props.colSpan - 1;
}

return <Td column={column} key={column.key} {...props}>{value}</Td>;
} else {
return <Td column={column} key={column.key} />;
if(colSpanDebt > 0) {
colSpanDebt--;
var hiddenStyle = {
display: "none"
}
return <Td column={column} key={column.key} style={hiddenStyle} />;
} else {
return <Td column={column} key={column.key} />;
}
}
}.bind(this)));
}
Expand Down
87 changes: 87 additions & 0 deletions tests/reactable_test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,93 @@ describe('Reactable', function() {
})
});

describe('using colSpan', function() {
describe('basic colSpan', function() {
before(function() {
React.render(
<Reactable.Table className="table" id="table">
<Reactable.Tr data={{ Name: 'Griffin Smith', Age: '18'}}/>
<Reactable.Tr data={{ Age: '23', Name: 'Lee Salminen'}}/>
<Reactable.Tr data={{ Age: '28', Position: 'Developer'}}/>
<Reactable.Tr>
<Reactable.Td column="Name" colSpan="3">This summary spans 3 cols</Reactable.Td>
</Reactable.Tr>
</Reactable.Table>,
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(
<Reactable.Table filterable={['Name']} className="table" id="table">
<Reactable.Tr data={{ Name: 'Griffin Smith', Age: '18'}}/>
<Reactable.Tr data={{ Age: '23', Name: 'Lee Salminen'}}/>
<Reactable.Tr data={{ Age: '28', Position: 'Developer'}}/>
<Reactable.Tr>
<Reactable.Td column="Name" colSpan="3">This summary spans 3 cols</Reactable.Td>
</Reactable.Tr>
</Reactable.Table>,
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 <Tr>s with className to the <Table>', function() {
before(function() {
Expand Down