28:null 29:["$","title",null,{"children":"Grid Table | Martien van Steenbergen | Observable"}] 2e:[] 2c:{"id":"05a852e21a93c966","slug":"grid-table","title":"Grid Table","thumbnail":"da4e9db6f98b04a1cd8856f23c0a2e347ecd3679fcca52973854e2425d76e7d5","access_level":"public","create_time":"$D2019-02-22T13:33:38.293Z","update_time":"$D2022-03-01T10:20:19.265Z","view_time":null,"first_public_time":"$D2019-02-22T13:38:23.107Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"6e89ba4444f0cc85","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":"starter_2024"},"version":18,"publish_version":18,"role":null,"authored":false,"authors":[{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null}],"members":[{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"01d1c4db89387bbb","slug":"grid","title":"Grid","owner":{"id":"6e89ba4444f0cc85","login":"martien","name":"Martien van Steenbergen"}},"type":"notebook","body":{"title":"Grid Table","cells":[{"id":0,"value":"md`# Grid Table`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"{\n // const rows = 12;\n const w = Math.floor(width / gridSize) * gridSize;\n const cw = Math.floor(width / gridSize / columns) * gridSize;\n const ww = cw * columns;\n const wc2 = 18;\n let a = ``;\n a += \"\";\n for (let c = 0; c < columns; c++)\n a += ``;\n a += \"\";\n for (let r = 0; r < rows; r++) {\n a += \"\";\n for (let c = 0; c < columns; c++) {\n a += ``;\n a += ``;\n }\n }\n a += \"\";\n a += \"

${c * rows +\n offset}
${(\n r * gridSize +\n c * rows * gridSize +\n offset\n ).toLocaleString()}	_{${c * 12 + r + 1}}

\";\n return html`${a}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"viewof gridSize = slider({\n min: 3,\n max: 72,\n step: 3,\n value: 36,\n title: \"Grid Size\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"viewof columns = slider({\n min: 1,\n max: 12,\n step: 1,\n value: 6,\n title: \"Columns\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"viewof rows = slider({\n min: 1,\n max: 36,\n step: 1,\n value: 12,\n title: \"Rows\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"viewof offset = slider({\n min: 0,\n max: 72,\n step: 3,\n value: 0,\n title: \"Offset\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"