Spreadsheet worksheets

Allow users to add new worksheets to an existing spreadsheet.



Source code

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


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

<script>
var create = function() {
    jspreadsheet(document.getElementById('spreadsheet'), {
        minDimensions: [10,10],
        license: '39130-64ebc-bd98e-26bc4',
    });
}

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]
         }
         return options;
     },
     onopenworksheet: function(element, instance, worksheetNumber) {
         console.log(worksheetNumber);
     },
     license: '39130-64ebc-bd98e-26bc4',
});

<input type='button' value='Create a new tab' onclick="create()">
</script>
</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