Skip to content

Instantly share code, notes, and snippets.

@benkeen
Created April 23, 2015 18:30
Show Gist options
  • Save benkeen/818b6c8e4d91c2ff440f to your computer and use it in GitHub Desktop.
Save benkeen/818b6c8e4d91c2ff440f to your computer and use it in GitHub Desktop.
Solution 2: Fauxton allowing Tooltip to be overridden
var Table = React.createClass({
getRows: function () {
return _.map(this.props.rows, function (row, i) {
return <TableRow key={i} row={row} />
});
},
render: function () {
return (
<table>
<thead>
<TableHeader />
</thead>
<tbody>
{this.getRows()}
</tbody>
</table>
);
}
});
var TableHeader = React.createClass({
render: function () {
return (
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
);
}
});
var TableRow = function () {
render: function () {
var Tooltip = FauxtonAPI.getComponent('Tooltip');
return (
<tr>
<td>{this.props.row.col1}</td>
<td>
{this.props.row.col1}
<Tooltip text={this.props.row.desc} />
</td>
</tr>
);
}
};
var Tooltip = React.createClass({
render: function () {
return (
<div className="tt">{this.props.text}</div>
);
}
});
FauxtonAPI.registerComponent('Tooltip', Tooltip);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment