45:["$","title",null,{"children":"Minimal and fast table | Robert Pettersson | Observable"}] 4d:[] 49:{"id":"7e84b221e4c783e3","slug":"super-turbo-omega-fast-table","title":"Minimal and fast table","thumbnail":"6ad5b8b30897bdf4c3b0fb79cf848365f866e22b8e442eda587573d032bdb9eb","access_level":"public","create_time":"$D2020-10-16T17:17:56.556Z","update_time":"$D2021-06-02T12:41:02.320Z","view_time":null,"first_public_time":"$D2020-10-16T19:59:51.316Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b8f6ddb4a89bf145","login":"lemonode","name":"Robert Pettersson","avatar_url":"https://avatars-next.observableusercontent.com/5c38da744c71f234af8b0e738618c092e04b1c9b63a1177ff67c401654a0bb20","tier":"starter_2024","bio":"Programmer","followed_by_you":false,"follows_you":false},"version":391,"publish_version":391,"role":null,"authored":false,"authors":[{"type":"individual","id":"f3f56c4ef203da4d","login":"lemonode","name":"Robert Pettersson","avatar_url":"https://avatars-next.observableusercontent.com/5c38da744c71f234af8b0e738618c092e04b1c9b63a1177ff67c401654a0bb20","tier":null,"bio":"Programmer","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"f3f56c4ef203da4d","login":"lemonode","name":"Robert Pettersson","avatar_url":"https://avatars-next.observableusercontent.com/5c38da744c71f234af8b0e738618c092e04b1c9b63a1177ff67c401654a0bb20","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Minimal and fast table","cells":[{"id":0,"value":"md`# Minimal and fast table`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"table = {\n const node = document.createElement(\"table\");\n return node;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"N = 10000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"md`## Why?\nUsually, tables with more than 1000 entries can take an obnoxious ammount of time to load, and paginated tables are really annoying to navigate. This type of table gets the best of both worlds, loads quickly and navigates like a regular html table, the only downside is that you can't use the built-in ctrl+f functionality that most browsers have, but this can of course be fairly trivially fixed with a custom search bar.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"columns = [\"Name\", \"ID\", \"Team\", \"Whatever\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"function random_data(n, col, obj = {}) {\n col.map(c => obj[c] = [...Array(n).keys()]);\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"data = random_data(N, columns)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"{\n table.insertAdjacentHTML(\"afterend\", `

`);\n table.nextSibling.appendChild(table);\n table.insertAdjacentHTML(\"beforeend\", thead(\"\"));\n tbody(data);\n table.insertAdjacentHTML(\"afterend\", `

`);\n table.parentNode.style.height = table.offsetHeight + \"px\";\n table.parentNode.onscroll = (e) => scroll(e.target.scrollTop);\n return table;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"function thead(html) {\n html += ``;\n columns.map(c => html += `${c}`);\n html += ``;\n return html;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":" function tbody(data) {\n let node = document.createElement(\"tbody\");\n table.appendChild(node);\n let len = data[columns[0]].length;\n let max = 300; // window.innerHeight - this.offsetTop;\n for (let i = 0; i < len; i += 1) {\n let tr = document.createElement(\"tr\");\n columns.map(c => tr.innerHTML += `${data[c][i]}`);\n node.appendChild(tr);\n if (table.offsetHeight + tr.offsetHeight >= max) {\n let row = tr.offsetHeight;\n table.row = row;\n tr.remove();\n table.height = (len * row) - table.offsetHeight;\n break;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"function scroll(top) {\n let id = table.id == \"\" ? \"table\" : `#${table.id}`;\n let items = document.querySelectorAll(`${id} td`);\n let index = 0;\n for (let i = 0; i < data[columns[0]].length; i++) {\n index = i;\n let curr = i * table.row;\n if (top == 0) break;\n if (curr > top) {\n break;\n }\n }\n for (let td = 0, i = 0; td < items.length; td++, i++) {\n i == columns.length ? (i = 0, index += 1) : 0;\n items[td].innerHTML = data[columns[i]][index];\n }\n table.parentNode.style.height = table.offsetHeight + \"px\";\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"html`\n`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 44:null