Exploring Essential JavaScript Spreadsheet Freeze Panes
Tags: javascript, webdev, productivity
Published: 2021-07-20 12:16:11

---
title: Exploring Essential JavaScript Spreadsheet Freeze Panes
published: true
date: 2021-07-20 11:00:51 UTC
tags: js, webdev, productivity
canonical_url: https://www.syncfusion.com/blogs/post/javascript-spreadsheet-freeze-panes.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/Exploring-Essential-JavaScript-Spreadsheet-Freeze-Panes-672x372.png
---

The [Essential JavaScript Spreadsheet](https://www.syncfusion.com/javascript-ui-controls/js-spreadsheet "Link to JavaScript Spreadsheet"), also known as the JavaScript Excel viewer, is a feature-rich control for organizing and analyzing data in tabular format. It supports all the common Excel features, including data binding, selection, editing, formatting, resizing, sorting, importing, and exporting Excel documents. In this blog post, we will look at the freeze panes feature in the JavaScript Spreadsheet.

## Freeze panes

This feature helps us lock the visibility of particular rows or columns when we scroll the worksheet horizontally or vertically. This is useful if you want to keep the header rows or columns always visible.

## Frozen rows

This feature allows you to keep a certain number of rows visible while scrolling vertically through the rest of the worksheet. Freezing the first row is commonly used to keep visible the row header of the data visible. It is especially helpful when working with a large volume of data.

The following screenshot showcases a frozen row in a spreadsheet.

![Frozen Rows in JavaScript Spreadsheet](https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/Frozen-Rows-in-JavaScript-Spreadsheet.png)<figcaption>Frozen Row in JavaScript Spreadsheet</figcaption>

## Frozen columns

With this feature, you can keep a certain number of columns visible while scrolling horizontally through the rest of the worksheet. Freezing the first column is commonly used to keep the column header of the data visible.

The following screenshot showcases a frozen column in a spreadsheet.

![Frozen Columns in JavaScript Spreadsheet](https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/Frozen-Columns-in-JavaScript-Spreadsheet.png)<figcaption>Frozen Column in JavaScript Spreadsheet</figcaption>

## Adding freeze panes in the JavaScript Spreadsheet through codes

You can add the freeze panes feature through codes by using the **frozenRows** and **frozenColumns** properties in the sheet object and the [**freezePanes**](https://ej2.syncfusion.com/documentation/api/spreadsheet/#freezepanes "Link to the freePanes method of JavaScript Spreadsheet") public method. Then, pass the row and column index with this method.

The following code example shows how to add the freeze panes feature in the Spreadsheet.

```js
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
import * as dataSource from './freeze-pane-data.json';

/**
 * Freeze panes sample
 */
    let spreadsheet: Spreadsheet = new Spreadsheet({
        sheets: [
            {
                name: 'Gross Salary',
                ranges: [{ dataSource: (dataSource as any).defaultData, startCell: 'A2' }],
                rows: [
                    {
                        cells: [
                            {
                                index: 1, value: 'Period', style: {
                                    fontSize: '12pt', fontWeight: 'bold',
                                    textAlign: 'center', verticalAlign: 'middle'
                                }
                            },
                            {
                                index: 3, value: 'Total Gross Salary', style: {
                                    fontSize: '12pt', fontWeight: 'bold',
                                    textAlign: 'center', verticalAlign: 'middle'
                                }
                            },
                        ]
                    },
                    {
                        index: 26,
                        cells: [
                            {
                                index: 13, value: 'Total Amount', style: {
                                    fontSize: '12pt', fontWeight: 'bold',
                                    textAlign: 'center', verticalAlign: 'middle'
                                }
                            },
                            {
                                formula: '=SUM(O4:O26)', style: {
                                    fontSize: '12pt', fontWeight: 'bold', textAlign: 'center',
                                    verticalAlign: 'middle'
                                }
                            },
                            {
                                formula: '=SUM(P4:P26)', style: {
                                    fontSize: '12pt', fontWeight: 'bold', textAlign: 'center',
                                    verticalAlign: 'middle'
                                }
                            },
                        ]
                    }
                ],
                columns: [
                    { width: 80 }, { width: 80 }, { width: 100 }, { width: 100 },
                    { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 },
                    { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 },
                    { width: 80 }, { width: 100 }, { width: 100 }, { width: 100 }
                ],
                selectedRange: 'C1',
                // Specifies the number of frozen rows
                frozenRows: 2,
                // Specifies the number of frozen columns
                frozenColumns: 2
            }],
        created: (): void => {
            spreadsheet.wrap('C2:P2');
            spreadsheet.merge('A1:B1');
            spreadsheet.merge('C1:P1');
            spreadsheet.cellFormat({ backgroundColor: '#4e4ee6', color: '#FFFFF4', fontSize: '12pt', fontWeight: 'bold'}, 'A1:P2');
            spreadsheet.cellFormat({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');
        }
    });

    spreadsheet.appendTo('#spreadsheet');
```

Refer to the following screenshot.

![Freeze Panes in JavaScript Spreadsheet](https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/Freeze-Panes-in-JavaScript-Spreadsheet.png)<figcaption>Freeze Panes in JavaScript Spreadsheet</figcaption>

## Reference

For more details, refer to the [Freeze Panes in JavaScript Spreadsheet demos](https://ej2.syncfusion.com/demos/#/material/spreadsheet/freeze-pane.html "Link to Freeze panes in JavaScript Spreadsheet demos on web").

## Conclusion

I hope you now have a better understanding of the freeze panes feature in the [JavaScript Spreadsheet](https://www.syncfusion.com/javascript-ui-controls/js-spreadsheet "Link to JavaScript Spreadsheet") control. Please share your thoughts about it in the comments section below.

Our Spreadsheet control is also available in our ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/spreadsheet "Link to ASP.NET Core Spreadsheet"), [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/spreadsheet "Link to ASP.NET MVC Spreadsheet"), [Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/spreadsheet "Link to ASP.NET Web Forms Spreadsheet")), [Angular](https://www.syncfusion.com/angular-ui-components/angular-spreadsheet "Link to Angular Spreadsheet"), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-spreadsheet "Link to JavaScript Spreadsheet"), [React](https://www.syncfusion.com/react-ui-components/react-spreadsheet "Link to React Spreadsheet"), [Vue](https://www.syncfusion.com/vue-ui-components/vue-spreadsheet "Link to Vue Spreadsheet"), [UWP](https://www.syncfusion.com/uwp-ui-controls/spreadsheet "Link to UWP Spreadsheet"), [WPF](https://www.syncfusion.com/wpf-controls/spreadsheet "Link to WPF Spreadsheet"), and [WinForms](https://www.syncfusion.com/winforms-ui-controls/spreadsheet "Link to WinForms Spreadsheet") platforms. Use it for seamless data analysis and visualization!

If you are already a Syncfusion user, you can download the Essential Studio for JavaScript [product setup](https://www.syncfusion.com/account/downloads "Link to license and download page of Essential Studio") to try out this control. Otherwise, you can download a free [30-day trial](https://www.syncfusion.com/downloads/fileformats/verify "Link to the free evaluation of the Syncfusion Essential Studio").

If you have any questions about these features, please contact us through our [support forum](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/ "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/aspnet-core "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Formatting the Essential JavaScript Spreadsheet: Number Formatting](https://dev.to/syncfusion/formatting-the-essential-javascript-spreadsheet-number-formatting-4ghn "Link to Formatting the Essential JavaScript Spreadsheet: Number Formatting blog")
- [Formatting the Essential JavaScript Spreadsheet: Cell Formatting](https://dev.to/syncfusion/formatting-the-essential-javascript-spreadsheet-cell-formatting-2h0e "Link to Formatting the Essential JavaScript Spreadsheet: Cell Formatting blog")
- [Formatting Essential JavaScript Spreadsheet: Conditional Formatting](https://dev.to/syncfusion/formatting-essential-javascript-spreadsheet-conditional-formatting-dg6 "Link to Formatting Essential JavaScript Spreadsheet: Conditional Formatting blog")
- [Server-Side Engine in JavaScript Pivot Table: An Overview](https://dev.to/karthickramasamy08/server-side-engine-in-javascript-pivot-table-an-overview-3730-temp-slug-4727103 "Link to Server-Side Engine in JavaScript Pivot Table: An Overview blog")