Getting started
Jspreadsheet is a Vanilla JavaScript plugin that allows for creating online data grids with the look and feel of a traditional spreadsheet. This plugin provides various features to enable the creation of interactive and engaging datasets, improving the user experience of web-based applications.Installation
Please choose one of the following options:NPM
To install jspreadsheet using NPM// Install version 10 %npm install jspreadsheet
Alternatively, you can use one of the following framework wrappers.
// Install the react wrapper %npm install @jspreadsheet/react // Install the angular wrapper %npm install @jspreadsheet/angular // Install the vue wrapper %npm install @jspreadsheet/vue
CDN
Run jspreadsheet directly from JSDelivr CDN
<script src="https://cdn.jsdelivr.net/npm/jspreadsheet/dist/index.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet/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" />
Download
Download and run jspreadsheet on your server or local machinehttps://jspreadsheet.com/v10/jspreadsheet.zip
License
Start your free trial
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.If you would like to use Jspreadsheet for commercial usage, please purchase a license.
Life cycle
Create a new data grid
You can create a new data grid instance from an HTML table element, a JS array, a CSV, a JSON file or an Excel XLSX file.JavaScript example
<html> <script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script> <script src="https://jsuites.net/v5/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v10/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('NmZlNDYyNmFkNTc1YjBiYjNlMDM2NzUxYzA4NjIzODkxNWQyOTllNjAzMTdiNzYyNTA5ODBhYzY3MTQ5NWE3NWU2NjQxMzk5MzQ2ZmViZjY3ZDlkYjQ3NDk4ZGUyM2VmODczNTE0OThmM2RmMjI5Y2E5ZGJmNWIzNTQ1N2YxOWMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TnpjME1Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); // 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>
React example
import React, { useRef } from "react"; import { Spreadsheet, Worksheet } from "@jspreadsheet/react"; const license = 'NmZlNDYyNmFkNTc1YjBiYjNlMDM2NzUxYzA4NjIzODkxNWQyOTllNjAzMTdiNzYyNTA5ODBhYzY3MTQ5NWE3NWU2NjQxMzk5MzQ2ZmViZjY3ZDlkYjQ3NDk4ZGUyM2VmODczNTE0OThmM2RmMjI5Y2E5ZGJmNWIzNTQ1N2YxOWMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TnpjME1Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'; // Create a new data grid export default function App() { // Spreadsheet array of worksheets const spreadsheet = useRef(); // Data const data = [ ['Mazda', 2001, 2000], ['Peugeot', 2010, 5000], ['Honda Fit', 2009, 3000], ['Honda CRV', 2010, 6000], ]; const columns = [ { title:'Model', width:'300px' }, { title:'Year', width:'80px' }, { title:'Price', width:'100px' }, ]; // Render data grid component return ( <Spreadsheet ref={spreadsheet} license={license}> <Worksheet data={data} columns={columns} /> </Spreadsheet> ); }
Vue example
<template> <Spreadsheet ref="spreadsheet" :license="license"> <Worksheet :data="data" :columns="columns" /> </Spreadsheet> </template> <script> import { Spreadsheet, Worksheet } from "@jspreadsheet/vue"; const license = 'NmZlNDYyNmFkNTc1YjBiYjNlMDM2NzUxYzA4NjIzODkxNWQyOTllNjAzMTdiNzYyNTA5ODBhYzY3MTQ5NWE3NWU2NjQxMzk5MzQ2ZmViZjY3ZDlkYjQ3NDk4ZGUyM2VmODczNTE0OThmM2RmMjI5Y2E5ZGJmNWIzNTQ1N2YxOWMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TnpjME1Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'; export default { components: { Spreadsheet, Worksheet, }, data() { return { // License license: license, // Data 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>
Destroying the data grid
The following example shows how to dynamically destroy and recreate a new data grid.JavaScript example
<html> <script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script> <script src="https://jsuites.net/v5/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v10/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('NmZlNDYyNmFkNTc1YjBiYjNlMDM2NzUxYzA4NjIzODkxNWQyOTllNjAzMTdiNzYyNTA5ODBhYzY3MTQ5NWE3NWU2NjQxMzk5MzQ2ZmViZjY3ZDlkYjQ3NDk4ZGUyM2VmODczNTE0OThmM2RmMjI5Y2E5ZGJmNWIzNTQ1N2YxOWMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TnpjME1Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); // Create the spreadsheet jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ minDimensions: [5,5], }] }); </script> </html>
React example
import React, { useRef } from "react"; import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react"; const license = 'NmZlNDYyNmFkNTc1YjBiYjNlMDM2NzUxYzA4NjIzODkxNWQyOTllNjAzMTdiNzYyNTA5ODBhYzY3MTQ5NWE3NWU2NjQxMzk5MzQ2ZmViZjY3ZDlkYjQ3NDk4ZGUyM2VmODczNTE0OThmM2RmMjI5Y2E5ZGJmNWIzNTQ1N2YxOWMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TnpjME1Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'; // Create a new spreadsheet const create = function() { jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [ { minDimensions:[5,5] } ] }); } // Destroy the spreadsheet const destroy = function(element) { jspreadsheet.destroy(element); } // Create a new data grid export default function App() { // Spreadsheet array of worksheets const spreadsheet = useRef(); // Data const data = [ ['Mazda', 2001, 2000], ['Peugeot', 2010, 5000], ['Honda Fit', 2009, 3000], ['Honda CRV', 2010, 6000], ]; const columns = [ { title:'Model', width:'300px' }, { title:'Year', width:'80px' }, { title:'Price', width:'100px' }, ]; // Render data grid component return ( <> <Spreadsheet ref={spreadsheet} license={license} id="spreadsheet"> <Worksheet data={data} columns={columns} /> </Spreadsheet> <input type="button" value="Destroy" onClick={() => destroy(spreadsheet.current[0].parent)} /> <input type="button" value="Create" onClick={() => create()} /> </> ); }
Vue example
<template> <Spreadsheet ref="spreadsheet" :license="license" id="spreadsheet"> <Worksheet /> </Spreadsheet> <input type="button" value="Destroy" @click="destroy()" /> <input type="button" value="Create" @click="create()" /> </template> <script> import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue"; const license = 'NmZlNDYyNmFkNTc1YjBiYjNlMDM2NzUxYzA4NjIzODkxNWQyOTllNjAzMTdiNzYyNTA5ODBhYzY3MTQ5NWE3NWU2NjQxMzk5MzQ2ZmViZjY3ZDlkYjQ3NDk4ZGUyM2VmODczNTE0OThmM2RmMjI5Y2E5ZGJmNWIzNTQ1N2YxOWMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TnpjME1Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'; export default { components: { Spreadsheet, Worksheet, }, methods: { // Create a new worksheet create() { jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [ { minDimensions:[5,5] } ] }); }, // Destroy the whole data grid destroy() { jspreadsheet.destroy(this.$refs.spreadsheet.current[0].parent); } }, data() { return { license: license, }; } } </script>