ReactJs Table Sorter

Taking a table sorter demo, adapting it to Social Tables, and making a module out of it.

React

Component structure.
Every component corresponds with DOM element
Written in JSX, compiled to JS

React Hello World

JSX

/** @jsx React.DOM */
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.renderComponent(<HelloMessage name="World"/>, mountNode);

/** @jsx React.DOM */
var HelloMessage = React.createClass({displayName: 'HelloMessage',
  render: function() {
    return React.DOM.div(null, "Hello ", this.props.name);
  }
});

React.renderComponent(HelloMessage({name: "John"}), mountNode);

React Table Sorter Demo

https://github.com/bgerm/react-table-sorter-demo
Shows off the ability to interact between components
Switch between sources and number of items returned

Example

var App = React.createClass({
  getInitialState: function() {
    return {source: {limit: "200", source: "source1"}}; 
  }, 
  handleSourceChange: 
    function(source) { 
    this.setState({source: source}); 
  }, 
  render: function() { 
    return (
      <div>
        <DatSourceSelectors onSourceChange={this.handleSourceChange} 
          source={this.state.source} />
        <TableSorter dataSource={this.state.source} ..../>    );   } });

Adapting to Social Tables

No need for multiple sources
Cut out App and DataSourceSelectors
Allow for linking of cells

Entire columns
Individual cells

Changes

Demo

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"} 
  } 
};

Social Tables

var config = { 
  sort: { column: "hexValue", order: "asc" }, 
  columns: { 
    colorName: { name: "Color Name", filterText: "", defaultSortOrder: "asc"},
    hexValue: { name: "Hex Value", filterText: "", defaultSortOrder: "asc",
      link: "/color?hex={cell}"},
    red: { name: "Red", filterText: "", defaultSortOrder: "asc"} 
  } 
};

Changes

Demo

{
  "id":1,
  "col1":"07c5a",
  "col2":348,
  "col3":"Jan_hus"
}

Social Tables

{
  "colorName": {"text":"red", "link":"/custom-link-for-red"},
  "hexValue": {"text":"#f00", "link":"/custom-link-for-red-hex-value"},
  "red":255 
}

Changes

Demo

loadData: function(dataSource) { 
  if (!dataSource) return; 
  $.get(dataSource).done( function(data) { 
    this.setState({items: data});
  }.bind(this))
}

Social Tables

if (request.status >= 200 && request.status < 400){ 
  data = JSON.parse(request.responseText); 
  data.forEach(function(item){ 
    for (var key in item) { 
      if(typeof item[key] !== 'object') { 
        item[key] = {"text":item[key]} 
      } 
    } 
  });
  this.setState({items: data}); 
} else { ... }

Creating a Module

A learning process with a lot of bumps
Testing was an issue - mocha and jasmine both have to be run on compiled JS which required special make process

Couldn't get it all to run smoothly

Jest

Suggested by Facebook/React team
Works with pre-compiler on individual JSX files for unit testing
I'll continue work in my free time