`; function render() { let data; if (Object.keys(filters).length || searchQuery) { data = adata.filter(obj => { for (let [col, value] of Object.entries(filters)) { if (obj[col] !== value) return false; } if (searchQuery) { let strValue = ""; for (let key of Object.keys(obj)) { strValue += obj[key]; } if (!strValue.toLowerCase().includes(searchQuery.toLowerCase())) { return false; } } return true; }); } else { data = adata; } // If we're on page 5 and then filter and yield // fewer than 5 pages. if (page * pageSize > data.length) { page = Math.floor(data.length / pageSize); } let start = page * pageSize; let end = Math.min(data.length, (page + 1) * pageSize); let pageCount = pageSize ? Math.ceil(data.length / pageSize) : 0; let chunk = data.slice(start, end); let hasPrev = page > 0; let hasNext = end < data.length; let prevButton = html`

${leftIcon()}

`; let nextButton = html`

${rightIcon()}

`; prevButton.onclick = () => { page--; render(); }; nextButton.onclick = () => { page++; render(); }; let pageLinks = html`

`; if (pageCount < 5) { for (let i = 0; i < pageCount; i++) { let elem = html`

${i + 1}

`; elem.onclick = () => { page = i; render(); }; pageLinks.appendChild(elem); } } else { const select = html`

Page

`; select.querySelector("select").value = page; pageLinks.appendChild(select); select.onchange = e => { page = parseInt(e.target.value, 10); render(); }; } let searchToggle = html`

${searchIcon()}

`; searchToggle.querySelector(".button").onclick = () => { searching = !searching; render(); }; let navigation = html``; let tbody = html``; let table = html`${header(detectedColumns)}${tbody}

`; let searchUI = searching ? search(adata, detectedColumns, filters, searchQuery) : ""; let container = html`

${searchUI} ${hasNavigation ? navigation : "" }

${table}

${style()}

`; for (let d of chunk) { tbody.appendChild(row(d, detectedColumns, { date })); } if (searchUI) { searchUI.addEventListener("setfilters", e => { ({ filters, searchQuery } = e.target.value); render(); }); searchUI.addEventListener("closefilters", e => { ({ filters, searchQuery } = e.target.value); searching = false; render(); }); } supercontainer.innerHTML = ""; supercontainer.appendChild(container); supercontainer.value = chunk; supercontainer.value.data = data; supercontainer.dispatchEvent(new CustomEvent("input")); if (first) { setTimeout(() => { // If the table wants to be wide, let it be wide and scrollable. if (supercontainer.querySelector("table").offsetWidth > 640) { supercontainer.classList.add("wide"); } if (recommendVerticalBorders(supercontainer)) { supercontainer.classList.add("narrow-columns"); } }, 0); first = false; } } render(); return supercontainer; }