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

This knowledge base explains how to lock the first row from editing in JavaScript Spreadsheet. To achieve this requirement, you can use cellEdit event to prevent editing and actionBegin event to prevent the clipboard actions by setting 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:

https://stackblitz.com/edit/sqsdx1-ejhdfg?file=index.ts

Output:

Documentation link:

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

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