maketable = (data, options) => { options = Object.assign({}, defaultOptions, options); const {sortable, rank} = options; let sortKey = undefined; let sortDirection = true; if (sortable && rank) { throw new Error('A table can either be ranked or sortable, but not both'); } let columns = Object.keys(data[0]).map(key => { const opts = options.columns[key] || {}; return { key: key, type: opts.type || typeof data[0][key], options: opts }; }); function bake() { if (sortKey) { data = data.slice().sort((a, b) => { let as = a[sortKey]; let bs = b[sortKey]; // make this sort stable if (as == bs) return JSON.stringify(a) > JSON.stringify(b); let res = as > bs; if (sortDirection) res = !res; return res; }); } return html`

${options.header === false ? `` : html` ${rank ? html`` : ''} ${columns.map(c => { return th(c, sortKey, sortDirection, sortable); })} `} ${data.map((row, i) => html` ${rank ? html`` : ''} ${columns.map(c => { let displayValue = (c.options.formatter || identity)(row[c.key], i, row); if (displayValue instanceof window.HTMLElement && displayValue.tagName == 'TD') { return displayValue; } return html`` })} `)}


${i + 1}	${displayValue}

`; } let dom = bake(); dom.addEventListener('click', e => { if (e.target.tagName === 'TH' && sortable) { if (sortKey == e.target.dataset.key) { sortDirection = !sortDirection; } sortKey = e.target.dataset.key; dom.firstChild.remove(); dom.appendChild(bake().firstChild); } }); return dom; }