DocumentationEvents

Events

Jspreadsheet offers comprehensive event handling for building interactive spreadsheet applications. You can respond to user actions and data changes through:

  • Individual Event Handlers: Specific methods like onchange, onclick, etc.
  • Global Event Dispatcher: The onevent method that handles all events centrally
  • Plugin Events: Event handling implementation within spreadsheet plugins

What's new with Version 13

  • New events: onchangecellproperties, onchangecolumnproperties, onchangerowproperties, onchangezoom and onbeforemoveworksheet
  • Changed signatures: onresize is now (worksheet, width, height) and onchangeconfig is now (worksheet, config, spreadsheetLevel), the worksheet first like every other event
  • Removed: onchangeproperty, replaced by the three property events
  • Plugins: an events map lets a plugin subscribe to specific events, including the conditional ones. More information

Documentation

Specific Event Handlers

Jspreadsheet provides many specific event handlers for different user interactions and data operations:

Event Description
onload This method is called when the data in the spreadsheet is ready.
onload(spreadsheet: Object) => void
onclick When the spreadsheet is clicked. Sections: nested | header | row | cell | select-all | tabs | cloning | toolbar | footer
onclick(worksheet: Object, section: String, x: Number, y: Number, event: Object) => void
onundo When undo is applied
onundo(worksheet: Object, historyRecord: Object) => void
onredo When redo is applied
onredo(worksheet: Object, historyRecord: Object) => void
onerror When a new error happens.
onerror(spreadsheet: Object, result: Object) => void
onbeforechange Before a column value is changed. It is possible to overwrite the original value, by returning a new value.
onbeforechange(worksheet: Object, cell: DOMElement, x: Number, y: Number, value: Any) => Boolean | Any
onchange After a column value is changed.
onchange(worksheet: Object, cell: DOMElement, x: Number, y: Number, newValue: Any, oldValue: Any) => void
onrender After a cell value is rendered.
onrender(worksheet: Object, cell: HTMLElement, x: Number, y: Number, newValue: Any, options: Column) => void
onbeforechanges Before all changes are applied in the table.
onbeforechanges(worksheet: Object, records: Array, origin: string)
onafterchanges After all changes are applied in the table.
onafterchanges(worksheet: Object, records: Array, origin: string)
oncopy When a copy or cut is performed. Return a string to replace the text placed on the clipboard, false to cancel the copy, or nothing to proceed.
oncopy(worksheet: Object, selectedCells: Number[], data: String, cut: Boolean) => String | false | void
onbeforepaste Before the paste action is performed. Can return parsed or filtered data, can cancel the action when return false. clipboard is the object from jspreadsheet.clipboard.get(), or {} when the selection was reset.
onbeforepaste(worksheet: Object, data: Array, x: Number, y: Number, clipboard: Object) => false | Array | void
onpaste After a paste action is performed. records has one entry per pasted cell with x, y, value and, for an internal copy, style, options, mergeCells and comments.
onpaste(worksheet: Object, records: Object[]) => void
onbeforeinsertrow Before a new row is inserted. Return false to cancel the user action.
onbeforeinsertrow(worksheet: Object, rows: Object[]) => Boolean | Object[] | void
oninsertrow After a new row is inserted.
oninsertrow(worksheet: Object, rows: Object[]) => void
onbeforedeleterow Before a row is deleted. Return false to cancel the user action.
onbeforedeleterow(worksheet: Object, rows: Number[]) => Number[] | Boolean | void
ondeleterow After a row is deleted.
ondeleterow(worksheet: Object, rows: Number[]) => void
onbeforeinsertcolumn Before a new column is inserted. Return false to cancel the user action.
onbeforeinsertcolumn(worksheet: Object, columns: Object[]) => Boolean | Object[] | void
oninsertcolumn After a new column is inserted.
oninsertcolumn(worksheet: Object, column: Object[]) => void
onbeforedeletecolumn Before a column is excluded. Return false to cancel the user action.
onbeforedeletecolumn(worksheet: Object, cols: Number[]) => boolean | Number[] | void
ondeletecolumn After a column is excluded.
ondeletecolumn(worksheet: Object, cols: Number[]) => void
onmoverow After a row is moved to a new position.
onmoverow(worksheet: Object, origin: Number, destination: Number, quantity: Number) => void;
onmovecolumn After a column is moved to a new position.
onmovecolumn(worksheet: Object, origin: Number, destination: Number, quantity: Number) => void
onresizerow After a height change for one or more rows.
onresizerow(worksheet: Object, row: Mixed, height: Mixed, oldHeight: Mixed) => void
onresizecolumn After a column width change for one or more columns.
onresizecolumn(worksheet: Object, column: Mixed, width: Mixed, oldWidth: Mixed) => void
onbeforeselection Before a selection happens.
onbeforeselection(worksheet: Object, px: Number, py: Number, ux: Number, uy: Number, origin?: Object) => Boolean | void
onborder After a border is applied with setBorder, or by a copy or fill operation. When one operation covers several ranges the coordinates are their bounding box, color is null and an extra ranges argument lists them.
onborder(worksheet: Object, x1: Number, y1: Number, x2: Number, y2: Number, borderAlias: String, color: String) => void
onselection When the selection is changed.
onselection(worksheet: Object, px: Number, py: Number, ux: Number, uy: Number, origin?: Object) => void
onbeforecomments Before a new comment is added or updated. Return false to cancel the event, or an object to replace the comments to apply.
onbeforecomments(worksheet: Object, newValues: Object) => Object | Boolean | void
oncomments After a new comment is added or updated.
oncomments(worksheet: Object, cells: Object, oldValues: Object) => void
onbeforesort It runs before sorting a column. Return an array of row numbers with the new order, or false to cancel the user action.
onbeforesort(worksheet: Object, column: Number, direction: Number, newOrderValues: Number[], levels: Array) => Number[] | false | void
onsort When a column is sorted.
onsort(worksheet: Object, column: Number, direction: Number, newOrderValues: Array, levels: Array) => void
onfocus When the spreadsheet gets the focus.
onfocus(worksheet: Object) => void
onblur When the spreadsheet loses the focus.
onblur(worksheet: Object) => void
onmerge When merge cells is executed.
onmerge(worksheet: Object, newValue: Object, oldValue: Object) => void
onchangeheader When the header title is changed. When the column had the default title, oldValue can be undefined.
onchangeheader(worksheet: Object, column: Number, newValue: String, oldValue: String | undefined) => void
onchangefooter When the footers are created or updated.
onchangefooter(worksheet: Object, newValue: [], oldValue: []) => void
onchangefootervalue When the value in a cell footer is changed.
onchangefootervalue(worksheet: Object, records: object[]) => void
onrenderfootercell When a footer cell is rendered.
onrenderfootercell(worksheet: Object, record: object) => void
onchangenested After every change of the nested header definitions, including cell updates, splits, merges and moves.
onchangenested(worksheet: Object, config: object[][]) => void
onchangenestedcell Once per setNestedCell call, with the arguments it received; in the batch form, x is the array of updates.
onchangenestedcell(worksheet: Object, x: Number | Object[], y?: Number, properties?: Object) => void
oncreateeditor When an editor is created.
oncreateeditor(worksheet: Object, cell: DOMElement, x: Number, y: Number, element: DOMElement, options: Object) => void
oneditionstart When the edition starts.
oneditionstart(worksheet: Object, cell: DOMElement, x: Number, y: Number) => void | boolean
oneditionend When the edition ends.
oneditionend(worksheet: Object, cell: DOMElement, x: Number, y: Number, newValue: Any, save: Boolean) => void
onchangestyle When the style of cells is changed. newValue is the map given to setStyle; oldValue maps each cell name to its previous style, or null when the cell had none.
onchangestyle(worksheet: Object, newValue: Object, oldValue: Object) => void
onchangemeta When cell meta information is added or updated.
onchangemeta(worksheet: Object, newValue: Object) => void
onresetmeta When cell metadata is reset. cellNames is the array given to resetMeta, or undefined when resetMeta was called without arguments.
onresetmeta(worksheet: Object, cellNames: String[] | undefined) => void
onresetstyle When cell style is reset.
onresetstyle(worksheet: Object, cellNames: String[]) => void
onvalidation When validation is created, changed, or removed.
onvalidation(worksheet: Object, records: Object[]) => void
onfreezecolumns When the frozen columns change. columns is null when the frozen columns are removed.
onfreezecolumns(worksheet: Object, columns: Number[] | null) => void
onfreezerows When the frozen rows change. rows is null when the frozen rows are removed.
onfreezerows(worksheet: Object, rows: Number[] | null) => void
onbeforechangepage Before the page is changed. Can cancel the action by returning false.
onbeforechangepage(worksheet: Object, pageNumber: Number, oldPage: Number, quantityPerPage: Number) => Boolean | void
onchangepage When pagination is enabled and the user changes the page.
onchangepage(worksheet: Object, pageNumber: Number, oldPageNumber: Number, quantityPerPage: Number) => void
onbeforecreateworksheet Add or change the options for a new worksheet.
onbeforecreateworksheet(worksheetOptions: Object, position: Number) => boolean | Any
oncreateworksheet When the user creates a new worksheet.
oncreateworksheet(worksheet: Object, worksheetOptions: Object, position: Number) => void
onrenameworksheet When the user renames a worksheet.
onrenameworksheet(worksheet: Object, worksheetIndex: Number, newValue: String, oldValue: String) => void
ondeleteworksheet When the user deletes a worksheet.
ondeleteworksheet(worksheet: Object, position: Number) => void
onmoveworksheet When the user updates the worksheet tab position.
onmoveworksheet(worksheet: Object, from: Number, to: Number) => void
onbeforeopenworksheet Before a worksheet is opened. Return false to cancel and block the action.
onbeforeopenworksheet(worksheet: Object, index: Number) => void | boolean
onopenworksheet When the user opens a worksheet. index is its position in the spreadsheet.
onopenworksheet(worksheet: Object, index: Number) => void
onchangerowid When there is a row id update.
onchangerowid(worksheet: Object, rows: Array) => void
onbeforefilter Before the filter results are applied. Return an array of row numbers to replace the results, or false to cancel the action.
onbeforefilter(worksheet: Object, filters: Array, data: Number[]) => Number[] | false | void
onfilter After the filter has been applied to the rows.
onfilter(worksheet: Object, filters: Array, data: Array) => void
oncreatecell When a new cell is created.
oncreatecell(worksheet: Object, element: HTMLElement, x: Number, y: Number, value: String) => void
oncreaterow After a new row is inserted.
oncreaterow(worksheet: Object, rowNumber: Number, tr: HTMLElement) => void
onbeforeformula Before executing a formula. controller is the FormulaController of the evaluation: expression, the cell (x, y, record) and the worksheet the references resolve against. A returned string replaces the expression before evaluation and must be a full formula starting with =; false keeps the raw expression as the result. More information
onbeforeformula(worksheet: Object, controller: FormulaController) => string | false | void
onformulachain Get the information about the expressions executed from the formula chain.
onformulachain(worksheet: Object, expressions: Array) => void
onopenfilter Customize the items available when the filter editor is open.
onopenfilter(worksheet: Object, column: number, options: Array) => options | void
onresize Viewport dimensions has changed, with the effective dimensions.
onresize(worksheet: Object, width: number, height: number) => void
onchangedefinednames When definedNames is updated.
onchangedefinednames(worksheet: Object, data: []) => void
oninput New char is entered on editor.
oninput(worksheet: Object, event: Object, text: String) => void
onkeydown Keyboard event handler.
onkeydown(worksheet: Object, event: Object) => void
onchangerowvisibility When the visibility of rows changes. state is true when rows were shown and false when hidden; affected lists the rows that actually changed.
onchangerowvisibility(worksheet: Object, state: Boolean, affected: Number[]) => void
onchangecolumnvisibility When the visibility of columns changes. Same arguments as onchangerowvisibility, with column indexes.
onchangecolumnvisibility(worksheet: Object, state: Boolean, affected: Number[]) => void
onsearchstart It happens before all the search events.
onsearchstart(worksheet: Object, terms: String)
onsearchrow Replaces the default matcher: called for every row with the query and its regular expression; return true to include the row in the results.
onsearchrow(worksheet: Object, rowNumber: Number, query: String, terms: RegExp) => Boolean
onbeforesearch Before the results are applied. Return an array of row numbers to replace the results, or false to cancel the search.
onbeforesearch(worksheet: Object, query: String, results: Number[] | null) => Number[] | false | void
onsearch After the search is applied. results is null when the query is empty and the search was reset.
onsearch(worksheet: Object, query: String, results: Number[] | null) => void
oncreatecolumn When a new column is created.
oncreatecolumn(worksheet: Object, columnNumber: number, td: HTMLElement, options: Object)
ongrouprow When a group of rows is created.
ongrouprow(worksheet: Object, row: Number, numOfItems: Number) => void
onopenrowgroup When row groups are opened. affected lists the rows whose group changed.
onopenrowgroup(worksheet: Object, affected: Number[]) => void
oncloserowgroup When row groups are closed.
oncloserowgroup(worksheet: Object, affected: Number[]) => void
ongroupcolumn When a group of columns is created.
ongroupcolumn(worksheet: Object, column: Number, numOfItems: Number) => void
onopencolumngroup When column groups are opened.
onopencolumngroup(worksheet: Object, affected: Number[]) => void
onclosecolumngroup When column groups are closed.
onclosecolumngroup(worksheet: Object, affected: Number[]) => void
onchangemedia When a media object is added, removed or updated.
onchangemedia(worksheet: Object, newValue: Object[], oldValue: Object[], affectedRecords: Object[]) => void
onbeforeloadimage Before loading an image.
onbeforeloadimage(worksheet: Object, img: HTMLImageElement, options: Object) => String | false | undefined
onchangeworksheetstate When worksheet visibility is changed.
onchangeworksheetstate(spreadsheet: Object, worksheetIndex: Number, state: Boolean) => void
onchangereferences After a structural change updated the formula references. updates describes the inserted, deleted and moved rows and columns and the affected references.
onchangereferences(worksheet: Object, updates: Object) => void
onchangecellproperties After setCellProperties, with the records that were applied.
onchangecellproperties(worksheet: Object, records: Object[]) => void
onchangecolumnproperties After setColumnProperties, with the records that were applied.
onchangecolumnproperties(worksheet: Object, records: Object[]) => void
onchangerowproperties After setRowProperties, with the records that were applied.
onchangerowproperties(worksheet: Object, records: Object[]) => void
onchangezoom After the worksheet zoom changes. Zoom is a personal preference: never persisted, synced or recorded in the history.
onchangezoom(worksheet: Object, newValue: Number, oldValue: Number) => void
onbeforemoveworksheet Before a worksheet moves to another position. Return false to cancel.
onbeforemoveworksheet(worksheet: Object, from: Number, to: Number) => boolean | void
onchangeconfig Fire when there is a change in the configuration.
onchangeconfig(worksheet: Object, config: Object, spreadsheetLevel?: boolean) => void
onbeforedeleteworksheet Intercept the exclusion o a worksheet, return false to cancel the user action.
onbeforedeleteworksheet(worksheet: Object, worksheetNumber: Number) : false | void
onbeforemovecolumn Before a column is moved to a new position. Return false to cancel the user action.
onbeforemovecolumn(worksheet: Object, origin: Number, destination: Number, quantity: Number) => boolean | void
onbeforemoverow Before a row is moved to a new position. Return false to cancel the user action.
onbeforemoverow(worksheet: Object, origin: Number, destination: Number, quantity: Number) => void | boolean

