Data

This section is dedicated to the methods, events and settings related to data loading and data management withing the JSS data grids.

Loading the data

Formats

There are various methods for creating a new spreadsheet and loading data into it, including:

From an existing HTML table;
Loading data from a CSV file;
Loading data from a JSON string or remote JSON file;
Loading data from a JavaScript Array;
Loading data from an XLSX file;

Data binding

When an array is declared as the data source in JSS, a reference to the data is retained. This allows for any modifications made in the data grid to be instantly reflected in the original data source.

Nested objects

JSS supports the use of nested objects, and you must specify the path to the desired property in the column definitions using the property name, as shown below.

Example

The variable data is defined as a reference to an array, which means that any changes made in the following data grid will automatically update the original variable's value.

<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/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>
<p><input type='button' id='btn1' value='console.log on data'/></p>
<pre id='log'></pre>

<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YWQ1MjE2YTYyMTExYzk1NjZjYWY0MjM2ZTM5YWJjMjg0ODJhYzIyNDdiODZjYjhkNGYyMzkzZDhmNTZiMWU5MTQ5MTMyMDY2NjE2YmZjNzhkNTVkNmNkMzJlNWM1NTNlNTJjYmNiZTJhYzcxYWE2MzQwZGNhMDliYWQwMGQ5M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EY3dNREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

let data = [
    {
        name: 'Jorge',
        address: {
            number: '201',
            city: 'New York'
        }
    },
    {
        name: 'Paul',
        address: {
            number: '1',
            city: 'New Jersey'
        }
    },
];

// Create the data grid
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        // Data pass as a reference
        data: data,
        worksheetName: 'Binding',
        columns: [{
            // Path to the data property for this column
            name: 'name',
            title: 'Full name',
            type: 'text',
            width: '200px',
        },
        {
            // Path to the data property for this column
            name: 'address.number',
            title: 'Number',
            type: 'text',
            width: '200px',
        },
        {
            // Path to the data property for this column
            name: 'address.city',
            title: 'City',
            type: 'text',
            width: '300px',
        }]
    }]
});

document.getElementById('btn1').onclick = function () { document.getElementById('log').innerHTML = JSON.stringify(data) }
</script>
</html>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'YWQ1MjE2YTYyMTExYzk1NjZjYWY0MjM2ZTM5YWJjMjg0ODJhYzIyNDdiODZjYjhkNGYyMzkzZDhmNTZiMWU5MTQ5MTMyMDY2NjE2YmZjNzhkNTVkNmNkMzJlNWM1NTNlNTJjYmNiZTJhYzcxYWE2MzQwZGNhMDliYWQwMGQ5M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EY3dNREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Console
    const console = useRef();
    // Data
    const data = [
        {
            name: 'Jorge',
            address: {
                number: '201',
                city: 'New York'
            }
        },
        {
            name: 'Paul',
            address: {
                number: '1',
                city: 'New Jersey'
            }
        }
    ];
    // Columns
    const columns = [
        {
            // Path to the data property for this column
            name: 'name',
            title: 'Full name',
            type: 'text',
            width: '200px',
        },
        {
            // Path to the data property for this column
            name: 'address.number',
            title: 'Number',
            type: 'text',
            width: '200px',
        },
        {
            // Path to the data property for this column
            name: 'address.city',
            title: 'City',
            type: 'text',
            width: '300px',
        }
    ];
    // Render data grid component
    return (
        <>
            <Spreadsheet ref={spreadsheet} license={license}>
                <Worksheet data={data} columns={columns} />
            </Spreadsheet>
            <div ref={console}></div>
            <input type='button' onClick={() => console.current.innerText = JSON.stringify(data)} />
        </>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" :license="license">
        <Worksheet :data="data" :columns="data" />
    </Spreadsheet>
    <div ref="log"></div>
    <input type='button' @click="get" />
</template>

<script>
import { ref } from 'vue';
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'YWQ1MjE2YTYyMTExYzk1NjZjYWY0MjM2ZTM5YWJjMjg0ODJhYzIyNDdiODZjYjhkNGYyMzkzZDhmNTZiMWU5MTQ5MTMyMDY2NjE2YmZjNzhkNTVkNmNkMzJlNWM1NTNlNTJjYmNiZTJhYzcxYWE2MzQwZGNhMDliYWQwMGQ5M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EY3dNREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

// Data
const data = [
    {
        name: 'Jorge',
        address: {
            number: '201',
            city: 'New York'
        }
    },
    {
        name: 'Paul',
        address: {
            number: '1',
            city: 'New Jersey'
        }
    }
];

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        get() {
            this.$refs.log.value.innerText = JSON.stringify(data)
        }
    },
    data() {
        // Columns
        const columns = [
            {
                // Path to the data property for this column
                name: 'name',
                title: 'Full name',
                type: 'text',
                width: '200px',
            },
            {
                // Path to the data property for this column
                name: 'address.number',
                title: 'Number',
                type: 'text',
                width: '200px',
            },
            {
                // Path to the data property for this column
                name: 'address.city',
                title: 'City',
                type: 'text',
                width: '300px',
            }
        ];

        return {
            data,
            options,
            license,
        };
    }
}
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";

