{"metadata":{"version":1,"view":"all"},"components":[{"type":"js","name":"generate-title","visible":false,"text":"return '<h3>Title</h3>';","display":"codemirror","mode":"htmlgen","runOnBlur":true,"runOnLoad":true},{"type":"data","name":"table-data","visible":false,"data":[[1,2,3],[4,5,6],[7,8,9]],"params":{"format":"headerList","display":"tsv","form":"listOfObjects","headers":["A","B","C"],"afterChange":"Hyperdeck.Run('generate-table')"}},{"type":"js","name":"generate-table","visible":false,"text":"\nvar data = Hyperdeck.Get('table-data');\n\nvar ls = ['<table><tr>'];\n\nfor (var key in data[0])\n{\n\tls.push('<th>'+key+'</th>');\t\n}\n\nls.push('</tr>');\n\nfor (var i = 0; i < data.length; i++)\n{\n\tls.push('<tr>');\n\t\n\tfor (var key in data[i])\n\t{\n\t\tls.push('<td>'+data[i][key]+'</td>');\n\t}\n\t\n\tls.push('</tr>');\n}\n\nls.push('</table>');\n\nreturn ls.join('');\n","display":"codemirror","mode":"htmlgen","runOnBlur":true,"runOnLoad":true},{"type":"css","name":"generate-table-css","visible":false,"text":"#generate-table table { border-collapse : collapse ; margin : 1em }\n#generate-table td { border : 1px solid black ; text-align : center ; padding : 1em }\n#generate-table th { border : 1px solid black ; text-align : center ; padding : 1em ; width : 10em }\n\n","display":"codemirror","mode":"default","runOnBlur":true,"runOnLoad":true},{"type":"md","name":"explanation","visible":false,"text":"This example uses the `htmlgen` mode of the `js` component to generate HTML with javascript and output it to the document. The `generate-title` component defines a simple function that returns a header tag, which is then packaged into a `<div id=\"generate-title\">` and added to the output.\n\nThe `generate-table` component is a little more complex - it reads the data in `table-data` and packages it into an HTML table, and then adds it to the output. The `table-data` component defines an `afterChange` hook that redraws the table when the data is changed. This means that you can edit the table data (or paste in new data), and the table will automatically regenerate.\n\nThe `generate-table-css` contains CSS targeted to the `#generate-table` div.\n\n","display":"codemirror","mode":"default","runOnBlur":true,"runOnLoad":true}]}