43:["$","title",null,{"children":"Custom table, click to select row | Toph Tucker | Observable"}] 4b:[] 47:{"id":"825d76d8757cca30","slug":"custom-table-click-to-select-row","title":"Custom table, click to select row","thumbnail":"491ce471928b71cb14bf00fb2244e1980dbf6b22845b30af8d92312098aea119","access_level":"public","create_time":"$D2023-11-01T15:03:58.863Z","update_time":"$D2023-11-01T17:43:38.667Z","view_time":null,"first_public_time":"$D2023-11-01T15:36:38.145Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2026","bio":"Learned D3 at Businessweek, started using Observable to do my job at Kensho, took time off to write notebooks about Mayans and Galton, moved to San Francisco to work for Observable. Now work for it remotely from the Berkshires where my wife runs Avaloch.","followed_by_you":false,"follows_you":false},"version":91,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"bio":"Learned D3 at Businessweek, started using Observable to do my job at Kensho, took time off to write notebooks about Mayans and Galton, moved to San Francisco to work for Observable. Now work for it remotely from the Berkshires where my wife runs Avaloch.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"ecc07c839329185d","slug":"testing","title":"Testing / Helping","owner":{"id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker"}},"type":"notebook","body":{"titling":"auto","title":"Custom table, click to select row","cells":[{"id":0,"value":"# Custom table, click to select row\nAs nice as the [table input](https://observablehq.com/@observablehq/input-table) is, it’s nicer to feel like you can make your own. In response to a user question, here’s a table which recreates the sticky header and viewof behavior of the table input. But, instead of checkboxes or radio buttons, you select by clicking anywhere on a row, and it highlights the selected row. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"viewof penguin = Table(penguins, [\"species\", \"island\", \"body_mass_g\", \"sex\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"penguin","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"Hopefully the function is short enough that it’s easy to customize. It takes two arguments: _data_, which should be an array of objects, and _keys_, for the columns, which defaults to all the keys in the first row. The table is wrapped in a div with a max-height so it scrolls; the TH header cells stick to the top. Instead of the row borders from Observable’s default table stylesheet, we set _border-collapse: separate_ and use cell borders, so that the header borders stay sticky. When you click on a row, we set the value of the whole returned node to be that row, so you can use it with viewof. We unset the background of all rows, and then set the current row to have a background of #eee. Finally, we set the initial value of the node to null; without that, referencing the table’s value before you’ve clicked would be an unresolved promise.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"function Table(data, keys = Object.keys(data[0])) {\n const onclick = (e, row) => {\n for (const row of node.querySelectorAll(\"tbody tr\")) row.style.background = \"none\";\n e.currentTarget.style.background = \"#eee\";\n set(node, row);\n };\n const node = htl.html`

\n \n \n \n ${keys.map(key => htl.html``)}\n \n \n \n ${data.map(row => htl.html` onclick(e, row)}>\n ${keys.map(key => htl.html``)}\n `)}\n \n

\n ${key}\n
\n ${row[key]}\n

`;\n set(node, null);\n return node;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"import {set} from \"@observablehq/synchronized-inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 42:null