--- title: "Exploring Essential JavaScript Spreadsheet Freeze Panes" published_at: "2021-07-20T11:00:51+00:00" modified_at: "2026-05-19T08:32:46+00:00" url: "https://www.syncfusion.com/blogs/post/javascript-spreadsheet-freeze-panes" excerpt: "The Essential 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..." taxonomy_category: - "Excel" - "JavaScript" - "Spreadsheet" - "Web" taxonomy_post_tag: - "Excel" - "JavaScript" - "productivity" - "Spreadsheet" - "Web Development" --- # Exploring Essential JavaScript Spreadsheet Freeze Panes [Shanmugaraja K](https://www.syncfusion.com/blogs/author/shanmugarajak) ![Exploring Essential JavaScript Spreadsheet Freeze Panes](https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/Exploring-Essential-JavaScript-Spreadsheet-Freeze-Panes.png) The [Essential JavaScript Spreadsheet](https://www.syncfusion.com/javascript-ui-controls/js-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) Frozen Row in JavaScript Spreadsheet ## 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) Frozen Column in JavaScript Spreadsheet ## 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) 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. ``` 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) Freeze Panes in JavaScript Spreadsheet ## Reference For more details, refer to the [Freeze Panes in JavaScript Spreadsheet demos](https://ej2.syncfusion.com/demos/#/material/spreadsheet/freeze-pane.html) . ## 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) 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) , [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/spreadsheet) , [Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/spreadsheet) ), [Angular](https://www.syncfusion.com/angular-ui-components/angular-spreadsheet) , [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-spreadsheet) , [React](https://www.syncfusion.com/react-ui-components/react-spreadsheet) , [Vue](https://www.syncfusion.com/vue-ui-components/vue-spreadsheet) , [UWP](https://www.syncfusion.com/uwp-ui-controls/spreadsheet) , [WPF](https://www.syncfusion.com/wpf-controls/spreadsheet) , and [WinForms](https://www.syncfusion.com/winforms-ui-controls/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) to try out this control. Otherwise, you can download a free [30-day trial](https://www.syncfusion.com/downloads/fileformats/verify) . If you have any questions about these features, please contact us through our [support forum](https://www.syncfusion.com/forums) , [Direct-Trac](https://www.syncfusion.com/support/directtrac/) , or [feedback portal](https://www.syncfusion.com/feedback/aspnet-core) . We are always happy to assist you! ## Related blogs - [Formatting the Essential JavaScript Spreadsheet: Number Formatting](https://www.syncfusion.com/blogs/post/formatting-the-essential-javascript-spreadsheet-number-formatting.aspx) - [Formatting the Essential JavaScript Spreadsheet: Cell Formatting](https://www.syncfusion.com/blogs/post/formatting-the-essential-javascript-spreadsheet-cell-formatting.aspx) - [Formatting Essential JavaScript Spreadsheet: Conditional Formatting](https://www.syncfusion.com/blogs/post/conditional-formatting-javascript-spreadsheet.aspx) - [Server-Side Engine in JavaScript Pivot Table: An Overview](https://www.syncfusion.com/blogs/post/server-side-engine-in-javascript-pivot-table.aspx)