JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://fb.me/react-0.11.2.js"></script>
<div id="fps"></div>
<div id="app"></div>
JavaScript
//
// create component
//
var Table = React.createClass({
getInitialState: function() {
return {data: this.props.data};
},
render: function () {
return (
React.DOM.table({style: {width: '100%'}}, React.DOM.tbody(null,
this.state.data.map(function (row) {
return (
React.DOM.tr(null,
row.map(function (cell) {
return React.DOM.td(null, cell.value);
})
)
);
})
))
);
}
});
//
// get data somehow
//
var data = [];
// init
for(var i=0;i<100;i++) {
data.push([{value: 'line ' + i}, {}, {}, {}, {}, {}, {}])
};
//
// Render the component in the "app" DOM node
// giving it the initial data
//
var table = React.renderComponent(
Table({data: data}),
document.getElementById('app'));
function getData() {
var data = [];
// init
for(var i=0;i<100;i++) {
data.push([{value: 'line ' + i}, {
value : (Math.random() * 100).toFixed(2)
}, {
value : (Math.random() * 100).toFixed(2)
}, {
value : (Math.random() * 100).toFixed(2)
}, {
value : (Math.random() * 100).toFixed(2)
}, {
value : (Math.random() * 100).toFixed(2)
}, {
value : (Math.random() * 100).toFixed(2)
}])
}
return { data : data }
}
var count = 0;
function update() {
//if(!scope.active) return setTimeout(update, 100);
table.setState(getData())
count++;
setTimeout(update, 0);
};
update();
function fps() {
document.getElementById('fps').innerHTML = '' + count;
count = 0;
};
setInterval(fps, 1000);