React Goods table
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container"></div>
CSS
table {
width: 100%;
border-collapse: collapse;
}
td {
border: 1px solid;
padding: 10px;
font-family: sans-serif;
font-size: 14px;
}
.good-item {
margin-bottom: 1em;
}
.good-item:last-child {
margin-bottom: 0;
}
JavaScript 1.7
var goods = [{
login: 'User 1',
goodName: 'Товар 1'
}, {
login: 'User 1',
goodName: 'Товар 2'
}, {
login: 'User 1',
goodName: 'Товар 3'
}, {
login: 'User 2',
goodName: 'Товар 4'
}, {
login: 'User 2',
goodName: 'Товар 5'
}, {
login: 'User 3',
goodName: 'Товар 1'
}];
var GoodsTable = React.createClass({
getInitialState: function () {
return {
goods: goods
};
},
render: function () {
var result = this.state.goods.reduce(function (res, curr) {
var userGoods = res[curr.login] || [];
userGoods.push(curr.goodName);
res[curr.login] = userGoods;
return res;
}, {});
var itemNodes = Object.keys(result).map(function(userName) {
return (
<UserGoodsRow key={userName} user={userName} goods={result[userName]} />
);
});
return (
<table>
<tbody>
{itemNodes}
</tbody>
</table>);
}
});
var UserGoodsRow = React.createClass({
render: function () {
return (
<tr>
<td>{this.props.user}</td>
<td>
{this.props.goods.map(function(good, i) {
return (<GoodRow key={i} good={good}/>);
})}
</td>
</tr>
);
}
});
var GoodRow = React.createClass({
render: function () {
return (
<div className="good-item">{this.props.good}</div>
);
}
});
React.render(<GoodsTable /> , document.getElementById('container'));