JSFiddle - React, Tailwind, and code Playground

by dkunin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://dragon.ak.fbcdn.net/hphotos-ak-prn1/t39.3284/851564_134240073412991_686985478_n.js"></script>
<script src="http://dragon.ak.fbcdn.net/hphotos-ak-ash3/t39.3284/851559_1422560661323713_1411643228_n.js"></script>
  <div class="container">
    <h2>ReactJS Table Sorter</h2>

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

JavaScript 1.7

/** @jsx React.DOM */

// TableSorter Config
var CONFIG = {
  sort: { column: "col2", order: "desc" },
  columns: {
    col1: { name: "Col1", filterText: "", defaultSortOrder: "desc"},
    col2: { name: "Col2", filterText: ">= 30", defaultSortOrder: "desc"},
    col3: { name: "Col3", filterText: "s", defaultSortOrder: "desc"}
  }
};

// Inequality function map for the filtering
var operators = {
  "<": function(x, y) { return x < y; },
  "<=": function(x, y) { return x <= y; },
  ">": function(x, y) { return x > y; },
  ">=": function(x, y) { return x >= y; },
  "==": function(x, y) { return x == y; }
};

// TableSorter React Component
var TableSorter = React.createClass({
  getInitialState: function() {
    return {
      items: this.props.initialItems || [],
      sort: this.props.config.sort || { column: "", order: "" },
      columns: this.props.config.columns
    };
  },
  componentWillReceiveProps: function(nextProps) {
    // Load new data when the dataSource property changes.
    if (nextProps.dataSource != this.props.dataSource) {
      this.loadData(nextProps.dataSource);
    }
  },
  componentWillMount: function() {
    this.loadData(this.props.dataSource);
  },
  loadData: function(dataSource) {
    if (!dataSource) return;

    $.get(dataSource).done(function(data) {
      console.log("Received data");
      this.setState({items: data});
    }.bind(this)).fail(function(error, a, b) {
      console.log("Error loading JSON");
    });
  },
  handleFilterTextChange: function(column) {
    return function(newValue) {
      var obj = this.state.columns;
      obj[column].filterText = newValue;

      // Since we have already mutated the state, just call forceUpdate().
      // Ideally we'd copy and setState or use an immutable data structure.
      this.forceUpdate();
    }.bind(this);
  },
  columnNames: function() {
     return Object.keys(this.state.columns); 
  },
  sortColumn: function(column) {
    return function(event) {
      var newSortOrder =...