# spreadsheet-editor-freeze-pane

> Spreadsheet sample demonstrating frozen rows and columns while scrolling worksheet data.

**Framework:** angular  **Component:** Spreadsheet  **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/angular/spreadsheet-editor-freeze-pane.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-angular-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/freeze-pane.component.ts

```typescript
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { freezePaneData } from '../data';
import { SpreadsheetComponent, SpreadsheetModule } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Freeze pane Spreadsheet Controller
 */
@Component({
    selector: 'control-content',
    templateUrl: 'freeze-pane.html',
    encapsulation: ViewEncapsulation.None,
    standalone: true,
    imports: [ SpreadsheetModule]
})

export class FreezePaneComponent {
    @ViewChild('default')
    public spreadsheetObj!: SpreadsheetComponent;
    public data: Object[] = freezePaneData();
    public styles = { fontSize: "12pt", fontWeight: "bold", textAlign: "center", verticalAlign: "middle" }
    public openUrl = 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open';
    public saveUrl = 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save';
    public freezePane: number = 2;
    created() {
        this.spreadsheetObj.wrap("C2:P2");
        this.spreadsheetObj.merge('A1:B1');
        this.spreadsheetObj.merge('C1:P1');
        this.spreadsheetObj.cellFormat({ backgroundColor: '#4e4ee6', color: '#FFFFF4', fontSize: '12pt', fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:P2');
        this.spreadsheetObj.cellFormat({ backgroundColor: '#4e4ee6', color: '#FFFFF4' }, 'A3:B26');
        this.spreadsheetObj.numberFormat('$#,##0.00', 'C2:P26');
        this.spreadsheetObj.numberFormat('$#,##0.00', 'O27:P27');
    }
}
```

### src/components/spreadsheet-editor-freeze-pane/freeze-pane.html

```html
<div class="control-section">
    <ejs-spreadsheet #default [openUrl]="openUrl" [saveUrl]="saveUrl" (created)="created()">
        <e-sheets>
            <e-sheet name="Gross Salary" [frozenRows]="freezePane" [frozenColumns]="freezePane" selectedRange="C1">
                <e-ranges>
                    <e-range [dataSource]="data" startCell="A2"></e-range>
                </e-ranges>
                <e-rows>
                    <e-row>
                        <e-cells>
                            <e-cell value="Period" [style]="styles"></e-cell>
                            <e-cell [index]=2 value="Total Gross Salary" [style]="styles"></e-cell>
                        </e-cells>
                    </e-row>
                    <e-row [index]=26>
                        <e-cells>
                            <e-cell [index]=13 value="Total Amount" [style]="styles"></e-cell>
                            <e-cell formula="=SUM(O4:O26)" [style]="styles"></e-cell>
                            <e-cell formula="=SUM(P4:P26)" [style]="styles"></e-cell>
                        </e-cells>
                    </e-row>
                </e-rows>
                <e-columns>
                    <e-column [width]=80></e-column>
                    <e-column [width]=100></e-column>
                    <e-column [width]=100></e-column>
                    <e-column [width]=100></e-column>
                    <e-column [width]=100></e-column>
                    <e-column [width]=100></e-column>
                    <e-column [width]=100></e-column>
                    <e-column [width]=100></e-column>
                    <e-column [width]=100></e-column>
                    <e-column [width]=100></e-column>
                    <e-column [width]=100></e-column>
                    <e-column [width]=100></e-column>
                    <e-column [width]=100></e-column>
                    <e-column [width]=80></e-column>
                    <e-column [width]=100></e-column>
                    <e-column [width]=100></e-column>
                    <e-column [width]=100></e-column>
                </e-columns>
            </e-sheet>
        </e-sheets>
    </ejs-spreadsheet>
</div>
```