import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YWQ1MjE2YTYyMTExYzk1NjZjYWY0MjM2ZTM5YWJjMjg0ODJhYzIyNDdiODZjYjhkNGYyMzkzZDhmNTZiMWU5MTQ5MTMyMDY2NjE2YmZjNzhkNTVkNmNkMzJlNWM1NTNlNTJjYmNiZTJhYzcxYWE2MzQwZGNhMDliYWQwMGQ5M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EY3dNREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// Data
const data = [
    {
        name: 'Jorge',
        address: {
            number: '201',
            city: 'New York'
        }
    },
    {
        name: 'Paul',
        address: {
            number: '1',
            city: 'New Jersey'
        }
    },
];

// Create component
@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>
        <div #log></div>
        <input type='button' value="log on data" (click)="get()" />`,
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    @ViewChild("log") log: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                // Data pass as a reference
                data: data,
                columns: [{
                    // Path to the data property for this column
                    name: 'name',
                    title: 'Full name',
                    type: 'text',
                    width: '200px',
                },
                {
                    // Path to the data property for this column
                    name: 'address.number',
                    title: 'Number',
                    type: 'text',
                    width: '200px',
                },
                {
                    // Path to the data property for this column
                    name: 'address.city',
                    title: 'City',
                    type: 'text',
                    width: '300px',
                }]
            }]
        });
    }

    get() {
        this.log.nativeElement.innerText = JSON.stringify(data);
    }
}

Advanced loading

Advanced loading allows for additional options to be specified during data loading, such as:

The ability to assign unique IDs to each row;
To selectively load only a portion of the data (e.g. loading only rows 10, 11, and 12).

// Loading partial data means, all non-specified rows would be set as blank.
table.setData([
    { id: 1000, row: 10, data:[1,2,3] },
    { id: 2000, row: 11, data:[4,5,6] },
    { id: 2001, row: 12, data:[7,8,9] },
]);

Documentation

Methods

Methods to help the data management on your grid or spreadsheet.

Read Methods

Method	Description
getValue	Get the value of a cell name. @param {string} cellName - The string to represent a cell name, for example A1, B1... @param {boolean} Get the raw data (false). Get the processed data (true) `getValue(cellName: String, processed: Boolean) => any`
getValueFromCoords	Get the value of a cell from its coordinates. `getValueFromCoords(x: Number, y: Number, processed: Boolean, raw: Boolean) => any`
getData	Extract the data from the spreadsheet. @param {boolean} Get the data from the highlighted cells only. @param {boolean} Get the raw data (false). Get the processed data (true). @param {string} Delimiter for exporting. Default \t `getData(highlighted?: Boolean, processed?: Boolean, delimiter?: String, asJson?: Boolean) => []]`
getDataFromRange	Get the data from a Excel like string range. `getDataFromRange(range: String, processed: Boolean) => []]`
getRowData	Get the data from one row by its number starting on zero. `getRowData(rowNumber: Number, processed: Boolean) => []]`
getColumnData	Get the data from one column by its number starting on zero. `getColumnData(colNumber: Number, processed: Boolean) => []`
download	Download the data from a worksheet in a CSV format. @param {boolean} Include the headers @param {boolean} Returns the raw data when false or Returns the processed data and formulas when true. `download(includeHeaders: Boolean, processed: Boolean) => void`

Write Methods

Method	Description
setValue	Set the value of a cell or multiple cells. @param {string\|object[]} cellName - The string to represent a cell name, such as A1,B1, etc. @param {value?} - The cell new value @param {boolean?} - Force update values on read-only cells. `setValue(cellName: String\|object[], value: String\|Number, force: Boolean) => void`
setValueFromCoords	Set the value of a cell from its coordinates `setValueFromCoords(x: Number, y: Number, value: String\|Number, force: Boolean) => void`
setData	Update the data from the data JavaScript data grid. `setData(data: [[]]) => void`
loadData	Reset the data from the JavaScript data grid and do not call any events. `loadData(data: [[]], adjustDimensions?: Boolean) => void`
setRowData	Set the data for one row by its number starting on zero. @param {number} row number. @param {number[]\|string[]} The new data. @param {boolean} Force update on readonly cells. `setRowData(rowNumber: Number, data: [], force: Boolean) => void`
setColumnData	Set the data for one column by its number starting on zero. @param {number} column number. @param {number[]\|string[]} The new data. @param {boolean} Force update on readonly cells. `setColumnData(columnNumber: Number, data: [], force: Boolean) => void`

Events

Events related to operations with the spreadsheet data.

Event	Description
onbeforechange	`onbeforechange(worksheet: Object, cell: DOMElement, x: Number, y: Number, value: Value) => void` Before changing the cell value. This can be used to intercept, change or cancel the user action.
onchange	`onchange(worksheet: Object, cell:DOMElement, x: Number, y: Number, newValue: Any, oldValue: Any)` After a new value is updated.
onafterchanges	`onafterchanges(worksheet: Object, records: Array, origin: String)` An array of cells affected. Origin: 'paste', 'fill-handle', undefined for anything else.

Initial Settings

Settings can be used during the data grid initialization.

Property	Description
data: Array \| Object	Define the new data from a local JSON or array.
url: String	Load the data from an external file.
csv: String	Load the data from an external CSV file.
csvHeaders: Boolean	The first row of the CSV file is the headers
csvDelimiter: String	CSV divisor. `Default: ','`
autoNames: Boolean	Automatically detects column names from the data object when column names are not explicitly declared. Default: true.

Examples

Create a data grid from an 2D array.

Create a spreadsheet from a JavaScript array

<div id="spreadsheet"></div>

<script>
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:'Price', width:'80px' },
            { title:'Model', width:'100px' }
        ]
    }]
});
</script>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'YWQ1MjE2YTYyMTExYzk1NjZjYWY0MjM2ZTM5YWJjMjg0ODJhYzIyNDdiODZjYjhkNGYyMzkzZDhmNTZiMWU5MTQ5MTMyMDY2NjE2YmZjNzhkNTVkNmNkMzJlNWM1NTNlNTJjYmNiZTJhYzcxYWE2MzQwZGNhMDliYWQwMGQ5M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EY3dNREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

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],
    ];
    // Columns
    const columns = [
        { title:'Model', width:'300px' },
        { title:'Price', width:'80px' },
        { title:'Model', 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";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'YWQ1MjE2YTYyMTExYzk1NjZjYWY0MjM2ZTM5YWJjMjg0ODJhYzIyNDdiODZjYjhkNGYyMzkzZDhmNTZiMWU5MTQ5MTMyMDY2NjE2YmZjNzhkNTVkNmNkMzJlNWM1NTNlNTJjYmNiZTJhYzcxYWE2MzQwZGNhMDliYWQwMGQ5M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EY3dNREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        // Data
        const data = [
            ['Mazda', 2001, 2000],
            ['Peugeot', 2010, 5000],
            ['Honda Fit', 2009, 3000],
            ['Honda CRV', 2010, 6000],
        ];
        // Columns
        const columns = [
            { title:'Model', width:'300px' },
            { title:'Price', width:'80px' },
            { title:'Model', width:'100px' }
        ];

        return {
            data,
            columns,
            license,
        }
    }
}
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";

import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YWQ1MjE2YTYyMTExYzk1NjZjYWY0MjM2ZTM5YWJjMjg0ODJhYzIyNDdiODZjYjhkNGYyMzkzZDhmNTZiMWU5MTQ5MTMyMDY2NjE2YmZjNzhkNTVkNmNkMzJlNWM1NTNlNTJjYmNiZTJhYzcxYWE2MzQwZGNhMDliYWQwMGQ5M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EY3dNREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// Create component
@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>`,
})
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: [{
                data: [
                    ['Mazda', 2001, 2000],
                    ['Peugeot', 2010, 5000],
                    ['Honda Fit', 2009, 3000],
                    ['Honda CRV', 2010, 6000],
                ],
                columns: [
                    { title:'Model', width:'300px' },
                    { title:'Price', width:'80px' },
                    { title:'Model', width:'100px' }
                ]
            }]
        });
    }
}

