viewof penguin = Table(penguins, ["species", "island", "body_mass_g", "sex"])
penguin
function Table(data, keys = Object.keys(data[0])) {
const onclick = (e, row) => {
for (const row of node.querySelectorAll("tbody tr")) row.style.background = "none";
e.currentTarget.style.background = "#eee";
set(node, row);
};
const node = htl.html`<div style="max-height: 500px; overflow-y: auto;">
<table style="margin: 0; border-collapse: separate; border-spacing: 0;">
<thead>
<tr style="border-bottom: none;">
${keys.map(key => htl.html`<th style="position: sticky; top: 0; border-bottom: solid 1px #ccc; background: #fff;">
${key}
</th>`)}
</tr>
</thead>
<tbody>
${data.map(row => htl.html`<tr onclick=${(e) => onclick(e, row)}>
${keys.map(key => htl.html`<td style="border-bottom: solid 1px #eee;">
${row[key]}
</td>`)}
</tr>`)}
</tbody>
</table>
</div>`;
set(node, null);
return node;
}
import {set} from "@observablehq/synchronized-inputs"
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.
