Published
Edited
Mar 4, 2020
Importers
4 stars
viewof example = handsontable({
data: [
['2017', 10, 11, 12, 13],
['2018', 20, 11, 14, 13],
['2019', 30, 15, 12, 13]
],
colHeaders: ['', 'Ford', 'Tesla', 'Toyota', 'Honda'],
columnSorting: true
})
example
cars = require('@observablehq/cars')
viewof carsTable = handsontable({
data: cars.slice(0, 50),
colHeaders: Object.keys(cars[0])
})
carsTable
handsontable = {
const styles = html`<link href="https://cdn.jsdelivr.net/npm/handsontable@7.2.2/dist/handsontable.full.min.css" rel="stylesheet" media="screen">`;
document.head.appendChild(styles);
const isDomElement = element =>
element instanceof Element || element instanceof HTMLDocument;
return (options, transform, valueMapping) => {
options = options || {};
transform = transform || (x => x);
valueMapping = valueMapping || (x => x);
if (Array.isArray(options.colHeaders)) {
options.colHeaders = options.colHeaders.map(h =>
isDomElement(h) ? h.outerHTML : h
);
}
const element = html`<div style="${options.style || ''}"></div>`;
const hot = createHandsontable(element, {
licenseKey: 'non-commercial-and-evaluation',
...options
});
hot.updateSettings({
afterChange: function(changes, source) {
if (options.afterChange !== undefined) {
options.afterChange(changes, source);
}
element.value = (hot.getSourceData() || []).map(transform);
element.dispatchEvent(new CustomEvent("input"));
},
afterColumnSort: function(currentSortConfig, destinationSortConfig) {
if (options.afterColumnSort !== undefined) {
options.afterColumnSort(currentSortConfig, destinationSortConfig);
}
element.value = (hot.getSourceData() || []).map(transform);
element.dispatchEvent(new CustomEvent("input"));
}
});
element.hot = hot;
element.value = valueMapping((hot.getSourceData() || []).map(transform));
return element;
};
}
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.
