Skip to content

Instantly share code, notes, and snippets.

@ChaseWest

ChaseWest/react-table-component.js

Created May 24, 2014 07:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ChaseWest/1935d08b156ae04b85d2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ChaseWest/1935d08b156ae04b85d2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ChaseWest created this gist May 24, 2014.
    35 changes: 35 additions & 0 deletions react-table-component.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    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);