React Table

by ramnathv

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.6/css/bootstrap.min.css">
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-md-6">
            <div id="main">
    
            </div>
        </div>
    </div>
</div>

CSS

#main{margin-top: 30px;}

CoffeeScript

R = React.DOM
Rc = React.createElement

ProductItem = React.createClass
  render: ->
     R.tr {}, 
       R.td {}, @props.name
       R.td {}, @props.price
     
ProductList = React.createClass
  render: ->
    {products} = @props
    R.table {className: 'table table-striped'},
      R.tbody {}, 
        products.map (p, i) -> Rc ProductItem, {
           key: i, name: p.name, price: p.price
          }


products = [
  { name: 'Toast', price: 1499 },
  { name: 'Bacon', price: 3245 },
  { name: 'Coffee', price: 300 }
]

ReactDOM.render(
  Rc(ProductList, {products: products}),
  document.getElementById("main")
)