React Table

HTML

<script src="//fb.me/react-with-addons-0.14.0.js"></script>
<script src="//fb.me/react-dom-0.14.0.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid" id='app'>
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <div id="container"></div>
    </div>
  </div>
</div>

CSS

#app{margin-top: 20px;}

Babel + JSX

var MOUNTAINS = [
  {name: "Kilimanjaro", height: 5895, country: "Tanzania"},
  {name: "Everest", height: 8848, country: "Nepal"},
  {name: "Mount Fuji", height: 3776, country: "Japan"},
  {name: "Mont Blanc", height: 4808, country: "Italy/France"},
  {name: "Vaalserberg", height: 323, country: "Netherlands"},
  {name: "Denali", height: 6168, country: "United States"},
  {name: "Popocatepetl", height: 5465, country: "Mexico"}
];

const buildRow = (row, i) => {
  let td = Object.keys(row).map((k, j) => {
    return <td key={j}>{row[k]}</td>  
  })
  return (
    <tr key={i}>{td}</tr>
  )
}
const buildHeader = (header) => {
  let th = header.map((k, j) => {
    return <th key={j}>{k}</th>  
  })
  return (
    <tr>{th}</tr>
  )
}

const Table = (props) => {
  const {data} = props
  return (
    <table className="table table-striped">
      <thead>
        {buildHeader(Object.keys(data[0]))}
      </thead>
      <tbody>
        {data.map(buildRow)}
      </tbody>
      <thead>
        {buildHeader(Object.keys(data[0]))}
      </thead>
       <tbody>
        {data.map(buildRow)}
      </tbody>
    </table>
   )
}

ReactDOM.render(
  <Table data={MOUNTAINS} />,
  document.getElementById("container")
)