30:T131c,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, maxHeight } = Object.assign( { humanize: defaultHumanize, nully: () => '-', limit: 250, columns: Object.keys(data[0]), enableFilter: data.length > 50, enableCSVDownload: true, maxHeight: 400 }, options || {} ); if (typeof maxHeight === 'number') maxHeight = `${maxHeight}px`; 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], accessor: row => row[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 => { return `${c.render(c.accessor(datum))}`; }) .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', '⬇' ) ); } }31:T745,loader = html` Loading...`32:[] 2e:{"title":"Table","cells":[{"id":0,"value":"md`# Table\n\nThis is an extension of [Fancy Tables](https://beta.observablehq.com/@tmcw/fancy-tables) by @tmcw.\n\nThe main advantage here is that:\n\n1. This can be used without creating a cell. Simply by passing in data and then creating a variable with \\`viewof\\` one can get both a nice view of the data and the data as a variable.\n2. Because of this, if the data is a promise (i.e. a fetch), a loading animation will be rendered. Support for streaming data may come in the future.\n3. The data can be sorted by clicking the table headers.\n4. The styling is designed for overflow scrolling.\n\n## Usage\n\nFirst import this into your notebook:\n\n~~~javascript\nimport { table } from \"@gampleman/table\"\n~~~\n\nThe simplest usage is to simply pass in an array of objects:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":82,"value":"md`You can also pass in something that produces a promise:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"table(\n fetch(json_url).then(d => d.json())\n)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":10,"value":"viewof data = table(\n fetch(json_url).then(d => d.json())\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"md`Finally, you can use the second argument to customize the output:`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":4,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":58,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"defaultHumanize = str => str.replace(/[-_]/g, ' ')","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"json_url = 'https://gist.githubusercontent.com/gampleman/0903af7279c6c60e6d5c85ca33361960/raw/b21a86ceb808307208970b24045cfe9bc9a6f744/rainlevels.json'","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"CSV = require('json2csv@4.0.0').then(a => a.parse)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}