Back to Examples

Worksheets

One of the most important changes in v8 is worksheet management. Now, there is a spreadsheet component that acts as the container for each new worksheet, which brings several methods, properties and events.

Documentation

Initial Settings

Configure the behavior of the spreadsheet and worksheet management using the worksheet-related settings below.

Property Description
Spreadsheet properties
tabs: boolean|object Show tabs and allow the user to create new worksheets. Default: false. It can be used with extended tabs options.
allowDeleteWorksheet: boolean Add a delete worksheet option to the contextMenu. Default: true
allowRenameWorksheet: boolean Add the rename worksheet option to the contextMenu. Default: true
allowMoveWorksheet: boolean Allow worksheet drag and drop options. Default: true
Worksheet properties
worksheetId: string Worksheet identification. Default: randomNumber
worksheetName: string Worksheet title. Default: string + integer
worksheetState: visible | hidden Worksheet visibility state. Default: visible

Methods

Available methods to interact programmatically with the worksheets.

Property Description
createWorksheet(object) : object Add a new worksheet to the online spreadsheet based on a given configuration.
createWorksheet(Object configuration) : object
deleteWorksheet(number) : void Delete worksheet by position.
deleteWorksheet(Integer worksheetNumber) : boid
getWorksheet(mixed) : worksheetPosition Get the worksheet position by worksheet object or by the worksheetId.
getWorksheet(Object worksheetInstace | String worksheetId) : number
openWorksheet(number) : void Open the worksheet with position: worksheetNumber (starts on zero)
openWorksheet(Number worksheetPosition) : void
renameWorksheet(number, string) Change a worksheet title.
renameWorksheet(Number worksheetNumber, String worksheetNewTitle) : void
moveWorksheet(number, number) Update the worksheet position.
moveWorksheet(Number fromPosition, Number toPosition) : void
getWorksheetActive() Get the current active worksheet number.
getWorksheetActive() : number
getWorksheetInstance(number) Get the worksheet instance by number
getWorksheetInstance(number) : object

Available events

Available events related to the worksheets.

Event Description
onopenworksheet onopenworksheet(Object worksheet, Number worksheetNumber) : void
oncreateworksheet oncreateworksheet(Object worksheetInstance, Object worksheetOptions, Number worksheetNumber) : void
onrenameworksheet onrenameworksheet(Object worksheetInstance, Number worksheetNumber, String newValue, String oldValue) : void;
ondeleteworksheet ondeleteworksheet(Object oldWorksheetInstance, Number oldWorksheetNumber) : void
onmoveworksheet onmoveworksheet(Object worksheetInstance, Number newPosition, Number oldPosition) : void

Examples

Active worksheet

How to get the active worksheet number on a JSS spreadsheet.

See this example online

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

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

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

<br/>
<input type="button" value="Get active worksheet" id="getactivebtn"/>
<input type="button" value="Rename first worksheet" id="renamebtn"/>

<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MDIxZDY5MjE1MjY4MDcxN2NhOTFhMGMxOTZmODljZmIwYzA3OTRjMDIyMmRjYTQzMjAyYWUxMDI1ODM2NmIxMTFjNzU3MGI0NzcyNzc3YzUxMzNmYjkzMzFkZWU5ZWVjMDBlYzZhYTk2ODA4MDJiODZkOTU4M2QyZGJjNjhhM2IsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFek5EazBNREU0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// Create the spreadsheet
let worksheets = jspreadsheet(document.getElementById('spreadsheet'), {
    // Allow create a new tab button
    tabs: true,
    // Initial worksheet
    worksheets: [
        { minDimensions: [6,6] },
        { minDimensions: [6,6] },
    ],
});

document.getElementById("getactivebtn").onclick = () => alert(worksheets[0].parent.getWorksheetActive());
document.getElementById("renamebtn").onclick = () => worksheets[0].parent.renameWorksheet(0, 'Anything');
</script>
</html>

Add new worksheet button

Allow users to add new worksheets to an existing spreadsheet.

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

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

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

