Owner of Hammies, former Jupyter core developer and co-lead of Jupyter Notebook and JupyterLab teams
tableWithFormulae = composeTable([withFormulae])
tableWithCheckbox = composeTable([withCheckbox])
tableWithHtml = composeTable([withHtml])
composeTable = (transforms = [], hooks = []) =>
(data, options = {}) => {
if (data) {
for (let transform of transforms) {
data = transform.data(data);
options = transform.options(options);
}
const element = table(data, options);
for (let hook of hooks) {
element.hot.updateSettings(hook(element.hot));
}
return element;
}
}
withFormulae = ({
data: (data) => data,
options: (options) => ({
...options,
colHeaders: true,
rowHeaders: true,
formulas: {
engine: hf,
sheetName: "Sheet1"
}
})
})
withCheckbox = ({
data: (data) =>
data.map((item) => ({
checked: true,
...item
})),
options: (options) => ({
...options,
columns: (columns) => {
if (options.columns) {
columns = options.columns(columns);
}
return columns.map((column) => {
if (column.data === "checked") {
return { ...column, renderer: "checkbox" };
}
return column;
});
},
fixedColumnsLeft: 1
})
})
withHtml = ({
data: (data) =>
data.map((row) =>
Object.entries(row).reduce(
(result, [key, value]) => ({
...result,
[key]:
value && typeof value === "object" && value.nodeType !== undefined
? value.innerHTML
: value
}),
{}
)
),
options: (options) => ({
...options,
columns: (columns) => {
if (options.columns) {
columns = options.columns(columns);
}
return columns.map((column) => ({ ...column, renderer: "html" }));
}
})
})
currencyColumn = (columnName) => ({
data: columnName,
renderer: "numeric",
type: "numeric",
numericFormat: {
pattern: "$0,0.00",
culture: "en-US"
}
})
percentageColumn = (columnName) => ({
data: columnName,
renderer: "numeric",
type: "numeric",
numericFormat: {
pattern: "0,0.00%"
}
})
numberColumn = (columnName) => ({
data: columnName,
renderer: "numeric",
type: "numeric",
numericFormat: {
pattern: "0,0"
}
})
htmlColumn = (columnName) => ({
data: columnName,
renderer: "html"
})
hf = HyperFormula.buildEmpty()
import { table } from "@gnestor/table"
import { HyperFormula } from "@gnestor/hyperformula"
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.
