# spreadsheet-editor-freeze-pane

> Spreadsheet editor freezes header rows and columns while scrolling large sheets.

**Framework:** vue  **Component:** SpreadsheetEditor  **Variant:** freeze-pane

## 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-freeze-pane.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-freeze-pane/SpreadSheetEditor.vue

```vue
<template>
  <div class="control-section">
    <div id="spreadsheet-default-section">
      <ejs-spreadsheet ref="spreadsheet" :openUrl="openUrl" :saveUrl="saveUrl" :created="created">
        <e-sheets>
          <e-sheet name="Gross Salary" :frozenRows=2  :frozenColumns=2 selectedRange="C1">
            <e-ranges>
              <e-range :dataSource="dataSource" startCell= 'A2'></e-range>
            </e-ranges>
            <e-rows>
              <e-row :cells="cells1"></e-row>
              <e-row :index="rowIndex" :cells="cells2"></e-row>
            </e-rows>
            <e-columns>
              <e-column :width="width1"></e-column>
              <e-column :width="width1"></e-column>
              <e-column :width="width2"></e-column>
              <e-column :width="width2"></e-column>
              <e-column :width="width2"></e-column>
              <e-column :width="width2"></e-column>
              <e-column :width="width2"></e-column>
              <e-column :width="width2"></e-column>
              <e-column :width="width2"></e-column>
              <e-column :width="width2"></e-column>
              <e-column :width="width2"></e-column>
              <e-column :width="width2"></e-column>
              <e-column :width="width1"></e-column>
              <e-column :width="width2"></e-column>
              <e-column :width="width2"></e-column>
              <e-column :width="width2"></e-column>
            </e-columns>
          </e-sheet>
        </e-sheets>
      </ejs-spreadsheet>
    </div>

  </div>
</template>

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

export default {
   components: {
    'ejs-spreadsheet': SpreadsheetComponent,
    'e-sheet': SheetDirective,
    'e-sheets': SheetsDirective,
    'e-row': RowDirective,
    'e-rows': RowsDirective,
    'e-column': ColumnDirective,
    'e-columns': ColumnsDirective,
    'e-range': RangeDirective,
    'e-ranges': RangesDirective
   },
   data: () => {
    return {
      dataSource: [
        { Month: 'January', Year: 2019, 'Basic Salary': 15100, 'Revised Basic Salary': 15800, DA: 2000, 'Revised DA': 2200, HRA: 5000, 'Revised HRA': 6500, 'Conveyance Allowance': 1500, 'Revised Conveyance Allowance': 1700, 'Medical Expenses': 1250, 'Revised Medical Expenses': 1500, 'Special Allowance': 1000, 'Revised Spcial Allowance': 1200, 'Total Gross Salary': '=SUM(C3,E3,G3,I3,K3,M3)', 'Revised Total Gross Salary': '=SUM(D3,F3,H3,J3,L3,N3)' },
        { Month: 'February', Year: 2019, 'Basic Salary': 15100, 'Revised Basic Salary': 15800, DA: 2000, 'Revised DA': 2200, HRA: 5000, 'Revised HRA': 6500, 'Conveyance Allowance': 1500, 'Revised Conveyance Allowance': 1700, 'Medical Expenses': 1250, 'Revised Medical Expenses': 1500, 'Special Allowance': 1000, 'Revised Spcial Allowance': 1200, 'Total Gross Salary': '=SUM(C4,E4,G4,I4,K4,M4)', 'Revised Total Gross Salary': '=SUM(D4,F4,H4,J4,L4,N4)' },
        { Month: 'March',    Year: 2019, 'Basic Salary': 15100, 'Revised Basic Salary': 15800, DA: 2000, 'Revised DA': 2200, HRA: 5000, 'Revised HRA': 6500, 'Conveyance Allowance': 1500, 'Revised Conveyance Allowance': 1700, 'Medical Expenses': 1250, 'Revised Medical Expenses': 1500, 'Special Allowance': 1000, 'Revised Spcial Allowance': 1200, 'Total Gross Salary': '=SUM(C5,E5,G5,I5,K5,M5)', 'Revised Total Gross Salary': '=SUM(D5,F5,H5,J5,L5,N5)' },
        { Month: 'April',    Year: 2019, 'Basic Salary': 15100, 'Revised Basic Salary': 15800, DA: 2000, 'Revised DA': 2200, HRA: 5000, 'Revised HRA': 6500, 'Conveyance Allowance': 1500, 'Revised Conveyance Allowance': 1700, 'Medical Expenses': 1250, 'Revised Medical Expenses': 1500, 'Special Allowance': 1000, 'Revised Spcial Allowance': 1200, 'Total Gross Salary': '=SUM(C6,E6,G6,I6,K6,M6)', 'Revised Total Gross Salary': '=SUM(D6,F6,H6,J6,L6,N6)' },
        { Month: 'May',      Year: 2019, 'Basic Salary': 15100, 'Revised Basic Salary': 15800, DA: 2000, 'Revised DA': 2200, HRA: 5000, 'Revised HRA': 6500, 'Conveyance Allowance': 1500, 'Revised Conveyance Allowance': 1700, 'Medical Expenses': 1250, 'Revised Medical Expenses': 1500, 'Special Allowance': 1000, 'Revised Spcial Allowance': 1200, 'Total Gross Salary': '=SUM(C7,E7,G7,I7,K7,M7)', 'Revised Total Gross Salary': '=SUM(D7,F7,H7,J7,L7,N7)' }
      ],
      rowIndex: 8,
      cells2: [
        { index: 13, value: "Total Amount", style: { fontSize: '12pt', fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' } },
        { formula: "=SUM(O3:O7)", style: { fontSize: '12pt', fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' } },
        { formula: "=SUM(P3:P7)", style: { fontSize: '12pt', fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' } },
      ],
      cells1: [
        { index: 1, value: "Period", style: { fontSize: '12pt', fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' } },
        { index: 3, value: "Total Gross Salary", style: { fontSize: '12pt', fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' } },
      ],
      width1: 80,
      width2: 100,
      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.wrap('C2:P2');
        spreadsheet.merge('A1:B1');
        spreadsheet.merge('C1:P1');
        spreadsheet.cellFormat({ backgroundColor: '#4e4ee6', color: '#FFFFF4', fontSize: '12pt', fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle'}, 'A1:P2');
        spreadsheet.cellFormat({ backgroundColor: '#4e4ee6', color: '#FFFFF4' }, 'A3:B7');
        spreadsheet.numberFormat('$#,##0.00', 'C2:P7');
        spreadsheet.numberFormat('$#,##0.00', 'O8:P8');
    }
  }
}
</script>
```

