JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="http://angularlight.org/bin/alight.last.min.js"></script>
<div al-app="main">
    <label><input type="checkbox" al-checked="active" /> Active</label>, {{fps}} fps
    <table style="width: 100%">
        <tr al-repeat="row in data track by $index">
            <td al-repeat="cell in row track by $index">{{cell.value}}</td>
        </tr>
    </table>
</div>

JavaScript

alight.controllers.main = function(scope) {
    scope.data = [];
    scope.active = true;            
    
    // update table
    var count = 0;    
    function update() {
        if(!scope.active) return setTimeout(update, 100);
        scope.data = getData();
        scope.$scan();
        count++;
        setTimeout(update, 0);
    };
    update();
    
    // show fps
    scope.fps = 0;
    function fps() {
        scope.fps = count;
        count = 0;
    };
    setInterval(fps, 1000);
    
};

function getData() {
    var data = [];
    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
}