Documentation keyboard_arrow_right Data

Spreadsheet Data

Jspreadsheet offers comprehensive data management capabilities, supporting multiple data sources and formats for maximum flexibility. The following data sources are supported:

• Arrays: Direct data binding using 2D arrays or arrays of objects
• JSON: Import from JSON strings, objects, or remote JSON endpoints
• CSV: Load data from local or remote CSV files with configurable delimiters
• HTML Tables: Convert existing HTML tables into interactive spreadsheets
• XLSX: Import Excel files with full formatting support (Premium/Enterprise editions)

Documentation

Methods

These methods provide programmatic control over spreadsheet data, organized by their primary function.

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} processed - Get the raw data (false). Get the processed data (true). @param {boolean} raw - Get the value without mask or other changes (true) getValue(cellName: String, processed: Boolean, raw: 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|number[]} highlighted - Get the data from the highlighted cells only. @param {boolean} processed - Get the raw data (false). Get the processed data (true). @param {string} delimiter - Delimiter for exporting. Default \t getData(highlighted?: Boolean|Number[], processed?: Boolean, delimiter?: String, asJson?: Boolean, includeFilteredRows?: Boolean) => [][]
getDataFromRange	Get the data from an Excel-like string range. getDataFromRange(range: String, processed: Boolean) => [][]
getRowData	Get the data from one row by its number starting at 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 CSV format. @param {boolean} includeHeaders - Include the headers @param {boolean} processed - 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 {any} value - The cell's new value @param {boolean} force - 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 @param {number} x - Cell x coordinate @param {number} y - Cell y coordinate @param {any} value - The cell's new value @param {boolean} force - Force update values on read-only cells. setValueFromCoords(x: Number, y: Number, value: String|Number, force: Boolean) => void
setData	Update the data from the 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 at zero. @param {number} rowNumber - Row number. @param {number[]|string[]} data - The new data. @param {boolean} force - Force update on readonly cells. setRowData(rowNumber: Number, data: [], force: Boolean) => void
setColumnData	Set the data for one column by its number starting at zero. @param {number} columnNumber - Column number. @param {number[]|string[]} data - The new data. @param {boolean} force - Force update on readonly cells. setColumnData(columnNumber: Number, data: [], force: Boolean) => void

Events

The following events are triggered during spreadsheet data operations.

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.
onbeforechanges	onbeforechanges(worksheet: Object, changes: Array) Before multiple cells are changed. This can be used to intercept, change or cancel the user actions.
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

These settings can be configured during spreadsheet initialization to control data loading behavior.

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.

autoNames

The autoNames feature automatically maps JSON object properties to columns when data is provided as JSON objects:

• Ensures all properties from the first data object are declared as columns
• Automatically generates column names when not explicitly defined by the user

Advanced loading

Advanced data loading provides additional options for complex scenarios:

• Assign unique IDs to specific rows
• Selectively load only portions of the data (e.g., specific row ranges)
• Load data with custom positioning and metadata

// 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] },
]);

Data binding

When using arrays as the data source, Jspreadsheet maintains a reference to the original data. This enables real-time synchronization where any changes made in the spreadsheet are automatically reflected in the source data array.

Nested Objects Support

Jspreadsheet supports nested objects in data sources. Specify the property path in column definitions using dot notation to access nested properties.

Example

The data variable maintains a reference to the original array, ensuring that any changes made in the spreadsheet automatically update the source data.

<html>
<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/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('ZjdhZTdkZWE5MjdmOWVlMTM3YTczYTU3ZDE2OGFhZjNkODRiYzMxYzQ3Y2RhYjRlMjliYzQzMGYwMzhlOGY4NjY0MjE2YWZhNDhjNzVmYWYwOGRhZGZhMzU3NTEwMThlMDViMGNlNjFmZTdhZGViNzExZGNjYzEyMzRmZGY3MWYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNRGc0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

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, jspreadsheet} from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

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

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}>
                <Worksheet data={data} columns={columns}/>
            </Spreadsheet>
            <div ref={console}></div>
            <button onClick={() => console.current.innerText = JSON.stringify(data)}>console.log</button>
        </>
    );
}

<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet :data="data" :columns="columns" />
    </Spreadsheet>
    <div ref="log"></div>
    <button @click="get">console.log on data</button>
</template>

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

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

