Editable Spreadsheets and Worksheets

Explore how to adjust the editable states of individual worksheets or the entire spreadsheet for tailored data interaction control.

Editable State Configuration

The editable property controls the editability of an individual worksheet or the entire spreadsheet.

Settings

The editable property can be set during the initial configuration or adjusted programmatically at any time.

Attribute	Description
editable: boolean	Determines editability at the `worksheet level` or for the entire `spreadsheet`.

Managing Locked Spreadsheets

For enhanced compatibility with XLSX and other spreadsheet formats, the following attributes are provided:

Method	Description
locked?: boolean	Controls the lock state of the worksheet. Defaults to null.
selectUnLockedCells?: boolean	Enables selection of unlocked cells. Default: true.
selectLockedCells?: boolean	Enables selection of locked cells. Default: true.

Example

Modifying Editable States

This example demonstrates how to toggle the current worksheet's editable state or the entire spreadsheet.

See this example on Jsfiddle

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

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

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

<input type="button" value="Disable First Worksheet" id="btn1" />
<input type="button" value="Disable Spreadsheet" id="btn2" />

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

// Method to handle the editable state of the first worksheet
const worksheet = function(e) {
    // Toggle the editable state
    grid[0].options.editable = ! grid[0].options.editable;
    // Change button label
    e.target.value = grid[0].options.editable ? 'Disable First Worksheet' : 'Enable First Worksheet';
}

// Method to handle the editable state of the whole spreadsheet
const spreadsheet = function(e) {
    // Toggle the editable state
    grid[0].parent.config.editable = ! grid[0].parent.config.editable;
    // Change button label
    e.target.value = grid[0].parent.config.editable ? 'Disable Spreadsheet' : 'Enable Spreadsheet';
}

// Create a new spreadsheet
const grid = jspreadsheet(document.getElementById('spreadsheet'), {
    tabs: true,
    worksheets: [{
        data: [
            ['Mazda', 2001, 2000, 1],
            ['Peugeot', 2010, 5000, 1],
            ['Honda Fit', 2009, 3000, 1],
            ['Honda CRV', 2010, 6000, 0],
        ],
    }]
});

document.getElementById("btn1").addEventListener('click', worksheet);
document.getElementById("btn2").addEventListener('click', spreadsheet);
</script>
</html>

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

const license = 'MDYxNjdjYWNlNmE1NDI1ZThjYjQ5ZGE0ZTczN2FkNTY3MDE1NGRmZDllMmMxNWRlNDJlMzA3MTUyNWE0ODI2MjlkMDM1OTFhZWU5ZTUzZjIzYWVjNTJjODFhZjY2NjUzOTMwNzcyOTA3ZjcxZmRlMzZjNGFlMmQzMzM3YzdiNjAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9UTXlNakF6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Data
    const data = [
        ['Mazda', 2001, 2000, 1],
        ['Peugeot', 2010, 5000, 1],
        ['Honda Fit', 2009, 3000, 1],
        ['Honda CRV', 2010, 6000, 0],
    ]
    // Method to handle the editable state of the first worksheet
    const worksheet = (e) => {
        // Toggle the editable state
        spreadsheet.current[0].options.editable = ! spreadsheet.current[0].options.editable;
        // Change button label
        e.value = spreadsheet.current[0].options.editable ? 'Disable First Worksheet' : 'Enable First Worksheet';
    }

    // Method to handle the editable state of the whole spreadsheet
    const all = (e) => {
        // Toggle the editable state
        spreadsheet.current[0].parent.config.editable = ! spreadsheet.current[0].parent.config.editable;
        // Change button label
        e.value = spreadsheet.current[0].parent.config.editable ? 'Disable Spreadsheet' : 'Enable Spreadsheet';
    }

    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet} license={license} tabs>
                <Worksheet data={data} />
            </Spreadsheet>
            <input type="button" value="Disable First Worksheet" onClick={(e) => worksheet(e.target)} />
            <input type="button" value="Disable Spreadsheet" onClick={(e) => all(e.target)} />
        </>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" :license="license" :tabs="true">
        <Worksheet :data="data" />
    </Spreadsheet>
    <input type="button" value="Disable First Worksheet" @click="worksheet" />
    <input type="button" value="Disable Spreadsheet" @click="all" />
</template>

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

const license = 'MDYxNjdjYWNlNmE1NDI1ZThjYjQ5ZGE0ZTczN2FkNTY3MDE1NGRmZDllMmMxNWRlNDJlMzA3MTUyNWE0ODI2MjlkMDM1OTFhZWU5ZTUzZjIzYWVjNTJjODFhZjY2NjUzOTMwNzcyOTA3ZjcxZmRlMzZjNGFlMmQzMzM3YzdiNjAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9UTXlNakF6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        // Method to handle the editable state of the first worksheet
        worksheet(e) {
            // Current state
            let editable = this.$refs.spreadsheet.current[0].options.editable;
            // Toggle the editable state
            this.$refs.spreadsheet.current[0].options.editable = ! this.$refs.spreadsheet.current[0].options.editable;
            // Change button label
            e.value = this.$refs.current[0].options.editable ? 'Disable First Worksheet' : 'Enable First Worksheet';
        },

        // Method to handle the editable state of the whole spreadsheet
        all(e) {
            // Toggle the editable state
            this.$refs.spreadsheet.current[0].parent.config.editable = ! this.$refs.spreadsheet.current[0].parent.config.editable;
            // Change button label
            e.value = this.$refs.spreadsheet.current[0].parent.config.editable ? 'Disable Spreadsheet' : 'Enable Spreadsheet';
        }
    },
    data() {
        // Data
        const data = [
            ['Mazda', 2001, 2000, 1],
            ['Peugeot', 2010, 5000, 1],
            ['Honda Fit', 2009, 3000, 1],
            ['Honda CRV', 2010, 6000, 0],
        ]

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

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

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

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

@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>
        <input type="button" value="Disable First Worksheet" (click)="worksheet" />
        <input type="button" value="Disable Spreadsheet" (click)="all" />`
})
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: [{
                data: [
                    ['Mazda', 2001, 2000, 1],
                    ['Peugeot', 2010, 5000, 1],
                    ['Honda Fit', 2009, 3000, 1],
                    ['Honda CRV', 2010, 6000, 0],
                ],
            }]
        });
    }

    // Method to handle the editable state of the first worksheet
    worksheet(e) {
        // Toggle the editable state
        this.worksheets.current[0].options.editable = ! this.worksheets.current[0].options.editable;
        // Change button label
        e.value = this.worksheets[0].options.editable ? 'Disable First Worksheet' : 'Enable First Worksheet';
    }

    // Method to handle the editable state of the whole spreadsheet
    all(e) {
        // Toggle the editable state
        this.worksheets.current[0].parent.config.editable = ! this.worksheets.current[0].parent.config.editable;
        // Change button label
        e.value = this.worksheets.current[0].parent.config.editable ? 'Disable Spreadsheet' : 'Enable Spreadsheet';
    }
}

Other related features

Data Grid Read-Only Cells

Edit this page on GitHub