diff --git a/src/table.js b/src/table.js index 0b588bf..659756d 100644 --- a/src/table.js +++ b/src/table.js @@ -6,6 +6,7 @@ import {newId} from "./id.js"; import {identity} from "./identity.js"; import {defined, ascending, descending} from "./sort.js"; +const primitive = Symbol("primitive"); const rowHeight = 22; export function table(data, options = {}) { @@ -61,6 +62,7 @@ function initialize( if (layout === undefined) layout = columns.length >= 12 ? "auto" : "fixed"; format = formatof(format, data, columns, locale); align = alignof(align, data, columns); + const primitiveFormat = formatLocaleAuto(locale); let array = []; let index = []; @@ -97,7 +99,7 @@ function initialize( const tbody = html``; const tr = html`${columns.map(() => html``)}`; - const theadr = html`${columns.map((column) => html` resort(event, column)}>${header && column in header ? header[column] : column}`)}`; + const theadr = html`${columns.map((column) => html` resort(event, column)}>${header && column in header ? header[column] : column === primitive ? "•••" : column}`)}`; root.appendChild(html.fragment`${minlengthof(1) || columns.length ? theadr : null} ${tbody} @@ -128,13 +130,19 @@ function initialize( input.onclick = reselect; input.checked = selected.has(i); input.value = i; - if (d != null) for (let j = 0; j < columns.length; ++j) { - let column = columns[j]; - let value = d[column]; - if (!defined(value)) continue; - value = format[column](value, i, data); + if (isPrimitive(d)) { + value = primitiveFormat(d); if (!(value instanceof Node)) value = document.createTextNode(value); - itr.childNodes[j + 1].appendChild(value); + itr.childNodes[1].appendChild(value); + } else { + for (let j = 0; j < columns.length; ++j) { + let column = columns[j]; + let value = d[column]; + if (!defined(value)) continue; + value = format[column](value, i, data); + if (!(value instanceof Node)) value = document.createTextNode(value); + itr.childNodes[j + 1].appendChild(value); + } } tbody.append(itr); } @@ -229,7 +237,7 @@ function initialize( currentReverse = event.altKey; } const order = currentReverse ? descending : ascending; - compare = (a, b) => order(array[a][column], array[b][column]); + compare = (a, b) => isPrimitive(array[a]) || isPrimitive(array[b]) ? order(array[a], array[b]) : order(array[a][column], array[b][column]); orderof(th).textContent = currentReverse ? "▾" : "▴"; } index.sort(compare); @@ -374,9 +382,18 @@ function lengthof(data) { function columnsof(data) { const columns = new Set(); for (const row of data) { - for (const name in row) { - columns.add(name); + if (row == null) continue; + if (row != null && isPrimitive(row)) { + columns.add(primitive); + } else { + for (const name in row) { + columns.add(name); + } } } - return Array.from(columns); + return Array.from(columns).sort((a, b) => (b === primitive) - (a === primitive)); +} + +function isPrimitive(row) { + return typeof row === "string" || typeof row === "boolean" || typeof row === "number" || row == null; } diff --git a/test/inputs/tables.js b/test/inputs/tables.js index 5e8b27a..ba70d14 100644 --- a/test/inputs/tables.js +++ b/test/inputs/tables.js @@ -28,3 +28,11 @@ export function tableCustomHeader() { export function tableCustomHeaderHtml() { return Inputs.table([{foo: "hello"}], {header: {foo: html`Foo`}}); } + +export function tablePrimitives() { + return Inputs.table(["hello", "world", 1, true, false, null]); +} + +export function tableWithNulls() { + return Inputs.table([{foo: "hello"}, null, undefined, {foo: 1}]); +} diff --git a/test/output/tablePrimitives.html b/test/output/tablePrimitives.html new file mode 100644 index 0000000..450b686 --- /dev/null +++ b/test/output/tablePrimitives.html @@ -0,0 +1,37 @@ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
•••
hello
world
1
true
false
+ + \ No newline at end of file diff --git a/test/output/tableWithNulls.html b/test/output/tableWithNulls.html new file mode 100644 index 0000000..a161d09 --- /dev/null +++ b/test/output/tableWithNulls.html @@ -0,0 +1,29 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
foo
hello
1
+ +
\ No newline at end of file