JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<div ng-app="test" ng-controller="AppController as app">
<label><input type="checkbox" ng-model="app.active" /> Active</label>, {{app.fps}} fps
<table style="width: 100%">
<tr ng-repeat="(idx, row) in app.data track by $index">
<td>Line {{idx}}</td>
<td ng-repeat="cell in row track by $index">{{cell.value}}</td>
</tr>
</table>
</div>
JavaScript
angular
.module('test', [])
.controller('AppController', AppController)
.factory('dataGenerator', dataGenerator)
;
function AppController(dataGenerator, $timeout, $interval) {
var vm = this, count = 0;
vm.active = false;
fps();
update();
$interval(fps, 1000);
function update () {
count++;
vm.data = dataGenerator(100, 7);
if (vm.active) {
$timeout(update, 0);
} else {
$timeout(update, 1000);
}
}
function fps() {
vm.fps = count;
count = 0;
}
}
function dataGenerator() {
return function (rows, cols) {
return range(rows-1).map(function (rowID) {
return range(cols-1).map(function (colID) {
return {
value: (Math.random() * 100).toFixed(2)
};
});
});
};
}
function range(start, end, step){
if (undefined === end){
end = start;
start = 0;
}
step = step || 1;
for(var r = [],i=start;i<=end;r.push(i), i+=step);
return r;
}