{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "spreadsheet-editor-freeze-pane",
  "framework": "vue",
  "type": "registry:component",
  "component": "SpreadsheetEditor",
  "variant": "freeze-pane",
  "dependencies": [
    "@syncfusion/ej2-vue-spreadsheet"
  ],
  "description": "Spreadsheet editor freezes header rows and columns while scrolling large sheets.",
  "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/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/spreadsheet-editor-freeze-pane.md"
  },
  "files": [
    {
      "target": "src/components/spreadsheet-editor-freeze-pane/SpreadSheetEditor.vue",
      "content": "<template>\n  <div class=\"control-section\">\n    <div id=\"spreadsheet-default-section\">\n      <ejs-spreadsheet ref=\"spreadsheet\" :openUrl=\"openUrl\" :saveUrl=\"saveUrl\" :created=\"created\">\n        <e-sheets>\n          <e-sheet name=\"Gross Salary\" :frozenRows=2  :frozenColumns=2 selectedRange=\"C1\">\n            <e-ranges>\n              <e-range :dataSource=\"dataSource\" startCell= 'A2'></e-range>\n            </e-ranges>\n            <e-rows>\n              <e-row :cells=\"cells1\"></e-row>\n              <e-row :index=\"rowIndex\" :cells=\"cells2\"></e-row>\n            </e-rows>\n            <e-columns>\n              <e-column :width=\"width1\"></e-column>\n              <e-column :width=\"width1\"></e-column>\n              <e-column :width=\"width2\"></e-column>\n              <e-column :width=\"width2\"></e-column>\n              <e-column :width=\"width2\"></e-column>\n              <e-column :width=\"width2\"></e-column>\n              <e-column :width=\"width2\"></e-column>\n              <e-column :width=\"width2\"></e-column>\n              <e-column :width=\"width2\"></e-column>\n              <e-column :width=\"width2\"></e-column>\n              <e-column :width=\"width2\"></e-column>\n              <e-column :width=\"width2\"></e-column>\n              <e-column :width=\"width1\"></e-column>\n              <e-column :width=\"width2\"></e-column>\n              <e-column :width=\"width2\"></e-column>\n              <e-column :width=\"width2\"></e-column>\n            </e-columns>\n          </e-sheet>\n        </e-sheets>\n      </ejs-spreadsheet>\n    </div>\n\n  </div>\n</template>\n\n<script>\nimport { SpreadsheetComponent, SheetDirective, RowsDirective, RowDirective, SheetsDirective, ColumnsDirective, ColumnDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-vue-spreadsheet';\n\nexport default {\n   components: {\n    'ejs-spreadsheet': SpreadsheetComponent,\n    'e-sheet': SheetDirective,\n    'e-sheets': SheetsDirective,\n    'e-row': RowDirective,\n    'e-rows': RowsDirective,\n    'e-column': ColumnDirective,\n    'e-columns': ColumnsDirective,\n    'e-range': RangeDirective,\n    'e-ranges': RangesDirective\n   },\n   data: () => {\n    return {\n      dataSource: [\n        { 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)' },\n        { 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)' },\n        { 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)' },\n        { 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)' },\n        { 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)' }\n      ],\n      rowIndex: 8,\n      cells2: [\n        { index: 13, value: \"Total Amount\", style: { fontSize: '12pt', fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' } },\n        { formula: \"=SUM(O3:O7)\", style: { fontSize: '12pt', fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' } },\n        { formula: \"=SUM(P3:P7)\", style: { fontSize: '12pt', fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' } },\n      ],\n      cells1: [\n        { index: 1, value: \"Period\", style: { fontSize: '12pt', fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' } },\n        { index: 3, value: \"Total Gross Salary\", style: { fontSize: '12pt', fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' } },\n      ],\n      width1: 80,\n      width2: 100,\n      openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open',\n      saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save'\n    }\n  },\n  methods: {\n    created: function() {\n        var spreadsheet = this.$refs.spreadsheet;\n        spreadsheet.wrap('C2:P2');\n        spreadsheet.merge('A1:B1');\n        spreadsheet.merge('C1:P1');\n        spreadsheet.cellFormat({ backgroundColor: '#4e4ee6', color: '#FFFFF4', fontSize: '12pt', fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle'}, 'A1:P2');\n        spreadsheet.cellFormat({ backgroundColor: '#4e4ee6', color: '#FFFFF4' }, 'A3:B7');\n        spreadsheet.numberFormat('$#,##0.00', 'C2:P7');\n        spreadsheet.numberFormat('$#,##0.00', 'O8:P8');\n    }\n  }\n}\n</script>"
    },
    {
      "target": "src/components/spreadsheet-editor-freeze-pane/SpreadSheetEditorView.vue",
      "content": "<template>\n  <SpreadSheetEditor />\n</template>\n\n<script setup>\nimport SpreadSheetEditor from '../components/SpreadSheetEditor.vue'\n</script>"
    },
    {
      "target": "src/components/spreadsheet-editor-freeze-pane/datasource.json",
      "content": "{\n    \"defaultData\": [\n        {\n            \"Month\": \"January\",\n            \"Year\": \"2019\",\n            \"Basic Salary\": 15100,\n            \"Revised Basic Salary\": 15800,\n            \"DA\": 2000,\n            \"Revised DA\": 2200,\n            \"HRA\": 5000,\n            \"Revised HRA\": 6500,\n            \"Conveyance Allowance\": 1500,\n            \"Revised Conveyance Allowance\": 1700,\n            \"Medical Expenses\": 1250,\n            \"Revised Medical Expenses\": 1500,\n            \"Special Allowance\": 1000,\n            \"Revised Spcial Allowance\": 1200,\n            \"Total Gross Salary\": \"=SUM(C3,E3,G3,I3,K3,M3)\",\n            \"Revised Total Gross Salary\": \"=SUM(D3,F3,H3,J3,L3,N3)\"\n        },\n        {\n            \"Month\": \"February\",\n            \"Year\": \"2019\",\n            \"Basic Salary\": 15100,\n            \"Revised Basic Salary\": 15800,\n            \"DA\": 2000,\n            \"Revised DA\": 2200,\n            \"HRA\": 5000,\n            \"Revised HRA\": 6500,\n            \"Conveyance Allowance\": 1500,\n            \"Revised Conveyance Allowance\": 1700,\n            \"Medical Expenses\": 1250,\n            \"Revised Medical Expenses\": 1500,\n            \"Special Allowance\": 1000,\n            \"Revised Spcial Allowance\": 1200,\n            \"Total Gross Salary\": \"=SUM(C4,E4,G4,I4,K4,M4)\",\n            \"Revised Total Gross Salary\": \"=SUM(D4,F4,H4,J4,L4,N4)\"\n        },\n        {\n            \"Month\": \"March\",\n            \"Year\": \"2019\",\n            \"Basic Salary\": 15100,\n            \"Revised Basic Salary\": 15800,\n            \"DA\": 2000,\n            \"Revised DA\": 2200,\n            \"HRA\": 5000,\n            \"Revised HRA\": 6500,\n            \"Conveyance Allowance\": 1500,\n            \"Revised Conveyance Allowance\": 1700,\n            \"Medical Expenses\": 1250,\n            \"Revised Medical Expenses\": 1500,\n            \"Special Allowance\": 1000,\n            \"Revised Spcial Allowance\": 1200,\n            \"Total Gross Salary\": \"=SUM(C5,E5,G5,I5,K5,M5)\",\n            \"Revised Total Gross Salary\": \"=SUM(D5,F5,H5,J5,L5,N5)\"\n        },\n        {\n            \"Month\": \"April\",\n            \"Year\": \"2019\",\n            \"Basic Salary\": 15100,\n            \"Revised Basic Salary\": 15800,\n            \"DA\": 2000,\n            \"Revised DA\": 2200,\n            \"HRA\": 5000,\n            \"Revised HRA\": 6500,\n            \"Conveyance Allowance\": 1500,\n            \"Revised Conveyance Allowance\": 1700,\n            \"Medical Expenses\": 1250,\n            \"Revised Medical Expenses\": 1500,\n            \"Special Allowance\": 1000,\n            \"Revised Spcial Allowance\": 1200,\n            \"Total Gross Salary\": \"=SUM(C6,E6,G6,I6,K6,M6)\",\n            \"Revised Total Gross Salary\": \"=SUM(D6,F6,H6,J6,L6,N6)\"\n        },\n        {\n            \"Month\": \"May\",\n            \"Year\": \"2019\",\n            \"Basic Salary\": 15100,\n            \"Revised Basic Salary\": 15800,\n            \"DA\": 2000,\n            \"Revised DA\": 2200,\n            \"HRA\": 5000,\n            \"Revised HRA\": 6500,\n            \"Conveyance Allowance\": 1500,\n            \"Revised Conveyance Allowance\": 1700,\n            \"Medical Expenses\": 1250,\n            \"Revised Medical Expenses\": 1500,\n            \"Special Allowance\": 1000,\n            \"Revised Spcial Allowance\": 1200,\n            \"Total Gross Salary\": \"=SUM(C7,E7,G7,I7,K7,M7)\",\n            \"Revised Total Gross Salary\": \"=SUM(D7,F7,H7,J7,L7,N7)\"\n        }\n    ]\n}\n"
    }
  ]
}