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]
    };
  },

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

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

  render: function() {
    var width = this.props.width;
    var height = this.props.height;
    var data = this.props.data;
    
    return (
      <Table
        rowHeight={50}
        rowsCount={data.length}
        width={width}
        height={height}
        headerHeight={50}
      >
        {this.createColumns()}
      </Table>
    );
  },
  
  createColumns: function() {
    var width = this.props.width;
  	var data = this.props.data;
    var columnCount = data[0].length;
    var columns = [];
    for (let i = 0; i < columnCount; i++) {
     columns.push(
       <Column
          key={i}
          columnKey={i}
          header={<MyHeaderCell />}
          cell={<MyCell data={data} />}
          width={width / columnCount}
        />
      )
    }
    
    return columns;
  }
})

var container = document.getElementById('container');

// Table data as a list of array.
var myData = [
  ['a1', 'b1', 'c1'],
  ['a2', 'b2', 'c2'],
  ['a3', 'b3', 'c3'],
  // .... and more
];

function changeData() {
var temp = myData.slice();
debugger;
var iR = 0;
	var newData = [
  ['x1', 'k1', 'w1'],
  ['x2', 'k2', 'w2'],
  ['x3', 'k3', 'w3'],
  // .... and more
];
  myData = newData;
  render();
}

// Render your table
function render() {
  var height = container.offsetHeight;
  var...