let tbody, style;
let rows = [], view = [], viewSize = 20, page = 0, time = 0;
const load = fRead => {
console.timeEnd('FILE LOAD');
console.time('GRAB ROWS');
let thead, trows = '', table = fRead.result
.replace(/<tr[^]+<\/tr>/i, text => (trows += text) && '');
console.timeEnd('GRAB ROWS');
console.time('PARSE/INSERT TABLE & STYLE');
const html = document.createElement('div');
html.innerHTML = table;
table = html.querySelector('table');
if (!table || !trows) {
setInfo('NO DATA FOUND');
return;
}
if (style = html.querySelector('style'))
document.head.appendChild(style);
table.textContent = '';
el('viewport').appendChild(table);
console.timeEnd('PARSE/INSERT TABLE & STYLE');
console.time('PREPARE ROWS ARRAY');
rows = trows.split('<tr').slice(1).map(text => ({
html: '<tr' + text, text,
//text: text.match(/>.*<\/td>/gi).map(s => s.slice(1, -5)).join(' '),
}));
console.timeEnd('PREPARE ROWS ARRAY');
console.time('RENDER TABLE');
table.appendChild(thead = document.createElement('thead'));
table.appendChild(tbody = document.createElement('tbody'));
thead.innerHTML = rows[0].html;
view = rows = rows.slice(1);
renew();
console.timeEnd('RENDER TABLE');
console.timeEnd('INIT');
};
const reset = info => {
el('info').textContent = info ?? '';
el('viewport').textContent = '';
style?.remove();
style = null;
tbody = null;
view = rows = [];
};
const pages = () => Math.ceil(view.length / viewSize) - 1;
const renew = () => {
if (!tbody)
return;
console.time('RENDER VIEW');
const i = page * viewSize;
tbody.innerHTML = view.slice(i, i + viewSize)
.map(row => row.html).join('');
console.timeEnd('RENDER VIEW');
setInfo(`
rows total: ${rows.length},
rows match: ${view.length},
pages: ${pages()}, page: ${page}
`);
};
const gotoPage = num => {
el('page').value = page = Math.max(0, Math.min(pages(), num));
renew();
};
const fileInput = () => {
reset('LOADING...');
const fRead = new FileReader();
fRead.onload = load.bind(null, fRead);
console.time('INIT');
console.time('FILE LOAD');
fRead.readAsText(el('file').files[0]);
};
const fileReset = () => {
reset();
el('file').files = new DataTransfer().files;
};
const setInfo = text => el('info').innerHTML = text;
const setView = e => {
let value = +e.target.value;
value = Number.isNaN(value * 0) ? 20 : value;
e.target.value = viewSize = Math.max(1, Math.min(value, 100));
renew();
};
const setPage = e => {
const page = +e.target.value;
gotoPage(Number.isNaN(page * 0) ? 0 : page);
};
const setFilter = e => {
const filter = e.target.value;
let match;
try {
match = new RegExp(filter);
} catch (e) {
setInfo(e);
return;
}
view = rows.filter(row => match.test(row.text));
page = 0;
renew();
};
const keys = {'PageUp': -1, 'PageDown': 1};
const scroll = e => {
const dir = e.key ? keys[e.key] ?? 0 : Math.sign(-e.deltaY);
if (!dir)
return;
e.preventDefault();
gotoPage(page += dir);
};
const el = id => document.getElementById(id);
el('file').addEventListener('input', fileInput);
el('reset').addEventListener('click', fileReset);
el('view').addEventListener('input', setView);
el('page').addEventListener('input', setPage);
el('filter').addEventListener('input', setFilter);
el('viewport').addEventListener('keydown', scroll);
el('viewport').addEventListener('wheel', scroll);
div {
display: flex;
flex: 1;
align-items: center;
white-space: nowrap;
}
thead td,
tbody tr td:first-child {
background: grey;
color: white;
}
td { padding: 0 .5em; }
#menu > * { margin: 0 .25em; }
#file { min-width: 16em; }
#view, #page { width: 8em; }
#filter { flex: 1; }
#info { padding: .5em; color: red; }
<div id="menu">
<span>FILE:</span>
<input id="file" type="file" accept="text/html">
<button id="reset">RESET</button>
<span>VIEW:</span><input id="view" type="number" value="20">
<span>PAGE:</span><input id="page" type="number" value="0">
<span>FILTER:</span><input id="filter">
</div>
<div id="info"></div>
<div id="viewport" tabindex="0"></div>