JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<button onclick="$('#bigdatadiv').show()">Show Table</button>
<table>
    <tr><td>Data1</td><td data-bind="text: data1"></td></tr>
    <tr><td>Data2</td><td data-bind="text: data2"></td></tr>
    <tr><td>Data3</td><td data-bind="text: data3"></td></tr>
    <tr><td>Data4</td><td data-bind="text: data4"></td></tr>
    <tr><td>Data5</td><td data-bind="text: data5"></td></tr>
    <tr><td>Data6</td><td data-bind="text: data6"></td></tr>
    <tr><td>Data7</td><td data-bind="text: data7"></td></tr>
    <tr><td>Data8</td><td data-bind="text: data8"></td></tr>
    <tr><td>Data9</td><td data-bind="text: data9"></td></tr>
</table>

<div id="bigdatadiv">
    <button onclick="$('#bigdatadiv').hide()">Hide Table</button>
    <table id="bigdatatable">
        <tbody data-bind="foreach: dataTableRows">
            <tr data-bind="foreach: $data">
                <td data-bind="text: $data"></td>
            </tr>
        </tbody>
    </table>
</div>

CSS

div#bigdatadiv {
    border: 1px solid #ff3333;
    background-color: #eeeeee;
    padding: 10px;
    width: 75%;
    height: 400px;
    position: absolute;
    top: 50px;
    left: 50px;
    overflow: scroll;
}
table#bigdatatable {
    border-collapse:collapse;
}
table#bigdatatable td {
    border: 1px solid #333333;
}

JavaScript

$(document).ready(function() {
    var streamingUpdateInterval = 50;
    
    //// hide the table to start
    $('#bigdatadiv').hide();
    
    //// set up knockout view model
    var vm = new ViewModel();
	ko.applyBindings(vm);
    
    //// put the table in the view model
    MakeBigData();
    for (var i = 0; i < bigdata.length; i++) {
        vm.dataTableRows.push(bigdata[i]);
    }
    
    //// simulate a streaming data source
    setInterval(function () {
        for (var i = 1; i < 10; i++) {
            vm['data'+i](Math.random().toFixed(6));
        }
    }, streamingUpdateInterval);
});



function ViewModel() {
    var self = this;
    
    self.data1 = ko.observable(0);
    self.data2 = ko.observable(0);
    self.data3 = ko.observable(0);
    self.data4 = ko.observable(0);
    self.data5 = ko.observable(0);
    self.data6 = ko.observable(0);
    self.data7 = ko.observable(0);
    self.data8 = ko.observable(0);
    self.data9 = ko.observable(0);
    
    self.dataTableRows = ko.observableArray();
}

//// generate a big table of data in a JSON object
var bigdata;
function MakeBigData() {
    var rows = 200, cols = 15;
    bigdata = [];
    for (var row = 0; row < rows; row++) {
        datarow = [];
        for (var col = 0; col < cols; col++) {
            datarow[col] = ((row * rows) + col + Math.random()).toFixed(1);
        }
        bigdata[row] = datarow;
    }
}