30:[] 2e:{"title":"Table","cells":[{"id":0,"value":"md`# Table\n\nTabular data (\\`Array\\`) to html (\\`\\`).\n\n## Todo\n\nFork me to make a _spreadsheet_ some day...\n\n- [ ] type hints for editing\n- [ ] basic editing\n - [ ] \"edit cell\"\n - [ ] \"edit row\"\n\n## Use\n\n\\`data\\` is assumed to be an array of objects, with each object having the same shape.\n\n\\`\\`\\`js\nimport {table} from '@forresto/table'\ntable(demoData)\ndemoData = [\n {tag: 'One', occurences: 1, color: 'rgb(110, 64, 170)'}, \n {tag: 'Two', occurences: 2, color: 'rgb(175, 240, 91)'},\n {tag: 'Three', occurences: 2, color: 'rgb(255, 94, 99)'},\n {tag: 'Four', occurences: 4, color: 'rgb(26, 199, 194)'},\n]\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"data = table(demoData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":719,"value":"demoData = [\n { tag: 'One', occurences: 1, color: 'rgb(110, 64, 170)' },\n { tag: 'Two', occurences: 2, color: 'rgb(175, 240, 91)' },\n { tag: 'Three', occurences: 2, color: 'rgb(255, 94, 99)' },\n { tag: 'Four', occurences: 4, color: 'rgb(26, 199, 194)' }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"function table(arrayOfRecords) {\n const keys = Object.keys(arrayOfRecords[0]);\n const table = html`

`;\n\n const thead = html``;\n table.appendChild(thead);\n thead.appendChild(html``;\n table.appendChild(tbody);\n arrayOfRecords.forEach((record, index) => {\n const tr = html``;\n tbody.appendChild(tr);\n tr.appendChild(html`

index`);\n keys.forEach(key => {\n thead.appendChild(html`	${key}`);\n });\n\n const tbody = html`
${index}`);\n keys.forEach(key => {\n tr.appendChild(html`	${record[key]}`);\n });\n });\n\n // TODO: click to edit\n return table;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":627,"value":"graph = html ` `","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}