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: 0, shown: 1000}

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