Worksheets

Jspreadsheet supports multiple worksheets within a single spreadsheet. You can control user interactions through configuration settings and manage worksheets programmatically with available methods and events.

Documentation

Methods

Methods to interact programmatically with worksheets.

Property	Description
`getWorksheet`	Get the worksheet position by worksheet object or by the worksheetId. `getWorksheet(worksheetIdent: worksheetInstance \| String) => Number`
`getWorksheetName`	Get the worksheet name by index. `getWorksheetName(position?: Number) => String`
`openWorksheet`	Open the worksheet by index. `openWorksheet(position?: Number) => void`
`createWorksheet`	Add a new worksheet to the online spreadsheet based on a given configuration. `createWorksheet(worksheetOptions: Object, position?: Number) => worksheetInstance`
`deleteWorksheet`	Delete an existing worksheet by index. `deleteWorksheet(position?: Number) => void`
`renameWorksheet`	Rename an existing worksheet by index. `renameWorksheet(position: Number, title: String) => void`
`moveWorksheet`	Move the position of a worksheet. `moveWorksheet(from: Number, to: Number, ignoreDomUpdates?: Boolean) => void`
`getWorksheetActive`	Get the current active worksheet number. `getWorksheetActive() => Number`
`getWorksheetInstanceByName`	Get the worksheet instance by worksheet name `getWorksheetInstanceByName(worksheetName: String, namespace?: String) => worksheetInstance`
`setWorksheetState`	Hide or show worksheets `setWorksheetState(worksheetIndex: Number, state: Boolean) => void`

Events

Events related to worksheets.

Event	Description
`onopenworksheet`	Triggered when a worksheet is opened or becomes active. `onopenworksheet(worksheet: Object, worksheetNumber: Number) : void`
`onbeforecreateworksheet`	Intercept the creation of worksheets to cancel or define the configuration of the new worksheet. `onbeforecreateworksheet(options: Object, worksheetNumber: Number) : object \| false \| void`
`oncreateworksheet`	Triggered after a new worksheet has been created. `oncreateworksheet(worksheet: Object, worksheetOptions: Object, worksheetNumber: Number) : void`
`onrenameworksheet`	Triggered when a worksheet is renamed. `onrenameworksheet(worksheet: Object, worksheetIndex: Number, value: String, oldValue: String) : void;`
`onbeforedeleteworksheet`	Intercept the deletion of a worksheet, return false to cancel the user action. `onbeforedeleteworksheet(worksheet: Object, worksheetNumber: Number) : false \| void`
`ondeleteworksheet`	Triggered after a worksheet has been deleted. `ondeleteworksheet(worksheet: Object, oldWorksheetNumber: Number) : void`
`onmoveworksheet`	Triggered when a worksheet position is changed. `onmoveworksheet(worksheet: Object, newPosition: Number, oldPosition: Number) : void`

Configuration

Settings to configure spreadsheet and worksheet management behavior.

Worksheet Settings

Property	Description
`worksheetId: string`	Worksheet identification. Default: randomNumber
`worksheetName: string`	Worksheet title. Default: string + integer. Note: avoid numeric-only worksheet names
`worksheetState: 'visible' \| 'hidden'`	Worksheet visibility state. Default: 'visible'

Spreadsheet Properties

Property	Description
tabs?: boolean\|object	Show tabs and allow the user to create new worksheets. Default: false.
`allowDeleteWorksheet?: boolean`	Add a delete worksheet option to the contextMenu. Default: true
`allowRenameWorksheet?: boolean`	Add the rename worksheet option to the contextMenu. Default: true
`allowMoveWorksheet?: boolean`	Allow worksheet drag and drop options. Default: true

Tabs customizations

Additional customizations are allowed using the extended tabs object declaration as example below.

Property	Description
`allowCreate: boolean`	Show the create new tab button
`allowChangePosition: boolean`	Allow drag and drop of the headers to change the tab position
`animation: boolean`	Allow the header border bottom animation.
`hideHeaders: boolean`	Hide the tab headers if only one tab is present.
`padding: number`	Default padding content
`position: string`	Position of the headers: top \| bottom. Default: top

The tab object uses the same properties as the jSuites.tabs plugin, which can be applied to customize tab position and behavior.
More details: jSuites Tabs Plugin

Examples

Active worksheet

How to get the active worksheet number on a JSS spreadsheet.

<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="Get active worksheet" id="btn1"/>
<input type="button" value="Rename first worksheet" id="btn2"/></p>

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

// Create the spreadsheet
let worksheets = jspreadsheet(document.getElementById('spreadsheet'), {
    // Allow create a new tab button
    tabs: true,
    // Initial worksheet
    worksheets: [
        { minDimensions: [6,6] },
        { minDimensions: [6,6] },
    ],
});

document.getElementById("btn1").onclick = () => alert(worksheets[0].parent.getWorksheetActive());
document.getElementById("btn2").onclick = () => worksheets[0].parent.renameWorksheet(0, 'Anything');
</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('OTVjNDU1NTIzNmM3NWZhYjRjNjQ2YjVhMzNmODJmODljZDhkY2QwYjEzZmU1OGZlZGFlYmRjODVlODc0Y2VlZjJlOGZmMzhjNGE5ZDNmMDczNjI3MDlhMzRlNzg2NjVjY2YxYmVjZjgzNjBkZWQ2Njc1Y2NiODdjNjg5MzBjZjYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJORFl6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet} tabs={true}>
                <Worksheet minDimensions={[6,6]} />
                <Worksheet minDimensions={[6,6]} />
            </Spreadsheet>
            <input type="button" value="Get active worksheet"
                onClick={() => alert(spreadsheet.current[0].parent.getWorksheetActive())} />
            <input type="button" value="Rename first worksheet"
                onClick={() => spreadsheet.current[0].parent.renameWorksheet(0, prompt('New name', 'Sheet 1'))} />
        </>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" :tabs="true">
        <Worksheet :minDimensions="[6,6]" />
        <Worksheet :minDimensions="[6,6]" />
    </Spreadsheet>
    <input type="button" value="Get active worksheet" @click="getActiveWorksheet" />
    <input type="button" value="Rename first worksheet" @click="renameFirstWorksheet" />
</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('OTVjNDU1NTIzNmM3NWZhYjRjNjQ2YjVhMzNmODJmODljZDhkY2QwYjEzZmU1OGZlZGFlYmRjODVlODc0Y2VlZjJlOGZmMzhjNGE5ZDNmMDczNjI3MDlhMzRlNzg2NjVjY2YxYmVjZjgzNjBkZWQ2Njc1Y2NiODdjNjg5MzBjZjYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJORFl6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        getActiveWorksheet() {
            alert(this.$refs.spreadsheet.current[0].parent.getWorksheetActive());
        },
        renameFirstWorksheet() {
            this.$refs.spreadsheet.current[0].parent.renameWorksheet(0, prompt('New name', 'Sheet 1'));
        },
    }
}
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
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('YjA3NDVlMzc3OGMwY2MwNTFmMDEyM2YwNDMwMWZiMDEzYmUxNWE5MTdhNDdiZDkzY2NlZmQ5NThlMDM2MjA2MzQ3YTAzNjU3NGYzZmJiYjk0Y2FlZDdlNmYzZmE4ZmNjNDVhODI2YWQzNTVkNDc3MTUyMDA5N2Y5YmNjMDAyZWYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFMk5EUTNNVEkwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>
    <input type="button" value="Active worksheet" (click)="this.getActive()">
    <input type="button" value="Rename 1st worksheet" (click)="renameFirst()">`
})
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, {
            // Allow create a new tab button
            tabs: true,
            // Initial worksheet
            worksheets: [
                { minDimensions: [6,6] },
                { minDimensions: [6,6] },
            ],
        });
    }

    getActive() {
        alert(this.worksheets[0].parent.getWorksheetActive())
    }

    renameFirst() {
        this.worksheets[0].parent.renameWorksheet(0, 'Anything')
    }
}

Worksheet events

Create a new worksheet and explore the related events.

<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>

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

// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    // Allow creating a new tab button
    tabs: true,
    // Initial worksheet
    worksheets: [
        {
            data: [
                ["1","DIVINELY UNINSPIRED TO A HELLISH EXTENT","LEWIS CAPALDI"],
                ["2","NO 6 COLLABORATIONS PROJECT","ED SHEERAN"],
                ["3","THE GREATEST SHOWMAN","MOTION PICTURE CAST RECORDING"],
                ["4","WHEN WE ALL FALL ASLEEP WHERE DO WE GO","BILLIE EILISH"]
            ],
            columns: [
                { type: 'autonumber', title: 'Id' },
                { type: 'text', width: '350px', title: 'Title' },
                { type: 'text', width: '250px', title: 'Artist' },
            ],
            // Name of the worksheet
            worksheetName: 'Albums',
        }
    ],
    // Intercept the new worksheet and define the options for the new worksheet
    onbeforecreateworksheet: function(config, index) {
        let options = {
            minDimensions: [5,5],
            worksheetName: 'Albums ' + index
        }
        return options;
    },
    // When you open the worksheet
    onopenworksheet: function(element, instance, worksheetNumber) {
        console.log(element, instance, worksheetNumber);
    },
});
</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('OTVjNDU1NTIzNmM3NWZhYjRjNjQ2YjVhMzNmODJmODljZDhkY2QwYjEzZmU1OGZlZGFlYmRjODVlODc0Y2VlZjJlOGZmMzhjNGE5ZDNmMDczNjI3MDlhMzRlNzg2NjVjY2YxYmVjZjgzNjBkZWQ2Njc1Y2NiODdjNjg5MzBjZjYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJORFl6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Data
    const data = [
        ["1","DIVINELY UNINSPIRED TO A HELLISH EXTENT","LEWIS CAPALDI"],
        ["2","NO 6 COLLABORATIONS PROJECT","ED SHEERAN"],
        ["3","THE GREATEST SHOWMAN","MOTION PICTURE CAST RECORDING"],
        ["4","WHEN WE ALL FALL ASLEEP WHERE DO WE GO","BILLIE EILISH"]
    ]
    // Columns
    const columns = [
        { type: 'autonumber', title: 'Id' },
        { type: 'text', width: '350px', title: 'Title' },
        { type: 'text', width: '250px', title: 'Artist' },
    ]

    // Intercept the action to define the default configuration for each new worksheet
    const onbeforecreateworksheet = () => {
        return {
          minDimensions: [5, 5],
        };
      };
    
    const onopenworksheet = (element, instance, worksheetNumber) => {
        console.log("Opened worksheet:", worksheetNumber, instance, element);
      };

    // Render component
    return (
        <Spreadsheet ref={spreadsheet} tabs={true} onbeforecreateworksheet={onbeforecreateworksheet} onopenworksheet={onopenworksheet}>
            <Worksheet data={data} columns={columns} worksheetName={"Albums"} />
        </Spreadsheet>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" tabs="true" :onbeforecreateworksheet="onbeforecreateworksheet" :onopenworksheet="onopenworksheet">
        <Worksheet :data="data" :columns="columns" worksheetName="Albums" />
    </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('OTVjNDU1NTIzNmM3NWZhYjRjNjQ2YjVhMzNmODJmODljZDhkY2QwYjEzZmU1OGZlZGFlYmRjODVlODc0Y2VlZjJlOGZmMzhjNGE5ZDNmMDczNjI3MDlhMzRlNzg2NjVjY2YxYmVjZjgzNjBkZWQ2Njc1Y2NiODdjNjg5MzBjZjYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJORFl6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        // Intercept the action to define the default configuration for each new worksheet
        onbeforecreateworksheet() {
            return {
                minDimensions: [5,5],
            }
        },
        // When a new worksheet is opened
        onopenworksheet(element, instance, worksheetNumber) {
            console.log(element, instance, worksheetNumber);
        }
    },
    data() {
        return {
            // License
            license: license,
            // Data
            data: [
                ["1","DIVINELY UNINSPIRED TO A HELLISH EXTENT","LEWIS CAPALDI"],
                ["2","NO 6 COLLABORATIONS PROJECT","ED SHEERAN"],
                ["3","THE GREATEST SHOWMAN","MOTION PICTURE CAST RECORDING"],
                ["4","WHEN WE ALL FALL ASLEEP WHERE DO WE GO","BILLIE EILISH"]
            ],
            // Columns
            columns: [
                { type: 'autonumber', title: 'Id' },
                { type: 'text', width: '350px', title: 'Title' },
                { type: 'text', width: '250px', title: 'Artist' },
            ],
        };
    }
}
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
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('OTVjNDU1NTIzNmM3NWZhYjRjNjQ2YjVhMzNmODJmODljZDhkY2QwYjEzZmU1OGZlZGFlYmRjODVlODc0Y2VlZjJlOGZmMzhjNGE5ZDNmMDczNjI3MDlhMzRlNzg2NjVjY2YxYmVjZjgzNjBkZWQ2Njc1Y2NiODdjNjg5MzBjZjYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJORFl6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

@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, {
            // Allow create a new tab button
            tabs: true,
            // Initial worksheet
            worksheets: [
                {
                    data: [
                        ["1","DIVINELY UNINSPIRED TO A HELLISH EXTENT","LEWIS CAPALDI"],
                        ["2","NO 6 COLLABORATIONS PROJECT","ED SHEERAN"],
                        ["3","THE GREATEST SHOWMAN","MOTION PICTURE CAST RECORDING"],
                        ["4","WHEN WE ALL FALL ASLEEP WHERE DO WE GO","BILLIE EILISH"]
                    ],
                    columns: [
                        { type: 'autonumber', title: 'Id' },
                        { type: 'text', width: '350px', title: 'Title' },
                        { type: 'text', width: '250px', title: 'Artist' },
                    ],
                    // Name of the worksheet
                    worksheetName: 'Albums',
                }
            ],
            // Intercept the new worksheet and define the options for the new worksheet
            onbeforecreateworksheet: function (config, index) {
                return {
                    minDimensions: [5, 5],
                    worksheetName: 'Albums ' + index
                };
            },
            // When you open the worksheet
            onopenworksheet: function (worksheet: any, index: number) {
                console.log("Opened worksheet:", index, worksheet);
            },            
        });
    }
}

Programmatic operations

Create a new worksheet programmatically.

<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="Create a new worksheet" id="btn1" /></p>

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

// Create the spreadsheet
let spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
    tabs: true,
    worksheets: [
        {
            minDimensions: [5,5],
            worksheetName: 'Example2',
        }
    ]
});

document.getElementById("btn1").onclick = () => spreadsheet[0].createWorksheet({ minDimensions: [5,5] });
</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('OTVjNDU1NTIzNmM3NWZhYjRjNjQ2YjVhMzNmODJmODljZDhkY2QwYjEzZmU1OGZlZGFlYmRjODVlODc0Y2VlZjJlOGZmMzhjNGE5ZDNmMDczNjI3MDlhMzRlNzg2NjVjY2YxYmVjZjgzNjBkZWQ2Njc1Y2NiODdjNjg5MzBjZjYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJORFl6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

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

    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet} tabs={true}>
                <Worksheet minDimensions={[5,5]} worksheetName="Example2" />
            </Spreadsheet>
            <input type="button" value="Create a new worksheet" onClick={() => spreadsheet.current[0].createWorksheet({ minDimensions: [5,5] })} />
        </>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" :tabs="true">
        <Worksheet :minDimensions="[5,5]" worksheetName="Example2" />
    </Spreadsheet>
    <input type="button" value="Create a new worksheet" @click="createWorksheet" />
</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('OTVjNDU1NTIzNmM3NWZhYjRjNjQ2YjVhMzNmODJmODljZDhkY2QwYjEzZmU1OGZlZGFlYmRjODVlODc0Y2VlZjJlOGZmMzhjNGE5ZDNmMDczNjI3MDlhMzRlNzg2NjVjY2YxYmVjZjgzNjBkZWQ2Njc1Y2NiODdjNjg5MzBjZjYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJORFl6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        createWorksheet() {
            this.$refs.spreadsheet.current[0].createWorksheet({ minDimensions: [5,5] });
        }
    }
}
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
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('OTVjNDU1NTIzNmM3NWZhYjRjNjQ2YjVhMzNmODJmODljZDhkY2QwYjEzZmU1OGZlZGFlYmRjODVlODc0Y2VlZjJlOGZmMzhjNGE5ZDNmMDczNjI3MDlhMzRlNzg2NjVjY2YxYmVjZjgzNjBkZWQ2Njc1Y2NiODdjNjg5MzBjZjYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJORFl6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>
    <input type="button" value="Create a new worksheet"
    (click)="this.worksheets[0].createWorksheet({ minDimensions: [5,5] })">`
})
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, {
            tabs: true,
            worksheets: [
                {
                    minDimensions: [5,5],
                    worksheetName: 'Example2',
                }
            ]
        });
    }
}

