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@10
Alternatively, you can use one of the following framework wrappers.
// Install the react wrapper
$ npm install @jspreadsheet/react@10
// Install the angular wrapper
$ npm install @jspreadsheet/angular@10
// Install the vue wrapper
$ npm install @jspreadsheet/vue@10
CDN
Run jspreadsheet directly from JSDelivr CDN
<script src="https://cdn.jsdelivr.net/npm/jspreadsheet@10/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet@10/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 machine https://jspreadsheet.com/v10/jspreadsheet.zip
License
Start your free trial
The free trial certificate is valid for 30 days. If you need additional time for testing, kindly inform us, and we will extend the period for you.
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.
<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('ZDA1NDdhOWE2YmIwNmE3MjNhZjM1ZThiNjA3MjY2YWExMWY2YjNjMmMzNzQyMzMzZTE0MzNhNmZiNjExN2JiNDYxOGIzZTQyZTkzMjNkY2U1NjMwNGIzN2U3OWJjNWYzOGI2NjQ2YWYwMTFiNjdlMTM1MThkNjRiMWQxYTY0YzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU1qWTJNamt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// 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>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
const license = 'ZDA1NDdhOWE2YmIwNmE3MjNhZjM1ZThiNjA3MjY2YWExMWY2YjNjMmMzNzQyMzMzZTE0MzNhNmZiNjExN2JiNDYxOGIzZTQyZTkzMjNkY2U1NjMwNGIzN2U3OWJjNWYzOGI2NjQ2YWYwMTFiNjdlMTM1MThkNjRiMWQxYTY0YzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU1qWTJNamt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
// 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>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license">
<Worksheet :data="data" :columns="columns" />
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
const license = 'ZDA1NDdhOWE2YmIwNmE3MjNhZjM1ZThiNjA3MjY2YWExMWY2YjNjMmMzNzQyMzMzZTE0MzNhNmZiNjExN2JiNDYxOGIzZTQyZTkzMjNkY2U1NjMwNGIzN2U3OWJjNWYzOGI2NjQ2YWYwMTFiNjdlMTM1MThkNjRiMWQxYTY0YzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU1qWTJNamt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
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>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZDA1NDdhOWE2YmIwNmE3MjNhZjM1ZThiNjA3MjY2YWExMWY2YjNjMmMzNzQyMzMzZTE0MzNhNmZiNjExN2JiNDYxOGIzZTQyZTkzMjNkY2U1NjMwNGIzN2U3OWJjNWYzOGI2NjQ2YWYwMTFiNjdlMTM1MThkNjRiMWQxYTY0YzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU1qWTJNamt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
@Component({
selector: 'app-root',
standalone: true,
template: `<div #spreadsheet></div>`,
})
export class App {
@ViewChild('spreadsheet') spreadsheet!: ElementRef;
// Worksheets
worksheets: jspreadsheet.worksheetInstance[] = [];
// Create a new JavaScript data grid
ngAfterViewInit() {
// Create spreadsheet
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
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' },
]
}]
});
}
}
Destroying the data grid
The following example shows how to dynamically destroy and recreate a new data grid.
<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='jspreadsheet'></div><br/>
<input type='button' value='Destroy' id="destroy" />
<input type='button' value='Create' id="create" />
<script>
// Create a new spreadsheet
let create = function() {
jspreadsheet(document.getElementById('jspreadsheet'), {
worksheets: [ { minDimensions:[5,5] } ]
});
}
// Destroy the spreadsheet
let destroy = function() {
jspreadsheet.destroy(document.getElementById('jspreadsheet'));
}
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZDA1NDdhOWE2YmIwNmE3MjNhZjM1ZThiNjA3MjY2YWExMWY2YjNjMmMzNzQyMzMzZTE0MzNhNmZiNjExN2JiNDYxOGIzZTQyZTkzMjNkY2U1NjMwNGIzN2U3OWJjNWYzOGI2NjQ2YWYwMTFiNjdlMTM1MThkNjRiMWQxYTY0YzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU1qWTJNamt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Create the spreadsheet
jspreadsheet(document.getElementById('jspreadsheet'), {
worksheets: [{
minDimensions: [5,5],
}]
});
document.getElementById("destroy").onclick = () => destroy()
document.getElementById("create").onclick = () => create()
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
const license = 'ZDA1NDdhOWE2YmIwNmE3MjNhZjM1ZThiNjA3MjY2YWExMWY2YjNjMmMzNzQyMzMzZTE0MzNhNmZiNjExN2JiNDYxOGIzZTQyZTkzMjNkY2U1NjMwNGIzN2U3OWJjNWYzOGI2NjQ2YWYwMTFiNjdlMTM1MThkNjRiMWQxYTY0YzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU1qWTJNamt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
// 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()} />
</>
);
}
<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 = 'ZDA1NDdhOWE2YmIwNmE3MjNhZjM1ZThiNjA3MjY2YWExMWY2YjNjMmMzNzQyMzMzZTE0MzNhNmZiNjExN2JiNDYxOGIzZTQyZTkzMjNkY2U1NjMwNGIzN2U3OWJjNWYzOGI2NjQ2YWYwMTFiNjdlMTM1MThkNjRiMWQxYTY0YzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU1qWTJNamt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
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>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZDA1NDdhOWE2YmIwNmE3MjNhZjM1ZThiNjA3MjY2YWExMWY2YjNjMmMzNzQyMzMzZTE0MzNhNmZiNjExN2JiNDYxOGIzZTQyZTkzMjNkY2U1NjMwNGIzN2U3OWJjNWYzOGI2NjQ2YWYwMTFiNjdlMTM1MThkNjRiMWQxYTY0YzAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU1qWTJNamt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
@Component({
selector: "app-root",
template: `
<div #spreadsheet></div>
<input type="button" value="Destroy" (click)="destroy()" />
<input type="button" value="Create" (click)="create()" />`
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
// Worksheets
worksheets: jspreadsheet.worksheetInstance[];
// Create a new data grid
ngAfterViewInit() {
// Create spreadsheet
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [{
minDimensions: [5,5],
}]
});
}
destroy() {
jspreadsheet.destroy(this.worksheets[0].parent);
}
create() {
jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [ { minDimensions:[5,5] } ]
});
}
}