table = (data, options) => { const defaultOptions = ({ columns: {}, style: 'normal', paged: 25, columnOrder: [], omitColumns: [] }) const identity = i => i const th = (c, sortKey, sortDirection, sortable) => { let { options: { title } } = c; let sortIndicator = sortKey && sortDirection ? "↑" : "↓"; let arrow = html`${sortIndicator}`; let displayedTitle = title !== undefined ? title : c.key; if (c.type === 'number' || c.type === 'boolean') { return html` ${arrow}${displayedTitle} ` } return html` ${displayedTitle}${arrow} `; } 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 = getColumns(options.columnOrder, Object.keys(data[0]), options.omitColumns).map(key => { const opts = options.columns[key] || {}; return { key: key, type: opts.type || typeof data[0][key], options: opts }; }); function bake() { if (sortKey) { data = orderBy(data, sortKey, sortDirection ? 'asc' : 'desc') } 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; } let addClass = '' if (c.type === 'boolean') { let boolVal = typeof displayValue === 'boolean' ? displayValue : !displayValue ? '' : displayValue if (typeof boolVal === 'string') { if (/false|no/.test(boolVal)) { boolVal = false } else if (/yes|true|1/i.test(boolVal)) { boolVal = true } else { boolVal = '' } } addClass = `cell-value-boolean-${boolVal.toString()}` } return html`` })} `)}


${i + 1}	${displayValue}

${pages > 1 ? 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; }