JSFiddle - React, Tailwind, and code Playground

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">
            <td al-repeat="cell in row">{{cell.value}}</td>
        </tr>
    </table>
</div>

JavaScript

alight.controllers.main = function(scope) {
    scope.data = data = [];
    scope.active = true;
    
    // init
    for(var i=0;i<100;i++) {
        data.push([{value: 'line ' + i}, {}, {}, {}, {}, {}, {}])
    };
    
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
}
    
    var count = 0;
    function update() {
        if(!scope.active) return setTimeout(update, 100);
        scope.data = getData();
        scope.$scan();
        count++;
        setTimeout(update, 0);
    };
    update();
    
    scope.fps = 0;
    function fps() {
        scope.fps = count;
        count = 0;
    };
    setInterval(fps, 1000);
    
};