{
  "$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/js/spreadsheet-editor-freeze-pane.md"
  },
  "files": [
    {
      "target": "src/components/spreadsheet-editor-freeze-pane/SpreadSheetEditor.jsx",
      "content": "import { SpreadsheetComponent, SheetsDirective, SheetDirective, ColumnsDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-spreadsheet';\nimport { RowsDirective, RowDirective, CellsDirective, CellDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';\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    {\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        \"Month\": \"June\",\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(C8,E8,G8,I8,K8,M8)\",\n        \"Revised Total Gross Salary\": \"=SUM(D8,F8,H8,J8,L8,N8)\"\n    },\n    {\n        \"Month\": \"July\",\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(C9,E9,G9,I9,K9,M9)\",\n        \"Revised Total Gross Salary\": \"=SUM(D9,F9,H9,J9,L9,N9)\"\n    },\n    {\n        \"Month\": \"August\",\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(C10,E10,G10,I10,K10,M10)\",\n        \"Revised Total Gross Salary\": \"=SUM(D10,F10,H10,J10,L10,N10)\"\n    },\n    {\n        \"Month\": \"September\",\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(C11,E11,G11,I11,K11,M11)\",\n        \"Revised Total Gross Salary\": \"=SUM(D11,F11,H11,J11,L11,N11)\"\n    },\n    {\n        \"Month\": \"October\",\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(C12,E12,G12,I12,K12,M12)\",\n        \"Revised Total Gross Salary\": \"=SUM(D12,F12,H12,J12,L12,N12)\"\n    },\n    {\n        \"Month\": \"November\",\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(C13,E13,G13,I13,K13,M13)\",\n        \"Revised Total Gross Salary\": \"=SUM(D13,F13,H13,J13,L13,N13)\"\n    },\n    {\n        \"Month\": \"December\",\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(C14,E14,G14,I14,K14,M14)\",\n        \"Revised Total Gross Salary\": \"=SUM(D14,F14,H14,J14,L14,N14)\"\n    }];\n    \nfunction FreezePane() {\n    let spreadsheet;\n    const cellStyle = { fontSize: '12pt', fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' };\n    const bold = { fontWeight: 'bold' };\n    function onCreated() {\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: '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    return (<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' saveUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save' 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}\nexport default FreezePane;"
    }
  ]
}