30:T63c,viewof example = dataEditor( [ { qty: 1, name: "Peas", type: "vegetable" }, { qty: 50, name: "Apples", type: "fruit" }, { qty: 12, name: "Bananas", type: "fruit" }, { qty: 13, name: "Pears", type: "fruit" }, { qty: 63, name: "Broccoli", type: "vegetable" }, { qty: 10, name: "Cabbage", type: "vegetable" }, { qty: 14, name: "Starfruit", type: "fruit" }, { qty: 53, name: "Passionfruit", type: "fruit" }, { qty: 12, name: "Carrots", type: "vegetable" }, { qty: 1, name: "Potatoes", type: "vegetable" }, { qty: 0, name: "Cabbage", type: "vegetable" }, { qty: 44, name: "Lemons", type: "fruit" }, { qty: 54, name: "Nuts", type: "vegetable" }, { qty: 12, name: "Sugar cane", type: "vegetable" }, { qty: 12, name: "Coconuts", type: "fruit" }, { qty: 13, name: "Seeds", type: "fruit" }, { qty: 63, name: "Corn", type: "vegetable" }, { qty: 10, name: "Grapefruit", type: "vegetable" } ], { columns: ["qty", "type", "name"], format: { qty: (d) => Inputs.range([0, 100], { value: d }), type: (d) => Inputs.select(["fruit", "vegetable"], { value: d }) }, width: { qty: "100px", type: "100px", name: "100%" }, tableclass: "veg", stylesheet: ` .veg { background-color: #fff; } .col-qty form { width: 100px } .col-type form { width: 100px } .veg input[type=range] { display: none; } `, select: selectable, delete: deletable } )31:T16c8,function dataEditor( data, options = { select: true, delete: true } ) { if (options.select !== false) options.select = true; if (options.delete !== false) options.delete = true; let dragging = null; let dragover = null; const selected = Inputs.input({}); if (!options.tableclass) options.tableclass = options.tableClass || "dataeditor"; if (!options.columns) options.columns = Object.keys(data[0]); const row = (row) => { const rowEl = view` ${handle()} ${ options.select ? html`` : "" } ${ options.delete ? htl.html`` : "" } ${[ "...", Object.fromEntries( options.columns.map((column, ci) => [ column, view`${[ "...", (options.format || {})[column] ? options.format[column](row[column]) : Inputs.text({ value: row[column], disabled: true }) ]} ` ]) ) ]} `; return rowEl; }; const table = view` ${options.select ? html`` : ""} ${options.delete ? html`` : ""} ${options.columns.map( (column, ci) => view`` )} ${["data", data.map(row), row]}

			${column}

`; table.addEventListener("input", (evt) => { const checkboxes = [...table.querySelectorAll(".rowselect")]; Object.keys(selected.value).forEach((i) => { console.log(i); if (i >= checkboxes.length || !checkboxes[i].checked) { delete selected.value[i]; } }); checkboxes.map((c, i) => { if (c.checked) selected.value[i] = true; }); }); function splice(index, numDelete, ...items) { const newData = [...table.data]; newData.splice( index, numDelete, ...items.map((item, itemIndex) => row(item)) ); table.data.value = newData.map((sv) => sv.value); } function ondragstart(event) { var target = getTr(event.target); dragging = target; if (event.dataTransfer) event.dataTransfer.setData("text/plain", null); } function ondragover(event, eventTarget, clientY) { event.preventDefault(); var target = getTr(eventTarget || event.target); if (!target) { reset(dragover); dragover = undefined; } var bounding = target.getBoundingClientRect(); var offset = bounding.y + bounding.height / 2; reset(dragover); dragover = target; if ((clientY || event.clientY) - offset > 0) { target.style["border-bottom"] = dragBorder; target.style["border-top"] = topBorder; target.inserting = "below"; } else { target.style["border-top"] = dragBorder; target.style["border-bottom"] = bottomBorder; target.inserting = "above"; } } function ondragleave(event) { reset(dragover); dragover = null; } function ondrop(event) { event.preventDefault(); const index = [...table.data].findIndex((e) => e === dragging); const newData = [ ...[...table.data].slice(0, index), ...[...table.data].slice(index + 1, table.data.length) ]; if (dragover.inserting === "below") { const insert = newData.findIndex((e) => e === dragover.nextSibling); newData.splice(insert === -1 ? newData.length : insert, 0, dragging); } else { const insert = newData.findIndex((e) => e === dragover); newData.splice(insert, 0, dragging); } reset(dragover); dragover = null; debugger; table.data.value = _.cloneDeep(newData.map((row) => row.value)); const newEvent = new Event("input", { bubbles: true }); newEvent.isUser = true; table.dispatchEvent(newEvent); } function ontouchstart(event) { if (event.target.draggable) { ondragstart(event); } } function ontouchmove(event) { if (dragging) { const target = document.elementFromPoint( event.touches[0].clientX, event.touches[0].clientY ); if (target) { ondragover(event, target, event.touches[0].clientY); } else { reset(dragover); dragover = null; } } } function ontouchend(event) { if (dragging) { if (dragover) { ondrop(event); } ondragleave(event); } dragging = null; } return Object.assign(table, { splice, ondragstart, ondragover, ondragleave, ondrop, oninput, ontouchstart, ontouchmove, ontouchend }); }32:[{"id":"750f4d84fdf27f1cf9bb03d3257b72e3bb4403bfe0aeadc51d8525771b2198b04ce664098300a779c78c5c0d046e446809f76dba37a866572856dd17b196a763","href":"https://static.observableusercontent.com/files/750f4d84fdf27f1cf9bb03d3257b72e3bb4403bfe0aeadc51d8525771b2198b04ce664098300a779c78c5c0d046e446809f76dba37a866572856dd17b196a763","name":"drag_indicator_black_24dp.svg","type":"image/svg+xml","lastModified":1625480715186.163,"size":450}] 2e:{"title":"Data Editor","cells":[{"id":0,"value":"md`# Data Editor \n\nReorderable, editable, selectable, table of views that is also backwritable. \n\n~~~js\n import {dataEditor} from '@tomlarkworthy/dataeditor'\n~~~\n\nThanks [@jashkenas/select-order-input](/@jashkenas/select-order-input) for figuring out the tricky drag business.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"md`## Example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"md`${example.data.map(e => `${e.type}: **${e.name}**(${e.qty})`).join(\", \")}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"md`### Open Issues\n\n- does not play well with [shareview](/@tomlarkworthy/shareview), see [repro](https://observablehq.com/d/3f62e88eeeac7418) (more [shareview](/@tomlarkworthy/shareview)'s issues)\n - selection breaks for no good reason (and is not backwritable anyway).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"example","pinned":false,"hidden":false,"mode":"ojs"},{"id":775,"value":"viewof selectable = Inputs.toggle({\n label: \"select?\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"viewof deletable = Inputs.toggle({\n label: \"delete?\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"md`You can add add/delete rows by assigning to the **data** subview. This can be useful for external input forms to add/remove elements. Note it does not raise an input event itself`","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"{\n let newItem = view`\n ${[\n \"name\",\n Inputs.text({\n label: \"name\",\n placeholder: \"enter item name\"\n })\n ]}\n ${[\n \"qty\",\n Inputs.range([0, 100], {\n label: \"qty\",\n value: 1,\n step: 1\n })\n ]}\n\n ${[\n \"type\",\n Inputs.select([\"fruit\", \"vegetable\"], {\n label: \"type\"\n })\n ]}\n\n ${Inputs.button(\"Add Item\", {\n reduce: () => {\n example.data = [...example.data, newItem.value];\n viewof example.dispatchEvent(new Event(\"input\", { bubbles: true }));\n }\n })}\n `;\n\n return newItem;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"function reset(li) {\n if (li) {\n li.style['border-top'] = topBorder;\n li.style['border-bottom'] = bottomBorder;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"function getTr(target) {\n if (!target) return false;\n while (\n target.nodeName.toLowerCase() != 'tr' &&\n target.nodeName.toLowerCase() != 'table'\n ) {\n target = target.parentNode;\n }\n if (\n target.nodeName.toLowerCase() == 'table' ||\n target.parentNode.nodeName.toLowerCase() == 'thead'\n ) {\n return false;\n } else {\n return target;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"bottomBorder = 'solid 1px #ddd'","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"topBorder = 'solid 1px transparent'","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"dragBorder = 'solid 3px blue'","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"htl.html`${handle()}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"handle = {\n const template = document.createElement(\"template\");\n // Attaching the SVG as file had problems, we we jsut put it in as a literal for now\n // https://github.com/observablehq/feedback/issues/202\n template.content.appendChild(\n html``\n );\n return () => template.content.cloneNode(true);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"import { view } from \"@tomlarkworthy/view\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"import { footer } from \"@endpointservices/footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":772,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}