Read Only Cells

Documentation

Methods

The following methods allow programmatic updates to read-only states in your spreadsheets.

Method	Description
`setReadOnly(object\|string, boolean)`	Sets the read-only state of a cell. `setReadOnly(ident: HTMLElement\|string, state: boolean): void`
`isReadOnly(number, number)`	Checks if a cell is read-only. `isReadOnly(x: number, y: number): boolean`

Examples

Readonly

A basic spreadsheet example with a read-only column and an additional read-only cell.

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

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

<script>
jspreadsheet(document.getElementById('spreadsheet'), {
    onload: function(spreadsheet) {
        spreadsheet.worksheets[0].setReadOnly('C3', true);
    },
    worksheets: [{
        data: [
            ['Mazda', 2001, 2000, 1],
            ['GM', 2010, 5000, 1],
            ['Honda Fit', 2009, 3000, 1],
            ['Honda CRV', 2010, 6000, 0],
        ],
        columns: [
            {
                type: 'text',
                title:'Description',
                width:'200px',
                readOnly: true,
            },
            {
                type: 'text',
                title: 'Year',
                width: '200px'
            },
            {
                type: 'text',
                title: 'Price',
                width: '100px',
                mask: '#.##'
            },
            {
                type: 'checkbox',
                title:'Automatic',
                width:'100px'
            },
        ]
    }]
});
</script>
</html>

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


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],
    ];

    const columns = [
        {
            type: 'text',
            title:'Description',
            width:'200px',
            readOnly:true,
        },
        {
            type: 'text',
            title:'Year',
            width:'200px'
        },
        {
            type: 'text',
            title:'Price',
            width:'100px',
            mask:'#.##',
        },
        {
            type: 'checkbox',
            title:'Automatic',
            width:'100px'
        },
    ];

    const onload = function(spreadsheet) {
      spreadsheet.worksheets[0].setReadOnly('C3', true);
    }

    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet} onload={onload}>
                <Worksheet data={data} columns={columns}/>
            </Spreadsheet>
        </>
    );
}

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

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

// Spreadsheet ref
const spreadsheet = ref(null);

// Data
const data = ref([
  ['Mazda', 2001, 2000, 1],
  ['Peugeot', 2010, 5000, 1],
  ['Honda Fit', 2009, 3000, 1],
  ['Honda CRV', 2010, 6000, 0],
]);

// Columns configuration
const columns = ref([
  {
      type: 'text',
      title:'Description',
      width:'200px',
      readOnly:true,
  },
  {
      type: 'text',
      title:'Year',
      width:'200px'
  },
  {
      type: 'text',
      title:'Price',
      width:'100px',
      mask:'#.##',
  },
  {
      type: 'checkbox',
      title:'Automatic',
      width:'100px'
  },
]);

// Update table method
const onload = (spreadsheet) => {
  spreadsheet.worksheets[0].setReadOnly('C3', true);
};
</script>

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

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

// 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, {
            onload: function(spreadsheet) {
                spreadsheet.worksheets[0].setReadOnly('C3', true);
            },
            worksheets: [{
                data: [
                    ['Mazda', 2001, 2000, 1],
                    ['GM', 2010, 5000, 1],
                    ['Honda Fit', 2009, 3000, 1],
                    ['Honda CRV', 2010, 6000, 0],
                ],
                columns: [
                    {
                        type: 'text',
                        title:'Description',
                        width:'200px',
                        readOnly: true,
                    },
                    {
                        type: 'text',
                        title: 'Year',
                        width: '200px'
                    },
                    {
                        type: 'text',
                        title: 'Price',
                        width: '100px',
                        mask: '#.##'
                    },
                    {
                        type: 'checkbox',
                        title:'Automatic',
                        width:'100px'
                    },
                ]
            }]
        });
    }
}

Edit this page on GitHub