- High performance spreadsheet based on CanvasAPI.
- TypeScript supported
- Native scrolling
- Customizable
- Copy & Paste support
import Spreadsheet from "modern_spreadsheet";
import "modern_spreadsheet/style.css"; // <= this is required
const target = document.getElementById("spreadsheet");
const sheet = new Spreadsheet(target);
//...
function saveData() {
const serialized = sheet.serializeData();
localStorage.setItem("sheet_data", JSON.stringify(serialized));
}
function loadData() {
const data = localStorage.getItem("sheet_data");
const json = JSON.parse(data);
if (!json) return;
sheet.loadData(json);
}
- onCellClick
- onSelectionChange
- onCellChange
- onCopy
import Spreadsheet, { SpreadsheetConstructorProperties } from "./main";
const options: SpreadsheetConstructorProperties = {
onCellClick: (event, cell) => {
console.log("Cell click", event, cell);
},
onSelectionChange: (selection) => {
console.log("Changed selection: ", selection);
},
onCellChange = (cell) => {
console.log("Cell changed: ", cell);
},
onCopy: (range, data, dataAsString) => {
console.log("Copy event: ", range, data, dataAsString)
}
};
const sheet = new Spreadsheet("#spreadsheet", options);
Rows number and columns heading renderCustom event functions (ex.: onSelectionChange, onCellEdit...). Full list of supported events will available on this pageCopy & Paste support- Rows and columns resizing
- Toolbar
- Context menu
- Formulas support
- Selected cell depends cells highlight
- Async formulas support
- Mutlisheets (?)