Published
Edited
Aug 27, 2021
1 star
Insert cell
Insert cell
{
viewof checkless.classList.add("my_styled_table");
return md`### very little JavaScript`
}
Insert cell
html`<h3>a little CSS</h3><style>
.my_styled_table { user-select: none; } /* not sure if this is a bad idea or not, but I like it */
.my_styled_table tr { pointer-events: none; } /* disables element selection */
.my_styled_table tbody tr:nth-child(odd) { background: lightgray; }
.my_styled_table table thead th { background: darkgray; }
</style>`
Insert cell
viewof checkless.style['max-height'] = "500px"
Insert cell
side_effect = {
let update = 0;
// the next line breaks the scroll-update feature
//viewof checkless.onscroll = () => { update++; mutable z = md`### don't override form.onscroll -- ${update}` }
return md`### don't override form.onscroll`
}
Insert cell
Insert cell
penguins = FileAttachment("penguins.csv").csv({typed: true})
Insert cell
viewof checkless = Inputs.table(penguins, {maxHeight: "500px", width: "400px"})
Insert cell
Insert cell
Inputs.table(penguins, {columns: ["species", "culmen_depth_mm", "culmen_length_mm"]})
Insert cell
Insert cell
Inputs.table(penguins, {sort: "body_mass_g", reverse: true})
Insert cell
Insert cell
viewof selection = Inputs.table(penguins, {required: false})
Insert cell
selection // Try selecting rows above!
Insert cell
Insert cell
Insert cell
Inputs.table(penguins, {
format: {
culmen_length_mm: x => x.toFixed(1),
culmen_depth_mm: x => x.toFixed(1),
sex: x => x === "MALE" ? "M" : x === "FEMALE" ? "F" : ""
}
})
Insert cell
Insert cell
Inputs.table(penguins, {
format: {
culmen_length_mm: sparkbar(d3.max(penguins, d => d.culmen_length_mm)),
culmen_depth_mm: sparkbar(d3.max(penguins, d => d.culmen_depth_mm)),
flipper_length_mm: sparkbar(d3.max(penguins, d => d.flipper_length_mm)),
body_mass_g: sparkbar(d3.max(penguins, d => d.body_mass_g)),
sex: x => x.toLowerCase()
}
})
Insert cell
function sparkbar(max) {
return x => htl.html`<div style="
background: steelblue;
width: ${100 * x / max}%;
float: right;
padding-right: 3px;
box-sizing: border-box;
color: white;">${x.toLocaleString("en")}`
}
Insert cell
Insert cell
Insert cell
Insert cell
Table = Inputs.table // deprecated alias
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more