Skip to content

Instantly share code, notes, and snippets.

@ChaseWest
Created May 24, 2014 07:25
Show Gist options
  • Star 13 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save ChaseWest/1935d08b156ae04b85d2 to your computer and use it in GitHub Desktop.
Save ChaseWest/1935d08b156ae04b85d2 to your computer and use it in GitHub Desktop.
React Table Component for creating a very basic html table
var Table = React.createClass({
render: function render() {
var _self = this;
var thead = React.DOM.thead({},
React.DOM.tr({},
this.props.cols.map(function (col) {
return React.DOM.th({}, col);
})));
var tbody = this.props.rows.map(function (row) {
return React.DOM.tr({},
_self.props.cols.map(function (col) {
return React.DOM.td({}, row[col] || "");
}));
});
return React.DOM.table({}, [thead, tbody]);
}
});
var container = document.querySelector("#container");
var tableModel = {
cols: ["Name", "Age"],
rows: [{
"Name": "Chase",
"Age": "27"
}],
}
React.renderComponent(Table(tableModel), container);
@ConAntonakos
Copy link

Nice! Thank you.

Just a quick note about Line#35: renderComponent has been deprecated. You should use the render function instead.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment