# spreadsheet-editor-freeze-pane

> Spreadsheet editor with frozen rows and columns that stay visible while scrolling.

**Framework:** react  **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/react/js/spreadsheet-editor-freeze-pane.json
```

**Install Package(s)**

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

```jsx
import { SpreadsheetComponent, SheetsDirective, SheetDirective, ColumnsDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RowsDirective, RowDirective, CellsDirective, CellDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
/**
 * Freeze pane Spreadsheet sample
 */
const freezePaneData = [
    {
        "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)"
    },
    {
        "Month": "June",
        "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(C8,E8,G8,I8,K8,M8)",
        "Revised Total Gross Salary": "=SUM(D8,F8,H8,J8,L8,N8)"
    },
    {
        "Month": "July",
        "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(C9,E9,G9,I9,K9,M9)",
        "Revised Total Gross Salary": "=SUM(D9,F9,H9,J9,L9,N9)"
    },
    {
        "Month": "August",
        "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(C10,E10,G10,I10,K10,M10)",
        "Revised Total Gross Salary": "=SUM(D10,F10,H10,J10,L10,N10)"
    },
    {
        "Month": "September",
        "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(C11,E11,G11,I11,K11,M11)",
        "Revised Total Gross Salary": "=SUM(D11,F11,H11,J11,L11,N11)"
    },
    {
        "Month": "October",
        "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(C12,E12,G12,I12,K12,M12)",
        "Revised Total Gross Salary": "=SUM(D12,F12,H12,J12,L12,N12)"
    },
    {
        "Month": "November",
        "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(C13,E13,G13,I13,K13,M13)",
        "Revised Total Gross Salary": "=SUM(D13,F13,H13,J13,L13,N13)"
    },
    {
        "Month": "December",
        "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(C14,E14,G14,I14,K14,M14)",
        "Revised Total Gross Salary": "=SUM(D14,F14,H14,J14,L14,N14)"
    }];
    
function FreezePane() {
    let spreadsheet;
    const cellStyle = { fontSize: '12pt', fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' };
    const bold = { fontWeight: 'bold' };
    function onCreated() {
        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:B26');
        spreadsheet.numberFormat('$#,##0.00', 'C2:P26');
        spreadsheet.numberFormat('$#,##0.00', 'O27:P27');
    }
    return (<div className='control-pane'>
            <div className='control-section spreadsheet-control'>
                <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)}>
                    <SheetsDirective>
                        <SheetDirective name='Gross Salary' frozenRows={2} frozenColumns={2} selectedRange='C1'>
                            <RangesDirective>
                                <RangeDirective dataSource={freezePaneData} startCell='A2'></RangeDirective>
                            </RangesDirective>
                            <RowsDirective>
                                <RowDirective>
                                    <CellsDirective>
                                        <CellDirective index={1} value='Period' style={cellStyle}></CellDirective>
                                        <CellDirective index={3} value='Total Gross Salary' style={cellStyle}></CellDirective>
                                    </CellsDirective>
                                </RowDirective>
                                <RowDirective index={26}>
                                    <CellsDirective>
                                        <CellDirective index={13} value="Total Amount:" style={bold}></CellDirective>
                                        <CellDirective formula='=SUM(O4:O26)' style={cellStyle}></CellDirective>
                                        <CellDirective formula='=SUM(P4:P26)' style={cellStyle}></CellDirective>
                                    </CellsDirective>
                                </RowDirective>
                            </RowsDirective>
                            <ColumnsDirective>
                                <ColumnDirective width={80}></ColumnDirective>
                                <ColumnDirective width={80}></ColumnDirective>
                                <ColumnDirective width={100}></ColumnDirective>
                                <ColumnDirective width={100}></ColumnDirective>
                                <ColumnDirective width={100}></ColumnDirective>
                                <ColumnDirective width={100}></ColumnDirective>
                                <ColumnDirective width={100}></ColumnDirective>
                                <ColumnDirective width={100}></ColumnDirective>
                                <ColumnDirective width={100}></ColumnDirective>
                                <ColumnDirective width={100}></ColumnDirective>
                                <ColumnDirective width={100}></ColumnDirective>
                                <ColumnDirective width={100}></ColumnDirective>
                                <ColumnDirective width={80}></ColumnDirective>
                                <ColumnDirective width={100}></ColumnDirective>
                                <ColumnDirective width={100}></ColumnDirective>
                                <ColumnDirective width={100}></ColumnDirective>
                            </ColumnsDirective>
                        </SheetDirective>
                    </SheetsDirective>
                </SpreadsheetComponent>
            </div>
        </div>);
}
export default FreezePane;
```