JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" id="p">Populate</button>
<button type="button" id="n">Next N</button>
<table id="t">
</table>

CSS

table td {
    width: 10em;
    height: 2em;
    overflow:hidden;
    border: solid 1px #999;
}

JavaScript

var state = {offset: -1000, shown: 1000}

var t = document.getElementById('t');
    
function populate() {
    state.offset = 0
    state.data = []
    t.innerHTML = ''
    console.log("start populate")
    console.time('populate')
    for (var i = 0; i < 300000; ++i) {
        var row = []
        for (var k = 0; k < 3; ++k) {
            row.push(i + ' ' + k)
        }
        state.data.push(row)
    }
    next()
    console.timeEnd('populate');
}
    
function next() {
    console.log("start next");
    console.time("next");
    t.innerHTML = ''
    state.offset += state.shown;
    for (var k = state.offset; k < state.offset + state.shown; ++k) {
        var row = document.createElement('tr');
        for (var i = 0; i < state.data[k].length; ++i) {
            var cell = document.createElement('td');
            cell.innerHTML = state.data[k][i];
            row.appendChild(cell);
        }
        t.appendChild(row);
    }
    console.timeEnd("next")
}
    
document.getElementById('p').onclick = populate;
document.getElementById('n').onclick = next;