2c:null 2d:["$","title",null,{"children":"Tables | Cobus Theunissen | Observable"}] 32:T752,style = () => html``33:T120b,function table(inputData, options = {}) { let { page, pageSize, date, title, debug } = { pageSize: 15, page: 0, date: "day", title: "", debug: false, ...options }; let first = true; let searching = false; let filters = {}; let searchQuery = ""; let adata = Array.from(inputData); // Normalize iterables to plain arrays. let detectedColumns = detectColumns(adata); let supercontainer = html`

`; 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} ${ hasNext || hasPrev ? 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").scrollWidth > 640) { supercontainer.classList.add("wide"); } if (recommendVerticalBorders(supercontainer)) { supercontainer.classList.add("narrow-columns"); } }, 0); first = false; } } render(); return supercontainer; }34:T5c9,function search(data, detectedColumns, filters, searchQuery) { let dropdowns = getDropdowns(data, detectedColumns); let filterContainer = html`

`; let closeButton = html`

${xCircleIcon()}

`; let query = html`

`; let container = html`

${query} ${filterContainer}

${closeButton}

`; closeButton.onclick = () => { container.value = { filters: {}, searchQuery: "" }; container.dispatchEvent(new CustomEvent("closefilters")); }; let setSearchQuery = () => { searchQuery = query.querySelector("input").value; container.value = { filters, searchQuery }; container.dispatchEvent(new CustomEvent("setfilters")); }; query.querySelector("button").onclick = setSearchQuery; query.querySelector("input").onsearch = setSearchQuery; query.querySelector("input").value = searchQuery; [...dropdowns.entries()].map(([column, choices]) => { let d = dropdown(column, choices, filters); filterContainer.appendChild(d); d.addEventListener("setfilters", e => { e.stopPropagation(); filters[column] = e.target.value; if (filters[column] === undefined) delete filters[column]; container.value = { filters, searchQuery }; container.dispatchEvent(new CustomEvent("setfilters")); }); }); return container; }35:T40f,function detectColumns(data) { let columns = new Map(); for (let row of data) { for (let key in row) { if (columns.has(key)) continue; if ( typeof row[key] === "object" && row[key] !== null && "html" in row[key] ) { columns.set(key, { type: "html" }); } else { if (row[key] instanceof Date) { columns.set(key, { type: "date" }); } else { if (isNumeric(row[key])) { columns.set(key, { type: "number" }); } else { columns.set(key, { type: typeof row[key] }); } } } } } for (let [key, { type }] of columns) { if (type === "number") { let decimalsRequired = 0; for (let row of data) { if (countDecimals(row[key]) > decimalsRequired) { decimalsRequired = countDecimals(row[key]); } if (decimalsRequired == 4) break; } columns.get(key).decimalsRequired = decimalsRequired; } } return [...columns.entries()]; }36:[] 30:{"id":"f1b2b44ead05bc35","slug":"tables","title":"Tables","thumbnail":"40019e9d8ffc73a1e981cb4f80c16b9934a758d217de2db6f95c4f295e92fa11","access_level":"public","create_time":"$D2020-04-28T01:45:10.565Z","update_time":"$D2020-07-04T03:58:31.546Z","view_time":null,"first_public_time":"$D2020-04-28T01:45:15.407Z","has_unpublished_edits":null,"fork":{"id":"60ea978986bfd25e","slug":"tables/2","title":"Tables","owner":{"id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5097ed23e9872f77","login":"cobus","name":"Cobus Theunissen","avatar_url":"https://avatars-next.observableusercontent.com/4a17a065d7a0f5f9a64a852f7b26a4f875c2ff69eb17264c3bd9f81e69285c05","tier":"starter_2024"},"version":1706,"publish_version":1706,"role":null,"authored":false,"authors":[{"type":"individual","id":"c1daf2951ad616fb","login":"cobus","name":"Cobus Theunissen","avatar_url":"https://avatars-next.observableusercontent.com/4a17a065d7a0f5f9a64a852f7b26a4f875c2ff69eb17264c3bd9f81e69285c05","tier":null}],"members":[{"type":"individual","id":"c1daf2951ad616fb","login":"cobus","name":"Cobus Theunissen","avatar_url":"https://avatars-next.observableusercontent.com/4a17a065d7a0f5f9a64a852f7b26a4f875c2ff69eb17264c3bd9f81e69285c05","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Tables","cells":[{"id":0,"value":"md`# Tables\nversion of Tom MacWright's famous tables notebook with the following enhancements:\n- More compact display for large (wide tables) \n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1486,"value":"helpfullTable = table(await datasets.HELPfull.data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1570,"value":"function recommendVerticalBorders(table) {\n return true;\n let narrowCells = 0;\n for (let cell of table.querySelectorAll(\"tbody tr:first-child td\")) {\n if (cell.offsetWidth < 50) narrowCells++;\n if (narrowCells > 8) return true;\n \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1071,"value":"function getDropdowns(inputData, detectedColumns) {\n let dropdowns = new Map();\n // Find columns with under 25 distinct values and\n // avoiding columns with string values over 100.\n for (let [column] of detectedColumns) {\n let uniqueValues = new Set();\n for (let row of inputData) {\n uniqueValues.add(row[column]);\n if (uniqueValues.size > 25) break;\n if (typeof row[column] === \"string\" && row[column].length > 100) break;\n }\n if (uniqueValues.size !== 26) {\n dropdowns.set(column, uniqueValues);\n }\n }\n let ret = new Map();\n for (let [column, choices] of dropdowns) {\n ret.set(\n column,\n [...choices].sort((a, b) => (typeof a === \"string\" ? b > a : b - a))\n );\n }\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1136,"value":"filterStyles = `\n.search {\n padding:5px 0;\n font-family: var(--sans-serif);\n font-size: 80%;\n border-bottom:1px solid #ccc;\n max-width: 640px;\n display: flex;\n justify-content: space-between;\n}\n.search .search-dropdown select {\n font-family: var(--sans-serif);\n}\n.search .search-dropdown {\n padding-right:10px;\n}\n.search .query {\n padding-bottom: 5px;\n}\n.search .filters {\n display: flex;\n flex-wrap: wrap;\n}\n.search .button {\n color: #aaa;\n}\n.search .button:hover {\n color: #000;\n cursor: pointer;\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1095,"value":"function dropdown(column, choices, filters) {\n choices = [...choices];\n let id = idx();\n let elem = html``;\n if (filters[column] !== undefined) {\n elem.querySelector(\"select\").value = choices.indexOf(filters[column]);\n }\n elem.querySelector(\"select\").onchange = e => {\n elem.value = choices[e.target.value];\n elem.dispatchEvent(new CustomEvent(\"setfilters\"));\n };\n return elem;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1105,"value":"idx = (() => {\n let i = 0;\n return () => ++i;\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"function row(data, detectedColumns, options) {\n return html`\n ${detectedColumns.map(column => td(data, column, options))}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"tdStyles = ({\n number: \"text-align:right;font-variant-numeric:tabular-nums;\",\n date: \"font-variant-numeric:tabular-nums;\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"function td(data, [key, { type, decimalsRequired }], options) {\n let rep = data[key];\n let title = \"\";\n if (rep === null) {\n rep = \"null\";\n } else if (rep === undefined) {\n rep = \"–\";\n } else {\n if (type === \"number\") {\n rep = new Intl.NumberFormat(\"en-US\", {\n minimumFractionDigits: decimalsRequired\n }).format(data[key]);\n }\n if (type === \"date\") {\n title = data[key].toLocaleString();\n switch (options.date) {\n case \"day\":\n rep = basicDayFormat(data[key]);\n break;\n case \"year\":\n rep = basicYearFormat(data[key]);\n break;\n case \"full\":\n rep = data[key].toLocaleString().toLowerCase();\n break;\n }\n }\n }\n return html`${rep}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"function header(detectedColumns) {\n return html`\n ${detectedColumns.map(th)}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"thStyles = ({\n number: \"text-align:right;\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"function th([key, { type }]) {\n return html`${key}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1693,"value":"isNumeric = (num) => {\n num = \"\" + num; //coerce num to be a string\n return !isNaN(num) && !isNaN(parseFloat(num));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1389,"value":"countDecimals = number =>\n number != null\n ? Math.min((number.toString().split(\".\")[1] || \"\").length, 4)\n : 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"leftIcon = () =>\n svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"rightIcon = () =>\n svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1056,"value":"searchIcon = () =>\n svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1297,"value":"xCircleIcon = () =>\n svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":986,"value":"basicDayFormat = d => {\n const month = (d.getMonth() + 1).toString().padStart(2, \"0\");\n const day = d\n .getDate()\n .toString()\n .padStart(2, \"0\");\n const year = d.getFullYear();\n return `${year}-${month}-${day}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1017,"value":"basicYearFormat = d => {\n return d.getFullYear().toString();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1466,"value":"import {datasets} from \"@tmcw/rdatasets\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 31:"$30:body"