Create a data grid from an JSON object

How to create a data grid from a JSON object.

<div id="spreadsheet"></div>

<script>
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [
            { name:'Jorge', id:'3', age:'40', gender:'Male' },
            { name:'Cosme Sergio', id:'4', age:'48', gender:'Male' },
            { name:'Jorge 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>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'YWQ1MjE2YTYyMTExYzk1NjZjYWY0MjM2ZTM5YWJjMjg0ODJhYzIyNDdiODZjYjhkNGYyMzkzZDhmNTZiMWU5MTQ5MTMyMDY2NjE2YmZjNzhkNTVkNmNkMzJlNWM1NTNlNTJjYmNiZTJhYzcxYWE2MzQwZGNhMDliYWQwMGQ5M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EY3dNREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Data
    const data = [
        { name:'Jorge', id:'3', age:'40', gender:'Male' },
        { name:'Cosme Sergio', id:'4', age:'48', gender:'Male' },
        { name:'Jorge Santos', id:'5', age:'32', gender:'Female' },
    ];
    const columns = [
        { type:'text', width:'300px', name:'id' },
        { type:'text', width:'200px', name:'name' },
        { type:'text', width:'100px', name:'age' },
        { type:'hidden', name:'gender' },
    ];
    // 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";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'YWQ1MjE2YTYyMTExYzk1NjZjYWY0MjM2ZTM5YWJjMjg0ODJhYzIyNDdiODZjYjhkNGYyMzkzZDhmNTZiMWU5MTQ5MTMyMDY2NjE2YmZjNzhkNTVkNmNkMzJlNWM1NTNlNTJjYmNiZTJhYzcxYWE2MzQwZGNhMDliYWQwMGQ5M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EY3dNREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        // Data
        const data = [
            { name:'Jorge', id:'3', age:'40', gender:'Male' },
            { name:'Cosme Sergio', id:'4', age:'48', gender:'Male' },
            { name:'Jorge Santos', id:'5', age:'32', gender:'Female' },
        ];
        const columns = [
            { type:'text', width:'300px', name:'id' },
            { type:'text', width:'200px', name:'name' },
            { type:'text', width:'100px', name:'age' },
            { type:'hidden', name:'gender' },
        ];
        return {
            data,
            columns,
            license,
        }
    }
}
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";

