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

issue #84 - colspan support #356

Closed
wants to merge 1 commit into from
Closed

issue #84 - colspan support #356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
46 changes: 33 additions & 13 deletions build/reactable.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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