Skip to content

Commit

Permalink
issue glittershark#84 - colspan support
Browse files Browse the repository at this point in the history
  • Loading branch information
@cklab
cklab committed Feb 9, 2017
1 parent 4cb57c1 commit b7c6e6d
Show file tree
Hide file tree
Showing 4 changed files with 185 additions and 38 deletions.
46 changes: 33 additions & 13 deletions build/reactable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -538,29 +538,49 @@ window.ReactDOM["default"] = window.ReactDOM;
console.log(children);
}

children = children.concat(this.props.columns.map((function (_ref, i) {
var columnsFromProps = [];
var columnsToSkip = 0;
this.props.columns.forEach((function (_ref, i) {
var _ref$props = _ref.props;
var props = _ref$props === undefined ? {} : _ref$props;

var column = _objectWithoutProperties(_ref, ['props']);

if (this.props.data.hasOwnProperty(column.key)) {
var value = this.props.data[column.key];
var component = null;

if (typeof value !== 'undefined' && value !== null && value.__reactableMeta === true) {
props = value.props;
value = value.value;
if (columnsToSkip <= 0) {

if (this.props.data.hasOwnProperty(column.key)) {
var value = this.props.data[column.key];

if (typeof value !== 'undefined' && value !== null && value.__reactableMeta === true) {
props = value.props;
value = value.value;
}

var colSpan = props.colSpan || 1;

// we will use 1 column (ourself), no need to skip that
columnsToSkip = colSpan - 1;

component = _react['default'].createElement(
_td.Td,
_extends({ column: column, key: column.key }, props),
value
);
} else {
component = _react['default'].createElement(_td.Td, { column: column, key: column.key });
}

return _react['default'].createElement(
_td.Td,
_extends({ column: column, key: column.key }, props),
value
);
if (component !== null) {
columnsFromProps.push(component);
}
} else {
return _react['default'].createElement(_td.Td, { column: column, key: column.key });
columnsToSkip--;
}
}).bind(this)));
}).bind(this));

children = children.concat(columnsFromProps);
}

// Manually transfer props
Expand Down
46 changes: 33 additions & 13 deletions lib/reactable/tr.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,29 +47,49 @@ var Tr = (function (_React$Component) {
console.log(children);
}

children = children.concat(this.props.columns.map((function (_ref, i) {
var columnsFromProps = [];
var columnsToSkip = 0;
this.props.columns.forEach((function (_ref, i) {
var _ref$props = _ref.props;
var props = _ref$props === undefined ? {} : _ref$props;

var column = _objectWithoutProperties(_ref, ['props']);

if (this.props.data.hasOwnProperty(column.key)) {
var value = this.props.data[column.key];
var component = null;

if (typeof value !== 'undefined' && value !== null && value.__reactableMeta === true) {
props = value.props;
value = value.value;
if (columnsToSkip <= 0) {

if (this.props.data.hasOwnProperty(column.key)) {
var value = this.props.data[column.key];

if (typeof value !== 'undefined' && value !== null && value.__reactableMeta === true) {
props = value.props;
value = value.value;
}

var colSpan = props.colSpan || 1;

// we will use 1 column (ourself), no need to skip that
columnsToSkip = colSpan - 1;

component = _react2['default'].createElement(
_td.Td,
_extends({ column: column, key: column.key }, props),
value
);
} else {
component = _react2['default'].createElement(_td.Td, { column: column, key: column.key });
}

return _react2['default'].createElement(
_td.Td,
_extends({ column: column, key: column.key }, props),
value
);
if (component !== null) {
columnsFromProps.push(component);
}
} else {
return _react2['default'].createElement(_td.Td, { column: column, key: column.key });
columnsToSkip--;
}
}).bind(this)));
}).bind(this));

children = children.concat(columnsFromProps);
}

// Manually transfer props
Expand Down
44 changes: 32 additions & 12 deletions src/reactable/tr.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,44 @@ export class Tr extends React.Component {
) {
if (typeof(children.concat) === 'undefined') { console.log(children); }

children = children.concat(this.props.columns.map(function({ props = {}, ...column}, i) {
if (this.props.data.hasOwnProperty(column.key)) {
var value = this.props.data[column.key];
var columnsFromProps = [];
var columnsToSkip = 0;
this.props.columns.forEach(function({ props = {}, ...column}, i) {
var component = null;

if (
typeof(value) !== 'undefined' &&
if (columnsToSkip <= 0) {

if (this.props.data.hasOwnProperty(column.key)) {
var value = this.props.data[column.key];

if (
typeof(value) !== 'undefined' &&
value !== null &&
value.__reactableMeta === true
) {
props = value.props;
value = value.value;
value.__reactableMeta === true
) {
props = value.props;
value = value.value;
}

var colSpan = props.colSpan || 1;

// we will use 1 column (ourself), no need to skip that
columnsToSkip = colSpan - 1;

component = <Td column={column} key={column.key} {...props}>{value}</Td>;
} else {
component = <Td column={column} key={column.key}/>;
}

return <Td column={column} key={column.key} {...props}>{value}</Td>;
if (component !== null) {
columnsFromProps.push(component)
}
} else {
return <Td column={column} key={column.key} />;
columnsToSkip--;
}
}.bind(this)));
}.bind(this));

children = children.concat(columnsFromProps);
}

// Manually transfer props
Expand Down
87 changes: 87 additions & 0 deletions tests/reactable_test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -461,6 +461,93 @@ describe('Reactable', function() {
});
});

describe('using colSpan', function() {
describe('basic colSpan', function() {
before(function() {
ReactDOM.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

0 comments on commit b7c6e6d

Please sign in to comment.