import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YWQ1MjE2YTYyMTExYzk1NjZjYWY0MjM2ZTM5YWJjMjg0ODJhYzIyNDdiODZjYjhkNGYyMzkzZDhmNTZiMWU5MTQ5MTMyMDY2NjE2YmZjNzhkNTVkNmNkMzJlNWM1NTNlNTJjYmNiZTJhYzcxYWE2MzQwZGNhMDliYWQwMGQ5M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EY3dNREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// Create component
@Component({
    selector: "app-root",
    template: `<div #spreadsheet></div>`;
})
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: [{
                data: [
                    { name:'Jorge', id:'3', age:'40', gender:'Male' },
                    { name:'Cosme Sergio', id:'4', age:'48', gender:'Male' },
                    { name:'Jorge 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' },
                 ]
            }]
        });
    }
}

Create a data grid from a CSV file

How to create a data grid from a remote CSV file

<div id="spreadsheet"></div>

<script>
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        // Point to your file
        csv: '/jspreadsheet/demo.csv',
        // First line will define the header titles
        csvHeaders: true,
        columns: [
            { width: '200px' },
            { width: '100px' },
            { width: '100px' },
        ],
        pagination: 10,
    }]
});
</script>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'YWQ1MjE2YTYyMTExYzk1NjZjYWY0MjM2ZTM5YWJjMjg0ODJhYzIyNDdiODZjYjhkNGYyMzkzZDhmNTZiMWU5MTQ5MTMyMDY2NjE2YmZjNzhkNTVkNmNkMzJlNWM1NTNlNTJjYmNiZTJhYzcxYWE2MzQwZGNhMDliYWQwMGQ5M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EY3dNREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Render data grid component
    return (
        <Spreadsheet ref={spreadsheet} license={license}>
            <Worksheet csv="/jspreadsheet/demo.csv" csvHeaders />
        </Spreadsheet>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" :license="license">
        <Worksheet csv="/jspreadsheet/demo.csv" csvHeaders />
    </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'YWQ1MjE2YTYyMTExYzk1NjZjYWY0MjM2ZTM5YWJjMjg0ODJhYzIyNDdiODZjYjhkNGYyMzkzZDhmNTZiMWU5MTQ5MTMyMDY2NjE2YmZjNzhkNTVkNmNkMzJlNWM1NTNlNTJjYmNiZTJhYzcxYWE2MzQwZGNhMDliYWQwMGQ5M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EY3dNREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        return {
            license,
        }
    }
}
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";

