JSFiddle - React, Tailwind, and code Playground

by oysteinmoseng

HTML

<div id="outer">
    <div id="scroller">
        <table id="data-table">
        
        </table>
    </div>
</div>

CSS

#outer {
    height: 95vh;
    overflow: auto;
}

table {
    border-collapse: collapse;
}
td {
    height: 20px;
    line-height: 20px;
    padding: 0 2em;
}

JavaScript

const rows = new Array(100).fill(1).map((row, i) => [`col1-${i}`, `col2-${i}`]);

const cellHeight = 20;
const outer = document.getElementById('outer');
const scroller = document.getElementById('scroller');
const dataTable = document.getElementById('data-table');

const appendPlaceholder = (dataTable, height) => {
	const tr = document.createElement('tr');
    dataTable.appendChild(tr);
    const td = document.createElement('td');
    td.style.height = `${height}px`;
    tr.appendChild(td);
}

const render = () => {
        
    const top = outer.scrollTop;
    const bottom = top + outer.offsetHeight;
    
    dataTable.innerHTML = '';
    
    appendPlaceholder(dataTable, top);
    
    
    let i = Math.floor(top / cellHeight);

	for (i; i < bottom / cellHeight; i++) {
    	const row = rows[i];
        if (row) {
    		const tr = document.createElement('tr');
	        dataTable.appendChild(tr);
        
    	    row.forEach(column => {
        		const td = document.createElement('td');
            	td.textContent = column;
                td.title = 'I am pretty responsive';
            	tr.appendChild(td);
        	});
        }
    }
    
    // Bottom padder
    const bottomPadderHeight = rows.length * cellHeight - bottom;
    appendPlaceholder(dataTable, bottomPadderHeight);
    
};

outer.addEventListener('scroll', e => {
	render();
});

render();