30:T15fc,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', () => { output.querySelectorAll('th').forEach(th_inner => { th_inner.innerHTML = th_inner.innerHTML.replace('▼', '').replace('▲', ''); }); const key = th.dataset.key; console.log(th.dataset); 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'; th.innerHTML += th.dataset.order == 'descending' ? '▼': '▲'; }) ); 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) { const opts = {}; const parser = new json2csv.Parser({ delimiter: options.delimiter || ',', }); let quoted_data = data.map(row => { return _.mapObject(row, (val, key) => { if (!val) return '"-"'; return '"' + String(val) + '"'; }) }); console.log(quoted_data); let download_button = DOM.download( new Blob( [ parser.parse(data, { fields: columns.map(c => ({ label: c.name, value: c.key })), }) ], { type: "application/json" } ), options.filename || 'data.csv', '⬇' ); download_button.setAttribute('class', 'gampleman_table_download') output.appendChild(download_button); } }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 @gampleman.\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.\n5. You can still render a download button with appropriate style.\n\n## Usage\n\nFirst import this into your notebook:\n\n~~~javascript\nimport { table } from \"@stephenshank/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":227,"value":"And here is a download button whose CSS is not altered:","pinned":false,"hidden":false,"mode":"md"},{"id":231,"value":"b = {\n const blob = new Blob([JSON.stringify({a:1,b:2}, null, 2)], {type: \"text/json\"});\n return DOM.download(blob, 'test.json', 'Test');\n}","pinned":false,"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":"json2csv = import('https://cdn.skypack.dev/@json2csv/plainjs@6.1.2?min')","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"formatters = import('https://cdn.skypack.dev/@json2csv/formatters@6.1.2?min')","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"_ = require('underscore')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}