// 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.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: '200px',
            },
        ];

        return {
            data,
            columns
        };
    },
};
</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('ZjdhZTdkZWE5MjdmOWVlMTM3YTczYTU3ZDE2OGFhZjNkODRiYzMxYzQ3Y2RhYjRlMjliYzQzMGYwMzhlOGY4NjY0MjE2YWZhNDhjNzVmYWYwOGRhZGZhMzU3NTEwMThlMDViMGNlNjFmZTdhZGViNzExZGNjYzEyMzRmZGY3MWYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNRGc0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// 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: 200,
                    },
                    {
                        // Path to the data property for this column
                        name: 'address.number',
                        title: 'Number',
                        type: 'text',
                        width: 200,
                    },
                    {
                        // Path to the data property for this column
                        name: 'address.city',
                        title: 'City',
                        type: 'text',
                        width: 300,
                    },
                ],
            }, ],
        });
    }

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

Examples

Create a data grid from a 2D array.

This example demonstrates creating a spreadsheet from a 2D JavaScript array.

<html>
<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/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('ZjdhZTdkZWE5MjdmOWVlMTM3YTczYTU3ZDE2OGFhZjNkODRiYzMxYzQ3Y2RhYjRlMjliYzQzMGYwMzhlOGY4NjY0MjE2YWZhNDhjNzVmYWYwOGRhZGZhMzU3NTEwMThlMDViMGNlNjFmZTdhZGViNzExZGNjYzEyMzRmZGY3MWYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNRGc0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

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, jspreadsheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

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

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:'Year', width:'80px' },
        { title:'Price', width:'100px' }
    ];
    // Render data grid component
    return (
        <Spreadsheet ref={spreadsheet}>
            <Worksheet data={data} columns={columns} />
        </Spreadsheet>
    );
}

<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet :data="data" :columns="columns" />
    </Spreadsheet>
</template>

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

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

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

        return {
            data,
            columns
        }
    }
}
</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('ZjdhZTdkZWE5MjdmOWVlMTM3YTczYTU3ZDE2OGFhZjNkODRiYzMxYzQ3Y2RhYjRlMjliYzQzMGYwMzhlOGY4NjY0MjE2YWZhNDhjNzVmYWYwOGRhZGZhMzU3NTEwMThlMDViMGNlNjFmZTdhZGViNzExZGNjYzEyMzRmZGY3MWYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNRGc0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

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

Create a data grid from a JSON object

This example shows how to create a new data grid from an array of JSON objects.

<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/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('ZjdhZTdkZWE5MjdmOWVlMTM3YTczYTU3ZDE2OGFhZjNkODRiYzMxYzQ3Y2RhYjRlMjliYzQzMGYwMzhlOGY4NjY0MjE2YWZhNDhjNzVmYWYwOGRhZGZhMzU3NTEwMThlMDViMGNlNjFmZTdhZGViNzExZGNjYzEyMzRmZGY3MWYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNRGc0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

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, jspreadsheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

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

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}>
            <Worksheet data={data} columns={columns} />
        </Spreadsheet>
    );
}

<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet :data="data" :columns="columns" />
    </Spreadsheet>
</template>

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

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

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
        }
    }
}
</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('ZjdhZTdkZWE5MjdmOWVlMTM3YTczYTU3ZDE2OGFhZjNkODRiYzMxYzQ3Y2RhYjRlMjliYzQzMGYwMzhlOGY4NjY0MjE2YWZhNDhjNzVmYWYwOGRhZGZhMzU3NTEwMThlMDViMGNlNjFmZTdhZGViNzExZGNjYzEyMzRmZGY3MWYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNRGc0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// 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: [
            { 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: 300, name: 'id' },
            { type: 'text', width: 200, name: 'name' },
            { type: 'text', width: 100, name: 'age' },
            { type: 'hidden', name: 'gender' },
          ],
        },
      ],
    });
  }
}

Create a data grid from a CSV file

This example demonstrates loading spreadsheet data from a remote CSV file.

<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/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('ZjdhZTdkZWE5MjdmOWVlMTM3YTczYTU3ZDE2OGFhZjNkODRiYzMxYzQ3Y2RhYjRlMjliYzQzMGYwMzhlOGY4NjY0MjE2YWZhNDhjNzVmYWYwOGRhZGZhMzU3NTEwMThlMDViMGNlNjFmZTdhZGViNzExZGNjYzEyMzRmZGY3MWYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNRGc0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        // Point to your file
        csv: 'http://localhost:8009/jspreadsheet/demo.csv',
        // The 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, jspreadsheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

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

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

<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet csv="/jspreadsheet/demo.csv" csvHeaders={true} />
    </Spreadsheet>
</template>

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

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

export default {
    components: {
        Spreadsheet,
        Worksheet,
    }
}
</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('ZjdhZTdkZWE5MjdmOWVlMTM3YTczYTU3ZDE2OGFhZjNkODRiYzMxYzQ3Y2RhYjRlMjliYzQzMGYwMzhlOGY4NjY0MjE2YWZhNDhjNzVmYWYwOGRhZGZhMzU3NTEwMThlMDViMGNlNjFmZTdhZGViNzExZGNjYzEyMzRmZGY3MWYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNRGc0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// 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: [{
                // Point to your file
                csv: '/jspreadsheet/demo.csv',
                // First line will define the header titles
                csvHeaders: true,
                columns: [
                    { width: 200 },
                    { width: 100 },
                    { width: 100 },
                ]
            }]
        });
    }
}

