Skip to content

Instantly share code, notes, and snippets.

@benkeen
Last active August 29, 2015 14:19
Show Gist options
  • Save benkeen/2a6706ac08088ec925c2 to your computer and use it in GitHub Desktop.
Save benkeen/2a6706ac08088ec925c2 to your computer and use it in GitHub Desktop.
Solution 1: props
// the order of this file has to go lowest level elements first because they're referenced immediately
// as the JS first executes
var Tooltip = React.createClass({
render: function () {
return (
<div className="tt">{this.props.text}</div>
);
}
});
var TableRow = function () {
getDefaultProps: function () {
return {
tooltip: ToolTip
}
},
render: function () {
var Tooltip = this.props.tooltip;
return (
<tr>
<td>{this.props.row.col1}</td>
<td>
{this.props.row.col1}
<Tooltip text={this.props.row.desc} />
</td>
</tr>
);
}
};
var TableHeader = React.createClass({
render: function () {
return (
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
);
}
});
var Table = React.createClass({
getDefaultProps: function () {
return {
tableRow: TableRow,
tableHeader: TableHeader,
tooltip: ToolTip
}
},
getRows: function () {
var TableRow = this.props.tableRow;
return _.map(this.props.rows, function (row, i) {
return <TableRow key={i} row={row} tooltip={this.props.tooltip} />
}, this);
},
render: function () {
var TableHeader = this.props.tableHeader;
return (
<table>
<thead>
<TableHeader />
</thead>
<tbody>
{this.getRows()}
</tbody>
</table>
);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment