Tabulator = require("tabulator-tables@5")
This will get the css (needed for the Tabulator to work properly)
<style>@import url("https://unpkg.com/tabulator-tables@5/dist/css/tabulator.min.css")
tbltr = function(data){
const table = new Tabulator(document.createElement("DIV"), {
data,
groupBy: "species",
groupStartOpen:false,
groupClosedShowCalcs:true,
columns:[
{title:"Species", field:"species"},
{title:"Applied", field:"island"},
{title:"Culmen Length (in mm)", field:"culmen_length_mm", bottomCalc: "sum"}, // topCalc
{title:"Flipper Length (in mm)", field:"flipper_length_mm", bottomCalc: "avg", bottomCalcParams:{precision:4}},
// example of own aggregation function that handles NaNs, you can also use sum, max, avg, count
{title:"Body Mass (in grams)", field:"body_mass_g", bottomCalc: avgNaN},
{title:"Sex", field:"sex"}
]
});
table.element.value = data;
return table.element;
}
avgNaN = function(values, data, calcParams){
//values - array of column values
//data - all table data
//calcParams - params passed from the column definition object
var sum = 0;
values.forEach(function(value){
if(!isNaN(value)){
sum ++;
}
});
return sum/values.length;
}
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.