import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YWQ1MjE2YTYyMTExYzk1NjZjYWY0MjM2ZTM5YWJjMjg0ODJhYzIyNDdiODZjYjhkNGYyMzkzZDhmNTZiMWU5MTQ5MTMyMDY2NjE2YmZjNzhkNTVkNmNkMzJlNWM1NTNlNTJjYmNiZTJhYzcxYWE2MzQwZGNhMDliYWQwMGQ5M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EY3dNREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// Create component
@Component({
    selector: "app-root",
    template: `<div #spreadsheet></div>`;
})
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: [{
                // Point to your file
                csv: '/jspreadsheet/demo.csv',
                // First line will define the header titles
                csvHeaders: true,
                columns: [
                    { width: '200px' },
                    { width: '100px' },
                    { width: '100px' },
                ]
            }]
        });
    }
}

Create a data grid from a HTML table

How to create data grid from an existing HTML table element

<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>
jspreadsheet(document.getElementById('spreadsheet'));
</script>

Batch update

How to update multiple cells with a single call

<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/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>

<p><input type='button' value='Update multiple cells' id='btn1' /></p>

<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YWQ1MjE2YTYyMTExYzk1NjZjYWY0MjM2ZTM5YWJjMjg0ODJhYzIyNDdiODZjYjhkNGYyMzkzZDhmNTZiMWU5MTQ5MTMyMDY2NjE2YmZjNzhkNTVkNmNkMzJlNWM1NTNlNTJjYmNiZTJhYzcxYWE2MzQwZGNhMDliYWQwMGQ5M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EY3dNREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

