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