# spreadsheet-editor-protection

> Spreadsheet editor protects a worksheet and limits cell editing with a password.

**Framework:** react  **Component:** SpreadsheetEditor  **Variant:** protection

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/react/ts/spreadsheet-editor-protection.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-react-spreadsheet
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/spreadsheet-editor-protection/SpreadSheetEditor.tsx

```tsx
import { SpreadsheetComponent, SheetsDirective, SheetDirective, ColumnsDirective, type CellStyleModel, RowsDirective, RowDirective, CellsDirective, RangesDirective, RangeDirective, CellDirective, getFormatFromType, ColumnDirective, type CellRenderEventArgs } from '@syncfusion/ej2-react-spreadsheet';

/**
 * ProtectSheet sample
 */
const protectSheetData = [
    {
        "Tenure": "1",
        "Payment Date": "03-04-2020",
        "EMI": "8698.84",
        "Prinicpal": "8032.18",
        "Interest": "666.67",
        "Balance": "91967.82"
    },
    {
        "Tenure": "2",
        "Payment Date": "03-05-2020",
        "EMI": "8698.84",
        "Prinicpal": "8085.72",
        "Interest": "613.12",
        "Balance": "83882.10"
    },
    {
        "Tenure": "3",
        "Payment Date": "03-06-2020",
        "EMI": "8698.84",
        "Prinicpal": "8139.63",
        "Interest": "559.21",
        "Balance": "75742.47"
    },
    {
        "Tenure": "4",
        "Payment Date": "03-07-2020",
        "EMI": "8698.84",
        "Prinicpal": "8193.89",
        "Interest": "504.95",
        "Balance": "67548.58"
    },
    {
        "Tenure": "5",
        "Payment Date": "03-08-2020",
        "EMI": "8698.84",
        "Prinicpal": "8248.52",
        "Interest": "450.32",
        "Balance": "59300.06"
    }
];

function ProtectSheet() {
    let spreadsheet: SpreadsheetComponent;
    const boldCenter: CellStyleModel = { fontWeight: 'bold', textAlign: 'center' };

    function onCreated(): void {
        spreadsheet.numberFormat('$#,##0.00', 'EMI Schedule!C2:F13');
    }
    function beforeCellRender(args: CellRenderEventArgs): void {
        if (spreadsheet.activeSheetIndex === 0 && args.address === 'B1') {
            (args.element as HTMLTableCellElement).colSpan = 2;
        }
    }

    return (
        <div className='control-pane'>
            <div className='control-section spreadsheet-control'>
                <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)} >
                    <SheetsDirective>
                        <SheetDirective name='EMI Calculator' isProtected={true}>
                            <RowsDirective>
                                <RowDirective>
                                    <CellsDirective>
                                        <CellDirective index={1} value='Home Loan Calculator' style={boldCenter}></CellDirective>
                                    </CellsDirective>
                                </RowDirective>
                                <RowDirective>
                                    <CellsDirective>
                                        <CellDirective index={1} value='Loan Amount:'></CellDirective>
                                        <CellDirective value='100000' format='$#,##0.00' ></CellDirective>
                                    </CellsDirective>
                                </RowDirective>
                                <RowDirective>
                                    <CellsDirective>
                                        <CellDirective index={1} value='Interest Rate:'></CellDirective>
                                        <CellDirective value='0.08' format={getFormatFromType('Percentage')}></CellDirective>
                                    </CellsDirective>
                                </RowDirective>
                                <RowDirective>
                                    <CellsDirective>
                                        <CellDirective index={1} value='Periods (terms in year):'></CellDirective>
                                        <CellDirective value='1'></CellDirective>
                                    </CellsDirective>
                                </RowDirective>
                                <RowDirective>
                                    <CellsDirective>
                                        <CellDirective index={1} value='Start Date:'></CellDirective>
                                        <CellDirective value='03-03-2020'></CellDirective>
                                    </CellsDirective>
                                </RowDirective>
                                <RowDirective>
                                    <CellsDirective>
                                        <CellDirective index={1} value='Loan EMI:'></CellDirective>
                                        <CellDirective value='8698.84' format='$#,##0.00'></CellDirective>
                                    </CellsDirective>
                                </RowDirective>
                                <RowDirective>
                                    <CellsDirective>
                                        <CellDirective index={1} value='Number of Payments:'></CellDirective>
                                        <CellDirective value='12'></CellDirective>
                                    </CellsDirective>
                                </RowDirective>
                                <RowDirective>
                                    <CellsDirective>
                                        <CellDirective index={1} value='Total Repayment Amount:'></CellDirective>
                                        <CellDirective value='104386.11' format='$#,##0.00'></CellDirective>
                                    </CellsDirective>
                                </RowDirective>
                                <RowDirective>
                                    <CellsDirective>
                                        <CellDirective index={1} value='Total Interest Amount:'></CellDirective>
                                        <CellDirective value='4386.11' format='$#,##0.00'></CellDirective>
                                    </CellsDirective>
                                </RowDirective>
                            </RowsDirective>
                            <ColumnsDirective>
                                <ColumnDirective index={1} width={190}></ColumnDirective>
                                <ColumnDirective width={100}></ColumnDirective>
                            </ColumnsDirective>
                        </SheetDirective>
                        <SheetDirective name='EMI Schedule' isProtected={true}>
                            <RangesDirective>
                                <RangeDirective dataSource={protectSheetData} showFieldAsHeader={true}></RangeDirective>
                            </RangesDirective>
                            <RowsDirective>
                                <RowDirective>
                                    <CellsDirective>
                                        <CellDirective style={boldCenter}></CellDirective>
                                        <CellDirective style={boldCenter}></CellDirective>
                                        <CellDirective style={boldCenter}></CellDirective>
                                        <CellDirective style={boldCenter}></CellDirective>
                                        <CellDirective style={boldCenter}></CellDirective>
                                        <CellDirective style={boldCenter}></CellDirective>
                                    </CellsDirective>
                                </RowDirective>
                            </RowsDirective>
                            <ColumnsDirective>
                                <ColumnDirective index={1} width={110}></ColumnDirective>
                                <ColumnDirective width={85}></ColumnDirective>
                                <ColumnDirective width={85}></ColumnDirective>
                                <ColumnDirective width={80}></ColumnDirective>
                                <ColumnDirective width={90}></ColumnDirective>
                            </ColumnsDirective>
                        </SheetDirective>
                    </SheetsDirective>
                </SpreadsheetComponent>
            </div>
        </div>
    )
}
export default ProtectSheet;
```