28:null 29:["$","title",null,{"children":"Fancy-Tablex | easz | Observable"}] 2e:T1824,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)); function mdTable(data) { //console.log(data); let lines = []; let idxAsKey = Array.isArray(data); for (let [key, value] of Object.entries(data)) { let k = idxAsKey ? `*^#${key}*` : key; if (typeof value === 'object') { lines.push(`${k}|${mdTable(value).outerHTML}`); } else { lines.push(`${k}|${value}`); } } // beware of the hack: https://stackoverflow.com/questions/17536216/create-a-table-without-a-header-in-markdown return md` []() | ---|--- ${lines.join('\n')} `; } let dataKeys = data => [...new Set(data.map(x => Object.keys(x)).flat(1))]; let dataTypes = (data, key) => data.filter(x => key in x)[0] ? typeof data.filter(x => key in x)[0][key] : undefined; let { humanize, nully, limit, columns, renders, enableFilter, enableCSVDownload, sortable } = Object.assign( { humanize: defaultHumanize, nully: () => '-', limit: 250, columns: dataKeys(data), renders: [], enableFilter: data.length > 50, enableCSVDownload: true, sortable: 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: dataTypes(data, key), render: val => { if (decimalNumber && typeof val === 'number') { return val.toFixed(decimalNumber); } else if (val == null || val == undefined) { return nully(val); } else if (typeof val === 'object') { return mdTable(val).outerHTML; // return JSON.stringify(val); } return val; } }, column, renders.filter(r => r.key && r.key === key)[0] ); }); const renderTable = () => { return `${data .filter(filter) .slice(0, limit) .map( (datum, idx) => ` ${columns .map(c => { let val = datum[c.key]; return `${c.render(val, idx, datum)}`; }) .join('')} ` ) .join('')}`; }; const output = html`

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

${c.name}

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

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

` : '' }

${ enableFilter ? '

🔎

' : '' }

`; output.value = dataO; yield output; if (sortable) 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(data); 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(data); }); } 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', '📥' ) ); } }2f:T745,loader = html` Loading...`30:[] 2c:{"id":"2f74e1f2d99a926e","slug":"fancy-table","title":"Fancy-Tablex","thumbnail":"f81808fa6f76947a1c40fcf51190c049696f8e60382091b5f3b97df1eb6f449e","access_level":"public","create_time":"$D2021-06-04T20:10:14.849Z","update_time":"$D2021-06-08T07:03:16.227Z","view_time":null,"first_public_time":"$D2021-06-04T20:36:08.867Z","has_unpublished_edits":null,"fork":{"id":"28d99bd25984bfd9","slug":"fancy-table","title":"Fancy-Table³","owner":{"id":"f133cd64bec97972","login":"henrythasler","name":""}},"stars":1,"starred":false,"owner":{"type":"team","id":"955771df3d257190","login":"easz","name":"","avatar_url":"https://avatars-next.observableusercontent.com/d0f550a2263338034839220e8fc0db2732b688fe60a694152ddab6d0deb59456","tier":"starter_2024"},"version":539,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"57136f3cc685a62d","login":"easz","name":"","avatar_url":"https://avatars-next.observableusercontent.com/d0f550a2263338034839220e8fc0db2732b688fe60a694152ddab6d0deb59456","tier":null}],"members":[{"type":"individual","id":"57136f3cc685a62d","login":"easz","name":"","avatar_url":"https://avatars-next.observableusercontent.com/d0f550a2263338034839220e8fc0db2732b688fe60a694152ddab6d0deb59456","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Fancy-Tablex","cells":[{"id":332,"value":"md`# Fancy-Table^x`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`\n### WIP\nYet another enhancement to [@henrythasler/fancy-table](https://observablehq.com/@henrythasler/fancy-table), [@awendland/fancy-table](https://observablehq.com/@awendland/fancy-table), [@gampleman/table](https://observablehq.com/@gampleman/table) and [Tom @tmcw/fancy-tables](https://beta.observablehq.com/@tmcw/fancy-tables).\n\n## Usage\n\nFirst import this into your notebook:\n\n~~~javascript\nimport { table } from \"@easz/fancy-table\"\n~~~\n\nThe simplest usage is to simply pass in an array of objects, and the second optional argument can customize output:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"table(\n [\n { first_name: 'John', last_name: 'Doe', age: 32, sex: 'M', work_exp: 7 },\n {\n first_name: 'Martin',\n last_name: 'Smith',\n age: 30,\n sex: 'M',\n work_exp: 3\n },\n {\n first_name: 'Billy',\n last_name: 'Noble',\n age: 43,\n sex: 'M',\n work_exp: 20\n },\n { first_name: 'Luna', last_name: 'Bauer', age: 17, sex: 'F' },\n { first_name: 'Ellen', last_name: 'Nolan', age: 27, sex: 'F' }\n ],\n {\n sortable: true,\n nully: () => 'No data',\n limit: 500,\n enableFilter: true,\n enableCSVDownload: true,\n columns: [\n {\n key: 'age',\n // render function can access index and the whoe object!\n render: (val, index, obj) => val + (obj.sex === 'M' ? ' ♂ ' : ' ♀ ')\n },\n 'last_name',\n 'first_name',\n {\n key: 'work_exp',\n name: 'working experience (years)'\n }\n ]\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"table(\n [\n { first_name: 'John', last_name: 'Doe', age: 32, sex: 'M' },\n { first_name: 'Martin', last_name: 'Smith', age: 30, sex: 'M' },\n { first_name: 'Billy', last_name: 'Noble', age: 100, sex: 'M' },\n { first_name: 'Luna', last_name: 'Bauer', age: 17, sex: 'F' }\n ],\n {\n renders: [\n // 'renders' can override 'columns' options\n {\n key: 'sex',\n render: (val, i, o) => (o.sex === 'M' ? ' ♂ ' : ' ♀ ')\n }\n ]\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"md`An object can be displayed as well. The top-most object keys will appear in the 'key' column`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"table({\n id1: {\n first_name: 'John',\n last_name: 'Doe',\n age: 32,\n work_day: ['Mon', 'Tue', 'Wed']\n },\n id2: {\n first_name: 'Martin',\n last_name: 'Smith',\n age: 30,\n work_day: ['Wed', 'Fri']\n },\n id3: {\n first_name: 'Billy',\n last_name: 'Bow',\n age: 100,\n work_day: ['Sat', 'Sun', 'Mon']\n }\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(fetch(json_url).then(d => d.json()))","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":464,"value":"md`And cells containing object or array can be shown accordingly with index number #`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$2e","pinned":true,"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":"$2f","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":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"