Overriding React Components

gistfile1.js

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 () {
    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>
    );
  }
});