Back to Examples

Spreadsheet worksheets

Allow users to add new worksheets to an existing spreadsheet.

<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>
let 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"]
];

let spreadsheet = 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() {
         let options = {
             minDimensions: [5,5],
             license: 'MmQyMDZjMTFhNGIyYzQ5MzEwM2VjY2QzZDgyOTk0NTJhZmI2OGMzOGM3MTdjNTk4NjQ5OTNiMTMwYTNkOTI2NzdkM2M1YmEwMmFjZTJjNDEyYmI1NTg3ZWFkYjdhMGUzNjc1NjRiMjBiYjg2NzNmZjA3ODZlMDA1ZmI0ZTJlZWIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFNE9UWTBNemc0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==',
         }
         return options;
     },
     license: 'MmQyMDZjMTFhNGIyYzQ5MzEwM2VjY2QzZDgyOTk0NTJhZmI2OGMzOGM3MTdjNTk4NjQ5OTNiMTMwYTNkOTI2NzdkM2M1YmEwMmFjZTJjNDEyYmI1NTg3ZWFkYjdhMGUzNjc1NjRiMjBiYjg2NzNmZjA3ODZlMDA1ZmI0ZTJlZWIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFNE9UWTBNemc0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==',
     onopenworksheet: function(element, instance, worksheetNumber) {
         console.log(element, instance, worksheetNumber);
     }
});
let create = function() {
    spreadsheet.createWorksheet({
        minDimensions: [10,10],
        license: 'MmQyMDZjMTFhNGIyYzQ5MzEwM2VjY2QzZDgyOTk0NTJhZmI2OGMzOGM3MTdjNTk4NjQ5OTNiMTMwYTNkOTI2NzdkM2M1YmEwMmFjZTJjNDEyYmI1NTg3ZWFkYjdhMGUzNjc1NjRiMjBiYjg2NzNmZjA3ODZlMDA1ZmI0ZTJlZWIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFNE9UWTBNemc0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==',
    });
}

document.getElementById("createbtn").onclick = () => create()
</script>

<input type='button' value='Create a new tab' id="createbtn">
</html>

Properties

Property Description
tabs Show tabs and allow the user to create new worksheets. Default: false
worksheetName Worksheet title. Default: Sheet {number}
allowDeleteWorksheet Add a delete worksheet option to the contextMenu. Default: true
allowRenameWorksheet Add a rename worksheet option to the contextMenu. Default: true
allowMoveWorksheet Allow worksheet drag and drop options. Default: true

Methods

Property Description
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

Event Description
onbeforecreateworksheet Before create a new worksheet, should return the configuration of the new table
oncreateworksheet When a new worksheet is created
onrenameworksheet when a worksheet is renamed
ondeleteworksheet When a worksheet is deleted
onmoveworksheet When a worksheet position is changed
onopenworksheet When a worksheet is opened