Modern Spreadsheet

Features:

• High performance spreadsheet based on CanvasAPI.
• TypeScript supported
• Native scrolling
• Customizable
• Copy & Paste support

Basic usage

import Spreadsheet from "modern_spreadsheet";
import "modern_spreadsheet/style.css"; // <= this is required

const target = document.getElementById("spreadsheet");
const sheet = new Spreadsheet(target);
//...

Save and load data

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);
}

Supported events

• onCellClick
• onSelectionChange
• onCellChange
• onCopy

Using events examples

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);

Roadmap

• Rows number and columns heading render
• Custom event functions (ex.: onSelectionChange, onCellEdit...). Full list of supported events will available on this page
• Copy & Paste support
• Rows and columns resizing
• Toolbar
• Context menu
• Formulas support
• Selected cell depends cells highlight
• Async formulas support
• Mutlisheets (?)