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 spreadsheet. 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('YmUzN2FhNmEwNmI3MWU3MzI2YTI5NzZlY2RkNTRmOGI2NGQ4MGM2YTQ0M2Y4ZDU5MjdlODE2NDliMGQ3YzI1OWE4Y2RkMjljNTNhNWZjMWIwODIxYjViZTRiMmYyNWRlMzBmZDdlNDk0ZmM5NDExOWMwMzNkMjEzMDYzMjQ2NGYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFM01EUTFPVFk0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

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

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 = 'YmUzN2FhNmEwNmI3MWU3MzI2YTI5NzZlY2RkNTRmOGI2NGQ4MGM2YTQ0M2Y4ZDU5MjdlODE2NDliMGQ3YzI1OWE4Y2RkMjljNTNhNWZjMWIwODIxYjViZTRiMmYyNWRlMzBmZDdlNDk0ZmM5NDExOWMwMzNkMjEzMDYzMjQ2NGYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFM01EUTFPVFk0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

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

@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