2d:null 2e:["$","title",null,{"children":"Editable table | Tom Pearson | Observable"}] 33:[] 31:{"id":"817ad7ce3be50f3c","slug":"editable-table","title":"Editable table","thumbnail":"27e7bf3a00ec84db6c6147a2fb73a02f1d295b792fa05225b1dbae1c3bfa5baf","access_level":"public","create_time":"$D2019-01-21T09:29:22.164Z","update_time":"$D2019-01-22T10:47:28.300Z","view_time":null,"first_public_time":"$D2019-01-21T13:43:55.014Z","has_unpublished_edits":null,"fork":false,"stars":27,"starred":false,"owner":{"type":"team","id":"45d8dac961c18abd","login":"tomgp","name":"Tom Pearson","avatar_url":"https://avatars-next.observableusercontent.com/26cbbccc572a8a25c540387278c92aae1c68384373da7f85ef1cd717c7fbf381","tier":"starter_2024"},"version":90,"publish_version":90,"role":null,"authored":false,"authors":[{"type":"individual","id":"08c8ac6bee0bc7e8","login":"tomgp","name":"Tom Pearson","avatar_url":"https://avatars-next.observableusercontent.com/26cbbccc572a8a25c540387278c92aae1c68384373da7f85ef1cd717c7fbf381","tier":null}],"members":[{"type":"individual","id":"08c8ac6bee0bc7e8","login":"tomgp","name":"Tom Pearson","avatar_url":"https://avatars-next.observableusercontent.com/26cbbccc572a8a25c540387278c92aae1c68384373da7f85ef1cd717c7fbf381","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":26,"collection":null,"type":"notebook","body":{"title":"Editable table","cells":[{"id":0,"value":"md`# Editable table`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"table = html`\n\n\n\n\n

Borough name	code	value
Brent	1	1234
Camden	2	432
Haringey	3	423

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"tableData = Generators.observe(notify => {\n const keyinput = event => notify(parseTableData(table));\n table.addEventListener(\"input\", keyinput, false);\n notify(parseTableData(table));\n return () => window.removeEventListener(\"input\", keyinput);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"function parseTableData(table) {\n const data = [];\n table.querySelectorAll(\"tr\")\n .forEach((row, i)=>{\n data.push(row.innerText.split(/[\\t\\n]/g));\n })\n\n const formattedData = data.reduce((accumulator, row, i)=>{\n if(i==0){\n accumulator.properties = row;\n }else{\n const rowObject = {};\n accumulator.properties.forEach((key,i)=>{\n rowObject[key] = row[i];\n });\n accumulator.push(rowObject);\n }\n return accumulator;\n },[]);\n return formattedData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"