30:T1805,function Table( data, { columns = data.columns, // array of column names rows = 11.5, // maximum number of rows to show sort, // name of column to sort by, if any reverse = false, // if sorting, true for ascending and false for descending format, // object of column name to format function align = {}, // object of column name to left, right, or center width = {}, // object of column name to width layout = "fixed" // or "auto" if you prefer } = {} ) { data = arrayof(data); if (columns === undefined) columns = columnsof(data); format = formatof(format, data, columns); align = alignof(align, data, columns); let n = rows * 2; let currentSortHeader = null, currentReverse = false; let selected = new Set(); let anchor = null, head = null; let index = Uint32Array.from(data, (_, i) => i); const tbody = html``; const tr = html`${columns.map(column => html``)}`; const theadr = html`${columns.map((column) => html` resort(event, column)}>${column}`)}`; const root = html`

${data.length || columns.length ? theadr : null} ${tbody}

`; function inputof(tr) { return tr.firstChild.firstChild; } function orderof(th) { return th.firstChild; } function render(i, j) { return Array.from(index.subarray(i, j), i => { const itr = tr.cloneNode(true); itr.classList.toggle("selected", selected.has(i)); const input = inputof(itr); input.onclick = reselect; input.checked = selected.has(i); input.name = i; for (let j = 0; j < columns.length; ++j) { let column = columns[j]; let value = data[i][column]; if (!defined(value)) continue; value = format[column](value); if (!(value instanceof Node)) value = document.createTextNode(value); itr.childNodes[j + 1].appendChild(value); } return itr; }); } function unselect(i) { let j = index.indexOf(i); if (j < tbody.childNodes.length) { const tr = tbody.childNodes[j]; tr.classList.toggle("selected", false); inputof(tr).checked = false; } selected.delete(i); } function select(i) { let j = index.indexOf(i); if (j < tbody.childNodes.length) { const tr = tbody.childNodes[j]; tr.classList.toggle("selected", true); inputof(tr).checked = true; } selected.add(i); } function* range(i, j) { i = index.indexOf(i), j = index.indexOf(j); if (i < j) while (i <= j) yield index[i++]; else while (j <= i) yield index[j++]; } function first(set) { return set[Symbol.iterator]().next().value; } function reselectAll(event) { if (selected.size) { for (let i of selected) unselect(i); anchor = head = null; if (event.detail) event.currentTarget.blur(); } else { selected = new Set(index); for (const tr of tbody.childNodes) { tr.classList.toggle("selected", true); inputof(tr).checked = true; } } reinput(); } function reselect(event) { let i = +this.name; if (event.shiftKey) { if (anchor === null) anchor = selected.size ? first(selected) : index[0]; else for (let i of range(anchor, head)) unselect(i); head = i; for (let i of range(anchor, head)) select(i); } else { anchor = head = i; if (selected.has(i)) { unselect(i); anchor = head = null; if (event.detail) event.currentTarget.blur(); } else { select(i); } } reinput(); } function resort(event, column) { const th = event.currentTarget; let compare; if (currentSortHeader === th && currentReverse) { orderof(currentSortHeader).textContent = ""; currentSortHeader.classList.toggle("sort", false); currentSortHeader = null; currentReverse = false; compare = ascending; } else { if (currentSortHeader === th) { currentReverse = true; } else { if (currentSortHeader) { orderof(currentSortHeader).textContent = ""; currentSortHeader.classList.toggle("sort", false); } currentSortHeader = th, currentReverse = false; } const order = currentReverse ? descending : ascending; compare = (a, b) => order(data[a][column], data[b][column]); orderof(th).textContent = currentReverse ? "▾" : "▴"; th.classList.toggle("sort", true); } index.sort(compare); selected = new Set(Array.from(selected).sort(compare)); root.scrollTo(0, 0); while (tbody.firstChild) tbody.firstChild.remove(); tbody.append(...render(0, n = rows * 2)); anchor = head = null; reinput(); } function reinput() { theadr.classList.toggle("selected", selected.size); inputof(theadr).checked = selected.size; revalue(); root.dispatchEvent(new CustomEvent("input")); } function revalue() { root.value = Array.from(selected.size ? selected : index, i => data[i]); root.value.columns = columns; } root.onscroll = () => { if (root.scrollHeight - root.scrollTop < 400 && n < data.length) { tbody.append(...render(n, n += rows)); } }; if (data.length) { tbody.append(...render(0, n)); } else { tbody.append(html`${columns.length ? html`` : null}No results.`); } revalue(); if (sort !== undefined) { let i = columns.indexOf(sort); if (i >= 0) { if (reverse) currentSortHeader = theadr.childNodes[i + 1]; resort({currentTarget: theadr.childNodes[i + 1]}, columns[i]); } } if (!Table.style) Table.style = document.body.appendChild(style); return root; }31:T400,style = html``32:[] 2e:{"title":"NYC Vaccine List Location Data","cells":[{"id":0,"value":"md`# NYC Vaccine List Location Data\n\nSourced from one of the API calls this page is making: https://vaccinefinder.nyc.gov/locations, couldn't figure out which one so I'm pulling from react devtools in the meantime.\n\nThis is a quick data munging page to help with collaborative data sharing for nycvaccinelist.com .\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"md`By default, all columns are visible. Only the first dozen rows are initially visible, but you can scroll to see more. Column headers are fixed for readability.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"rawLocations = fetch('https://gistcdn.githack.com/hydrosquall/bf72b223dbd68a8a506a30b412e10426/raw/12f4bf34a643c7db47d219c20922cf53f7a97769/facilities.json').then(d => d.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":675,"value":"locations = rawLocations.map(loc => loc.attributes)","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"Table(locations)","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"md`To show a subset of columns, or to reorder them, pass an array of property names as the *columns* option. By default, columns are inferred from *data*.columns if present, and otherwise by iterating over the data to union the property names.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"Table(locations, {columns: [\"FacilityName\", \"Phone\", \"Borough\"]})","pinned":true,"hidden":false,"mode":"ojs"},{"id":363,"value":"md`By default, rows are displayed in input order. You can change the order by specifying the name of a column to *sort* by, and optionally the *reverse* option for descending order. The male Gentoo penguins are the largest in this dataset, for example. Undefined values go to the end.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"// Table(locations, {sort: \"body_mass_g\", reverse: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":370,"value":"md`Tables are [view-compatible](/@observablehq/introduction-to-views): using the viewof operator, you can use a table to select rows and refer to them from other cells, say to chart a subset of the data. Click the checkbox on the left edge of a row to select it, and click the checkbox in the header row to clear the selection. You can shift-click to select a range of rows.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"// viewof selection = Table(penguins)","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"// selection // Try selecting rows above!","pinned":true,"hidden":false,"mode":"ojs"},{"id":536,"value":"md`The table component assumes that all values in a given column are the same type, and chooses a suitable formatter based on the first non-null value in each column. Numbers are formatted using [*number*.toLocaleString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString); dates are formatted in ISO8601; undefined and NaN values are empty; everything else is displayed as-is. To override the default formatting, pass *format* options for the desired columns.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"// Table(penguins, {\n// format: {\n// culmen_length_mm: x => x.toFixed(1),\n// culmen_depth_mm: x => x.toFixed(1),\n// sex: x => x === \"MALE\" ? \"M\" : x === \"FEMALE\" ? \"F\" : \"\"\n// }\n// })","pinned":true,"hidden":false,"mode":"ojs"},{"id":596,"value":"md`There’s a similar *width* option if you want to give certain columns specific widths. The table component defaults to a *fixed* layout; this improves performance and avoids reflow when scrolling, but you can switch to an *auto* layout if you prefer sizing columns based on content.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"md`There’s also an *align* option if you want to change the text-alignment of cells. By default, number columns are right-aligned, and everything else is left-aligned.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"md`---\n\n## Implementation\n\nBelow is the source code for this component. Read it to learn more about how this component works, or fork this notebook and send us a suggestion to make it better! For related work, see [@tmcw/tables/2](https://observablehq.com/@tmcw/tables/2).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"id = DOM.uid(\"table\").id","pinned":true,"hidden":false,"mode":"ojs"},{"id":461,"value":"function formatof(base = {}, data, columns) {\n const format = Object.create(null);\n for (const column of columns) {\n if (column in base) {\n format[column] = base[column];\n continue;\n }\n switch (type(data, column)) {\n case \"number\": format[column] = formatNumber; break;\n case \"date\": format[column] = formatDate; break;\n default: format[column] = formatDefault; break;\n }\n }\n return format;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":637,"value":"function alignof(base = {}, data, columns) {\n const align = Object.create(null);\n for (const column of columns) {\n if (column in base) {\n align[column] = base[column];\n } else if (type(data, column) === \"number\") {\n align[column] = \"right\";\n }\n }\n return align;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":638,"value":"function type(data, column) {\n for (const d of data) {\n const value = d[column];\n if (value == null) continue;\n if (typeof value === \"number\") return \"number\";\n if (value instanceof Date) return \"date\";\n return;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"function columnsof(data) {\n const columns = {};\n for (const row of data) {\n for (const name in row) {\n columns[name] = true;\n }\n }\n return Object.keys(columns);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"function arrayof(x) {\n return typeof x === \"object\" && \"length\" in x\n ? x // Array, TypedArray, NodeList, array-like\n : Array.from(x); // Map, Set, iterable, string, or anything else\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"function pad(value, width) {\n return (value + \"\").padStart(width, \"0\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":467,"value":"function formatDefault(value) {\n return value + \"\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":464,"value":"function formatNumber(value) {\n return value.toLocaleString(\"en\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"function formatYear(year) {\n return year < 0 ? \"-\" + pad(-year, 6) : year > 9999 ? \"+\" + pad(year, 6) : pad(year, 4);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"function ascending(a, b) {\n return defined(b) - defined(a) || (a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"function descending(b, a) {\n return defined(a) - defined(b) || (a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":217,"value":"function defined(d) {\n return d != null && !Number.isNaN(d);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"function formatDate(date) {\n var hours = date.getUTCHours(),\n minutes = date.getUTCMinutes(),\n seconds = date.getUTCSeconds(),\n milliseconds = date.getUTCMilliseconds();\n return isNaN(date) ? \"Invalid Date\"\n : formatYear(date.getUTCFullYear(), 4) + \"-\" + pad(date.getUTCMonth() + 1, 2) + \"-\" + pad(date.getUTCDate(), 2)\n + (milliseconds ? \"T\" + pad(hours, 2) + \":\" + pad(minutes, 2) + \":\" + pad(seconds, 2) + \".\" + pad(milliseconds, 3) + \"Z\"\n : seconds ? \"T\" + pad(hours, 2) + \":\" + pad(minutes, 2) + \":\" + pad(seconds, 2) + \"Z\"\n : minutes || hours ? \"T\" + pad(hours, 2) + \":\" + pad(minutes, 2) + \"Z\"\n : \"\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"html = (await require(\"htl@0.2\")).html","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}