# spreadsheet-editor-protection

> Spreadsheet editor protects sheets and ranges with configurable edit permissions.

**Framework:** vue  **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/vue/spreadsheet-editor-protection.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-vue-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.vue

```vue
<template>
  <div class="control-section">
    <div id="spreadsheet-protect-sheet">
        <ejs-spreadsheet  ref="spreadsheet" password="spreadsheet" :openUrl="openUrl" :saveUrl="saveUrl" :allowOpen="false" :allowSave="false" :created="created" :beforeCellRender="beforeCellRender">
            <e-sheets>
                <e-sheet isProtected="true" name="EMI Calculator">
                    <e-rows>
                        <e-row>
                            <e-cells>
                                <e-cell index=1 value="Home Loan Calculator" :style="{ textAlign: 'center', fontWeight: 'bold' }"></e-cell>
                            </e-cells>
                        </e-row>
                        <e-row>
                            <e-cells>
                                <e-cell index=1 value="Loan Amount:"></e-cell>
                                <e-cell value="100000" format="$#,##0.00"></e-cell>
                            </e-cells>
                        </e-row>
                        <e-row>
                            <e-cells>
                                <e-cell index=1 value="Interest Rate:"></e-cell>
                                <e-cell value="0.08" format="$#,##0.00"></e-cell>
                            </e-cells>
                        </e-row>
                        <e-row>
                            <e-cells>
                                <e-cell index=1 value="Periods (terms in year):"></e-cell>
                                <e-cell value="1"></e-cell>
                            </e-cells>
                        </e-row>
                        <e-row>
                            <e-cells>
                                <e-cell index=1 value="Start Date:"></e-cell>
                                <e-cell value="03-03-2020"></e-cell>
                            </e-cells>
                        </e-row>
                        <e-row>
                            <e-cells>
                                <e-cell index=1 value="Loan EMI:"></e-cell>
                                <e-cell value="8698.84" format="$#,##0.00"></e-cell>
                            </e-cells>
                        </e-row>
                        <e-row>
                            <e-cells>
                                <e-cell index=1 value="Number of Payments:"></e-cell>
                                <e-cell value="12"></e-cell>
                            </e-cells>
                        </e-row>
                        <e-row height:45>
                            <e-cells>
                                <e-cell index=1 value="Total Repayment Amount:"></e-cell>
                                <e-cell value="104386.11" format="$#,##0.00"></e-cell>
                            </e-cells>
                        </e-row>
                        <e-row>
                            <e-cells>
                                <e-cell index=1 value="Total Interest Amount:"></e-cell>
                                <e-cell value="4386.11" format="$#,##0.00"></e-cell>
                            </e-cells>
                        </e-row>
                    </e-rows>
                    <e-columns>
                        <e-column index=1 :width=190></e-column>
                        <e-column :width=100></e-column>
                    </e-columns>
                </e-sheet>
                <e-sheet isProtected="true" name="EMI Schedule">
                    <e-ranges>
                        <e-range :dataSource="dataSource"></e-range>
                    </e-ranges>
                    <e-rows>
                        <e-row>
                            <e-cells>
                                <e-cell :style="{ textAlign: 'center', fontWeight: 'bold' }"></e-cell>
                                <e-cell :style="{ textAlign: 'center', fontWeight: 'bold' }"></e-cell>
                                <e-cell :style="{ textAlign: 'center', fontWeight: 'bold' }"></e-cell>
                                <e-cell :style="{ textAlign: 'center', fontWeight: 'bold' }"></e-cell>
                                <e-cell :style="{ textAlign: 'center', fontWeight: 'bold' }"></e-cell>
                                <e-cell :style="{ textAlign: 'center', fontWeight: 'bold' }"></e-cell>
                            </e-cells>
                        </e-row>
                    </e-rows>
                    <e-columns>
                            <e-column index=1 :width=110></e-column>
                            <e-column :width=85></e-column>
                            <e-column :width=85></e-column>
                            <e-column :width=80></e-column>
                            <e-column :width=90></e-column>
                    </e-columns>
                </e-sheet>
            </e-sheets>
        </ejs-spreadsheet>
    </div>

  </div>
</template>

<script>
import { SpreadsheetComponent, SheetDirective, SheetsDirective, RangeDirective, RangesDirective, RowDirective, RowsDirective, CellDirective, CellsDirective, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-spreadsheet";

export default {
   components: {
    'ejs-spreadsheet': SpreadsheetComponent,
    'e-sheet': SheetDirective,
    'e-sheets': SheetsDirective,
    'e-range': RangeDirective,
    'e-ranges': RangesDirective,
    'e-cell': CellDirective,
    'e-cells': CellsDirective,
    'e-row': RowDirective,
    'e-rows': RowsDirective,
    'e-column': ColumnDirective,
    'e-columns': ColumnsDirective
   },
   data: () => {
    return {
        dataSource: [
            { 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 }
        ],
        openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open',
        saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save'
    }
  },
  methods: {
    created: function() {
        var spreadsheet = this.$refs.spreadsheet;
        spreadsheet.numberFormat('$#,##0.00', 'EMI Schedule!C2:F6');
        spreadsheet.numberFormat('m/d/yyyy', 'EMI Calculator!C5:C5');
        spreadsheet.numberFormat('m/d/yyyy', 'EMI Schedule!B2:B6');
    },
    beforeCellRender: function(args) {
        var spreadsheet = this.$refs.spreadsheet;
        if (args.address === "B1" && spreadsheet.ej2Instances.sheets[spreadsheet.ej2Instances.activeSheetIndex].name === 'EMI Calculator') {
            (args.element).colSpan = 2;
        }
    }
}
}
</script>
```

### src/components/spreadsheet-editor-protection/SpreadSheetEditorView.vue

```vue
<template>
  <SpreadSheetEditor />
</template>

<script setup>
import SpreadSheetEditor from '../components/SpreadSheetEditor.vue'
</script>
```

### src/components/spreadsheet-editor-protection/datasource.json

```json
{
    "protectSheet": [
        {
            "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"
        }
    ]
}

```