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.
<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('Mjg0ODUwMGJmM2ZjNTQ3MGJhYWEzOTRhZjljNTQ5ZDFiYWNkOGU0Mzk3M2M5Y2I1NmE4NDA3ZDRkMGJlODdkN2I1ODE1OGNhNzVlNzk4ZDg3MzIyYjcyNzBmZjkzOTJkMzQ2MTgxZTNlNDBkYjgzY2ViMDBkMjg1NGQ1MjI0YTEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUXlPRE15TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// 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 = 'Mjg0ODUwMGJmM2ZjNTQ3MGJhYWEzOTRhZjljNTQ5ZDFiYWNkOGU0Mzk3M2M5Y2I1NmE4NDA3ZDRkMGJlODdkN2I1ODE1OGNhNzVlNzk4ZDg3MzIyYjcyNzBmZjkzOTJkMzQ2MTgxZTNlNDBkYjgzY2ViMDBkMjg1NGQ1MjI0YTEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUXlPRE15TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
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 = 'Mjg0ODUwMGJmM2ZjNTQ3MGJhYWEzOTRhZjljNTQ5ZDFiYWNkOGU0Mzk3M2M5Y2I1NmE4NDA3ZDRkMGJlODdkN2I1ODE1OGNhNzVlNzk4ZDg3MzIyYjcyNzBmZjkzOTJkMzQ2MTgxZTNlNDBkYjgzY2ViMDBkMjg1NGQ1MjI0YTEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUXlPRE15TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
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('Mjg0ODUwMGJmM2ZjNTQ3MGJhYWEzOTRhZjljNTQ5ZDFiYWNkOGU0Mzk3M2M5Y2I1NmE4NDA3ZDRkMGJlODdkN2I1ODE1OGNhNzVlNzk4ZDg3MzIyYjcyNzBmZjkzOTJkMzQ2MTgxZTNlNDBkYjgzY2ViMDBkMjg1NGQ1MjI0YTEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUXlPRE15TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
@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';
}
}