Getting started
Jspreadsheet is a Vanilla JavaScript application for creating online data grids that feel like a spreadsheet. It helps you create rich and interactive datasets to bring a great user experience to your web-based applications.Installation
Please choose one of the following options:NPM
CDN
Download
To install jspreadsheet using NPM
// Install version 9 %npm install jspreadsheet@9.5.6
Run jspreadsheet directly from JSDelivr CDN
<script src="https://cdn.jsdelivr.net/npm/jspreadsheet@9.5.6/dist/index.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet@9.5.6/dist/jspreadsheet.min.css" type="text/css" /> <script src="https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.css" type="text/css" />
Alternatively from our website
<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" /> <script src="https://jsuites.net/v5/jsuites.js"></script> <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
Download and run jspreadsheet on your server or local machine
Version 9
https://jspreadsheet.com/v9/jspreadsheet.zip
Version 8
https://jspreadsheet.com/v8/jspreadsheet.zip
Version 7
https://jspreadsheet.com/v7/jspreadsheet.zip
Version 9
https://jspreadsheet.com/v9/jspreadsheet.zip
Version 8
https://jspreadsheet.com/v8/jspreadsheet.zip
Version 7
https://jspreadsheet.com/v7/jspreadsheet.zip
License
The Pro distribution requires a license, but you can test in development for free. A trial certificate is valid for 30 days but can be renewed as many times as needed. Free technical support is available for 30 days.Integrations
You can integrate JSS spreadsheet with the most important JavaScript frameworks.- Create an online spreadsheet using Angular
- Create an online spreadsheet using React
- Create an online spreadsheet using Vue
Create a spreadsheet
You can created an online spreadsheet from an HTML table element, a JS array, a CSV, a JSON file or an excel XLSX file.Array
JSON
CSV
Static Table
XLSX file
Create a spreadsheet from a JavaScript array
<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('OTk2NGZmYjczOTQ0NjAwNjc4ZTMwNzJjZDYzZTNiZDIzYzJkY2QzNWQxMWY2MDY3Y2RiMGM5ZTM4MTg5NWMxNDZhZTU1ODZlODkxNmZlNTc4ODdlM2MwNzQ4NzA2YjdjYzU2ZmY1NTc3ZDhjMTM5YmQ2MTlhNWM4NWM4MzIwZDEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TkRjMU5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); // Create a new spreadsheet jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ data: [ ['Mazda', 2001, 2000], ['Peugeot', 2010, 5000], ['Honda Fit', 2009, 3000], ['Honda CRV', 2010, 6000], ], columns: [ { title:'Model', width:'300px' }, { title:'Year', width:'80px' }, { title:'Price', width:'100px' }, ] }] }); </script> </html>
Create a spreadsheet from a JSON object
<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('OTk2NGZmYjczOTQ0NjAwNjc4ZTMwNzJjZDYzZTNiZDIzYzJkY2QzNWQxMWY2MDY3Y2RiMGM5ZTM4MTg5NWMxNDZhZTU1ODZlODkxNmZlNTc4ODdlM2MwNzQ4NzA2YjdjYzU2ZmY1NTc3ZDhjMTM5YmQ2MTlhNWM4NWM4MzIwZDEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TkRjMU5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); // Create a new spreadsheet jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ data: [ { name:'Jorge', id:'3', age:'40', gender:'Male' }, { name:'Cosme Sergio', id:'4', age:'48', gender:'Male' }, { name:'Georgina Santos', id:'5', age:'32', gender:'Female' }, ], columns: [ { type:'text', width:'300px', name:'id' }, { type:'text', width:'200px', name:'name' }, { type:'text', width:'100px', name:'age' }, { type:'hidden', name:'gender' }, ] }] }); </script> </html>
Create a spreadsheet from a CSV file
<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('OTk2NGZmYjczOTQ0NjAwNjc4ZTMwNzJjZDYzZTNiZDIzYzJkY2QzNWQxMWY2MDY3Y2RiMGM5ZTM4MTg5NWMxNDZhZTU1ODZlODkxNmZlNTc4ODdlM2MwNzQ4NzA2YjdjYzU2ZmY1NTc3ZDhjMTM5YmQ2MTlhNWM4NWM4MzIwZDEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TkRjMU5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); // Create a new spreadsheet jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ csv: 'demo.csv', csvHeaders: true, columns: [ { width: '300px' }, { width: '100px' }, { width: '100px' }, ] }] }); </script> </html>
Create a spreadsheet from a existing HTML table element
<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" /> <h4>The Official Top biggest albums of 2019</h4> <table id="spreadsheet"> <thead> <tr> <td>POS</td> <td>TITLE</td> <td>ARTIST</td> <td>PEAK</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>DIVINELY UNINSPIRED TO A HELLISH EXTENT</td> <td>LEWIS CAPALDI</td> <td>1</td> </tr> <tr> <td>2</td> <td>NO 6 COLLABORATIONS PROJECT</td> <td>ED SHEERAN</td> <td>1</td> </tr> <tr> <td>3</td> <td>THE GREATEST SHOWMAN</td> <td>MOTION PICTURE CAST RECORDING</td> <td>1</td> </tbody> </table> <br> <script> // Set your JSS license key (The following key only works for one day) jspreadsheet.setLicense('OTk2NGZmYjczOTQ0NjAwNjc4ZTMwNzJjZDYzZTNiZDIzYzJkY2QzNWQxMWY2MDY3Y2RiMGM5ZTM4MTg5NWMxNDZhZTU1ODZlODkxNmZlNTc4ODdlM2MwNzQ4NzA2YjdjYzU2ZmY1NTc3ZDhjMTM5YmQ2MTlhNWM4NWM4MzIwZDEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TkRjMU5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); // Create a new spreadsheet jspreadsheet(document.getElementById('spreadsheet')); </script> </html>
This feature requires an extension that is part of the Premium and Enterprise license.
<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" /> <script src="https://cdn.jsdelivr.net/npm/jszip@3.6.0/dist/jszip.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/parser@2.1.0/dist/index.min.js"></script> <script> jspreadsheet.setLicense('OTk2NGZmYjczOTQ0NjAwNjc4ZTMwNzJjZDYzZTNiZDIzYzJkY2QzNWQxMWY2MDY3Y2RiMGM5ZTM4MTg5NWMxNDZhZTU1ODZlODkxNmZlNTc4ODdlM2MwNzQ4NzA2YjdjYzU2ZmY1NTc3ZDhjMTM5YmQ2MTlhNWM4NWM4MzIwZDEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TkRjMU5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); // Bind the XSLX parser to your JSS distribution jspreadsheet.setExtensions({ parser }); // Set your JSS license key (The following key only works for one day) jspreadsheet.setLicense('OTk2NGZmYjczOTQ0NjAwNjc4ZTMwNzJjZDYzZTNiZDIzYzJkY2QzNWQxMWY2MDY3Y2RiMGM5ZTM4MTg5NWMxNDZhZTU1ODZlODkxNmZlNTc4ODdlM2MwNzQ4NzA2YjdjYzU2ZmY1NTc3ZDhjMTM5YmQ2MTlhNWM4NWM4MzIwZDEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TkRjMU5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); // Create spreadsheet from the XLSX jspreadsheet.parser({ url: '/tests/Samples/sample.xlsx', onload: function(config) { // Create the spreadsheet jspreadsheet(document.getElementById('spreadsheet'), config); }, }); </script> </html>
This extension is subject to the XLSX version and the operations included in the file. You might experience differences in the final render or even limitations. We are constantly improving. So, if you wish to investigate limitations you are experiencing, please send a message to contact@jspreadsheet.com
Destroy a spreadsheet
To destroy an existing spreadsheet and its data, you can use the method destroy as below.Open this example on jsfiddle.net
Spreadsheet source code example
<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> <input type='button' onclick='destroy()' value='Destroy' /> <input type='button' onclick='create()' value='Create' /> <script> // Create a new spreadsheet var create = function() { jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [ { minDimensions:[5,5] } ] }); } // Destroy the spreadsheet var destroy = function() { jspreadsheet.destroy(document.getElementById('spreadsheet')); } // Set your JSS license key (The following key only works for one day) jspreadsheet.setLicense('OTk2NGZmYjczOTQ0NjAwNjc4ZTMwNzJjZDYzZTNiZDIzYzJkY2QzNWQxMWY2MDY3Y2RiMGM5ZTM4MTg5NWMxNDZhZTU1ODZlODkxNmZlNTc4ODdlM2MwNzQ4NzA2YjdjYzU2ZmY1NTc3ZDhjMTM5YmQ2MTlhNWM4NWM4MzIwZDEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TkRjMU5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); // Create the spreadsheet jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ minDimensions: [5,5], }] }); </script> </html>