Cross-Worksheet Formulas

Jspreadsheet Pro enables cross-worksheet formula calculations, allowing you to reference data from any worksheet within your spreadsheet. Use the standard Excel/Google Sheets syntax with an exclamation mark: WorksheetName!A1.

<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>

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

// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [
        {
            data: [
                ['Cheese', 10, 6.00, "=B1*C1"],
                ['Apples', 5, 4.00, "=B2*C2"],
                ['Carrots', 5, 1.00, "=B3*C3"],
                ['Oranges', 6, 2.00, "=B4*C4"],
            ],
            minDimensions: [5,5],
            worksheetName: 'Products',
        },
        {
            data: [
                ['20%', "=Products!D1"],
                ['20%', "=Products!D2"],
                ['20%', "=Products!D3"],
                ['20%', "=Products!D4"],
            ],
            minDimensions: [5,5],
            worksheetName: 'Profitability',
        }
    ],
    onload: function() {
        console.log('Ready');
    }
});
</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('OTVjNDU1NTIzNmM3NWZhYjRjNjQ2YjVhMzNmODJmODljZDhkY2QwYjEzZmU1OGZlZGFlYmRjODVlODc0Y2VlZjJlOGZmMzhjNGE5ZDNmMDczNjI3MDlhMzRlNzg2NjVjY2YxYmVjZjgzNjBkZWQ2Njc1Y2NiODdjNjg5MzBjZjYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJORFl6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Data
    const data1 = [
        ['Cheese', 10, 6.00, "=B1*C1"],
        ['Apples', 5, 4.00, "=B2*C2"],
        ['Carrots', 5, 1.00, "=B3*C3"],
        ['Oranges', 6, 2.00, "=B4*C4"],
    ]
    const data2 = [
        ['20%', "=Products!D1"],
        ['20%', "=Products!D2"],
        ['20%', "=Products!D3"],
        ['20%', "=Products!D4"],
    ]

    // Render component
    return (
        <Spreadsheet ref={spreadsheet} tabs={true}>
            <Worksheet data={data1} minDimensions={[5,5]} worksheetName="Products" />
            <Worksheet data={data2} minDimensions={[5,5]} worksheetName="Profitability" />
        </Spreadsheet>
    );
}