Special events

Event description
onevent General method to handler any event. The number of arguments depends on each event.
onevent(eventName: String, worksheet: Object, a?: any, b?: any, c?: any, d?: any, e?: any, f?: any) => any
contextmenu Return false to cancel the contextMenu event, or return custom elements for the contextmenu.
contextMenu(worksheet: Object, x: Number, y: Number, e: Object, items: [], section: String, a1: Any, a2: Any) => []

The global event handler

The onevent is a global and centralized method that handles all events. It's essential to note that the number of arguments required will depend on the specific event that has been triggered. NOTE: You can see events in the browser console.

<html>
<script src="https://jspreadsheet.com/v13/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v13/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<div id='spreadsheet'></div>

<script>
// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('ZjM1MzQ0M2JhZGFmODQwODFjYjBkYzRlNGRjOWVmM2FjMmEzOTE3ZWIxODM3ZjAyYWIyMGM0Zjk5NDA1OTEzNmJhN2E1ODNjMjhjN2YwZTIxMjdhOGQ4YWU1YzQ5N2Q2YWY0OWEzYzYxZWI3YjE5M2ZhNTBhOThhM2IxYTA1ZGQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprek56WTJNakk0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

// Create a new spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [
            ['Mazda', 2001, 2000],
            ['Peugeot', 2010, 5000],
            ['Honda Fit', 2009, 3000],
            ['Honda CRV', 2010, 6000],
        ],
        columns:[
            { title:'Model', width:'300px' },
            { title:'Year', width:'80px' },
            { title:'Price', width:'100px' },
        ],
    }],
    onevent: function(eventName,worksheet,a,b,c,d,e,f) {
        console.log(eventName,worksheet,a,b,c,d,e,f);
    }
});
</script>
</html>

