Spreadsheet worksheets

Allow users to add new worksheets to an existing spreadsheet.



Source code

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


<div id="spreadsheet"></div>

<script>
var create = function() {
    jspreadsheet(document.getElementById('spreadsheet'), {
        minDimensions: [10,10],
        license: 'MmM1ZTQ5MTZjYzFjN2EyNTc0NjY0NzlmNGI5ZjY2OTQ3MzFhNWUyZDZiMWM4YWZlYzliMTFiZmYwMzQ1YTI2MzJhYjFlYmMxMzIzOTBjMTY3ZjQ2ZGYzZWJiYjM2NGVmOTk1ZDg4NzcwMDA1YjMzMGFiZTA0NzA3ZjIzNmNjMTEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOalV3TkRZd01Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09',
    });
}

var data = [
    ["1","DIVINELY UNINSPIRED TO A HELLISH EXTENT","LEWIS CAPALDI"],
    ["2","NO 6 COLLABORATIONS PROJECT","ED SHEERAN"],
    ["3","THE GREATEST SHOWMAN","MOTION PICTURE CAST RECORDING"],
    ["4","WHEN WE ALL FALL ASLEEP WHERE DO WE GO","BILLIE EILISH"]
];

jspreadsheet(document.getElementById('spreadsheet'), {
    data: data,
    columns: [
        { type: 'autonumber', title: 'Id' },
        { type: 'text', width: '350px', title: 'Title' },
        { type: 'text', width: '250px', title: 'Artist' },
     ],
     // Allow create tabs
     tabs: true,
     // Handler to specify the configuration for the new worksheets
     onbeforecreateworksheet: function() {
         var options = {
             minDimensions: [5,5],
             license: 'MmM1ZTQ5MTZjYzFjN2EyNTc0NjY0NzlmNGI5ZjY2OTQ3MzFhNWUyZDZiMWM4YWZlYzliMTFiZmYwMzQ1YTI2MzJhYjFlYmMxMzIzOTBjMTY3ZjQ2ZGYzZWJiYjM2NGVmOTk1ZDg4NzcwMDA1YjMzMGFiZTA0NzA3ZjIzNmNjMTEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOalV3TkRZd01Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09',
         }
         return options;
     },
     license: 'MmM1ZTQ5MTZjYzFjN2EyNTc0NjY0NzlmNGI5ZjY2OTQ3MzFhNWUyZDZiMWM4YWZlYzliMTFiZmYwMzQ1YTI2MzJhYjFlYmMxMzIzOTBjMTY3ZjQ2ZGYzZWJiYjM2NGVmOTk1ZDg4NzcwMDA1YjMzMGFiZTA0NzA3ZjIzNmNjMTEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOalV3TkRZd01Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09',
     onopenworksheet: function(element, instance, worksheetNumber) {
         console.log(element, instance, worksheetNumber);
     }
});
</script>

<input type='button' value='Create a new tab' onclick="create()">
</html>


Properties

PropertyDescription
tabsShow tabs and allow the user to create new worksheets. Default: false
worksheetNameWorksheet title. Default: Sheet {number}
allowDeleteWorksheetAdd a delete worksheet option to the contextMenu. Default: true
allowRenameWorksheetAdd a rename worksheet option to the contextMenu. Default: true
allowMoveWorksheetAllow worksheet drag and drop options. Default: true


Methods

PropertyDescription
createWorksheet(object)Create a new table worksheet based on a given configuration.
createWorksheet(configuration: object)
getWorksheet(object)Get the worksheet position based on a table instance.
getWorksheet(instance: object) => number
openWorksheet(number)Set worksheet as active by worksheetNumber starting in zero.
openWorksheet(worksheetNumber: number)
renameWorksheet(number, string)Change a worksheet title.
renameWorksheet(worksheetNumber: number, worksheetName: string)
deleteWorksheet(number)Delete worksheet.
deleteWorksheet(worksheetNumber: number)


Events

EventDescription
onbeforecreateworksheetBefore create a new worksheet, should return the configuration of the new table
oncreateworksheetWhen a new worksheet is created
onrenameworksheetwhen a worksheet is renamed
ondeleteworksheetWhen a worksheet is deleted
onmoveworksheetWhen a worksheet position is changed
onopenworksheetWhen a worksheet is opened