# 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/js/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.jsx

```jsx
import { SpreadsheetComponent, SheetsDirective, SheetDirective, ColumnsDirective, RowsDirective, RowDirective, CellsDirective, RangesDirective, RangeDirective, CellDirective, getFormatFromType, ColumnDirective } 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"
    },
    {
        "Tenure": "6",
        "Payment Date": "03-09-2020",
        "EMI": "8698.84",
        "Prinicpal": "8303.51",
        "Interest": "395.33",
        "Balance": "50996.55"
    },
    {
        "Tenure": "7",
        "Payment Date": "03-10-2020",
        "EMI": "8698.84",
        "Prinicpal": "8358.87",
        "Interest": "339.98",
        "Balance": "42637.68"
    },
    {
        "Tenure": "8",
        "Payment Date": "03-11-2020",
        "EMI": "8698.84",
        "Prinicpal": "8414.59",
        "Interest": "284.25",
        "Balance": "34223.09"
    },
    {
        "Tenure": "9",
        "Payment Date": "03-12-2020",
        "EMI": "8698.84",
        "Prinicpal": "8470.69",
        "Interest": "228.15",
        "Balance": "25752.40"
    },
    {
        "Tenure": "10",
        "Payment Date": "03-01-2021",
        "EMI": "8698.84",
        "Prinicpal": "8527.16",
        "Interest": "171.68",
        "Balance": "17225.24"
    },
    {
        "Tenure": "11",
        "Payment Date": "03-02-2021",
        "EMI": "8698.84",
        "Prinicpal": "8584.01",
        "Interest": "114.83",
        "Balance": "8641.23"
    },
    {
        "Tenure": "12",
        "Payment Date": "03-03-2021",
        "EMI": "8698.84",
        "Prinicpal": "8641.23",
        "Interest": "57.61",
        "Balance": "0.00"
    }
];

function ProtectSheet() {
    let spreadsheet;
    const boldCenter = { fontWeight: 'bold', textAlign: 'center' };
    function onCreated() {
        spreadsheet.numberFormat('$#,##0.00', 'EMI Schedule!C2:F13');
    }
    function beforeCellRender(args) {
        if (spreadsheet.activeSheetIndex === 0 && args.address === 'B1') {
            args.element.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;
```