import React, {useRef} from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('ZjM1MzQ0M2JhZGFmODQwODFjYjBkYzRlNGRjOWVmM2FjMmEzOTE3ZWIxODM3ZjAyYWIyMGM0Zjk5NDA1OTEzNmJhN2E1ODNjMjhjN2YwZTIxMjdhOGQ4YWU1YzQ5N2Q2YWY0OWEzYzYxZWI3YjE5M2ZhNTBhOThhM2IxYTA1ZGQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprek56WTJNakk0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Data
    const data = [
        ['Mazda', 2001, 2000],
        ['Peugeot', 2010, 5000],
        ['Honda Fit', 2009, 3000],
        ['Honda CRV', 2010, 6000],
    ];
    const columns = [
        {title: 'Model', width: '300px'},
        {title: 'Year', width: '80px'},
        {title: 'Price', width: '100px'},
    ];

    // Event handler
    const onevent = (eventName, worksheet, a, b, c, d, e, f) => {
        console.log(eventName, worksheet, a, b, c, d, e, f);
    };

    // Render data grid component
    return (
        <Spreadsheet ref={spreadsheet} onevent={onevent}>
            <Worksheet data={data} columns={columns}/>
        </Spreadsheet>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" :onevent="onevent">
        <Worksheet :data="data" :columns="columns" />
    </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('ZjM1MzQ0M2JhZGFmODQwODFjYjBkYzRlNGRjOWVmM2FjMmEzOTE3ZWIxODM3ZjAyYWIyMGM0Zjk5NDA1OTEzNmJhN2E1ODNjMjhjN2YwZTIxMjdhOGQ4YWU1YzQ5N2Q2YWY0OWEzYzYxZWI3YjE5M2ZhNTBhOThhM2IxYTA1ZGQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprek56WTJNakk0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');


export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        // Event handler
        onevent (eventName,worksheet,a,b,c,d,e,f) {
            console.log(eventName,worksheet,a,b,c,d,e,f);
        },
    },
    data() {
        // Data
        const data = [
            ['Mazda', 2001, 2000],
            ['Peugeot', 2010, 5000],
            ['Honda Fit', 2009, 3000],
            ['Honda CRV', 2010, 6000],
        ];
        const columns = [
            { title:'Model', width:'300px' },
            { title:'Year', width:'80px' },
            { title:'Price', width:'100px' },
        ];

        return {
            data,
            columns
        };
    }
}
</script>

