{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "spreadsheet-editor-protection",
  "framework": "react",
  "type": "registry:component",
  "component": "SpreadsheetEditor",
  "variant": "protection",
  "dependencies": [
    "@syncfusion/ej2-react-spreadsheet"
  ],
  "description": "Spreadsheet editor protects a worksheet and limits cell editing with a password.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": true,
    "platformIndex": "https://ai.syncfusion.com/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/ts/spreadsheet-editor-protection.md"
  },
  "files": [
    {
      "target": "src/components/spreadsheet-editor-protection/SpreadSheetEditor.tsx",
      "content": "import { SpreadsheetComponent, SheetsDirective, SheetDirective, ColumnsDirective, type CellStyleModel, RowsDirective, RowDirective, CellsDirective, RangesDirective, RangeDirective, CellDirective, getFormatFromType, ColumnDirective, type CellRenderEventArgs } from '@syncfusion/ej2-react-spreadsheet';\n\n/**\n * ProtectSheet sample\n */\nconst protectSheetData = [\n    {\n        \"Tenure\": \"1\",\n        \"Payment Date\": \"03-04-2020\",\n        \"EMI\": \"8698.84\",\n        \"Prinicpal\": \"8032.18\",\n        \"Interest\": \"666.67\",\n        \"Balance\": \"91967.82\"\n    },\n    {\n        \"Tenure\": \"2\",\n        \"Payment Date\": \"03-05-2020\",\n        \"EMI\": \"8698.84\",\n        \"Prinicpal\": \"8085.72\",\n        \"Interest\": \"613.12\",\n        \"Balance\": \"83882.10\"\n    },\n    {\n        \"Tenure\": \"3\",\n        \"Payment Date\": \"03-06-2020\",\n        \"EMI\": \"8698.84\",\n        \"Prinicpal\": \"8139.63\",\n        \"Interest\": \"559.21\",\n        \"Balance\": \"75742.47\"\n    },\n    {\n        \"Tenure\": \"4\",\n        \"Payment Date\": \"03-07-2020\",\n        \"EMI\": \"8698.84\",\n        \"Prinicpal\": \"8193.89\",\n        \"Interest\": \"504.95\",\n        \"Balance\": \"67548.58\"\n    },\n    {\n        \"Tenure\": \"5\",\n        \"Payment Date\": \"03-08-2020\",\n        \"EMI\": \"8698.84\",\n        \"Prinicpal\": \"8248.52\",\n        \"Interest\": \"450.32\",\n        \"Balance\": \"59300.06\"\n    }\n];\n\nfunction ProtectSheet() {\n    let spreadsheet: SpreadsheetComponent;\n    const boldCenter: CellStyleModel = { fontWeight: 'bold', textAlign: 'center' };\n\n    function onCreated(): void {\n        spreadsheet.numberFormat('$#,##0.00', 'EMI Schedule!C2:F13');\n    }\n    function beforeCellRender(args: CellRenderEventArgs): void {\n        if (spreadsheet.activeSheetIndex === 0 && args.address === 'B1') {\n            (args.element as HTMLTableCellElement).colSpan = 2;\n        }\n    }\n\n    return (\n        <div className='control-pane'>\n            <div className='control-section spreadsheet-control'>\n                <SpreadsheetComponent\n                    password='spreadsheet' openUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open'\n                    saveUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save' ref={(ssObj) => { spreadsheet = ssObj }} created={onCreated.bind(this)}\n                    beforeCellRender={beforeCellRender.bind(this)} >\n                    <SheetsDirective>\n                        <SheetDirective name='EMI Calculator' isProtected={true}>\n                            <RowsDirective>\n                                <RowDirective>\n                                    <CellsDirective>\n                                        <CellDirective index={1} value='Home Loan Calculator' style={boldCenter}></CellDirective>\n                                    </CellsDirective>\n                                </RowDirective>\n                                <RowDirective>\n                                    <CellsDirective>\n                                        <CellDirective index={1} value='Loan Amount:'></CellDirective>\n                                        <CellDirective value='100000' format='$#,##0.00' ></CellDirective>\n                                    </CellsDirective>\n                                </RowDirective>\n                                <RowDirective>\n                                    <CellsDirective>\n                                        <CellDirective index={1} value='Interest Rate:'></CellDirective>\n                                        <CellDirective value='0.08' format={getFormatFromType('Percentage')}></CellDirective>\n                                    </CellsDirective>\n                                </RowDirective>\n                                <RowDirective>\n                                    <CellsDirective>\n                                        <CellDirective index={1} value='Periods (terms in year):'></CellDirective>\n                                        <CellDirective value='1'></CellDirective>\n                                    </CellsDirective>\n                                </RowDirective>\n                                <RowDirective>\n                                    <CellsDirective>\n                                        <CellDirective index={1} value='Start Date:'></CellDirective>\n                                        <CellDirective value='03-03-2020'></CellDirective>\n                                    </CellsDirective>\n                                </RowDirective>\n                                <RowDirective>\n                                    <CellsDirective>\n                                        <CellDirective index={1} value='Loan EMI:'></CellDirective>\n                                        <CellDirective value='8698.84' format='$#,##0.00'></CellDirective>\n                                    </CellsDirective>\n                                </RowDirective>\n                                <RowDirective>\n                                    <CellsDirective>\n                                        <CellDirective index={1} value='Number of Payments:'></CellDirective>\n                                        <CellDirective value='12'></CellDirective>\n                                    </CellsDirective>\n                                </RowDirective>\n                                <RowDirective>\n                                    <CellsDirective>\n                                        <CellDirective index={1} value='Total Repayment Amount:'></CellDirective>\n                                        <CellDirective value='104386.11' format='$#,##0.00'></CellDirective>\n                                    </CellsDirective>\n                                </RowDirective>\n                                <RowDirective>\n                                    <CellsDirective>\n                                        <CellDirective index={1} value='Total Interest Amount:'></CellDirective>\n                                        <CellDirective value='4386.11' format='$#,##0.00'></CellDirective>\n                                    </CellsDirective>\n                                </RowDirective>\n                            </RowsDirective>\n                            <ColumnsDirective>\n                                <ColumnDirective index={1} width={190}></ColumnDirective>\n                                <ColumnDirective width={100}></ColumnDirective>\n                            </ColumnsDirective>\n                        </SheetDirective>\n                        <SheetDirective name='EMI Schedule' isProtected={true}>\n                            <RangesDirective>\n                                <RangeDirective dataSource={protectSheetData} showFieldAsHeader={true}></RangeDirective>\n                            </RangesDirective>\n                            <RowsDirective>\n                                <RowDirective>\n                                    <CellsDirective>\n                                        <CellDirective style={boldCenter}></CellDirective>\n                                        <CellDirective style={boldCenter}></CellDirective>\n                                        <CellDirective style={boldCenter}></CellDirective>\n                                        <CellDirective style={boldCenter}></CellDirective>\n                                        <CellDirective style={boldCenter}></CellDirective>\n                                        <CellDirective style={boldCenter}></CellDirective>\n                                    </CellsDirective>\n                                </RowDirective>\n                            </RowsDirective>\n                            <ColumnsDirective>\n                                <ColumnDirective index={1} width={110}></ColumnDirective>\n                                <ColumnDirective width={85}></ColumnDirective>\n                                <ColumnDirective width={85}></ColumnDirective>\n                                <ColumnDirective width={80}></ColumnDirective>\n                                <ColumnDirective width={90}></ColumnDirective>\n                            </ColumnsDirective>\n                        </SheetDirective>\n                    </SheetsDirective>\n                </SpreadsheetComponent>\n            </div>\n        </div>\n    )\n}\nexport default ProtectSheet;"
    }
  ]
}