<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MDIxZDY5MjE1MjY4MDcxN2NhOTFhMGMxOTZmODljZmIwYzA3OTRjMDIyMmRjYTQzMjAyYWUxMDI1ODM2NmIxMTFjNzU3MGI0NzcyNzc3YzUxMzNmYjkzMzFkZWU5ZWVjMDBlYzZhYTk2ODA4MDJiODZkOTU4M2QyZGJjNjhhM2IsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFek5EazBNREU0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    // Allow create a new tab button
    tabs: true,
    // Intercept the new worksheet and define the options for the new worksheet
    onbeforecreateworksheet: function() {
        let options = {
            minDimensions: [5,5],
        }
        return options;
    },
    // Run an event as soon the new worksheet is created
    onopenworksheet: function(element, instance, worksheetNumber) {
        console.log(element, instance, worksheetNumber);
    },
    // Initial worksheet
    worksheets: [
        {
            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"]
            ],
            columns: [
                { type: 'autonumber', title: 'Id' },
                { type: 'text', width: '350px', title: 'Title' },
                { type: 'text', width: '250px', title: 'Artist' },
             ]
        }
    ]
});
</script>
</html>

Programmatic operations on worksheets

Create a new worksheet programmatically.

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

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

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

<br/>

<input type="button" value="Create a new worksheet" id="createworksheet" />


<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MDIxZDY5MjE1MjY4MDcxN2NhOTFhMGMxOTZmODljZmIwYzA3OTRjMDIyMmRjYTQzMjAyYWUxMDI1ODM2NmIxMTFjNzU3MGI0NzcyNzc3YzUxMzNmYjkzMzFkZWU5ZWVjMDBlYzZhYTk2ODA4MDJiODZkOTU4M2QyZGJjNjhhM2IsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFek5EazBNREU0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// Create the spreadsheet
let spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
    tabs: true,
    worksheets: [
        {
            minDimensions: [5,5],
            defaultColWidth: '200px',
            worksheetName: 'Example2',
        }
    ]
});

document.getElementById("createworksheet").onclick = () => spreadsheet[0].createWorksheet({ minDimensions: [5,5] });
</script>
</html>

Formulas on worksheets Pro feature

With the Pro distribution, it is possible to execute formulas with variables from any other worksheet. The syntax follow the same standard as other spreadsheet software such as Google Sheets or Excel using the exclamation mark, for instance "Products!A2*10".

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

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

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

<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MDIxZDY5MjE1MjY4MDcxN2NhOTFhMGMxOTZmODljZmIwYzA3OTRjMDIyMmRjYTQzMjAyYWUxMDI1ODM2NmIxMTFjNzU3MGI0NzcyNzc3YzUxMzNmYjkzMzFkZWU5ZWVjMDBlYzZhYTk2ODA4MDJiODZkOTU4M2QyZGJjNjhhM2IsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFek5EazBNREU0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    onload: function() {
        console.log('Ready');
    },
    worksheets: [
        {
            data: [
                ['Cheese', 10, 6.00, "=B1*C1"],
                ['Apples', 5, 4.00, "=B2*C2"],
                ['Carrots', 5, 1.00, "=B3*C3"],
                ['Oranges', 6, 2.00, "=B4*C4"],
            ],
            minDimensions: [5,5],
            defaultColWidth: '100px',
            worksheetName: 'Products',
        },
        {
            data: [
                ['20%', "=Products!D1"],
                ['20%', "=Products!D2"],
                ['20%', "=Products!D3"],
                ['20%', "=Products!D4"],
            ],
            minDimensions: [5,5],
            defaultColWidth: '100px',
            worksheetName: 'Profitability',
        }
    ]
});
</script>
</html>

Worksheets customizations

Additional customizations are allowed using the extended tabs object declaration as example below.

Property Description
allowCreate: boolean Show the create new tab button
allowChangePosition: boolean Allow drag and drop of the headers to change the tab position
animation: boolean Allow the header border bottom animation.
hideHeaders: boolean Hide the tab headers if only one tab is present.
padding: number Default padding content
position: string Position of the headers: top | bottom. Default: top

A list of all properties are available in the Jsuites tabs section at https://jsuites.net/docs/javascript-tabs

<div id="spreadsheet"></div>
<script>
jspreadsheet(document.getElementById('spreadsheet'), {
    tabs: {
        allowCreate: true,
        allowChangePosition: true,
        animation: true,
        position: "bottom",
    },
    worksheets: [{
        minDimensions: [8,8],
    }],
});
</script>