{
  "$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/js/spreadsheet-editor-protection.md"
  },
  "files": [
    {
      "target": "src/components/spreadsheet-editor-protection/SpreadSheetEditor.jsx",
      "content": "import { SpreadsheetComponent, SheetsDirective, SheetDirective, ColumnsDirective, RowsDirective, RowDirective, CellsDirective, RangesDirective, RangeDirective, CellDirective, getFormatFromType, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';\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        \"Tenure\": \"6\",\n        \"Payment Date\": \"03-09-2020\",\n        \"EMI\": \"8698.84\",\n        \"Prinicpal\": \"8303.51\",\n        \"Interest\": \"395.33\",\n        \"Balance\": \"50996.55\"\n    },\n    {\n        \"Tenure\": \"7\",\n        \"Payment Date\": \"03-10-2020\",\n        \"EMI\": \"8698.84\",\n        \"Prinicpal\": \"8358.87\",\n        \"Interest\": \"339.98\",\n        \"Balance\": \"42637.68\"\n    },\n    {\n        \"Tenure\": \"8\",\n        \"Payment Date\": \"03-11-2020\",\n        \"EMI\": \"8698.84\",\n        \"Prinicpal\": \"8414.59\",\n        \"Interest\": \"284.25\",\n        \"Balance\": \"34223.09\"\n    },\n    {\n        \"Tenure\": \"9\",\n        \"Payment Date\": \"03-12-2020\",\n        \"EMI\": \"8698.84\",\n        \"Prinicpal\": \"8470.69\",\n        \"Interest\": \"228.15\",\n        \"Balance\": \"25752.40\"\n    },\n    {\n        \"Tenure\": \"10\",\n        \"Payment Date\": \"03-01-2021\",\n        \"EMI\": \"8698.84\",\n        \"Prinicpal\": \"8527.16\",\n        \"Interest\": \"171.68\",\n        \"Balance\": \"17225.24\"\n    },\n    {\n        \"Tenure\": \"11\",\n        \"Payment Date\": \"03-02-2021\",\n        \"EMI\": \"8698.84\",\n        \"Prinicpal\": \"8584.01\",\n        \"Interest\": \"114.83\",\n        \"Balance\": \"8641.23\"\n    },\n    {\n        \"Tenure\": \"12\",\n        \"Payment Date\": \"03-03-2021\",\n        \"EMI\": \"8698.84\",\n        \"Prinicpal\": \"8641.23\",\n        \"Interest\": \"57.61\",\n        \"Balance\": \"0.00\"\n    }\n];\n\nfunction ProtectSheet() {\n    let spreadsheet;\n    const boldCenter = { fontWeight: 'bold', textAlign: 'center' };\n    function onCreated() {\n        spreadsheet.numberFormat('$#,##0.00', 'EMI Schedule!C2:F13');\n    }\n    function beforeCellRender(args) {\n        if (spreadsheet.activeSheetIndex === 0 && args.address === 'B1') {\n            args.element.colSpan = 2;\n        }\n    }\n    return (<div className='control-pane'>\n            <div className='control-section spreadsheet-control'>\n                <SpreadsheetComponent password='spreadsheet' openUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open' saveUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save' ref={(ssObj) => { spreadsheet = ssObj; }} created={onCreated.bind(this)} 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}\nexport default ProtectSheet;"
    }
  ]
}