// inspiration from https://observablehq.com/@tomgp/editable-table function tableView(editor, properties) { const { features, container, render, projection, options, dispatch } = editor; const form = html`

`; const sticky = ' style="position:sticky;top:0;background:white"'; function update() { const theader = `#${properties .map(d => `${d}`) .join("")}`, tbody = features.features .map( (e, i) => `${i}${properties .map(d => `${e.properties[d] || ""}`) .join("")}` ) .join(""); d3.select(form).html( `${theader}${tbody}` ); d3.select(form) .selectAll("[contenteditable]") .on("focus", function() { const tr = d3.event.target.parentElement, rank = +tr.getAttribute("data-rank"), feature = features.features[rank]; features.features.forEach(d => delete d.selected); feature.selected = true; dispatch.call("zoomTo", null, feature); }); } update(); form.addEventListener("input", listen); dispatch.on("update.table", message => { if (message !== "table") update(); }); form.value = features; return form; function listen(event) { const tr = event.target.parentElement, rank = +tr.getAttribute("data-rank"), feature = features.features[rank]; tr.querySelectorAll("td").forEach((td, j) => { const property = properties[j], text = td.textContent || ""; if (text) feature.properties[property] = String(Number(text)) === text ? Number(text) : text; else delete feature.properties[property]; }); dispatch.call("data", null, "table"); event.preventDefault(); } }