{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "spreadsheet-editor-freeze-pane",
  "framework": "react",
  "type": "registry:component",
  "component": "SpreadsheetEditor",
  "variant": "freeze-pane",
  "dependencies": [
    "@syncfusion/ej2-react-spreadsheet"
  ],
  "description": "Spreadsheet editor with frozen rows and columns that stay visible while scrolling.",
  "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/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/ts/spreadsheet-editor-freeze-pane.md"
  },
  "files": [
    {
      "target": "src/components/spreadsheet-editor-freeze-pane/SpreadSheetEditor.tsx",
      "content": "import { SpreadsheetComponent, SheetsDirective, SheetDirective, ColumnsDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-spreadsheet';\nimport { RowsDirective, RowDirective, CellsDirective, CellDirective, type CellStyleModel, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';\n\n/**\n * Freeze pane Spreadsheet sample\n */\nconst freezePaneData = [\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\nfunction FreezePane() {\n    let spreadsheet: SpreadsheetComponent;\n    const cellStyle: CellStyleModel = { fontSize: '12pt', fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' };\n    const bold: CellStyleModel = { fontWeight: 'bold' };\n\n    function onCreated(): void {\n        spreadsheet.wrap(\"C2:P2\");\n        spreadsheet.merge('A1:B1');\n        spreadsheet.merge('C1:P1');\n        spreadsheet.cellFormat({\n            backgroundColor: '#4e4ee6', color: '#FFFFF4', fontSize: '12pt', fontWeight: 'bold', textAlign: 'center', verticalAlign:\n                'middle'\n        }, 'A1:P2');\n        spreadsheet.cellFormat({ backgroundColor: '#4e4ee6', color: '#FFFFF4' }, 'A3:B26');\n        spreadsheet.numberFormat('$#,##0.00', 'C2:P26');\n        spreadsheet.numberFormat('$#,##0.00', 'O27:P27');\n    }\n\n    return (\n        <div className='control-pane'>\n            <div className='control-section spreadsheet-control'>\n                <SpreadsheetComponent 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                    ref={(ssObj) => { spreadsheet = ssObj }} created={onCreated.bind(this)} >\n                    <SheetsDirective>\n                        <SheetDirective name='Gross Salary' frozenRows={2} frozenColumns={2} selectedRange='C1'>\n                            <RangesDirective>\n                                <RangeDirective dataSource={freezePaneData} startCell='A2'></RangeDirective>\n                            </RangesDirective>\n                            <RowsDirective>\n                                <RowDirective>\n                                    <CellsDirective>\n                                        <CellDirective index={1} value='Period' style={cellStyle}></CellDirective>\n                                        <CellDirective index={3} value='Total Gross Salary' style={cellStyle}></CellDirective>\n                                    </CellsDirective>\n                                </RowDirective>\n                                <RowDirective index={26}>\n                                    <CellsDirective>\n                                        <CellDirective index={13} value=\"Total Amount:\" style={bold}></CellDirective>\n                                        <CellDirective formula='=SUM(O4:O26)' style={cellStyle}></CellDirective>\n                                        <CellDirective formula='=SUM(P4:P26)' style={cellStyle}></CellDirective>\n                                    </CellsDirective>\n                                </RowDirective>\n                            </RowsDirective>\n                            <ColumnsDirective>\n                                <ColumnDirective width={80}></ColumnDirective>\n                                <ColumnDirective width={80}></ColumnDirective>\n                                <ColumnDirective width={100}></ColumnDirective>\n                                <ColumnDirective width={100}></ColumnDirective>\n                                <ColumnDirective width={100}></ColumnDirective>\n                                <ColumnDirective width={100}></ColumnDirective>\n                                <ColumnDirective width={100}></ColumnDirective>\n                                <ColumnDirective width={100}></ColumnDirective>\n                                <ColumnDirective width={100}></ColumnDirective>\n                                <ColumnDirective width={100}></ColumnDirective>\n                                <ColumnDirective width={100}></ColumnDirective>\n                                <ColumnDirective width={100}></ColumnDirective>\n                                <ColumnDirective width={80}></ColumnDirective>\n                                <ColumnDirective width={100}></ColumnDirective>\n                                <ColumnDirective width={100}></ColumnDirective>\n                                <ColumnDirective width={100}></ColumnDirective>\n                            </ColumnsDirective>\n                        </SheetDirective>\n                    </SheetsDirective>\n                </SpreadsheetComponent>\n            </div>\n        </div>\n    )\n}\nexport default FreezePane;"
    }
  ]
}