29:null 2a:["$","title",null,{"children":"Hypertext Literal Table | James Goldie | Observable"}] 2f:[] 2d:{"id":"7fb8331cb33ef0da","slug":"hypertext-literal-table","title":"Hypertext Literal Table","thumbnail":"0c51ec3f81a9ddb0b3ab9edfa9f41fecd4cba8ef4facaca8789dd3ce4b014e57","access_level":"public","create_time":"$D2024-07-01T00:16:32.558Z","update_time":"$D2024-07-01T00:40:49.570Z","view_time":null,"first_public_time":"$D2024-07-01T00:35:10.964Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"ff84244e62372b85","login":"jimjamslam","name":"James Goldie","avatar_url":"https://avatars-next.observableusercontent.com/6669060ab6acb4b2a994764715559031443281f95e1159e5acbd4aa0ac6eb164","tier":"starter_2024"},"version":32,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"82312e76641fa669","login":"jimjamslam","name":"James Goldie","avatar_url":"https://avatars-next.observableusercontent.com/6669060ab6acb4b2a994764715559031443281f95e1159e5acbd4aa0ac6eb164","tier":null}],"members":[{"type":"individual","id":"82312e76641fa669","login":"jimjamslam","name":"James Goldie","avatar_url":"https://avatars-next.observableusercontent.com/6669060ab6acb4b2a994764715559031443281f95e1159e5acbd4aa0ac6eb164","tier":null,"role":"editor"},{"type":"team","id":"ff84244e62372b85","login":"jimjamslam","name":"James Goldie","avatar_url":"https://avatars-next.observableusercontent.com/6669060ab6acb4b2a994764715559031443281f95e1159e5acbd4aa0ac6eb164","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Hypertext Literal Table","cells":[{"id":0,"value":"# Hypertext Literal Table","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"Observable's HTL can do more than quick value formatting: it can generate entire blocks of HTML or SVG. For example, let's turn some data into a custom table with a grouped header.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"Here's some sample data that we might've loaded from a CSV:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"data = [\n { year: 1995, a_mean: 23, a_sd: 0.5, b_mean: 32, b_sd: 0.6 },\n { year: 1996, a_mean: 24, a_sd: 0.6, b_mean: 31, b_sd: 0.65 },\n { year: 1997, a_mean: 24.5, a_sd: 0.4, b_mean: 30.5, b_sd: 0.6 },\n { year: 1998, a_mean: 22, a_sd: 0.6, b_mean: 30, b_sd: 0.6 },\n { year: 1999, a_mean: 26, a_sd: 0.5, b_mean: 39.5, b_sd: 0.6 },\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"We'll use [HTL](https://observablehq.com/@observablehq/htl) to write the HTML for the table. Inside it, we'll interpolate a JavaScript expression (inside `\\${}`) that turns each row of `data` into the HTML code for a row of the table (using [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)).\n\nAlternatively, we could use this technique to generate a set of cards for the rows. We could even generate both and show one or the other depending on the page width:\n\n```js\nwidth > 400 ? myTable : myCards\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"htl.html`\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ${data.map(d => html`\n \n \n \n \n \n \n `)}\n \n

One great table
Year	Group A	Group B
Mean	SD	Mean	SD
${d.year}	${d.a_mean}	${d.a_sd}	${d.b_mean}	${d.b_sd}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"htl.html`\n\n`","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"