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 @@
+
\ 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 @@
+
\ No newline at end of file