Owner of Hammies, former Jupyter core developer and co-lead of Jupyter Notebook and JupyterLab teams
viewof demo = table(cars)
table(cars, {
sort: 'Miles_per_Gallon'
})
{
const element = table(cars);
element.hot.updateSettings({
afterSelection: (row, column, row2, column2) => {
mutable selection = element.hot.getData(row, column, row2, column2);
}
});
return element;
}
mutable selection = []
table([...cars, []], {
columnSummary: Object.values(cars[0]).map((value, index) => ({
destinationRow: cars.length,
destinationColumn: index,
type: typeof value === 'string' ? 'count' : 'sum'
}))
})
{
const output = /worker-(.+)\.html/.exec(window.location.href)[1];
const cache = () =>
localStorage.getItem(output)
? JSON.parse(localStorage.getItem(output))
: cars;
const element = table(cache());
element.hot.updateSettings({
afterChange: (changes, source) => {
if (source !== "loadData") {
localStorage.setItem(
output,
JSON.stringify(element.hot.getSourceData(), null, 2)
);
}
},
contextMenu: [
{
name: "<b>Discard edits</b>",
hidden: () => {
return !cache();
},
callback: (key, selection, clickEvent) => {
localStorage.clear();
element.hot.loadData(cars);
}
},
{
name: "---------",
hidden: () => !cache()
},
"row_above",
"row_below",
"---------",
"col_left",
"col_right",
"---------",
"remove_row",
"remove_col",
"---------",
"undo",
"redo",
"---------",
"make_read_only",
"---------",
"alignment"
]
});
return element;
}
cars = require('@observablehq/cars')
import { table } from '@gnestor/table'
import { localStorage } from '@mbostock/safe-local-storage'
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.
