25:["$","title",null,{"children":"HTML Tables | PAC | Observable"}] 4c:[] 48:{"id":"c23ab09879072d57","slug":"html-tables","title":"HTML Tables","thumbnail":"31175353ac3f13384beca50ab09468a0681d781ae06c6edf1dd5c4904f60bfd3","access_level":"unlisted","create_time":"$D2024-07-16T03:45:31.096Z","update_time":"$D2024-07-16T20:47:07.219Z","view_time":null,"first_public_time":"$D2024-07-16T04:58:55.959Z","has_unpublished_edits":null,"fork":{"id":"f3131c6cad5a1f32","slug":"all-tour-de-frances-stage-winners-by-country-of-citizenship","title":"All Tour de France's stage winners by country of citizenship with flag","owner":{"id":"9232a635d4bd3de6","login":"pac02","name":"PAC"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9232a635d4bd3de6","login":"pac02","name":"PAC","avatar_url":"https://avatars-next.observableusercontent.com/2e849389f24e4a039178c801e4df9065e03c23e4077b0ff6bfc8e2763dd06bf9","tier":"starter_2024","bio":"I explore Wikidata and Wikipedia using Observable notebooks.","followed_by_you":false,"follows_you":false},"version":683,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c1c217aebd614b45","login":"pac02","name":"PAC","avatar_url":"https://avatars-next.observableusercontent.com/2e849389f24e4a039178c801e4df9065e03c23e4077b0ff6bfc8e2763dd06bf9","tier":null,"bio":"I explore Wikidata and Wikipedia using Observable notebooks.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"c1c217aebd614b45","login":"pac02","name":"PAC","avatar_url":"https://avatars-next.observableusercontent.com/2e849389f24e4a039178c801e4df9065e03c23e4077b0ff6bfc8e2763dd06bf9","tier":null,"role":"editor"},{"type":"team","id":"9232a635d4bd3de6","login":"pac02","name":"PAC","avatar_url":"https://avatars-next.observableusercontent.com/2e849389f24e4a039178c801e4df9065e03c23e4077b0ff6bfc8e2763dd06bf9","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"HTML Tables","cells":[{"id":0,"value":"# HTML Tables\n## Comparing layout of html tables in Javascript\n\nProblem\n\nI often display large tables but the layout is very bad on a mobile phone. See https://observablehq.com/@pac02/all-tour-de-France's-stage-winner's-by-country-of-citizenship for an example. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":628,"value":"## Inputs.table\n\n* 👎 tables width is limited by screen without any adapation ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":291,"value":"Inputs.table(\n df.select([\n \"itemLabel\",\n \"tourLabel\",\n \"tournumber2\",\n \"stagenumber2\",\n \"winnerLabel\",\n \"countryLabel\"\n ])\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"\n* ✅ Use layout: \"auto\" option","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":667,"value":"Inputs.table(\n df.select([\n \"itemLabel\",\n \"tourLabel\",\n \"tournumber2\",\n \"stagenumber2\",\n \"winnerLabel\",\n \"countryLabel\"\n ]),\n { layout: \"auto\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"Inputs.table(\n df.select([\n \"itemLabel\",\n \"tourLabel\",\n \"tournumber2\",\n \"stagenumber2\",\n \"winnerLabel\",\n \"countryLabel\"\n ]),\n { overflow: \"scroll\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"## Arquero's .view\n\n* 👎 limited to 50 rows\n* 👍 horizontal scrolling ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":631,"value":"df.view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"## Customized html table\n\n* 👍 Layout on mobile is good\n* 👎 it's really long to configure ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":600,"value":"html`

${df\n .objects()\n .map(\n (o) =>\n '\"\n )\n .join(\"\\n\")}\n

stage	tour	tour number	stage number	winner	country
' +\n o.itemLabel +\n '	' +\n o.tourLabel +\n \"	\" +\n o.tournumber2 +\n \"	\" +\n o.stagenumber2 +\n '	' +\n o.winnerLabel +\n '	' +\n o.countryLabel +\n \"

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"query = `SELECT ?tour ?tourLabel ?startdate ?tournumber ?item ?itemLabel ?stagenumber ?winner ?winnerLabel ?country ?countryLabel ?flag WHERE {\n ?tour wdt:P31 wd:Q33881;\n rdfs:label ?tourLabel.\n FILTER((LANG(?tourLabel)) = \"en\")\n ?item wdt:P361 ?tour;\n rdfs:label ?itemLabel.\n FILTER((LANG(?itemLabel)) = \"en\")\n ?tour wdt:P580 ?startdate;\n wdt:P393 ?tournumber.\n ?item wdt:P1545 ?stagenumber;\n p:P1346 ?statement.\n ?statement ps:P1346 ?winner;\n pq:P642 wd:Q20882747.\n ?winner rdfs:label ?winnerLabel.\n FILTER((LANG(?winnerLabel)) = \"en\")\n ?winner wdt:P27 ?country.\n ?country rdfs:label ?countryLabel;\n wdt:P41 ?flag.\n FILTER((LANG(?countryLabel)) = \"en\")\n}\nLIMIT 100\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = fetch(`https://query.wikidata.org/sparql?query=${encodeURIComponent(query)}`, {headers: {accept: \"application/sparql-results+json\"}}).then(response => response.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"df = aq\n .from(\n data.results.bindings.map((d) => ({\n item: d.item.value,\n itemLabel: d.itemLabel.value,\n tour: d.tour.value,\n tourLabel: d.tourLabel.value,\n country: d.country.value,\n countryLabel: d.countryLabel.value,\n tournumber: parseInt(d.tournumber.value),\n stagenumber: parseInt(d.stagenumber.value),\n startdate: d.startdate.value,\n winnerLabel: d.winnerLabel.value,\n flag: d.flag.value\n }))\n )\n .derive({\n tournumber2: (d) => op.parse_int(d.tournumber),\n stagenumber2: (d) => d.stagenumber,\n year: (d) => op.year(d.startdate)\n })\n .dedupe([\n \"itemLabel\",\n \"tourLabel\",\n \"winnerLabel\",\n \"countryLabel\",\n \"tournumber\",\n \"stagenumber\"\n ])\n .orderby({\n tournumber2: aq.desc((d) => d.tournumber2),\n stagenumber2: aq.desc((d) => d.stagenumber2)\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"### Libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"import {aq, op} from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null