<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet :data="data1" :minDimensions="[5,5]" worksheetName="Products" />
        <Worksheet :data="data2" :minDimensions="[5,5]" worksheetName="Profitability" />
    </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('OTVjNDU1NTIzNmM3NWZhYjRjNjQ2YjVhMzNmODJmODljZDhkY2QwYjEzZmU1OGZlZGFlYmRjODVlODc0Y2VlZjJlOGZmMzhjNGE5ZDNmMDczNjI3MDlhMzRlNzg2NjVjY2YxYmVjZjgzNjBkZWQ2Njc1Y2NiODdjNjg5MzBjZjYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJORFl6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        return {
            // Data
            data1: [
                ['Cheese', 10, 6.00, "=B1*C1"],
                ['Apples', 5, 4.00, "=B2*C2"],
                ['Carrots', 5, 1.00, "=B3*C3"],
                ['Oranges', 6, 2.00, "=B4*C4"],
            ],
            data2: [
                ['20%', "=Products!D1"],
                ['20%', "=Products!D2"],
                ['20%', "=Products!D3"],
                ['20%', "=Products!D4"],
            ]
        };
    }
}
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
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('OTVjNDU1NTIzNmM3NWZhYjRjNjQ2YjVhMzNmODJmODljZDhkY2QwYjEzZmU1OGZlZGFlYmRjODVlODc0Y2VlZjJlOGZmMzhjNGE5ZDNmMDczNjI3MDlhMzRlNzg2NjVjY2YxYmVjZjgzNjBkZWQ2Njc1Y2NiODdjNjg5MzBjZjYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJORFl6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

@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: [
                        ['Cheese', 10, 6.00, "=B1*C1"],
                        ['Apples', 5, 4.00, "=B2*C2"],
                        ['Carrots', 5, 1.00, "=B3*C3"],
                        ['Oranges', 6, 2.00, "=B4*C4"],
                    ],
                    minDimensions: [5,5],
                    worksheetName: 'Products',
                },
                {
                    data: [
                        ['20%', "=Products!D1"],
                        ['20%', "=Products!D2"],
                        ['20%', "=Products!D3"],
                        ['20%', "=Products!D4"],
                    ],
                    minDimensions: [5,5],
                    worksheetName: 'Profitability',
                }
            ],
            onload: function() {
                console.log('Ready');
            }
        });
    }
}

