# 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/ts/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.tsx

```tsx
import { SpreadsheetComponent, SheetsDirective, SheetDirective, ColumnsDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RowsDirective, RowDirective, CellsDirective, CellDirective, type CellStyleModel, 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)"
    }];

function FreezePane() {
    let spreadsheet: SpreadsheetComponent;
    const cellStyle: CellStyleModel = { fontSize: '12pt', fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' };
    const bold: CellStyleModel = { fontWeight: 'bold' };

    function onCreated(): void {
        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;
```