How to lock the first row from editing in a JavaScript Spreadsheet

This article explains how to lock the first row from editing in a JavaScript Spreadsheet. To achieve this requirement, you can use the cellEdit event to prevent editing and the actionBegin event to prevent clipboard actions by setting the args.cancel property as true.

[HTML]

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

[TS]

import { BeforePasteEventArgs, CellEditEventArgs, getRangeIndexes, Spreadsheet } from '@syncfusion/ej2-spreadsheet';
import * as dataSource from './default-data.json';

let spreadsheet: Spreadsheet = new Spreadsheet({
 sheets: [
   {
     ranges: [{ dataSource: (dataSource as any).defaultData }],
   },
 ],
 cellEdit(args: CellEditEventArgs) {
   // Prevent the editing in 1st row by checking the row index.
   let cell: string = spreadsheet.getActiveSheet().activeCell;
   let range: number[] = getRangeIndexes(cell);
   if (range[0] == 0) {
     args.cancel = true;
   }
 },
 actionBegin(args: { action: string; args: BeforePasteEventArgs }) {
   // Prevent clipboard functionalities in 1st row.
   let cell: string = spreadsheet.getActiveSheet().activeCell;
   let range: number[] = getRangeIndexes(cell);
   let argsValue: BeforePasteEventArgs = args.args;
   if ((range[0] == 0 && args.action === 'copy') || args.action === 'cut') {
     argsValue.cancel = true;
   }
   if (range[0] == 0 && args.action === 'clipboard') {
     (argsValue as any).eventArgs.cancel = true;
   }
 },
});

spreadsheet.appendTo('#spreadsheet');

Sample Link:

Refer to the working sample for additional details and implementation: Sample

Output:

Documentation link:

https://ej2.syncfusion.com/documentation/spreadsheet/editing

https://ej2.syncfusion.com/documentation/spreadsheet/clipboard