data = penguins
Inputs.table(data, {
format: {
Year: d3.format("d") // format as "1960" rather than "1,960"
}
})
import {colorTable} from "@mootari/colored-table-rows"
colorTable(colorData, {
// Required: Specify the column that contains the color value.
colorColumn: "rowColor",
// Optionally specify a color opacity.
colorOpacity: .3,
// Any additional table options ...
})
colorData = {
const valueOf = d => d.flipper_length_mm;
const color = d3.scaleSequential(d3.extent(data, valueOf), d3.interpolateTurbo);
return data.map(row => ({
...row,
rowColor: color(valueOf(row)),
}));
}
Inputs.table(colorData)
data1 = [
{ Name: "Alice", Age: 30, Country: "USA" },
{ Name: "Bob", Age: 25, Country: "Canada" },
{ Name: "Charlie", Age: 35, Country: "UK" }
];
viewof table = Inputs.table(data1, {
columns: ["Name", "Age", "Country"],
header: ["Name", "Age", "Country"],
});
Inputs.table(data1, {
format: {
"Age" : d => htl.html`<div style="--row-color:${d}">`
}
});
viewof table2 = Inputs.table(data1, {
columns: ["Name", "Age", "Country"],
header: ["Name", "Age", "Country"],
format: (cell, column, rowIndex) => {
if (column === "Age") {
cell.style.backgroundColor = "red"; // Apply red background color to the "Age" column
}
return cell;
},
});
html`<style>
.observablehq--table td[data-column="Age"] {
color: red;
}
</style>`;
table;
viewof table1 = Inputs.table(data1, {
columns: ["Name", "Age", "Country"],
header: ["Name", "Age", "Country"],
format: (cell, column, rowIndex) => {
if (column === "Age") {
cell.style.color = "red"; // Apply red color to the "Age" column
}
return 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.
