table = (data, options) => { options = Object.assign({}, defaultOptions, options); const {sortable, rank, paged} = options; let sortKey = undefined; let sortDirection = true; let page = 0; 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; }); } let rows = data.slice(page * paged, (page * paged) + paged); let pages = Math.ceil(data.length / paged); return html`

${options.header === false ? `` : html` ${rank ? html`` : ''} ${columns.map(c => { return th(c, sortKey, sortDirection, sortable); })} `} ${rows.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}

${pages ? html`` : ''}

`; } let dom = bake(); function rerender() { dom.firstChild.remove(); dom.appendChild(bake().firstChild); } dom.addEventListener('click', e => { if (e.target.tagName === 'TH' && sortable) { if (sortKey == e.target.dataset.key) { sortDirection = !sortDirection; } sortKey = e.target.dataset.key; rerender(); } if (e.target.tagName === 'BUTTON') { if (e.target.dataset.action) { switch (e.target.dataset.action) { case 'next': page++, rerender(); break; case 'previous': page--, rerender(); break; } } else if (e.target.dataset.page) { page = parseInt(e.target.dataset.page), rerender(); } } }); return dom; }