default format for arrays, objects, null and explicit undefined

closes #166 #164

Author: Fil

src/format.js

@@ -1,4 +1,5 @@
 import {format as isoformat} from "isoformat";
+import {html} from "htl";
 
 // Note: use formatAuto (or any other localized format) to present values to the
 // user; stringify is only intended for machine values.
@@ -8,16 +9,32 @@ export function stringify(x) {
 
 export const formatLocaleAuto = localize(locale => {
   const formatNumber = formatLocaleNumber(locale);
-  return value => value == null ? ""
+  return value => value === null ? gray("null")
+    : value === undefined ? gray("undefined")
+    : Number.isNaN(value) ? gray(NaN)
     : typeof value === "number" ? formatNumber(value)
     : value instanceof Date ? formatDate(value)
+    : Array.isArray(value) ? formatArray(value)
+    : typeof value === "object" ? formatObject(value)
     : `${value}`;
 });
 
 export const formatLocaleNumber = localize(locale => {
-  return value => value === 0 ? "0" : value.toLocaleString(locale); // handle negative zero
+  return value => value === 0 ? "0" // handle negative zero
+    : value === null ? gray("null")
+    : value === undefined ? gray("undefined")
+    : Number.isNaN(value) ? gray(NaN)
+    : value.toLocaleString(locale);
 });
 
+function formatObject(o) {
+  return `{${Object.entries(o).map(([key, value]) => `${key}: ${value}`).join(", ")}}`;
+}
+
+function formatArray(value) {
+  return `[${value.slice(0, 100).map(formatAuto).join(", ")}]`;
+}
+
 export const formatAuto = formatLocaleAuto();
 
 export const formatNumber = formatLocaleNumber();
@@ -45,3 +62,7 @@ export function localize(f) {
   let key = localize, value;
   return (locale = "en") => locale === key ? value : (value = f(key = locale));
 }
+
+function gray(label) {
+  return html`<span class=gray>${label}`;
+}

src/style.css

@@ -242,6 +242,10 @@ form.__ns__-table {
   padding: 3px 6.5px 3px 0;
 }
 
+.__ns__-table td .gray {
+  color: #888;
+}
+
 .__ns__-table tr > :not(:first-of-type) {
   padding-left: var(--length2);
 }

src/table.js

@@ -4,7 +4,7 @@ import {length} from "./css.js";
 import {formatDate, formatLocaleAuto, formatLocaleNumber} from "./format.js";
 import {newId} from "./id.js";
 import {identity} from "./identity.js";
-import {defined, ascending, descending} from "./sort.js";
+import {ascending, descending} from "./sort.js";
 
 const rowHeight = 22;
 
@@ -130,8 +130,8 @@ function initialize(
     input.value = i;
     if (d != null) for (let j = 0; j < columns.length; ++j) {
       let column = columns[j];
+      if (!(column in d)) continue;
       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);