JSFiddle - React, Tailwind, and code Playground
HTML
<button onclick="$('#bigdatadiv').show()">Show Table</button>
<table>
<tbody>
<tr><td>Data1</td><td id="data1">0.902770</td></tr>
<tr><td>Data2</td><td id="data2">0.217911</td></tr>
<tr><td>Data3</td><td id="data3">0.716963</td></tr>
<tr><td>Data4</td><td id="data4">0.611556</td></tr>
<tr><td>Data5</td><td id="data5">0.914367</td></tr>
<tr><td>Data6</td><td id="data6">0.476077</td></tr>
<tr><td>Data7</td><td id="data7">0.542399</td></tr>
<tr><td>Data8</td><td id="data8">0.147752</td></tr>
<tr><td>Data9</td><td id="data9">0.793497</td></tr>
</tbody></table>
<div id="bigdatadiv" style="display: none;">
<button onclick="$('#bigdatadiv').hide()">Hide Table</button>
<table id="bigdatatable">
<tbody data-bind="foreach: dataTableRows">
<tr>
<td >0.6</td>
<td >1.4</td>
<td >2.6</td>
<td >3.5</td>
<td >4.8</td>
<td >5.3</td>
<td >6.5</td>
<td >7.3</td>
<td >8.2</td>
<td >9.4</td>
<td >10.3</td>
<td >11.0</td>
<td >12.1</td>
<td >13.6</td>
<td >14.8</td>
</tr>
<tr>
<td >200.8</td>
<td >201.0</td>
<td >202.7</td>
<td >203.2</td>
<td >204.8</td>
<td >206.0</td>
<td >206.1</td>
<td >207.1</td>
<td >208.6</td>
<td >209.9</td>
<td >210.6</td>
...
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();
//// simulate a streaming data source
setInterval(function () {
for (var i = 1; i < 10; i++) {
$("#data"+i).text(Math.random().toFixed(6));
}
}, streamingUpdateInterval);
});