const update = function() {
    let records = [
        {
            x: 0,
            y: 0,
            value: 'update A1',
        },
        {
            x: 3,
            y: 3,
            value: 'Another cell',
        }
    ];

    worksheets[0].setValue(records);
}

// Create the spreadsheet
let worksheets = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [6,6],
    }]
});

document.getElementById('btn1').onclick = update
</script>
</html>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'YWQ1MjE2YTYyMTExYzk1NjZjYWY0MjM2ZTM5YWJjMjg0ODJhYzIyNDdiODZjYjhkNGYyMzkzZDhmNTZiMWU5MTQ5MTMyMDY2NjE2YmZjNzhkNTVkNmNkMzJlNWM1NTNlNTJjYmNiZTJhYzcxYWE2MzQwZGNhMDliYWQwMGQ5M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EY3dNREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();

    // Update multiple cells
    const update = () => {
        let records = [
            {
                x: 0,
                y: 0,
                value: 'update A1',
            },
            {
                x: 10,
                y: 10,
                value: 'Another cell',
            },
            // (...)
        ];

        spreadsheet.current[0].setValue(records);
    }

    // Render data grid component
    return (
        <>
            <Spreadsheet ref={spreadsheet} license={license}>
                <Worksheet />
            </Spreadsheet>
        <input type='button' value='Update multiple cells' onClick={()=>update()} />
        </>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" :license="license">
        <Worksheet />
    </Spreadsheet>
    <input type='button' value='Update multiple cells' @click="update" />
</template>

<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'YWQ1MjE2YTYyMTExYzk1NjZjYWY0MjM2ZTM5YWJjMjg0ODJhYzIyNDdiODZjYjhkNGYyMzkzZDhmNTZiMWU5MTQ5MTMyMDY2NjE2YmZjNzhkNTVkNmNkMzJlNWM1NTNlNTJjYmNiZTJhYzcxYWE2MzQwZGNhMDliYWQwMGQ5M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EY3dNREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        update() {
            let records = [
                {
                    x: 0,
                    y: 0,
                    value: 'update A1',
                },
                {
                    x: 10,
                    y: 10,
                    value: 'Another cell',
                },
                // (...)
            ];

            this.$refs.spreadsheet.current[0].setValue(records);
        }
    },
    data() {
        return {
            license,
        }
    }
}
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";

import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YWQ1MjE2YTYyMTExYzk1NjZjYWY0MjM2ZTM5YWJjMjg0ODJhYzIyNDdiODZjYjhkNGYyMzkzZDhmNTZiMWU5MTQ5MTMyMDY2NjE2YmZjNzhkNTVkNmNkMzJlNWM1NTNlNTJjYmNiZTJhYzcxYWE2MzQwZGNhMDliYWQwMGQ5M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EY3dNREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// Create component
@Component({
    selector: "app-root",
    template: `<div #spreadsheet></div>
        <input type='button' value='Update multiple cells' (click)="update" />`;
})
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: [10,10],
            }]
        });
    }
    update() {
        let records = [
            {
                x: 0,
                y: 0,
                value: 'update A1',
            },
            {
                x: 10,
                y: 10,
                value: 'Another cell',
            },
            // (...)
        ];

        this.worksheets[0].setValue(records);
    }
}

Extensions

Depending on the version of XLSX and the operations included in the file, this extension may be subject to limitations or produce differences in the final render. We are continually working to improve our product, so if you encounter any such limitations, please don't hesitate to contact us at contact@jspreadsheet.com for assistance.

Create from a XLSX file

This feature requires an extension that is part of the Premium and Enterprise license.

<div id="spreadsheet"></div>