import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('ZjM1MzQ0M2JhZGFmODQwODFjYjBkYzRlNGRjOWVmM2FjMmEzOTE3ZWIxODM3ZjAyYWIyMGM0Zjk5NDA1OTEzNmJhN2E1ODNjMjhjN2YwZTIxMjdhOGQ4YWU1YzQ5N2Q2YWY0OWEzYzYxZWI3YjE5M2ZhNTBhOThhM2IxYTA1ZGQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprek56WTJNakk0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>`
})
export class AppComponent implements AfterViewInit {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                data: [
                    ['Mazda', 2001, 2000],
                    ['Peugeot', 2010, 5000],
                    ['Honda Fit', 2009, 3000],
                    ['Honda CRV', 2010, 6000],
                ],
                columns:[
                    { title:'Model' },
                    { title:'Year' },
                    { title:'Price' },
                ],
            }],
            onevent: function(eventName,worksheet,a,b,c,d,e,f) {
                console.log(eventName,worksheet,a,b,c,d,e,f);
            }
        });
    }
}

Plugin-based Event Handling

For complex applications with multiple event handlers, plugins provide a modular approach to event management, enabling code reuse and better maintainability across multiple spreadsheet instances.

const myEventPlugin = {
    onevent: function(eventName, worksheet, ...args) {
        // Custom event handling logic here
        if (eventName === 'onchange') {
            // Handle cell changes
        } else if (eventName === 'onclick') {
            // Handle clicks
        }
    }
};

// Apply plugin to spreadsheet
jspreadsheet(element, {
    plugins: { myEventPlugin },
    // other options...
});

Learn more about creating plugins.