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', '⬇')); } }