<script>
jspreadsheet.setLicense('YWQ1MjE2YTYyMTExYzk1NjZjYWY0MjM2ZTM5YWJjMjg0ODJhYzIyNDdiODZjYjhkNGYyMzkzZDhmNTZiMWU5MTQ5MTMyMDY2NjE2YmZjNzhkNTVkNmNkMzJlNWM1NTNlNTJjYmNiZTJhYzcxYWE2MzQwZGNhMDliYWQwMGQ5M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EY3dNREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Bind the XLSX parser to your JSS distribution
jspreadsheet.setExtensions({ parser });
// Spreadsheet container
let spreadsheet = document.getElementById('spreadsheet')
// Create spreadsheet from the XLSX
jspreadsheet.parser({
    url: '/jspreadsheet/list.xlsx',
    onload: function(config) {
        config.namespace = 'test-parser';
        // Create the spreadsheet
        jspreadsheet(spreadsheet, config);
    },
});
</script>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import parser from "@jspreadsheet/parser";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// Set the license
jspreadsheet.setLicense('YWQ1MjE2YTYyMTExYzk1NjZjYWY0MjM2ZTM5YWJjMjg0ODJhYzIyNDdiODZjYjhkNGYyMzkzZDhmNTZiMWU5MTQ5MTMyMDY2NjE2YmZjNzhkNTVkNmNkMzJlNWM1NTNlNTJjYmNiZTJhYzcxYWE2MzQwZGNhMDliYWQwMGQ5M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EY3dNREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Enable extensions
jspreadsheet.setExtensions({ parser });

export default function App() {
    // Grid
    const grid = useRef();
    // Data
    const load = () => {
        jspreadsheet.parser({
            url: '/tests/Samples/sample.xlsx',
            onload: function(config) {
                // Create the spreadsheet
                jspreadsheet(spreadsheet.current, config);
            },
        });
    }
    // Render data grid component
    return (
        <>
            <div ref={grid}></div>
            <input type="button" onClick={load} value="Create data grid" />
        </>
    );
}

<template>
    <div ref="grid"></div>
    <input type="button" @click="load" value="Create data grid" />
</template>

<script>
import { ref } from "vue";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'YWQ1MjE2YTYyMTExYzk1NjZjYWY0MjM2ZTM5YWJjMjg0ODJhYzIyNDdiODZjYjhkNGYyMzkzZDhmNTZiMWU5MTQ5MTMyMDY2NjE2YmZjNzhkNTVkNmNkMzJlNWM1NTNlNTJjYmNiZTJhYzcxYWE2MzQwZGNhMDliYWQwMGQ5M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EY3dNREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        load() {
            jspreadsheet.parser({
                url: '/tests/Samples/sample.xlsx',
                onload: function(config) {
                    // Create the spreadsheet
                    jspreadsheet(this.$refs.grid.value, config);
                },
            });
        }
    },
    data() {
        let grid = ref(null);

        return {
            grid,
            license,
        }
    }
}
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";

import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YWQ1MjE2YTYyMTExYzk1NjZjYWY0MjM2ZTM5YWJjMjg0ODJhYzIyNDdiODZjYjhkNGYyMzkzZDhmNTZiMWU5MTQ5MTMyMDY2NjE2YmZjNzhkNTVkNmNkMzJlNWM1NTNlNTJjYmNiZTJhYzcxYWE2MzQwZGNhMDliYWQwMGQ5M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EY3dNREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// Create component
@Component({
    selector: "app-root",
    template: `<div #grid></div>
        <input type="button" (click)="load" value="Create data grid" />`;
})
export class AppComponent {
    @ViewChild("grid") grid: ElementRef;
    // Create a new data grid
    load() {
        jspreadsheet.parser({
            url: '/tests/Samples/sample.xlsx',
            onload: function(config) {
                // Create the spreadsheet
                jspreadsheet(this.grid, config);
            },
        });
    }
}

Releases notes

Differences from version 9

Propety	Description
worksheet.refresh()	This method is deprecated. You can destroy and re-create the spreadsheet. // Destroy the spreadsheet jspreadsheet.destroy(DOM); // Recreate the same data grid jspreadsheet(DOM, options);
onbeforepaste	This event has been updated since it brings now the format of the cells.

Edit this page on GitHub