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 machine

https://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('NzRhZDk0Njg3NWRkM2FmNjczOGVhNGYyMmYwZTQyM2Q3ODEwMTJiMzFjMTUxNWEwMWM5NTk5NWJhZGE3ZDYzYjZjMDJlODJlNGYzYTVjODdjZmUxNjdlZDc5YzM2ZjlhODc4MWQzMTFjYTc0Y2JlMmMyMzE1MDBiYzc4OGFmZWMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczT0Rjd05Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');

// 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 = 'NzRhZDk0Njg3NWRkM2FmNjczOGVhNGYyMmYwZTQyM2Q3ODEwMTJiMzFjMTUxNWEwMWM5NTk5NWJhZGE3ZDYzYjZjMDJlODJlNGYzYTVjODdjZmUxNjdlZDc5YzM2ZjlhODc4MWQzMTFjYTc0Y2JlMmMyMzE1MDBiYzc4OGFmZWMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczT0Rjd05Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';

// 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 = 'NzRhZDk0Njg3NWRkM2FmNjczOGVhNGYyMmYwZTQyM2Q3ODEwMTJiMzFjMTUxNWEwMWM5NTk5NWJhZGE3ZDYzYjZjMDJlODJlNGYzYTVjODdjZmUxNjdlZDc5YzM2ZjlhODc4MWQzMTFjYTc0Y2JlMmMyMzE1MDBiYzc4OGFmZWMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczT0Rjd05Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';

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('NzRhZDk0Njg3NWRkM2FmNjczOGVhNGYyMmYwZTQyM2Q3ODEwMTJiMzFjMTUxNWEwMWM5NTk5NWJhZGE3ZDYzYjZjMDJlODJlNGYzYTVjODdjZmUxNjdlZDc5YzM2ZjlhODc4MWQzMTFjYTc0Y2JlMmMyMzE1MDBiYzc4OGFmZWMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczT0Rjd05Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');

// 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 = 'NzRhZDk0Njg3NWRkM2FmNjczOGVhNGYyMmYwZTQyM2Q3ODEwMTJiMzFjMTUxNWEwMWM5NTk5NWJhZGE3ZDYzYjZjMDJlODJlNGYzYTVjODdjZmUxNjdlZDc5YzM2ZjlhODc4MWQzMTFjYTc0Y2JlMmMyMzE1MDBiYzc4OGFmZWMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczT0Rjd05Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';

// 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)} />
            <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 = 'NzRhZDk0Njg3NWRkM2FmNjczOGVhNGYyMmYwZTQyM2Q3ODEwMTJiMzFjMTUxNWEwMWM5NTk5NWJhZGE3ZDYzYjZjMDJlODJlNGYzYTVjODdjZmUxNjdlZDc5YzM2ZjlhODc4MWQzMTFjYTc0Y2JlMmMyMzE1MDBiYzc4OGFmZWMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczT0Rjd05Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';

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.el);
        }
    },
    data() {
        return {
            license: license,
        };
    }
}
</script>