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 = []; for (let [key, value] of Object.entries(data)) { if (typeof value === "object") { lines.push(`${key}|${mdTable(value).outerHTML}`); } else { lines.push(`${key}|${value}`); } } // beware of the hack: https://stackoverflow.com/questions/17536216/create-a-table-without-a-header-in-markdown return md` []() | ---|--- ${lines.join("\n")} `; } 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); } 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 ); }); const renderTable = () => { return `${data .filter(filter) .slice(0, limit) .map( (datum, idx) => ` ${columns .map((c) => { let val = datum[c.key]; return `${c.render(val)}`; }) .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; 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", "📥" ) ); } }