React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="app">
</div>

CSS

body {
  margin: 10px;
}

.sortable-column {
  cursor: pointer;
}

.sort-asc {
  background-color: #fcf8e3;
}

.sort-desc {
  background-color: #d9edf7;
}

JavaScript 1.7

'use strict';

var SORT_DIRECTIONS = {
	ASC: true,
	DESC: false
};

var App = React.createClass({
	getInitialState() {
		return {
			products: [
				{title: 'Apple iPad Pro 32GB Silver', quantity: 5, price: 900},
				{title: 'Lenovo Tab 2 A10-30L', quantity: 3, price: 720},
				{title: 'ASUS Transformer Book T100HA-FU002T', quantity: 10, price: 580},
				{title: 'Armix PAD-925 8GB', quantity: 4, price: 520}
			],
			sorting: {
				property: null,
				direction: SORT_DIRECTIONS.ASC
			}
		}
	},

  render: function() {
  	var sortedProducts = this.generateSortedProducts();
    return (
    	<Table products={sortedProducts} 
    				 sorting={this.state.sorting}
    	       onRemoveProduct={this.removeProduct}
    	       onAddProduct={this.addProduct}
    	       onProductUpdated={this.updateProduct}
    	       onSortingChanged={this.updateSorting} />
  	);
  },

  generateSortedProducts: function() {
  	var products = this.state.products;
  	var sortProperty = this.state.sorting.property;
  	var sortDirection = this.state.sorting.direction ? 'asc' : 'desc';
  	var sorted = _.sortByOrder(products, [sortProperty], [sortDirection]);
  	return sorted;
  },

  updateSorting: function(property) {
  	var sortDirection = this.state.sorting.direction;
  	if (this.state.sorting.property == property) {
  		sortDirection = !sortDirection;
  	} else {
  		sortDirection = SORT_DIRECTIONS.ASC;
  	}
  	this.setState({
  		sorting: {
  			property: property,
  			direction: sortDirection
  		}
  	});
  },

  removeProduct: function(product) {
  	var index = this.state.products.indexOf(product);
  	var products = this.state.products;
  	products.splice(index, 1);
  	this.setState({products: products});
  },

  addProduct: function() {
  	var products = this.state.products;
  	products.push({});
  	this.setState({products: products});
  },

  updateProduct: function(original, updated) {
  	var index = this.state.products.indexOf(original);
  	var products = this.state.products;
 ...