Create a data grid from an HTML table

This example shows how to convert an existing HTML table into an interactive spreadsheet.

<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

This example demonstrates updating multiple cells simultaneously using batch operations.

<html>
<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/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('ZjdhZTdkZWE5MjdmOWVlMTM3YTczYTU3ZDE2OGFhZjNkODRiYzMxYzQ3Y2RhYjRlMjliYzQzMGYwMzhlOGY4NjY0MjE2YWZhNDhjNzVmYWYwOGRhZGZhMzU3NTEwMThlMDViMGNlNjFmZTdhZGViNzExZGNjYzEyMzRmZGY3MWYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNRGc0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

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, jspreadsheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

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

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: 3,
        y: 3,
        value: 'Another cell',
      },
      // (...)
    ];

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

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

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

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

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

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

            this.$refs.spreadsheet.current[0].setValue(records);
        }
    },
    data() {
        return {
        }
    }
}
</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('ZjdhZTdkZWE5MjdmOWVlMTM3YTczYTU3ZDE2OGFhZjNkODRiYzMxYzQ3Y2RhYjRlMjliYzQzMGYwMzhlOGY4NjY0MjE2YWZhNDhjNzVmYWYwOGRhZGZhMzU3NTEwMThlMDViMGNlNjFmZTdhZGViNzExZGNjYzEyMzRmZGY3MWYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNRGc0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Create component
@Component({
    standalone: true,
    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: 3,
                y: 3,
                value: 'Another cell',
            },
            // (...)
        ];

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

Extensions

Excel file compatibility depends on the XLSX version and features used. While we continually improve compatibility, some limitations may exist. Contact support at [email protected] if you encounter any issues.

Create from a XLSX file

This feature requires the XLSX parser extension, available in Premium and Enterprise editions.

<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/[email protected]/dist/index.min.js"></script>

<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('ZjdhZTdkZWE5MjdmOWVlMTM3YTczYTU3ZDE2OGFhZjNkODRiYzMxYzQ3Y2RhYjRlMjliYzQzMGYwMzhlOGY4NjY0MjE2YWZhNDhjNzVmYWYwOGRhZGZhMzU3NTEwMThlMDViMGNlNjFmZTdhZGViNzExZGNjYzEyMzRmZGY3MWYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNRGc0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
// Bind the XLSX parser to your JSS distribution
jspreadsheet.setExtensions({ parser });
// Spreadsheet container
let spreadsheet = document.getElementById('spreadsheet')
// Create a 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 your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZjdhZTdkZWE5MjdmOWVlMTM3YTczYTU3ZDE2OGFhZjNkODRiYzMxYzQ3Y2RhYjRlMjliYzQzMGYwMzhlOGY4NjY0MjE2YWZhNDhjNzVmYWYwOGRhZGZhMzU3NTEwMThlMDViMGNlNjFmZTdhZGViNzExZGNjYzEyMzRmZGY3MWYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNRGc0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
// Enable extensions
jspreadsheet.setExtensions({ parser });

export default function App() {
    // Grid
    const grid = useRef();
    // Data
    const load = () => {
        jspreadsheet.parser({
            url: '/jspreadsheet/list.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";

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

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

        return {
            grid
        }
    }
}
</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('ZjdhZTdkZWE5MjdmOWVlMTM3YTczYTU3ZDE2OGFhZjNkODRiYzMxYzQ3Y2RhYjRlMjliYzQzMGYwMzhlOGY4NjY0MjE2YWZhNDhjNzVmYWYwOGRhZGZhMzU3NTEwMThlMDViMGNlNjFmZTdhZGViNzExZGNjYzEyMzRmZGY3MWYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNRGc0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Create component
@Component({
    standalone: true,
    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: '/jspreadsheet/list.xlsx',
            onload: function(config) {
                // Create the spreadsheet
                jspreadsheet(this.grid, config);
            },
        });
    }
}