2e:null 2f:["$","title",null,{"children":"Fancy-Table | Alex Wendland | Observable"}] 34:T1225,table = async function*(dataPromise, options = {}) { yield loader; const dataO = await Promise.resolve(dataPromise); let filter = () => true; const data = Array.isArray(dataO) ? dataO : Object.entries(dataO).map(([key,v]) => Object.assign({key}, v)); let {humanize, nully, limit, columns, enableFilter, enableCSVDownload} = Object.assign({ humanize: defaultHumanize, nully: () => '-', limit: 250, columns: Object.keys(data[0]), enableFilter: data.length > 50, enableCSVDownload: true }, (options || {})); columns = columns.map(column => { let key; if (typeof column == 'string') { key = column; column = {key}; } else { key = column.key; } const decimalNumber = data.reduce((memo, d) => { if (typeof d[key] === 'number') { let frac = (d[key] || '').toString().split('.')[1]; if (frac) return Math.max(memo, frac.length); } return memo; }, 0); return Object.assign({ name: humanize(key), type: typeof data[0][key], render: val => { if (decimalNumber && typeof val === 'number') { return val.toFixed(decimalNumber); } if (val == null || val == undefined) { return nully(val); } return val; } }, column); }); const renderTable = () => { return `${data.filter(filter).slice(0, limit).map(datum => ` ${columns.map(c => { let val = datum[c.key]; return `${c.render(val)}`; }).join('')} `).join('')}`; }; const output = html`

${columns.map(c => ``).join('')} ${renderTable()}

${c.name}

${data.filter(filter).length > limit ? `

This table has been truncated from ${data.length} rows to ${limit}

` : ''}

${enableFilter ? '

🔎

' : ''}

` output.value = dataO; yield output; output.querySelectorAll('th').forEach(th => th.addEventListener('click', () => { const key = th.dataset.key; const order = th.dataset.order === 'ascending' ? -1 : 1; data.sort((a,b) => a[key] > b[key] ? order : b[key] > a[key] ? -order : 0); output.querySelector('tbody').innerHTML = renderTable(); th.dataset.order = order === -1 ? 'descending' : 'ascending'; })); if (enableFilter) { const search = output.querySelector('input[type=search]'); search.addEventListener('input', e => { filter = parseQuery(search.value, columns); output.querySelector('tbody').innerHTML = renderTable(); }); } if (enableCSVDownload) { output.appendChild( DOM.download( new Blob([ CSV(data,{ fields: columns.map(c => ({label: c.name, value: c.key})) })] , {type: "application/json"}), 'data.csv', '⬇')); } }35:T745,loader = html` Loading...`36:[] 32:{"id":"42ff2c5c2ce01500","slug":"fancy-table","title":"Fancy-Table","thumbnail":"5cb9bccfcd31dfd1e8a6ee57a618fcebfdec880256e3223470b548ab01ab486d","access_level":"public","create_time":"$D2019-06-05T21:50:57.683Z","update_time":"$D2019-06-05T22:08:28.941Z","view_time":null,"first_public_time":"$D2019-06-05T21:52:41.507Z","has_unpublished_edits":null,"fork":{"id":"715b4c45cc45c3b3","slug":"table","title":"Table","owner":{"id":"a2f700b6ce27b844","login":"gampleman","name":"Jakub Hampl"}},"stars":0,"starred":false,"owner":{"type":"team","id":"49b89ac1cfd0de20","login":"awendland","name":"Alex Wendland","avatar_url":"https://avatars-next.observableusercontent.com/dac8b58342989ff596b0c3e14f4d85b61e1dc1977915a86ee241310bdaf1bce1","tier":"starter_2024"},"version":221,"publish_version":221,"role":null,"authored":false,"authors":[{"type":"individual","id":"2db5bf09abe0fd07","login":"awendland","name":"Alex Wendland","avatar_url":"https://avatars-next.observableusercontent.com/dac8b58342989ff596b0c3e14f4d85b61e1dc1977915a86ee241310bdaf1bce1","tier":null}],"members":[{"type":"individual","id":"2db5bf09abe0fd07","login":"awendland","name":"Alex Wendland","avatar_url":"https://avatars-next.observableusercontent.com/dac8b58342989ff596b0c3e14f4d85b61e1dc1977915a86ee241310bdaf1bce1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Fancy-Table","cells":[{"id":0,"value":"md`# Fancy-Table\n\nThis is an extension of [Jakub Hampl's extension](https://observablehq.com/@gampleman/table) of [Fancy Tables](https://beta.observablehq.com/@tmcw/fancy-tables) by @tmcw.\n\nThe change is that:\n\n1. Table styling is scoped under a \"fancy-table\" class, so it doesn't accidentally get applied to other elements on the page.\n\n## Usage\n\nFirst import this into your notebook:\n\n~~~javascript\nimport { table } from \"@awendland/fancy-table\"\n~~~\n\nThe simplest usage is to simply pass in an array of objects:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"table([\n {first_name: 'John', last_name: 'Doe'},\n {first_name: 'Martin', last_name: 'Smith'}\n]) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`You can also pass in something that produces a promise:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"table(\n fetch(json_url).then(d => d.json())\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"md`If you use \\`viewof\\`, you can also assign the data produced by the first argument in the same cell:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"viewof data = table(\n fetch(json_url).then(d => d.json())\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"md`Finally, you can use the second argument to customize the output:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"table(\n fetch(json_url).then(d => d.json()),\n {\n nully: () => 'No data',\n limit: 500,\n enableFilter: false,\n enableCSVDownload: true,\n columns: [{ \n key: 'key',\n name: 'Station ID',\n render: val => `${val}`\n }, \n 'last1hrf', \n 'rainfall',\n 'rainfallmsg', \n {\n key: 'rfstationstatus', \n name: 'RF Status'\n }]\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"parseQuery = (q, headers) => {\n if (q == '') {\n return () => true;\n } else if (q.match(/[=<>]/)) {\n try {\n const code = headers.reduce((q, {key, name}) => q.replace(new RegExp(`\\\\b(${key}|${name})\\\\b`, 'g'), `data['${key}']`), q).replace(/([^=<>!])=([^=<>!]|$)/g, '$1===$2');\n return new Function('data', `try { return ${code} } catch(e) { return false; }` );\n } catch (e) {\n return () => true;\n }\n } else {\n const re = new RegExp(q, 'i');\n \treturn data => headers.some(({key}) => (data[key] || '').toString().match(re))\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"defaultHumanize = str => str.replace(/[-_]/g, ' ')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"json_url = 'https://gist.githubusercontent.com/gampleman/0903af7279c6c60e6d5c85ca33361960/raw/b21a86ceb808307208970b24045cfe9bc9a6f744/rainlevels.json'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"CSV = require('json2csv@4.0.0').then(a => a.parse)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"