Tabs position

Sets the position of the worksheet tab bar at the bottom of the spreadsheet.

<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>

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

jspreadsheet(document.getElementById('spreadsheet'), {
    tabs: {
        allowCreate: true,
        allowChangePosition: true,
        animation: true,
        position: "bottom",
    },
    worksheets: [{
        minDimensions: [6,6],
    }],
});
</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('OTVjNDU1NTIzNmM3NWZhYjRjNjQ2YjVhMzNmODJmODljZDhkY2QwYjEzZmU1OGZlZGFlYmRjODVlODc0Y2VlZjJlOGZmMzhjNGE5ZDNmMDczNjI3MDlhMzRlNzg2NjVjY2YxYmVjZjgzNjBkZWQ2Njc1Y2NiODdjNjg5MzBjZjYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJORFl6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Tabs
    const tabs = {
        allowCreate: true,
        allowChangePosition: true,
        animation: true,
        position: "bottom",
    };
    // Render component
    return (
        <Spreadsheet ref={spreadsheet} tabs={tabs}>
            <Worksheet minDimensions={[6, 6]}/>
            <Worksheet minDimensions={[6, 6]}/>
        </Spreadsheet>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" :tabs="tabs">
        <Worksheet :minDimensions="[6,6]" />
    </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('OTVjNDU1NTIzNmM3NWZhYjRjNjQ2YjVhMzNmODJmODljZDhkY2QwYjEzZmU1OGZlZGFlYmRjODVlODc0Y2VlZjJlOGZmMzhjNGE5ZDNmMDczNjI3MDlhMzRlNzg2NjVjY2YxYmVjZjgzNjBkZWQ2Njc1Y2NiODdjNjg5MzBjZjYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJORFl6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        return {
            // Tabs customizations
            tabs: {
                allowCreate: true,
                allowChangePosition: true,
                animation: true,
                position: "bottom",
            }
        };
    }
}
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
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('YjA3NDVlMzc3OGMwY2MwNTFmMDEyM2YwNDMwMWZiMDEzYmUxNWE5MTdhNDdiZDkzY2NlZmQ5NThlMDM2MjA2MzQ3YTAzNjU3NGYzZmJiYjk0Y2FlZDdlNmYzZmE4ZmNjNDVhODI2YWQzNTVkNDc3MTUyMDA5N2Y5YmNjMDAyZWYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFMk5EUTNNVEkwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>
    <input type="button" value="Active worksheet" (click)="this.getActive()">
    <input type="button" value="Rename 1st worksheet" (click)="renameFirst()">`
})
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, {
            tabs: {
                allowCreate: true,
                allowChangePosition: true,
                animation: true,
                position: "bottom",
            },
            worksheets: [{
                minDimensions: [6,6],
            }],
        });
    }
}

Edit this page on GitHub