Back to Documentation

Events on Jspreadsheet spreadsheet

Custom table scripting after changes

Jspreadsheet offers a native feature to customize your table on the go. You can define the method updateTable to create rules to customize the data that should be shown to the user, as the example below.

See an example in action

Event dispatch

Although you have various specific events, Jspreadsheet has one global event dispatcher that can be used as below.

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

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

<script>
let data = [
    ['Mazda', 2001, 2000],
    ['Pegeout', 2010, 5000],
    ['Honda Fit', 2009, 3000],
    ['Honda CRV', 2010, 6000],
];

jspreadsheet(document.getElementById('spreadsheet'), {
    data:data,
    columns:[
        { title:'Model', width:300 },
        { title:'Price', width:80 },
        { title:'Model', width:100 }
    ],
    onevent: function(event,a,b,c,d,e,f) {
        console.log(event,a,b,c,d,e,f);
    }
});
</script>
</html>

Single Events

Jspreadsheet available events in this version.

Example on handling events on your spreasheet

Event description
onevent This method is called when any of the following elements in these tables happens.
onbeforesave Before any data is sent to the backend
onsave After any data is sent to the backend
onload This method is called when the method setData
onbeforechange Before a column value is changed. NOTE: It is possible to overwrite the original value, by return a new value on this method. v3.4.0+
onchange After a column value is changed.
onafterchanges After all changes are applied in the table.
onpaste After a paste action is performed in the javascript table.
onbeforepaste Before the paste action is performed. Used to parse any input data, should return the data.
oninsertrow After a new row is inserted.
onbeforeinsertrow Before a new row is inserted. You can cancel the insert event by returning false.
ondeleterow After a row is excluded.
onbeforedeleterow Before a row is deleted. You can cancel the delete event by returning false.
oninsertcolumn After a new column is inserted.
onbeforeinsertcolumn Before a new column is inserted. You can cancel the insert event by returning false.
ondeletecolumn After a column is excluded.
onbeforedeletecolumn Before a column is excluded. You can cancel the insert event by returning false.
onmoverow After a row is moved to a new position.
onmovecolumn After a column is moved to a new position.
onresizerow After a change in the row height.
onresizecolumn After a change in the column width.
onselection On the selection is changed.
onsort After a colum is sorted.
onfocus On table focus
onblur On table blur
onmerge On column merge
onchangeheader On header change
onundo On undo is applied
onredo On redo is applied
oneditionstart When an openEditor is called.
oneditionend When a closeEditor is called.
onchangestyle When a setStyle is called.
onchangemeta When a setMeta is called.
onchangepage Call when pagination is enabled and the page is changed.
onbeforecreateworksheet Before a creating of a new worksheet tab.
onbeforecreateworksheet Before a creating of a new worksheet tab.

Edit this page on GitHub