### src/components/spreadsheet-editor-freeze-pane/SpreadSheetEditorView.vue

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

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

### src/components/spreadsheet-editor-freeze-pane/datasource.json

```json
{
    "defaultData": [
        {
            "Month": "January",
            "Year": "2019",
            "Basic Salary": 15100,
            "Revised Basic Salary": 15800,
            "DA": 2000,
            "Revised DA": 2200,
            "HRA": 5000,
            "Revised HRA": 6500,
            "Conveyance Allowance": 1500,
            "Revised Conveyance Allowance": 1700,
            "Medical Expenses": 1250,
            "Revised Medical Expenses": 1500,
            "Special Allowance": 1000,
            "Revised Spcial Allowance": 1200,
            "Total Gross Salary": "=SUM(C3,E3,G3,I3,K3,M3)",
            "Revised Total Gross Salary": "=SUM(D3,F3,H3,J3,L3,N3)"
        },
        {
            "Month": "February",
            "Year": "2019",
            "Basic Salary": 15100,
            "Revised Basic Salary": 15800,
            "DA": 2000,
            "Revised DA": 2200,
            "HRA": 5000,
            "Revised HRA": 6500,
            "Conveyance Allowance": 1500,
            "Revised Conveyance Allowance": 1700,
            "Medical Expenses": 1250,
            "Revised Medical Expenses": 1500,
            "Special Allowance": 1000,
            "Revised Spcial Allowance": 1200,
            "Total Gross Salary": "=SUM(C4,E4,G4,I4,K4,M4)",
            "Revised Total Gross Salary": "=SUM(D4,F4,H4,J4,L4,N4)"
        },
        {
            "Month": "March",
            "Year": "2019",
            "Basic Salary": 15100,
            "Revised Basic Salary": 15800,
            "DA": 2000,
            "Revised DA": 2200,
            "HRA": 5000,
            "Revised HRA": 6500,
            "Conveyance Allowance": 1500,
            "Revised Conveyance Allowance": 1700,
            "Medical Expenses": 1250,
            "Revised Medical Expenses": 1500,
            "Special Allowance": 1000,
            "Revised Spcial Allowance": 1200,
            "Total Gross Salary": "=SUM(C5,E5,G5,I5,K5,M5)",
            "Revised Total Gross Salary": "=SUM(D5,F5,H5,J5,L5,N5)"
        },
        {
            "Month": "April",
            "Year": "2019",
            "Basic Salary": 15100,
            "Revised Basic Salary": 15800,
            "DA": 2000,
            "Revised DA": 2200,
            "HRA": 5000,
            "Revised HRA": 6500,
            "Conveyance Allowance": 1500,
            "Revised Conveyance Allowance": 1700,
            "Medical Expenses": 1250,
            "Revised Medical Expenses": 1500,
            "Special Allowance": 1000,
            "Revised Spcial Allowance": 1200,
            "Total Gross Salary": "=SUM(C6,E6,G6,I6,K6,M6)",
            "Revised Total Gross Salary": "=SUM(D6,F6,H6,J6,L6,N6)"
        },
        {
            "Month": "May",
            "Year": "2019",
            "Basic Salary": 15100,
            "Revised Basic Salary": 15800,
            "DA": 2000,
            "Revised DA": 2200,
            "HRA": 5000,
            "Revised HRA": 6500,
            "Conveyance Allowance": 1500,
            "Revised Conveyance Allowance": 1700,
            "Medical Expenses": 1250,
            "Revised Medical Expenses": 1500,
            "Special Allowance": 1000,
            "Revised Spcial Allowance": 1200,
            "Total Gross Salary": "=SUM(C7,E7,G7,I7,K7,M7)",
            "Revised Total Gross Salary": "=SUM(D7,F7,H7,J7,L7,N7)"
        }
    ]
}

```