31:null 32:["$","title",null,{"children":"Tables | Tom MacWright | Observable"}] 37:T757,md`# Tables I truly believe that _tables are visualization_, and great tables are both extraordinarily effective and very hard to achieve with system defaults. This notebook is part of a continuing effort to make excellent tables available without lots of nitpicky tweaks - or rather, that I try to automate all the nitpicky tweaks. Out of the box, this notebook achieves some of those nitpicky details: good typography for numbers, filters, querying, and a paging interface that can tolerate big datasets. There’s more ground to cover, though, and I’d love to get some help from folks who have done this sort of thing a lot before. Versus the original tables notebook, this has some revisions. - REMOVED: The idea of formatters is dropped, and in its place you can specify html cells. It's better to transform your data into one predictable form than to have transformers built into the table abstraction. - ADDED: Paging is robust, having been built in the early stages of the notebook. If a table has fewer than 5 pages, each page is linked. If more, then pages are accessible through a select box. - ADDED: Smart facets and querying. - IMPROVED: Smarter number formatting. Combines locale formatting with a somewhat smarter system to determine how many decimal points should be included per number, so that numbers like 20 and 20.1 align correctly. - IMPROVED: Instead of using a monospace font for numbers, use tabular numbers in a system font. This works on Mac OS with SF, and I’ll eventually create backward-compatibility. --- A first example: the \`mtcars\` dataset. Notice the special number formatting - that 21mpg is formatted as 21.0 to match the other MPG readings. The numbers use tabular figures, so that characters like 1 have the same width as 'wider' characters like 0, and they all line up. Click the search icon to filter and search the dataset.`38:T687,style = () => html``39: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; }3a: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; }3b:[] 35:{"id":"60ea978986bfd25e","slug":"tables/2","title":"Tables","thumbnail":"e9430ffa9b0cefd8ad0f58294716e26f9878d435d84b5612d1f44c5e4ab6b32e","access_level":"public","create_time":"$D2018-11-11T22:01:06.550Z","update_time":"$D2020-04-28T15:53:49.918Z","view_time":null,"first_public_time":"$D2018-11-12T02:13:09.603Z","fork":{"id":"5a59b457a394ff1c","slug":"tables","title":"Tables","owner":{"id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright"}},"stars":98,"starred":false,"owner":{"type":"team","id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":"starter_2024"},"version":1624,"publish_version":1624,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null}],"members":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":52,"collection":null,"type":"notebook","body":{"title":"Tables","cells":[{"id":0,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"table(mtcars, { title: \"Cars\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":964,"value":"table(aapl, { title: \"Apple stock price\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1449,"value":"md`Tables also now work as views:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"viewof diamondsPage = table(diamonds, { title: \"Diamonds\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1620,"value":"md`Average price of this selection: $${new Intl.NumberFormat().format(\n diamondsPage.data.reduce((sum, d) => sum + d.price, 0) /\n diamondsPage.data.length\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1451,"value":"md`Average price of this page: $${new Intl.NumberFormat().format(\n diamondsPage.reduce((sum, d) => sum + d.price, 0) / diamondsPage.length\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1554,"value":"md`An example of a very wide dataset, with over 200 columns. This is a work in progress, because there are a few connected behaviors for this case that I’d like to tune:\n\n- The table assumes 100% width instead of being constricted to 640px.\n- The table is allowed to scroll, but the search / paging bar does not.\n- Potentially in this case it’s preferable to add vertical lines between columns, like in GitHub Gists?`","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":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1570,"value":"function recommendVerticalBorders(table) {\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}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"$39","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":1077,"value":"search(diamonds, detectColumns(diamonds), {}, \"\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"$3a","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":1405,"value":"detectColumns([{ name: \"Tom\", age: 17 }])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"function detectColumns(data) {\n let columns = new Map();\n for (let row of data) {\n for (let key in row) {\n if (columns.has(key)) continue;\n if (\n typeof row[key] === \"object\" &&\n row[key] !== null &&\n \"html\" in row[key]\n ) {\n columns.set(key, { type: \"html\" });\n } else {\n if (row[key] instanceof Date) {\n columns.set(key, { type: \"date\" });\n } else {\n columns.set(key, { type: typeof row[key] });\n }\n }\n }\n }\n for (let [key, { type }] of columns) {\n if (type === \"number\") {\n let decimalsRequired = 0;\n for (let row of data) {\n if (countDecimals(row[key]) > decimalsRequired) {\n decimalsRequired = countDecimals(row[key]);\n }\n if (decimalsRequired == 4) break;\n }\n columns.get(key).decimalsRequired = decimalsRequired;\n }\n }\n return [...columns.entries()];\n}","pinned":false,"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":1615,"value":"table([\n { name: \"A\", count: 1 },\n { name: \"B\", count: 2 },\n { name: \"C\", count: null }\n])","pinned":true,"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":552,"value":"mtcars = require(\"@observablehq/mtcars\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"diamonds = require(\"@observablehq/diamonds\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"aapl = require(\"@observablehq/aapl\")","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"},{"id":1463,"value":"md`TODO\n\n- Histograms?\n- Sortable columns\n- Automatically allow x-overflow if columns are wide\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 36:"$35:body"