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-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<link rel="stylesheet" href="https://rawgit.com/schrodinger/fixed-data-table/master/dist/fixed-data-table.css">
<script src="https://rawgit.com/schrodinger/fixed-data-table/master/dist/fixed-data-table.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

CSS

html, body, #container {
  height: 100%;
  width: 100%;
}

JavaScript 1.7

var Table = FixedDataTable.Table;
var Column = FixedDataTable.Column;
var Cell = FixedDataTable.Cell;

//Custom header cell
var MyHeaderCell = React.createClass({
  mixins: [React.addons.PureRenderMixin],

  render: function() {
   return <Cell {...this.props}>Column: {this.props.columnKey}</Cell>;
  }
})

//Custom cell
var MyCell = React.createClass({
  mixins: [React.addons.PureRenderMixin],
  getInitialState: function() {
    return {
      value: this.props.data[this.props.rowIndex][this.props.columnKey]
    };
  },

  componentWillReceiveProps(nextProps){
    this.setState({ value: nextProps.data[nextProps.rowIndex][nextProps.columnKey]});
  },

  render: function() {
    return <Cell {...this.props}>Cell: {this.state.value}</Cell>;
  }
})

var MyTable = React.createClass({
  mixins: [React.addons.PureRenderMixin],

  render: function() {
    return (
      <Table
        rowHeight={50}
        rowsCount={this.props.data.length}
        width={this.props.width}
        height={this.props.height}
        headerHeight={50}
      >
        {this.createColumns()}
      </Table>
    );
  },

  createColumns: function() {
    var columns = [];
    for (let i = 0; i < this.props.data[0].length; i++) {
     columns.push(
       <Column
          key={i}
          columnKey={i}
          rowIndex={this.props.data[0]}
          header={<MyHeaderCell />}
          cell={<MyCell data={this.props.data} />}
          width={this.props.width / this.props.data[0].length}
        />
      )
    }

    return columns;
  }
})

var Container = React.createClass({

  getInitialState: function() {
    return {
      iR: [
        ['a1', 'b1', 'c1'],
        ['a2', 'b2', 'c2'],
        ['a3', 'b3', 'c3'],
      ]
    };
  },
  changeData: function() {
    var newiR = [
      ['x1', 'k1', 'w1'],
      ['x2', 'k2', 'w2'],
      ['x3', 'k3', 'w3'],
    ];
    this.setState({ iR: newiR });
  },

  render: function() {
    return (
      <div>
        <button...